From b415c06d9e4ea84f7efb85b9025a1329bde6f381 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: Thu, 26 Dec 2024 13:28:42 +0800
Subject: [PATCH] pay

---
 package.json                                  |  1 +
 .../pendingPayment/PayPalButton.vue           | 63 +++++++++++++
 .../page/components/pendingPayment/index.vue  | 93 +++++++++++--------
 3 files changed, 118 insertions(+), 39 deletions(-)
 create mode 100644 src/components/page/components/pendingPayment/PayPalButton.vue

diff --git a/package.json b/package.json
index 77e4c8b..f6dac83 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "vue": "^2.6.10",
     "vue-cropperjs": "^3.0.0",
     "vue-i18n": "^8.10.0",
+    "vue-paypal-checkout": "^3.2.0",
     "vue-pdf": "^4.3.0",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.0.3",
diff --git a/src/components/page/components/pendingPayment/PayPalButton.vue b/src/components/page/components/pendingPayment/PayPalButton.vue
new file mode 100644
index 0000000..85503a2
--- /dev/null
+++ b/src/components/page/components/pendingPayment/PayPalButton.vue
@@ -0,0 +1,63 @@
+<template>
+    <div>
+      <paypal-checkout
+        :client="paypalClient"
+        :amount="amount"
+        :currency="currency"
+        @success="onPaymentSuccess"
+        @error="onPaymentError"
+      >
+        <template #default="{ onClick }">
+          <button @click="onClick">Pay with PayPal</button>
+        </template>
+      </paypal-checkout>
+    </div>
+  </template>
+   
+  <script>
+  import PaypalCheckout from 'vue-paypal-checkout';
+   
+  export default {
+    name: 'PayPalButton',
+    components: {
+      PaypalCheckout
+    },
+    data() {
+      return {
+        // PayPal Client ID
+        paypalClient: {
+          sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr',  // Replace with your sandbox client ID
+          production: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr'  // Replace with your production client ID
+        },
+        amount: '10.00', // Amount to be paid
+        currency: 'USD'  // Currency
+      };
+    },
+    methods: {
+      onPaymentSuccess(payment) {
+        console.log('Payment successful!', payment);
+        // Handle successful payment here
+        this.$emit('payment-success', payment);
+      },
+      onPaymentError(error) {
+        console.error('Payment error:', error);
+        // Handle payment error here
+        this.$emit('payment-error', error);
+      }
+    }
+  };
+  </script>
+   
+  <style scoped>
+  button {
+    padding: 10px 20px;
+    background-color: #0070ba;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  button:hover {
+    background-color: #005b9a;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/components/page/components/pendingPayment/index.vue b/src/components/page/components/pendingPayment/index.vue
index dbd612e..bf2ebb1 100644
--- a/src/components/page/components/pendingPayment/index.vue
+++ b/src/components/page/components/pendingPayment/index.vue
@@ -1,48 +1,63 @@
 <template>
     <div>
-      <el-table :data="list" style="width: 100%">
-        <slot name="tableItem"></slot>
-        <el-table-column prop="id" label="ID" width="100"></el-table-column>
-        <el-table-column prop="title" :label="$t('pendingPayment.title')"></el-table-column>
-        <el-table-column prop="author" :label="$t('pendingPayment.journal')"></el-table-column>
-        <el-table-column prop="amount" :label="$t('pendingPayment.Paymentamount')" width="140">
-          <template slot-scope="scope">
-          {{ formatAmount(scope.row.amount) }}
-        </template>
-        </el-table-column>
-        <el-table-column prop="status" :label="$t('pendingPayment.Paymentstatus')" width="140"></el-table-column>
-        <el-table-column label="" width="140" >
-          <template slot-scope="scope">
-            <el-button @click="payArticle(scope.row)" plain type="danger" size="mini">{{$t('pendingPayment.payment')}}</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+        <el-table :data="list" style="width: 100%">
+            <slot name="tableItem"></slot>
+            <el-table-column prop="id" label="ID" width="100"></el-table-column>
+            <el-table-column prop="title" :label="$t('pendingPayment.title')"></el-table-column>
+            <el-table-column prop="author" :label="$t('pendingPayment.journal')"></el-table-column>
+            <el-table-column prop="amount" :label="$t('pendingPayment.Paymentamount')" width="140">
+                <template slot-scope="scope">
+                    {{ formatAmount(scope.row.amount) }}
+                </template>
+            </el-table-column>
+            <el-table-column prop="status" :label="$t('pendingPayment.Paymentstatus')" width="140"></el-table-column>
+            <el-table-column label="" width="140">
+                <template slot-scope="scope">
+                  
+    <PayPalButton @payment-success="handlePaymentSuccess" @payment-error="handlePaymentError" />
+
+                    <el-button @click="payArticle(scope.row)" plain type="danger" size="mini">{{ $t('pendingPayment.payment') }}</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
     </div>
-  </template>
-  
-  <script>
-  export default {
+</template>
+
+<script>
+import PayPalButton from './PayPalButton.vue';
+
+export default {
+    components: {
+        PayPalButton
+    },
     props: {
-      list: {
-        type: Array,
-        default: () => []
-      }
+        list: {
+            type: Array,
+            default: () => []
+        }
     },
     data() {
-      return {
-       
-      };
+        return {};
     },
     methods: {
-      formatAmount(amount) {
-      return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-    },
-      payArticle(article) {
-        // 在这里实现缴费逻辑，例如调用后端API进行缴费
-        // 缴费成功后更新article.status为'已缴费'
-        article.status = '已缴费';
-        this.$message.success(`已成功为稿件 ${article.title} 缴费`);
-      }
+        handlePaymentSuccess(payment) {
+            // Handle payment success
+            console.log('Payment successful!', payment);
+        },
+        handlePaymentError(error) {
+            // Handle payment error
+            console.error('Payment error:', error);
+        },
+
+        formatAmount(amount) {
+            return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        },
+        payArticle(article) {
+            // 在这里实现缴费逻辑，例如调用后端API进行缴费
+            // 缴费成功后更新article.status为'已缴费'
+            article.status = '已缴费';
+            this.$message.success(`已成功为稿件 ${article.title} 缴费`);
+        }
     }
-  };
-  </script>
\ No newline at end of file
+};
+</script>