From 33713932a13405ba54b661ac8ccbc3cc20cb17fc Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Sun, 2 Mar 2025 11:23:06 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=88=A0=E9=99=A4=20Stripe=20?=
 =?UTF-8?q?=E6=94=AF=E4=BB=98=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除了整个 Stripe 支付页面的代码，包括模板、脚本和样式
- 删除了与支付相关的逻辑和 API 调用
- 移除了对 Stripe 库的引用和配置
---
 .../payment/checkoutPage/index.vue            | 374 ------------------
 1 file changed, 374 deletions(-)
 delete mode 100644 app/pages/collectCode/payment/checkoutPage/index.vue

diff --git a/app/pages/collectCode/payment/checkoutPage/index.vue b/app/pages/collectCode/payment/checkoutPage/index.vue
deleted file mode 100644
index fe50217..0000000
--- a/app/pages/collectCode/payment/checkoutPage/index.vue
+++ /dev/null
@@ -1,374 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue'
-import {codeAuthStore} from "@/stores-collect-code/auth/index.js";
-import {useRuntimeConfig} from "#app";
-import {orderQuery} from "~/api/goods/index.js";
-const {codePKey,codePayUid} = codeAuthStore()
-const config = useRuntimeConfig()
-
-definePageMeta({
-  layout: 'default',
-  title: 'Stripe支付'
-})
-
-const stripe = Stripe(config.public.NUXT_PUBLIC_PKEY)
-
-const baseURL = config.public.NUXT_PUBLIC_API_BASE
-const items = [{ id: "xl-tshirt", amount: 1000 }]
-const elements = ref(null)
-const paymentMessage = ref('')
-const isLoading = ref(false)
-const showSpinner = ref(false)
-
-async function initialize() {
-  const clientSecret = codePKey.value
-
-  
-  const appearance = {
-    theme: 'stripe',
-  }
-  elements.value = stripe.elements({ appearance, clientSecret })
-
-  const paymentElementOptions = {
-    layout: "accordion",
-  }
-
-  const paymentElement = elements.value.create("payment", paymentElementOptions)
-  paymentElement.mount("#payment-element")
-}
-
-async function handleSubmit(e) {
-  e.preventDefault()
-  setLoading(true)
-
-  let pollTimer = null
-  let timeoutTimer = null
-
-  const startPolling = () => {
-    pollTimer = setInterval(async () => {
-      const res = await orderQuery({
-        orderNo: codePayUid.value
-      })
-      if (res.status === 0) {
-        if (res.data.status !== 3) {
-          clearInterval(pollTimer)
-          clearTimeout(timeoutTimer)
-          window.location.href = `${baseURL}/collectCode/payment/result?orderNo=${codePayUid.value}`
-        }
-      }
-    }, 1000)
-
-    timeoutTimer = setTimeout(() => {
-      clearInterval(pollTimer)
-      showMessage('支付超时，请重试')
-      setLoading(false)
-    }, 180000) // 3分钟超时
-  }
-
-  startPolling()
-
-  const { error } = await stripe.confirmPayment({
-    elements: elements.value,
-    confirmParams: {
-      return_url: `${baseURL}/collectCode/payment/result?orderNo=${codePayUid.value}`,
-    },
-  })
-
-  if (error) {
-    clearInterval(pollTimer)
-    clearTimeout(timeoutTimer)
-    if (error.type === "card_error" || error.type === "validation_error") {
-      showMessage(error.message)
-    } else {
-      showMessage("An unexpected error occurred.")
-    }
-    setLoading(false)
-  }
-}
-
-function showMessage(messageText) {
-  paymentMessage.value = messageText
-  setTimeout(() => {
-    paymentMessage.value = ''
-  }, 4000)
-}
-
-function setLoading(loading) {
-  isLoading.value = loading
-  showSpinner.value = loading
-}
-
-onMounted(() => {
-  initialize()
-})
-</script>
-
-<template>
-  <form id="payment-form" @submit="handleSubmit">
-    <div id="payment-element">
-    </div>
-    <button id="submit">
-      <div class="spinner" :class="{ hidden: !showSpinner }" id="spinner"></div>
-      <span id="button-text" :class="{ hidden: showSpinner }">Pay now</span>
-    </button>
-    <div id="payment-message" :class="{ hidden: !paymentMessage }">{{ paymentMessage }}</div>
-  </form>
-</template>
-
-<style scoped>
-* {
-  box-sizing: border-box;
-}
-
-body {
-  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 {
-  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;
-}
-
-/* Buttons and links */
-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/processing state, errors */
-.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;
-}
-
-/* Payment status page */
-#payment-status {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  row-gap: 30px;
-  width: 30vw;
-  min-width: 500px;
-  min-height: 380px;
-  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;
-  opacity: 0;
-  animation: fadeInAnimation 1s ease forwards;
-}
-
-#status-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 40px;
-  width: 40px;
-  border-radius: 50%;
-}
-
-h2 {
-  margin: 0;
-  color: #30313D;
-  text-align: center;
-}
-
-a {
-  text-decoration: none;
-  font-size: 16px;
-  font-weight: 600;
-  font-family: Arial, sans-serif;
-  display: block;
-}
-a:hover {
-  filter: contrast(120%);
-}
-
-#details-table {
-  overflow-x: auto;
-  width: 100%;
-}
-
-table {
-  width: 100%;
-  font-size: 14px;
-  border-collapse: collapse;
-}
-table tbody tr:first-child td {
-  border-top: 1px solid #E6E6E6; /* Top border */
-  padding-top: 10px;
-}
-table tbody tr:last-child td {
-  border-bottom: 1px solid #E6E6E6; /* Bottom border */
-}
-td {
-  padding-bottom: 10px;
-}
-
-.TableContent {
-  text-align: right;
-  color: #6D6E78;
-}
-
-.TableLabel {
-  font-weight: 600;
-  color: #30313D;
-}
-
-#view-details {
-  color: #0055DE;
-}
-
-#retry-button {
-  text-align: center;
-  background: #0055DE;
-  color: #ffffff;
-  border-radius: 4px;
-  border: 0;
-  padding: 12px 16px;
-  transition: all 0.2s ease;
-  box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
-  width: 100%;
-}
-
-@-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);
-  }
-}
-@keyframes fadeInAnimation {
-  to {
-      opacity: 1;
-  }
-}
-
-@media only screen and (max-width: 600px) {
-  form, #payment-status{
-    width: 80vw;
-    min-width: initial;
-  }
-}
-.hidden {
-  display: none;
-}
-
-form {
-  width:100vw;
-  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;
-}
-
-/* 其他样式保持不变... */
-</style>
\ No newline at end of file