pay

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",

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>

src/components/page/components/pendingPayment/index.vue

@@ -1,48 +1,63 @@
 <template>
     <div>
-      <el-table :data="list" style="width: 100%">
+        <el-table :data="list" style="width: 100%">
-        <slot name="tableItem"></slot>
+            <slot name="tableItem"></slot>
-        <el-table-column prop="id" label="ID" width="100"></el-table-column>
+            <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="title" :label="$t('pendingPayment.title')"></el-table-column>
-        <el-table-column prop="author" :label="$t('pendingPayment.journal')"></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">
+            <el-table-column prop="amount" :label="$t('pendingPayment.Paymentamount')" width="140">
-          <template slot-scope="scope">
+                <template slot-scope="scope">
-          {{ formatAmount(scope.row.amount) }}
+                    {{ formatAmount(scope.row.amount) }}
-        </template>
+                </template>
-        </el-table-column>
+            </el-table-column>
-        <el-table-column prop="status" :label="$t('pendingPayment.Paymentstatus')" width="140"></el-table-column>
+            <el-table-column prop="status" :label="$t('pendingPayment.Paymentstatus')" width="140"></el-table-column>
-        <el-table-column label="" width="140" >
+            <el-table-column label="" width="140">
-          <template slot-scope="scope">
+                <template slot-scope="scope">
-            <el-button @click="payArticle(scope.row)" plain type="danger" size="mini">{{$t('pendingPayment.payment')}}</el-button>
+                  
-          </template>
+    <PayPalButton @payment-success="handlePaymentSuccess" @payment-error="handlePaymentError" />
-        </el-table-column>
+
-      </el-table>
+                    <el-button @click="payArticle(scope.row)" plain type="danger" size="mini">{{ $t('pendingPayment.payment') }}</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
     </div>
-  </template>
+</template>
-  
+
-  <script>
+<script>
-  export default {
+import PayPalButton from './PayPalButton.vue';
+
+export default {
+    components: {
+        PayPalButton
+    },
     props: {
-      list: {
+        list: {
-        type: Array,
+            type: Array,
-        default: () => []
+            default: () => []
-      }
+        }
     },
     data() {
-      return {
+        return {};
-       
-      };
     },
     methods: {
-      formatAmount(amount) {
+        handlePaymentSuccess(payment) {
-      return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+            // Handle payment success
-    },
+            console.log('Payment successful!', payment);
-      payArticle(article) {
+        },
-        // 在这里实现缴费逻辑，例如调用后端API进行缴费
+        handlePaymentError(error) {
-        // 缴费成功后更新article.status为'已缴费'
+            // Handle payment error
-        article.status = '已缴费';
+            console.error('Payment error:', error);
-        this.$message.success(`已成功为稿件 ${article.title} 缴费`);
+        },
-      }
+
+        formatAmount(amount) {
+            return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        },
+        payArticle(article) {
+            // 在这里实现缴费逻辑，例如调用后端API进行缴费
+            // 缴费成功后更新article.status为'已缴费'
+            article.status = '已缴费';
+            this.$message.success(`已成功为稿件 ${article.title} 缴费`);
+        }
     }
-  };
+};
-  </script>
+</script>