From 99b48e1a1ec462ccc26284fdd0d3a05526f68347 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com>
Date: Wed, 15 Jan 2025 09:54:09 +0800
Subject: [PATCH] tijiao

---
 package.json                                  |  1 +
 src/api/index.js                              |  4 +-
 .../pendingPayment/OrderConfirmation.vue      | 94 ++++++++++++++-----
 3 files changed, 74 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index 6d7f01f..05a41fd 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "@stripe/stripe-js": "^5.5.0",
     "@tinymce/tinymce-vue": "^3.0.1",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
diff --git a/src/api/index.js b/src/api/index.js
index 0b11630..170e883 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -19,8 +19,8 @@ const service = axios.create({
 	// baseURL: 'https://submission.tmrjournals.com/', //正式 记得切换
 	// baseURL: 'http://www.tougao.com/', //测试本地 记得切换
 	// baseURL: 'http://192.168.110.110/tougao/public/index.php/',
-	// baseURL: '/api', //本地
-	baseURL: '/', //正式
+	baseURL: '/api', //本地
+	// baseURL: '/', //正式
 
 });
 
diff --git a/src/components/page/components/pendingPayment/OrderConfirmation.vue b/src/components/page/components/pendingPayment/OrderConfirmation.vue
index bc77837..614615b 100644
--- a/src/components/page/components/pendingPayment/OrderConfirmation.vue
+++ b/src/components/page/components/pendingPayment/OrderConfirmation.vue
@@ -1,6 +1,5 @@
 <template>
     <div class="order-confirmation-box">
-    
         <div id="paypal-container" style="display: none">
             <div id="paypal-payment-button" style="width: 100%; height: 50px"></div>
         </div>
@@ -93,6 +92,33 @@
                                             <div v-if="selectedPaymentMethod === 'PayPal'" 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/zhifubao.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">
+                                                        Stripe
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div v-if="selectedPaymentMethod === 'Stripe'" class="checkmark">✔</div>
+                                        </div>
+                                    </div>
                                     <!-- <div
                                         class="installmentOption"
                                         :class="selectedPaymentMethod == 'Alipay' ? 'isSelect' : ''"
@@ -119,7 +145,7 @@
                                             </div>
                                             <div v-if="selectedPaymentMethod === 'Alipay'" class="checkmark">✔</div>
                                         </div>
-                                    </div> -->
+                                    </div>  -->
                                 </div>
                             </div>
                         </div>
@@ -146,10 +172,16 @@
 </template>
 
 <script>
+import { loadStripe } from '@stripe/stripe-js';
+
 export default {
     props: ['type'],
     data() {
         return {
+
+            stripe: null,
+            elements: null,
+            card: null,
             orderInfo: {},
             articleInfo: {},
             journalInfo: {},
@@ -166,7 +198,8 @@ export default {
             totalAmount: '130.00', // 订单总价
             needInvoice: false, // 是否需要发票
             invoiceTitle: '', // 发票抬头
-            invoiceContent: '' // 发票内容
+            invoiceContent: '',
+            stripeKey:'pk_test_51QgdjVPKgQFCEmmSTE5TcqvxbWwduryZ4rODZmKyU4u73oqRSMBYJL9HW0XSFNeda0kkDU2IseyMKcVK4R69At4100IDXgaRbV' // 发票内容
         };
     },
     methods: {
@@ -189,7 +222,15 @@ export default {
 
             if (this.selectedPaymentMethod == 'PayPal') {
                 this.getPayPal();
+            } else if (this.selectedPaymentMethod == 'Stripe') {
+                this.getStripe();
+            } else if (this.selectedPaymentMethod == 'Alipay') {
+                // this.getAlipay();
             }
+        },
+        getStripe() {
+
+            
         },
         getPayPal(id) {
             var that = this;
@@ -240,25 +281,22 @@ export default {
                             });
                             setTimeout(() => {
                                 loading.close();
-                                var info={id: that.articleId}
-          
-                                    that.$router.replace({ name: 'OrderConfirmation' });
-                                  
-                                 
-                                    // 跳转到新的路由
-                                    that.$api
-                                        .post(that.urlList.completeOrder, {
-                                            order_id: that.orderInfo.order_id
-                                            
-                                        })
-                                        .then((res) => {});
-                                    that.$router.push({
-                                        path: '/success',
-                                        query: {
-                                            ...info
-                                        }
-                                    });
-                             
+                                var info = { id: that.articleId };
+
+                                that.$router.replace({ name: 'OrderConfirmation' });
+
+                                // 跳转到新的路由
+                                that.$api
+                                    .post(that.urlList.completeOrder, {
+                                        order_id: that.orderInfo.order_id
+                                    })
+                                    .then((res) => {});
+                                that.$router.push({
+                                    path: '/success',
+                                    query: {
+                                        ...info
+                                    }
+                                });
                             }, 500);
                         });
                     },
@@ -314,9 +352,19 @@ export default {
             alert('使用PayPal支付');
         }
     },
-    created() {
+    async created() {
+        // Initialize Stripe.js with your publishable key
+      
         this.getDetail();
     },
+    async mounted(){
+        this.stripe = await loadStripe(this.stripeKey);
+        this.elements = this.stripe.elements();
+
+        // Create a Card Element and mount it into the DOM
+        this.card = this.elements.create('card');
+        this.card.mount('#card-element');
+    },
     activated() {
         this.getDetail();
     }