tijiao

src/components/page/components/pendingPayment/OrderConfirmation.vue

@@ -1,29 +1,12 @@
 <template>
     <div class="order-confirmation-box">
-        <!-- <div id="card-element" style="width:100%;height: 600px;"></div>
+    
-        <div id="card-errors" role="alert"></div>
-        <button @click="getStripe">Submit Payment</button>
         <div id="paypal-container" style="display: none">
             <div id="paypal-payment-button" style="width: 100%; height: 50px"></div>
-        </div>  -->
+        </div>
-        <div id="paypal-container" style="display: none">
-            <div id="paypal-payment-button" style="width: 100%; height: 50px"></div>
-        </div> 
-   <!-- <stripe-element-card
-        :hidePostalCode="true"
-      ref="elementRef"
-      ref="elements"
-      :options="stripeOptions"
-      :pk="stripeKey"
-      @token="tokenCreated"
-    />  <button @click="submit1">Generate token</button> -->
-
-        <!-- 错误显示区域 -->
-
-        <!-- 支付按钮 -->
 
         <div class="order-confirmation">
-            <el-descriptions :title="$t('pendingPayment.Confirmorderinformation')" :column="2">
+            <el-descriptions :title="$t('pendingPayment.Confirmorderinformation')" column="2">
                 <el-descriptions-item label="ID">{{ articleInfo.accept_sn }}</el-descriptions-item>
                 <el-descriptions-item :label="$t('pendingPayment.journal')">{{ journalInfo.title }} </el-descriptions-item>
                 <el-descriptions-item :span="2" style="width: 100%" :label="$t('pendingPayment.title')"
@@ -102,10 +85,7 @@
                                                 style="width: 74%; align-items: flex-start; justify-content: flex-start"
                                             >
                                                 <div class="trade-layout-leaf" style="width: 100%">
-                                                    <div
+                                                    <div class="clamp-wrap clamp-ellipsis mainTitle" style="-webkit-line-clamp: unset">
-                                                        class="clamp-wrap clamp-ellipsis mainTitle"
-                                                        style="-webkit-line-clamp: unset; color: #222d65"
-                                                    >
                                                         PayPal
                                                     </div>
                                                 </div>
@@ -124,7 +104,7 @@
                                         >
                                             <div class="trade-layout-leaf">
                                                 <div class="iconWrapper">
-                                                    <img src="@/assets/img/Stripe.png" class="icon" />
+                                                    <img src="@/assets/img/paystation.png" class="icon" />
                                                 </div>
                                             </div>
                                             <div
@@ -134,7 +114,7 @@
                                                 <div class="trade-layout-leaf" style="width: 100%">
                                                     <div
                                                         class="clamp-wrap clamp-ellipsis mainTitle"
-                                                        style="-webkit-line-clamp: unset; color: #635bff"
+                                                        style="-webkit-line-clamp: unset; color: #a2a91b"
                                                     >
                                                         Paystation
                                                     </div>
@@ -143,33 +123,6 @@
                                             <div v-if="selectedPaymentMethod === 'Paystation'" class="checkmark">✔</div>
                                         </div>
                                     </div>
-                                    <!-- <div
-                                        class="installmentOption"
-                                        :class="selectedPaymentMethod == 'Stripe' ? 'isSelect' : ''"
-                                        @click="selectPaymentMethod('Stripe')"
-                                    >
-                                        <div
-                                            class="ant-row trade-layout-row"
-                                            style="height: 100%; align-items: center; justify-content: flex-start"
-                                        >
-                                            <div class="trade-layout-leaf">
-                                                <div class="iconWrapper">
-                                                    <img src="@/assets/img/Stripe.png" class="icon" />
-                                                </div>
-                                            </div>
-                                            <div
-                                                class="ant-col trade-layout-col"
-                                                style="width: 74%; align-items: flex-start; justify-content: flex-start"
-                                            >
-                                                <div class="trade-layout-leaf" style="width: 100%">
-                                                    <div class="clamp-wrap clamp-ellipsis mainTitle" style="-webkit-line-clamp: unset;color: #635bff;">
-                                                        Stripe
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div v-if="selectedPaymentMethod === 'Stripe'" class="checkmark">✔</div>
-                                        </div>
-                                    </div> -->
                                     <!-- <div
                                         class="installmentOption"
                                         :class="selectedPaymentMethod == 'Alipay' ? 'isSelect' : ''"
@@ -196,15 +149,9 @@
                                             </div>
                                             <div v-if="selectedPaymentMethod === 'Alipay'" class="checkmark">✔</div>
                                         </div>
