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="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</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]">
|
||||
<div>{{
|
||||
`${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