refactor: 重构直播页面并移除未使用的 Stripe 组件
- 删除了未使用的 StripeCheckout.vue 组件 - 优化了直播页面的代码结构 - 修复了拍卖价格显示的潜在错误 - 更新了网站图标
This commit is contained in:
xingyy
parent
51b3a212e8
commit
9c725735af
@ -1,276 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="stripe-container">
|
|
||||||
<form id="payment-form" @submit.prevent="handleSubmit">
|
|
||||||
<div id="payment-element">
|
|
||||||
<!--Stripe.js injects the Payment Element-->
|
|
||||||
</div>
|
|
||||||
<button id="submit">
|
|
||||||
<div class="spinner hidden" id="spinner"></div>
|
|
||||||
<span id="button-text">Pay now</span>
|
|
||||||
</button>
|
|
||||||
<div id="payment-message" class="hidden"></div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, onMounted } from 'vue'
|
|
||||||
|
|
||||||
// The items the customer wants to buy
|
|
||||||
const items = [{ id: "xl-tshirt", amount: 1000 }]
|
|
||||||
|
|
||||||
const stripe = ref(null)
|
|
||||||
const elements = ref(null)
|
|
||||||
const isLoading = ref(false)
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
try {
|
|
||||||
// 初始化 Stripe
|
|
||||||
stripe.value = window.Stripe("pk_test_51QfbSAAB1Vm8VfJq3AWsR4k2mZjnlF7XFrmlbc6XVXrtwXquAUfwzZmOFDbxMIAwqJBgqao8KLt2wmPc4vNOCTeo00WB78KtfV")
|
|
||||||
await initialize()
|
|
||||||
} catch (error) {
|
|
||||||
showMessage("Failed to initialize payment system")
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// Fetches a payment intent and captures the client secret
|
|
||||||
const initialize = async () => {
|
|
||||||
try {
|
|
||||||
const response = await fetch("/create-payment-intent", {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({ items }),
|
|
||||||
})
|
|
||||||
const { clientSecret } = await response.json()
|
|
||||||
|
|
||||||
const appearance = {
|
|
||||||
theme: 'stripe',
|
|
||||||
}
|
|
||||||
|
|
||||||
// 创建 elements 实例
|
|
||||||
elements.value = stripe.value.elements({
|
|
||||||
appearance,
|
|
||||||
clientSecret,
|
|
||||||
})
|
|
||||||
|
|
||||||
// 创建并挂载 Payment Element
|
|
||||||
const paymentElement = elements.value.create("payment", {
|
|
||||||
layout: "accordion",
|
|
||||||
})
|
|
||||||
|
|
||||||
// 确保挂载到正确的 DOM 元素
|
|
||||||
const mountElement = document.getElementById("payment-element")
|
|
||||||
if (mountElement) {
|
|
||||||
paymentElement.mount(mountElement)
|
|
||||||
} else {
|
|
||||||
throw new Error("Payment element mount point not found")
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
showMessage("Failed to load payment form")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
|
||||||
if (!stripe.value || !elements.value) {
|
|
||||||
showMessage("Payment system not initialized")
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(true)
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { error } = await stripe.value.confirmPayment({
|
|
||||||
elements: elements.value,
|
|
||||||
confirmParams: {
|
|
||||||
return_url: window.location.origin + "/complete.html",
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
if (error.type === "card_error" || error.type === "validation_error") {
|
|
||||||
showMessage(error.message)
|
|
||||||
} else {
|
|
||||||
showMessage("An unexpected error occurred.")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
showMessage("Payment processing failed")
|
|
||||||
} finally {
|
|
||||||
setLoading(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const showMessage = (messageText) => {
|
|
||||||
const messageContainer = document.querySelector("#payment-message")
|
|
||||||
|
|
||||||
messageContainer.classList.remove("hidden")
|
|
||||||
messageContainer.textContent = messageText
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
messageContainer.classList.add("hidden")
|
|
||||||
messageContainer.textContent = ""
|
|
||||||
}, 4000)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show a spinner on payment submission
|
|
||||||
const setLoading = (isLoading) => {
|
|
||||||
if (isLoading) {
|
|
||||||
// Disable the button and show a spinner
|
|
||||||
document.querySelector("#submit").disabled = true
|
|
||||||
document.querySelector("#spinner").classList.remove("hidden")
|
|
||||||
document.querySelector("#button-text").classList.add("hidden")
|
|
||||||
} else {
|
|
||||||
document.querySelector("#submit").disabled = false
|
|
||||||
document.querySelector("#spinner").classList.add("hidden")
|
|
||||||
document.querySelector("#button-text").classList.remove("hidden")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.stripe-container {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-content: center;
|
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
form {
|
|
||||||
width: 30vw;
|
|
||||||
min-width: 500px;
|
|
||||||
align-self: center;
|
|
||||||
box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
|
|
||||||
0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
|
|
||||||
border-radius: 7px;
|
|
||||||
padding: 40px;
|
|
||||||
margin-top: auto;
|
|
||||||
margin-bottom: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#payment-message {
|
|
||||||
color: rgb(105, 115, 134);
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 20px;
|
|
||||||
padding-top: 12px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#payment-element {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
background: #0055DE;
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
color: #ffffff;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 0;
|
|
||||||
padding: 12px 16px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
display: block;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
filter: contrast(115%);
|
|
||||||
}
|
|
||||||
|
|
||||||
button:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner,
|
|
||||||
.spinner:before,
|
|
||||||
.spinner:after {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 22px;
|
|
||||||
text-indent: -99999px;
|
|
||||||
margin: 0px auto;
|
|
||||||
position: relative;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
box-shadow: inset 0 0 0 2px;
|
|
||||||
-webkit-transform: translateZ(0);
|
|
||||||
-ms-transform: translateZ(0);
|
|
||||||
transform: translateZ(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner:before,
|
|
||||||
.spinner:after {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner:before {
|
|
||||||
width: 10.4px;
|
|
||||||
height: 20.4px;
|
|
||||||
background: #0055DE;
|
|
||||||
border-radius: 20.4px 0 0 20.4px;
|
|
||||||
top: -0.2px;
|
|
||||||
left: -0.2px;
|
|
||||||
-webkit-transform-origin: 10.4px 10.2px;
|
|
||||||
transform-origin: 10.4px 10.2px;
|
|
||||||
-webkit-animation: loading 2s infinite ease 1.5s;
|
|
||||||
animation: loading 2s infinite ease 1.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner:after {
|
|
||||||
width: 10.4px;
|
|
||||||
height: 10.2px;
|
|
||||||
background: #0055DE;
|
|
||||||
border-radius: 0 10.2px 10.2px 0;
|
|
||||||
top: -0.1px;
|
|
||||||
left: 10.2px;
|
|
||||||
-webkit-transform-origin: 0px 10.2px;
|
|
||||||
transform-origin: 0px 10.2px;
|
|
||||||
-webkit-animation: loading 2s infinite ease;
|
|
||||||
animation: loading 2s infinite ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes loading {
|
|
||||||
0% {
|
|
||||||
-webkit-transform: rotate(0deg);
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
-webkit-transform: rotate(360deg);
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes loading {
|
|
||||||
0% {
|
|
||||||
-webkit-transform: rotate(0deg);
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
-webkit-transform: rotate(360deg);
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 600px) {
|
|
||||||
form {
|
|
||||||
width: 80vw;
|
|
||||||
min-width: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -146,7 +146,8 @@ const tipOpen = () => {
|
|||||||
<div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
|
<div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
|
||||||
<div class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
|
<div class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
|
|
||||||
|
<div v-if="quoteStatus&&auctionData?.nowAuctionPrice&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
|
||||||
<van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
|
<van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
|
||||||
<div>{{
|
<div>{{
|
||||||
`${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
|
`${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 11 KiB |
Loading…
Reference in New Issue
Block a user