-                                    </div>  -->
+                                    </div> -->
                                 </div>
                             </div>
-                            <div v-show="selectedPaymentMethod == 'Stripe'" style="padding: 0 16px">
-                                <form>
-                                    <div id="payment-element" />
-                                    <!-- <el-button native-type="submit" type="primary" round>Complete</el-button> -->
-                                </form>
-                            </div>
                         </div>
                     </div>
                 </div>
@@ -229,26 +176,10 @@
 </template>
 
 <script>
-import { loadStripe } from '@stripe/stripe-js';
-
 export default {
     props: ['type'],
     data() {
         return {
-            clientSecret: 'pi_3QhTa4PKgQFCEmmS1YU2egVT_secret_d3VZ5GwCUuvN1OjTAW7FdkxrN',
-            // baseUrl: this.Common.baseUrl,
-            baseUrl: 'https://submission.tmrjournals.com/',
-            baseUrl: 'http://localhost:8080/',
-            stripeOptions: {
-                locale: 'en', // 可选，设置 Stripe Elements 的语言
-                pk: 'pk_test_51QgdjVPKgQFCEmmSTE5TcqvxbWwduryZ4rODZmKyU4u73oqRSMBYJL9HW0XSFNeda0kkDU2IseyMKcVK4R69At4100IDXgaRbV'
-            },
-            loading: false,
-            paymentError: null,
-            paymentIntentId: '', // 用于存储 PaymentIntent ID
-            stripe: null,
-            elements: null,
-            card: null,
             orderInfo: {},
             articleInfo: {},
             journalInfo: {},
@@ -265,36 +196,10 @@ export default {
             totalAmount: '130.00', // 订单总价
             needInvoice: false, // 是否需要发票
             invoiceTitle: '', // 发票抬头
-            invoiceContent: '',
+            invoiceContent: '' // 发票内容
-            stripeKey: 'pk_test_51QgdjVPKgQFCEmmSTE5TcqvxbWwduryZ4rODZmKyU4u73oqRSMBYJL9HW0XSFNeda0kkDU2IseyMKcVK4R69At4100IDXgaRbV' // 发票内容
         };
     },
-
     methods: {
-        onPaymentSuccess(paymentIntent) {
-            // 在支付成功后调用的逻辑，例如通知后端更新订单状态
-            console.log('Payment successful with ID:', paymentIntent.id);
-
-            fetch('/update-order-status', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    paymentIntentId: paymentIntent.id // 传递支付 ID 给后端
-                })
-            })
-                .then(() => console.log('Order updated successfully'))
-                .catch((error) => console.error('Failed to update order:', error));
-        },
-
-        submit1() {
-            // this will trigger the process
-            this.$refs.elementRef.submit();
-        },
-        tokenCreated(token) {
-            console.log(token);
-            // handle the token
-            // send it to your server
-        },
         submit() {
             // 假设 PayPal 按钮的容器有 id="paypal-button-container"
             const paypalButtonContainer = document.getElementById('paypal-container');
@@ -314,33 +219,34 @@ export default {
 
             if (this.selectedPaymentMethod == 'PayPal') {
                 this.getPayPal();
-            } else if (this.selectedPaymentMethod == 'Stripe') {
+            }else if (this.selectedPaymentMethod == 'Paystation') {
-                const loading = this.$loading({
-                    lock: true,
-                    text: 'Loading',
-                    spinner: 'el-icon-loading',
-                    background: 'rgba(0, 0, 0, 0.7)'
-                });
-                this.getStripe(loading);
-            } else if (this.selectedPaymentMethod == 'Paystation') {
                 this.getPaystation();
             }
         },
-        async getStripe(loading) {
+        getPaystation() {
-            let elements = this.elements;
+            const loading = this.$loading({
-            let stripe = this.stripe;
+                lock: true,
-            const { error } = await stripe.confirmPayment({
+                text: 'Loading',
-                elements,
+                spinner: 'el-icon-loading',
-                confirmParams: {
+                background: 'rgba(0, 0, 0, 0.7)'
-                    // Make sure to change this to your payment completion page
-                    return_url: `${this.baseUrl}success?id=${this.articleId}`
-                }
-                //redirect: 'if_required'如果设置redirect: 'if_required'则不跳转returnUrl
             });
-            loading.close();
+            var that = this;
-            console.log(error);
+            this.$api
+                .post(this.urlList.createdOrder, {
+                    article_id: this.articleId,
+                    type: 2
+                })
+                .then((res) => {
+                    console.log('res at line 222:', res);
+                    if (res.code == 0) {
+                       
+                        window.location.href = res.data.paystation.payme_url; loading.close();
+                    } else {
+                        this.$message.error(res.data.msg);
+                    }
+                });
         },
-        getPayPal(loading) {
+        getPayPal(id) {
             var that = this;
             window.paypal
                 .Buttons({
@@ -368,8 +274,7 @@ export default {
                     createOrder: (data, actions) => {
                         return this.$api
                             .post(this.urlList.createdOrder, {
-                                article_id: this.articleId,
+                                article_id: this.articleId
-                                // type: 0
                             })
                             .then((res) => {
                                 console.log('res at line 222:', res);
@@ -390,22 +295,25 @@ export default {
                             });
                             setTimeout(() => {
                                 loading.close();
-                                var info = { id: that.articleId };
+                                var info={id: that.articleId}
-
+          
-                                that.$router.replace({ name: 'OrderConfirmation' });
+                                    that.$router.replace({ name: 'OrderConfirmation' });
-
+                                  
-                                // 跳转到新的路由
+                                 
-                                that.$api
+                                    // 跳转到新的路由
-                                    .post(that.urlList.completeOrder, {
+                                    that.$api
-                                        order_id: that.orderInfo.order_id
+                                        .post(that.urlList.completeOrder, {
-                                    })
+                                            order_id: that.orderInfo.order_id
-                                    .then((res) => {});
+                                            
-                                that.$router.push({
+                                        })
-                                    path: '/success',
+                                        .then((res) => {});
-                                    query: {
+                                    that.$router.push({
-                                        ...info
+                                        path: '/success',
-                                    }
+                                        query: {
-                                });
+                                            ...info
+                                        }
+                                    });
+                             
                             }, 500);
                         });
                     },
@@ -423,29 +331,6 @@ export default {
                 event.stopPropagation();
             });
         },
-        getPaystation() {
-            const loading = this.$loading({
-                lock: true,
-                text: 'Loading',
-                spinner: 'el-icon-loading',
-                background: 'rgba(0, 0, 0, 0.7)'
-            });
-            var that = this;
-            this.$api
-                .post(this.urlList.createdOrder, {
-                    article_id: this.articleId,
-                    type: 2
-                })
-                .then((res) => {
-                    console.log('res at line 222:', res);
-                    if (res.code == 0) {
-                        loading.close();
-                        window.location.href = res.data.paystation.payme_url;
-                    } else {
-                        this.$message.error(res.data.msg);
-                    }
-                });
-        },
         getDetail() {
             this.$api
                 .post(this.urlList.detail, {
@@ -470,30 +355,9 @@ export default {
         formatAmount(amount) {
             return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
         },
-        async initStripe() {
+        selectPaymentMethod(method) {
-            const loading = this.$loading({
-                lock: true,
-                text: 'Loading',
-                spinner: 'el-icon-loading',
-                background: 'rgba(0, 0, 0, 0.7)'
-            });
-            this.stripe = await loadStripe(this.stripeKey);
-            this.elements = this.stripe.elements({
-                theme: 'stripe',
-                clientSecret: this.clientSecret,
-                locale: !localStorage.getItem('langs') || localStorage.getItem('langs') == 'en' ? 'en' : 'zh'
-            });
-            const paymentElement = this.elements.create('payment');
-            paymentElement.mount('#payment-element');
-            loading.close();
-        },
-
-        async selectPaymentMethod(method) {
             console.log('method at line 191:', method);
             this.selectedPaymentMethod = method;
-            if (method == 'Stripe') {
-                this.initStripe();
-            }
             this.$forceUpdate();
         },
         payWithAlipay() {
@@ -505,12 +369,9 @@ export default {
             alert('使用PayPal支付');
         }
     },
-    async created() {
+    created() {
-        // Initialize Stripe.js with your publishable key
-
         this.getDetail();
     },
-    async mounted() {},
     activated() {
         this.getDetail();
     }
@@ -993,25 +854,4 @@ h3 {
 .tableInfo {
     font-size: 14px;
 }
-#card-element {
-    border: 1px solid #ccc;
-    padding: 10px;
-    border-radius: 4px;
-    margin-bottom: 10px;
-}
-#card-errors {
-    color: red;
-    margin-bottom: 10px;
-}
-button {
-    background-color: #5469d4;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    padding: 10px;
-    cursor: pointer;
-}
-button:disabled {
-    background-color: #ccc;
-}
 </style>