From 351c12699758d7ad987b5955962b208c5d07fffb 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, 25 Dec 2024 14:29:19 +0800
Subject: [PATCH 1/8] =?UTF-8?q?=E6=B5=B7=E5=A4=96=E6=94=AF=E4=BB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/public/index.html b/public/index.html
index 915b445..19e20f2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,6 +16,9 @@
     <!-- built files will be auto injected -->
   </body><script src="<%=BASE_URL %>/tinymce/tinymce.min.js"></script>
 
+  <script
+  src="https://www.paypal.com/sdk/js?client-id=Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr"></script>
+
 
 
 </html>

From caba79154ff3ca2243acdfc73afd29a41eb19540 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 10:56:40 +0800
Subject: [PATCH 2/8] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js                              |  4 +-
 src/components/common/Sidebar.vue             |  4 ++
 src/components/common/langs/en.js             |  8 ++++
 src/components/common/langs/zh.js             |  8 ++++
 src/components/page/PendingPaymentAuthor.vue  | 36 ++++++++++++++
 src/components/page/PendingPaymentEditor.vue  | 39 +++++++++++++++
 .../page/components/pendingPayment/index.vue  | 48 +++++++++++++++++++
 src/router/index.js                           | 14 ++++++
 8 files changed, 159 insertions(+), 2 deletions(-)
 create mode 100644 src/components/page/PendingPaymentAuthor.vue
 create mode 100644 src/components/page/PendingPaymentEditor.vue
 create mode 100644 src/components/page/components/pendingPayment/index.vue

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/common/Sidebar.vue b/src/components/common/Sidebar.vue
index a712905..202f8ec 100644
--- a/src/components/common/Sidebar.vue
+++ b/src/components/common/Sidebar.vue
@@ -191,6 +191,10 @@ export default {
                     index: '1',
                     title: this.$t('sidebar.author'),
                     subs: [
+                        {
+                            index: 'PendingPaymentAuthor',
+                            title: this.$t('sidebar.author4')
+                        },
                         {
                             index: 'articleList',
                             title: this.$t('sidebar.author1')
diff --git a/src/components/common/langs/en.js b/src/components/common/langs/en.js
index f098518..31e3346 100644
--- a/src/components/common/langs/en.js
+++ b/src/components/common/langs/en.js
@@ -149,6 +149,7 @@ const en = {
 		author: 'Author',
 		author1: 'My manuscripts',
 		author2: 'Submit manuscript',
+		author4: 'Pending payment',
 		author3: 'Manuscripts in Draft',
 		editor: 'Editor',
 		editor1: 'Paper Editing System',
@@ -374,6 +375,13 @@ const en = {
 		reContent:'Are you sure you want to restore this content?',
 		uploadImageInfo:'Figures can only upload files in JPG, JPEG, and PNG formats!'
 	},
+	pendingPayment:{
+		title:'Title',
+		journal:'Journal',
+		Paymentamount:'Payment Amount',
+		Paymentstatus:'Payment Status',
+		payment:'Online Payment',
+	}
 
 }
 
diff --git a/src/components/common/langs/zh.js b/src/components/common/langs/zh.js
index ced39a1..d47ec6b 100644
--- a/src/components/common/langs/zh.js
+++ b/src/components/common/langs/zh.js
@@ -143,6 +143,7 @@ const zh = {
 		author1: '我的稿件',
 		author2: '新增稿件',
 		author3: '草稿箱',
+		author4: '待缴费',
 		editor: '编辑',
 		editor1: '待审稿件',
 		editormanage: '编辑管理',
@@ -367,6 +368,13 @@ const zh = {
 		reContent:'确定要恢复这条内容吗？',
 		uploadImageInfo:'Figures 只能上传 JPG、JPEG 和 PNG 格式的文件'
 	},
+	pendingPayment:{
+		title:'Title',
+		journal:'期刊',
+		Paymentamount:'缴费金额',
+		Paymentstatus:'缴费状态',
+		payment:'在线缴费',
+	}
 }
 
 
diff --git a/src/components/page/PendingPaymentAuthor.vue b/src/components/page/PendingPaymentAuthor.vue
new file mode 100644
index 0000000..906b48e
--- /dev/null
+++ b/src/components/page/PendingPaymentAuthor.vue
@@ -0,0 +1,36 @@
+<template>
+    <div>
+      <PendingPayment ref="PendingPayment" :list="articles">
+      <template slot="tableItem">
+      
+      </template>
+      </PendingPayment>
+    </div>
+  </template>
+  
+  <script>
+  import PendingPayment from '@/components/page/components/pendingPayment/index.vue';
+  export default {
+    components: {
+      PendingPayment
+    },
+    data() {
+      return {
+        articles: [
+          { id: 1, title: '稿件1', author: '作者1', amount: 100, status: '未缴费' },
+          { id: 2, title: '稿件2', author: '作者2', amount: 200, status: '未缴费' },
+          { id: 3, title: '稿件3', author: '作者3', amount: 300, status: '未缴费' },
+          // 更多稿件数据...
+        ]
+      };
+    },
+    methods: {
+      payArticle(article) {
+        // 在这里实现缴费逻辑，例如调用后端API进行缴费
+        // 缴费成功后更新article.status为'已缴费'
+        article.status = '已缴费';
+        this.$message.success(`已成功为稿件 ${article.title} 缴费`);
+      }
+    }
+  };
+  </script>
\ No newline at end of file
diff --git a/src/components/page/PendingPaymentEditor.vue b/src/components/page/PendingPaymentEditor.vue
new file mode 100644
index 0000000..54a8e9d
--- /dev/null
+++ b/src/components/page/PendingPaymentEditor.vue
@@ -0,0 +1,39 @@
+<template>
+    <div>
+      <el-table :data="articles" style="width: 100%">
+        <el-table-column prop="id" label="稿件ID" width="100"></el-table-column>
+        <el-table-column prop="title" label="稿件标题"></el-table-column>
+        <el-table-column prop="author" label="作者"></el-table-column>
+        <el-table-column prop="amount" label="缴费金额" width="120"></el-table-column>
+        <el-table-column prop="status" label="缴费状态" width="120"></el-table-column>
+        <el-table-column label="操作" width="120">
+          <template slot-scope="scope">
+            <el-button @click="payArticle(scope.row)" type="primary" size="small">缴费</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+      return {
+        articles: [
+          { id: 1, title: '稿件1', author: '作者1', amount: 100, status: '未缴费' },
+          { id: 2, title: '稿件2', author: '作者2', amount: 200, status: '未缴费' },
+          { id: 3, title: '稿件3', author: '作者3', amount: 300, status: '未缴费' },
+          // 更多稿件数据...
+        ]
+      };
+    },
+    methods: {
+      payArticle(article) {
+        // 在这里实现缴费逻辑，例如调用后端API进行缴费
+        // 缴费成功后更新article.status为'已缴费'
+        article.status = '已缴费';
+        this.$message.success(`已成功为稿件 ${article.title} 缴费`);
+      }
+    }
+  };
+  </script>
\ No newline at end of file
diff --git a/src/components/page/components/pendingPayment/index.vue b/src/components/page/components/pendingPayment/index.vue
new file mode 100644
index 0000000..dbd612e
--- /dev/null
+++ b/src/components/page/components/pendingPayment/index.vue
@@ -0,0 +1,48 @@
+<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>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      list: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data() {
+      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} 缴费`);
+      }
+    }
+  };
+  </script>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 999e293..b2632f1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -312,6 +312,20 @@ export default new Router({
 				title: 'Submit manuscript'
 			}
 		},
+		{
+			path: '/PendingPaymentEditor',
+			component: () => import('../components/page/PendingPaymentEditor.vue'),
+			meta: {
+				title: 'Pending Payment'
+			}
+		},
+		{
+			path: '/PendingPaymentAuthor',
+			component: () => import('../components/page/PendingPaymentAuthor.vue'),
+			meta: {
+				title: 'Pending Payment'
+			}
+		},
 		{
 			path: '/articleReviewer',
 			component: () => import('../components/page/articleReviewer.vue'),

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 3/8] 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>

From 4e30937b541b528bc530bc8b00beadf6ff6b1265 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 15:28:44 +0800
Subject: [PATCH 4/8] tijiao

---
 public/index.html                             |   5 +-
 .../pendingPayment/PayPalButton.vue           | 114 +++++++++---------
 .../page/components/pendingPayment/index.vue  |   2 +-
 3 files changed, 60 insertions(+), 61 deletions(-)

diff --git a/public/index.html b/public/index.html
index 19e20f2..7a05f02 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,10 +16,7 @@
     <!-- built files will be auto injected -->
   </body><script src="<%=BASE_URL %>/tinymce/tinymce.min.js"></script>
 
-  <script
-  src="https://www.paypal.com/sdk/js?client-id=Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr"></script>
-
-
+  
 
 </html>
 
diff --git a/src/components/page/components/pendingPayment/PayPalButton.vue b/src/components/page/components/pendingPayment/PayPalButton.vue
index 85503a2..c7e1788 100644
--- a/src/components/page/components/pendingPayment/PayPalButton.vue
+++ b/src/components/page/components/pendingPayment/PayPalButton.vue
@@ -1,63 +1,65 @@
 <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>
+        <PayPal
+           
+            currency="USD"
+            :client="paypal"
+            :amount="amount"
+            :env="env"
+            
+            :on-success="onPaymentSuccess"
+            :on-error="onPaymentError"
+        >
+        </PayPal>
     </div>
-  </template>
-   
-  <script>
-  import PaypalCheckout from 'vue-paypal-checkout';
-   
-  export default {
-    name: 'PayPalButton',
-    components: {
-      PaypalCheckout
-    },
+</template>
+
+<script>
+import PayPal from 'vue-paypal-checkout';
+export default {
     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
-      };
+        return {
+            paypal: {
+                sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr',
+                production: 'Ad-9iuPrN9U8zQxfcog7QweDSJsDY6ns2I5WaPjuuN_4ToE5LEGASm09j9x7VC0fbQkTmnpFtrZYpHEE'
+            },
+            // myItems: [
+            //     {
+            //         name: 'hat',
+
+            //         quantity: '1',
+            //         price: '5',
+            //         currency: 'USD'
+            //     },
+            //     {
+            //         name: 'handbag',
+            //         // description: "Black handbag.",
+            //         quantity: '1',
+            //         price: '5',
+            //         currency: 'USD'
+            //     }
+            // ],
+            amount: '9.99', // Amount to be paid
+            env: 'sandbox'
+        };
+    },
+    components: {
+        PayPal
     },
     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);
-      }
+        onPaymentSuccess(payment) {
+          alert(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
+};
+</script>
+
+<style scoped></style>
diff --git a/src/components/page/components/pendingPayment/index.vue b/src/components/page/components/pendingPayment/index.vue
index bf2ebb1..e4237fc 100644
--- a/src/components/page/components/pendingPayment/index.vue
+++ b/src/components/page/components/pendingPayment/index.vue
@@ -16,7 +16,7 @@
                   
     <PayPalButton @payment-success="handlePaymentSuccess" @payment-error="handlePaymentError" />
 
-                    <el-button @click="payArticle(scope.row)" plain type="danger" size="mini">{{ $t('pendingPayment.payment') }}</el-button>
+                    <!-- <el-button @click="payArticle(scope.row)" plain type="danger" size="mini">{{ $t('pendingPayment.payment') }}</el-button> -->
                 </template>
             </el-table-column>
         </el-table>

From 33709c76bee88d9c5a9a30bb5a78bbd4aba1d697 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: Fri, 27 Dec 2024 12:32:22 +0800
Subject: [PATCH 5/8] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +-
 .../pendingPayment/PayPalButton copy.vue      |  68 +++
 .../pendingPayment/PayPalButton.vue           |  91 +++-
 src/components/page/components/table/word.vue | 462 +++++++++---------
 4 files changed, 375 insertions(+), 248 deletions(-)
 create mode 100644 src/components/page/components/pendingPayment/PayPalButton copy.vue

diff --git a/package.json b/package.json
index f6dac83..6d7f01f 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "vue": "^2.6.10",
     "vue-cropperjs": "^3.0.0",
     "vue-i18n": "^8.10.0",
-    "vue-paypal-checkout": "^3.2.0",
+    "vue-paypal-checkout": "latest",
     "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 copy.vue b/src/components/page/components/pendingPayment/PayPalButton copy.vue
new file mode 100644
index 0000000..7649284
--- /dev/null
+++ b/src/components/page/components/pendingPayment/PayPalButton copy.vue	
@@ -0,0 +1,68 @@
+<template>
+    <div>
+        <PayPal
+            currency="USD"
+            :client="paypal"
+            :amount="amount"
+            :env="env"
+            @payment-authorized="onPaymentSuccess"
+            @payment-completed="onPaymentError"
+        >
+        </PayPal>
+    </div>
+</template>
+
+<script>
+import PayPal from 'vue-paypal-checkout';
+export default {
+    data() {
+        return {
+            paypal: {
+                sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr',
+                production: 'Ad-9iuPrN9U8zQxfcog7QweDSJsDY6ns2I5WaPjuuN_4ToE5LEGASm09j9x7VC0fbQkTmnpFtrZYpHEE'
+            },
+            // myItems: [
+            //     {
+            //         name: 'hat',
+            //         quantity: '1',
+            //         price: '5',
+            //         currency: 'USD'
+            //     },
+            //     {
+            //         name: 'handbag',
+            //         // description: "Black handbag.",
+            //         quantity: '1',
+            //         price: '5',
+            //         currency: 'USD'
+            //     }
+            // ],
+            amount: '9.99', // Amount to be paid
+            env: 'sandbox'
+        };
+    },
+    components: {
+        PayPal
+    },
+    methods: {
+        onPaymentSuccess(payment) {
+            try {
+                console.log('Payment successful!', payment);
+                this.$emit('payment-success', payment);
+            } catch (error) {
+                console.error('Error in onPaymentSuccess callback:', error);
+            }
+        },
+
+        onPaymentError(error) {
+            try {
+                console.error('Payment error:', error);
+                this.$emit('payment-error', error);
+            } catch (err) {
+                console.error('Error in onPaymentError callback:', err);
+            }
+        }
+    }
+};
+</script>
+
+<style scoped></style>
diff --git a/src/components/page/components/pendingPayment/PayPalButton.vue b/src/components/page/components/pendingPayment/PayPalButton.vue
index c7e1788..41c3270 100644
--- a/src/components/page/components/pendingPayment/PayPalButton.vue
+++ b/src/components/page/components/pendingPayment/PayPalButton.vue
@@ -1,24 +1,35 @@
 <template>
     <div>
         <PayPal
-           
             currency="USD"
             :client="paypal"
             :amount="amount"
             :env="env"
-            
-            :on-success="onPaymentSuccess"
-            :on-error="onPaymentError"
+            :commit="true"
+            @payment-authorized="onPaymentSuccess"
+            @payment-completed="onPaymentCompleted"
+            @payment-cancelled="onPaymentCancel"
+            locale="en_US"
+            :button-style="myStyle"
+            :token="paymentToken"
+            :paypal-button="paypalButton"
         >
         </PayPal>
     </div>
 </template>
-
+<!-- paymentID= "PAY-3L661344P7749433KLD2R5ZQ" -->
 <script>
 import PayPal from 'vue-paypal-checkout';
 export default {
     data() {
         return {
+            myStyle: {
+                label: 'checkout',
+                size: 'responsive',
+                shape: 'pill',
+                color: 'blue'
+            },
+            paymentToken: '2S842212TP193105C', // 存储自定义的 token
             paypal: {
                 sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr',
                 production: 'Ad-9iuPrN9U8zQxfcog7QweDSJsDY6ns2I5WaPjuuN_4ToE5LEGASm09j9x7VC0fbQkTmnpFtrZYpHEE'
@@ -26,7 +37,6 @@ export default {
             // myItems: [
             //     {
             //         name: 'hat',
-
             //         quantity: '1',
             //         price: '5',
             //         currency: 'USD'
@@ -46,17 +56,68 @@ export default {
     components: {
         PayPal
     },
+    created() {
+        // this.fetchCustomToken();
+    },
     methods: {
-        onPaymentSuccess(payment) {
-          alert(payment)
-            console.log('Payment successful!', payment);
-            // Handle successful payment here
-            this.$emit('payment-success', payment);
+        // 配置 PayPal 按钮（传递自定义的 token）
+        paypalButton(data, actions) {
+            return actions.payment.create({
+                transactions: [
+                    {
+                        amount: {
+                            total: '20.00',
+                            currency: 'USD'
+                        },
+                        custom: this.paymentToken // 将自定义 token 作为 custom 数据传递
+                    }
+                ]
+            });
         },
-        onPaymentError(error) {
-            console.error('Payment error:', error);
-            // Handle payment error here
-            this.$emit('payment-error', error);
+        async fetchCustomToken() {
+            try {
+                this.customToken = '2S842212TP193105C'; // 假设返回的 JSON 里有 token 字段
+            } catch (error) {}
+        },
+
+        onPaymentSuccess(payment) {
+            try {
+                console.log('Payment successful Button!', payment);
+                // this.$emit('payment-success', payment);
+
+                // const token = this.paymentToken;
+
+                // // 使用token进行支付处理
+                // paypal.payment.execute(token, (error, payment) => {
+                // 	console.log('payment at line 73:', payment)
+                //     if (error) {
+                //         // 处理错误
+                //         console.error('Error in onPaymentSuccess callback:', error);
+                //     } else {
+                //         // 处理支付成功的情况
+                //         console.log('Payment successful Button!', payment);
+                //     }
+                // });
+            } catch (error) {
+                console.error('Error in onPaymentSuccess callback:', error);
+            }
+        },
+
+        onPaymentCompleted(error) {
+            try {
+                console.error('Payment paymentCompleted Button:', error);
+                this.$emit('payment-error', error);
+            } catch (err) {
+                console.error('Error in paymentCompleted callback:', err);
+            }
+        },
+        onPaymentCancel(error) {
+            try {
+                console.error('Payment cancel Button:', error);
+                this.$emit('payment-error', error);
+            } catch (err) {
+                console.error('Error in onPaymentCancel callback:', err);
+            }
         }
     }
 };
diff --git a/src/components/page/components/table/word.vue b/src/components/page/components/table/word.vue
index b7796d7..86373b8 100644
--- a/src/components/page/components/table/word.vue
+++ b/src/components/page/components/table/word.vue
@@ -249,7 +249,7 @@ export default {
         isShowEditComment() {
             if (localStorage.getItem('U_role')) {
                 var identity = localStorage.getItem('U_role');
-                
+
                 if (identity.includes('editor')) {
                     this.isEditComment = true;
                 } else {
@@ -386,256 +386,254 @@ export default {
                 content_css: 'default',
 
                 setup(ed) {
-                    if(!_this.readonly){
-ed.on('click', function (e) {
-                        // 判断点击的是否是目标元素
-                        const target = e.target;
-                        console.log('target at line 351:', target);
-                        
-                        if (target.classList.contains('isRemarkIcon')) {
-                            _this.$emit('onComment', target.getAttribute('main-id'));
-                        }
-                    });
-                    // // 添加批注按钮
-                    ed.ui.registry.addButton('addImageButton', {
-                        text: 'Add Figure',
-                        icon: 'comment',
-                        onAction: function () {
-                            _this.$emit('add', img);
-                            // const selection = ed.selection;
-                            // const selectedNode = selection.getNode(); // 获取选中的节点
-                            // console.log('selectedNode at line 333:', selectedNode);
-                            // if (selectedNode) {
-                            //     const comment = prompt('Enter your comment:');
-                            //     if (comment) {
-                            //         const dataId = selectedNode.getAttribute('main-id');
-                            //         _this.comments.push({ text: comment, time: new Date().getTime(), mId: dataId });
-                            //     }
-                            // } else {
-                            //     alert('Please select some text to comment on.');
-                            // }
-                        }
-                    });
-                    ed.on('dragstart', (e) => {
-                        // 阻止拖动事件
-                        e.preventDefault();
-                    });
-                    // 监听焦点变化并高亮当前选中的元素
-                    ed.on('focus', function () {
-                        if (!isDeleting) {
-                            // 处理正常的焦点逻辑
-                            ed.getBody().style.outline = 'none'; // 当编辑器获取焦点时，移除焦点框
+                    if (!_this.readonly) {
+                        ed.on('click', function (e) {
+                            // 判断点击的是否是目标元素
+                            const target = e.target;
+                            console.log('target at line 351:', target);
+
+                            if (target.classList.contains('isRemarkIcon')) {
+                                _this.$emit('onComment', target.getAttribute('main-id'));
+                            }
+                        });
+                        // // 添加批注按钮
+                        ed.ui.registry.addButton('addImageButton', {
+                            text: 'Add Figure',
+                            icon: 'comment',
+                            onAction: function () {
+                                _this.$emit('add', img);
+                                // const selection = ed.selection;
+                                // const selectedNode = selection.getNode(); // 获取选中的节点
+                                // console.log('selectedNode at line 333:', selectedNode);
+                                // if (selectedNode) {
+                                //     const comment = prompt('Enter your comment:');
+                                //     if (comment) {
+                                //         const dataId = selectedNode.getAttribute('main-id');
+                                //         _this.comments.push({ text: comment, time: new Date().getTime(), mId: dataId });
+                                //     }
+                                // } else {
+                                //     alert('Please select some text to comment on.');
+                                // }
+                            }
+                        });
+                        ed.on('dragstart', (e) => {
+                            // 阻止拖动事件
+                            e.preventDefault();
+                        });
+                        // 监听焦点变化并高亮当前选中的元素
+                        ed.on('focus', function () {
+                            if (!isDeleting) {
+                                // 处理正常的焦点逻辑
+                                ed.getBody().style.outline = 'none'; // 当编辑器获取焦点时，移除焦点框
+                                _this.updateCurrentTag(ed);
+                            }
+                        });
+                        // 监听焦点变化并高亮当前选中的元素
+                        ed.on('selectionChange', function () {
                             _this.updateCurrentTag(ed);
-                        }
-                    });
-                    // 监听焦点变化并高亮当前选中的元素
-                    ed.on('selectionChange', function () {
-                        _this.updateCurrentTag(ed);
-                    });
+                        });
 
-                    ed.on('mouseup', function () {
-                        _this.updateCurrentTag(ed);
-                    });
-  ed.on('blur', function () {
-                        console.log('_this.lastPTag at line 367:', _this.lastTag);
-                        if (_this.lastTag) {
-                            _this.lastTag.style.backgroundColor = ''; // 清除之前的高亮
-                            _this.lastTag.style.border = '';
-                            _this.lastTag = null;
-                        }
-                        if (wordButtonContainer) {
-                            wordButtonContainer.remove();
-                            wordButtonContainer = null;
-                        }
-                    });
-                    ed.on('drop', (event, index) => {
-                        console.log('event at line 375:', event);
-
-                        const selection = ed.selection;
-                        const selectedNode = selection.getNode(); // 获取选中的节点
-                        console.log('1899', selectedNode); // 查看光标位置的节点类型
-
-                        // 向上遍历直到找到带有 main-id 属性的节点
-                        const findParentWithMainId = (node) => {
-                            while (node) {
-                                if (node.hasAttribute && node.classList.contains('pMain')) {
-                                    return node; // 找到并返回该节点
-                                }
-                                node = node.parentNode; // 向上遍历父节点
-                            }
-                            return null; // 如果没有找到，返回 null
-                        };
-
-                        // 查找选中节点的父节点，直到找到带有 main-id 属性的节点
-                        const nodeWithMainId = findParentWithMainId(selectedNode);
-                        console.log('at line 395:', nodeWithMainId);
-                        const dataId = nodeWithMainId.getAttribute('main-id');
-                        event.preventDefault();
-                        hideDeleteButton();
-                        // 获取拖动的数据
-                        _this.$emit('onDrop', event, dataId); // 阻止默认的行为
-                        // 在编辑器中插入数据
-                        // const content = <div class="dropped-item">${itemData}</div>;
-                        // ed.insertContent(content); // 插入文本或HTML
-                    });
-                    // 方法：更新当前选中的 p 标签的样式
-                    _this.updateCurrentTag = function (ed) {
-                        var selection = ed.selection;
-                        var node = selection.getNode();
-
-                        // 向上查找包含的节点直到找到合适的标签
-                        if (node && !node.classList.contains('pMain')) {
-                            node = node.closest('.pMain'); // 向上找到最近的包含 'aa' 类的标签
-                        }
-
-                        if (node && node.classList.contains('pMain')) {
-                            // 清除上一个高亮的节点样式
-                            if (_this.lastTag && _this.lastTag !== node) {
-                                _this.lastTag.style.backgroundColor = ''; // 清除上一个高亮的标签样式
+                        ed.on('mouseup', function () {
+                            _this.updateCurrentTag(ed);
+                        });
+                        ed.on('blur', function () {
+                            console.log('_this.lastPTag at line 367:', _this.lastTag);
+                            if (_this.lastTag) {
+                                _this.lastTag.style.backgroundColor = ''; // 清除之前的高亮
                                 _this.lastTag.style.border = '';
+                                _this.lastTag = null;
                             }
+                            if (wordButtonContainer) {
+                                wordButtonContainer.remove();
+                                wordButtonContainer = null;
+                            }
+                        });
+                        ed.on('drop', (event, index) => {
+                            console.log('event at line 375:', event);
 
-                            // 设置当前节点的背景色和边框
-                            node.style.backgroundColor = 'rgb(0 102 153 / 10%)';
-                            node.style.border = '2px dashed rgb(0 102 153 / 50%)';
+                            const selection = ed.selection;
+                            const selectedNode = selection.getNode(); // 获取选中的节点
+                            console.log('1899', selectedNode); // 查看光标位置的节点类型
 
-                            // 更新选中的节点
-                            var currentNode = node;
+                            // 向上遍历直到找到带有 main-id 属性的节点
+                            const findParentWithMainId = (node) => {
+                                while (node) {
+                                    if (node.hasAttribute && node.classList.contains('pMain')) {
+                                        return node; // 找到并返回该节点
+                                    }
+                                    node = node.parentNode; // 向上遍历父节点
+                                }
+                                return null; // 如果没有找到，返回 null
+                            };
 
-                            // 显示删除按钮
-                            showDeleteButton(currentNode);
-
-                            // 更新 lastTag
-                            _this.lastTag = node;
-                        } else {
-                            // 如果没有找到包含 'aa' 类的节点，隐藏删除按钮
+                            // 查找选中节点的父节点，直到找到带有 main-id 属性的节点
+                            const nodeWithMainId = findParentWithMainId(selectedNode);
+                            console.log('at line 395:', nodeWithMainId);
+                            const dataId = nodeWithMainId.getAttribute('main-id');
+                            event.preventDefault();
                             hideDeleteButton();
-                        }
-                    };
-                    function hideDeleteButton() {
-                        if (wordButtonContainer) {
-                            wordButtonContainer.remove(); // 移除删除按钮
-                            wordButtonContainer = null; // 清空按钮引用
-                        }
-                    }
-                    function showDeleteButton(paragraph) {
-                        if (wordButtonContainer) {
-                            wordButtonContainer.remove(); // 如果已有按钮容器，移除
-                        }
-
-                        // 获取 <p> 标签的位置信息
-                        const paragraphRect = paragraph.getBoundingClientRect();
-                        const iframe = ed.getDoc().defaultView.frameElement;
-                        const iframeRect = iframe.getBoundingClientRect();
-                        var left = 0;
-                        if (_this.isEditComment) {
-                            left = 100;
-                        } else {
-                            left = 80;
-                        }
-                        // 创建按钮容器 div
-                        wordButtonContainer = document.createElement('div');
-                        wordButtonContainer.style.position = 'absolute';
-                        wordButtonContainer.style.top = `${iframeRect.top + paragraphRect.top + window.scrollY - 20}px`; // 确保按钮容器位于 <p> 标签旁边
-                        wordButtonContainer.style.left = `${iframeRect.left + paragraphRect.left + paragraphRect.width - left}px`;
-                        wordButtonContainer.style.zIndex = '9999'; // 设置更高的值
-                        wordButtonContainer.style.display = 'flex'; // 使用 flex 布局将按钮水平排列
-                        wordButtonContainer.style.alignItems = 'center'; // 垂直居中
-
-                        // 创建删除按钮
-                        const deleteButton = document.createElement('button');
-                        deleteButton.style.backgroundColor = 'red';
-                        deleteButton.style.color = 'white';
-                        deleteButton.style.border = 'none';
-                        deleteButton.style.borderRadius = '50%';
-                        deleteButton.style.padding = '5px';
-                        deleteButton.style.cursor = 'pointer';
-                        deleteButton.style.marginLeft = '10px'; // 给批注按钮添加间距
-                        const deleteIcon = document.createElement('i');
-                        deleteIcon.classList.add('el-icon-delete'); // 使用 Element UI 删除图标
-                        deleteIcon.style.fontSize = '20px';
-                        deleteIcon.style.color = '#fff'; // 设置图标颜色
-                        deleteButton.appendChild(deleteIcon);
-                        deleteButton.addEventListener('mousedown', function (e) {
-                            e.stopImmediatePropagation();
-                            e.preventDefault();
-                            _this.$emit('onDelete', paragraph.getAttribute('main-id'));
+                            // 获取拖动的数据
+                            _this.$emit('onDrop', event, dataId); // 阻止默认的行为
+                            // 在编辑器中插入数据
+                            // const content = <div class="dropped-item">${itemData}</div>;
+                            // ed.insertContent(content); // 插入文本或HTML
                         });
+                        // 方法：更新当前选中的 p 标签的样式
+                        _this.updateCurrentTag = function (ed) {
+                            var selection = ed.selection;
+                            var node = selection.getNode();
 
-                        // 创建批注按钮
-                        const editButton = document.createElement('button');
-                        editButton.style.backgroundColor = 'rgb(19, 188, 32)';
-                        editButton.style.color = 'white';
-                        editButton.style.border = 'none';
-                        editButton.style.borderRadius = '50%';
-                        editButton.style.padding = '5px';
-                        editButton.style.marginLeft = '10px'; // 给批注按钮添加间距
-                        editButton.style.cursor = 'pointer';
-
-                        const editIcon = document.createElement('i');
-                        editIcon.classList.add('el-icon-edit'); // 使用 Element UI 批注图标
-                        editIcon.style.fontSize = '20px';
-                        editIcon.style.color = '#fff'; // 设置图标颜色
-
-                        editButton.appendChild(editIcon);
-                        editButton.addEventListener('mousedown', function (e) {
-                            e.stopImmediatePropagation();
-                            e.preventDefault();
-                            // 触发批注事件
-                            _this.$emit('onEdit', paragraph.getAttribute('main-id'));
-                        });
-
-                        // 将按钮添加到容器中
-                        wordButtonContainer.appendChild(editButton);
-                        wordButtonContainer.appendChild(deleteButton);
-                      
-                        if (_this.isEditComment) {
-                            // 创建批注按钮
-                            const commentButton = document.createElement('button');
-                            commentButton.style.backgroundColor = '#2b81ef';
-                            commentButton.style.color = 'white';
-                            commentButton.style.border = 'none';
-                            commentButton.style.borderRadius = '50%';
-                            commentButton.style.padding = '5px';
-                            commentButton.style.marginLeft = '10px'; // 给批注按钮添加间距
-                            commentButton.style.cursor = 'pointer';
-
-                            const commentIcon = document.createElement('i');
-                            commentIcon.classList.add('el-icon-chat-dot-square'); // 使用 Element UI 批注图标
-                            commentIcon.style.fontSize = '20px';
-                            commentIcon.style.color = '#fff'; // 设置图标颜色
-
-                            commentButton.appendChild(commentIcon);
-                            commentButton.addEventListener('mousedown', function (e) {
-                                e.stopImmediatePropagation();
-                                e.preventDefault();
-                                // 触发批注事件
-                                _this.$emit('onAddComment', paragraph.getAttribute('main-id'));
-                                if (wordButtonContainer) {
-                                wordButtonContainer.remove(); // 移除删除按钮
-                                wordButtonContainer = null; // 清空按钮引用
+                            // 向上查找包含的节点直到找到合适的标签
+                            if (node && !node.classList.contains('pMain')) {
+                                node = node.closest('.pMain'); // 向上找到最近的包含 'aa' 类的标签
                             }
-                            });
 
-                            wordButtonContainer.appendChild(commentButton);
-                        }
+                            if (node && node.classList.contains('pMain')) {
+                                // 清除上一个高亮的节点样式
+                                if (_this.lastTag && _this.lastTag !== node) {
+                                    _this.lastTag.style.backgroundColor = ''; // 清除上一个高亮的标签样式
+                                    _this.lastTag.style.border = '';
+                                }
 
-                        wordButtonContainer.classList.add('wordButtonContainer'); // 给按钮
-                        // 将容器添加到页面中
-                        document.body.appendChild(wordButtonContainer);
-                    }
-                    ed.on('mousedown', function (e) {
-                        // 检查点击的位置是否是删除按钮或选中的 <p> 标签
-                        if (!currentParagraph || (e.target !== wordButtonContainer && !currentParagraph.contains(e.target))) {
+                                // 设置当前节点的背景色和边框
+                                node.style.backgroundColor = 'rgb(0 102 153 / 10%)';
+                                node.style.border = '2px dashed rgb(0 102 153 / 50%)';
+
+                                // 更新选中的节点
+                                var currentNode = node;
+
+                                // 显示删除按钮
+                                showDeleteButton(currentNode);
+
+                                // 更新 lastTag
+                                _this.lastTag = node;
+                            } else {
+                                // 如果没有找到包含 'aa' 类的节点，隐藏删除按钮
+                                hideDeleteButton();
+                            }
+                        };
+                        function hideDeleteButton() {
                             if (wordButtonContainer) {
                                 wordButtonContainer.remove(); // 移除删除按钮
                                 wordButtonContainer = null; // 清空按钮引用
                             }
                         }
-                    });
+                        function showDeleteButton(paragraph) {
+                            if (wordButtonContainer) {
+                                wordButtonContainer.remove(); // 如果已有按钮容器，移除
+                            }
+
+                            // 获取 <p> 标签的位置信息
+                            const paragraphRect = paragraph.getBoundingClientRect();
+                            const iframe = ed.getDoc().defaultView.frameElement;
+                            const iframeRect = iframe.getBoundingClientRect();
+                            var left = 0;
+                            if (_this.isEditComment) {
+                                left = 100;
+                            } else {
+                                left = 80;
+                            }
+                            // 创建按钮容器 div
+                            wordButtonContainer = document.createElement('div');
+                            wordButtonContainer.style.position = 'absolute';
+                            wordButtonContainer.style.top = `${iframeRect.top + paragraphRect.top + window.scrollY - 20}px`; // 确保按钮容器位于 <p> 标签旁边
+                            wordButtonContainer.style.left = `${iframeRect.left + paragraphRect.left + paragraphRect.width - left}px`;
+                            wordButtonContainer.style.zIndex = '9999'; // 设置更高的值
+                            wordButtonContainer.style.display = 'flex'; // 使用 flex 布局将按钮水平排列
+                            wordButtonContainer.style.alignItems = 'center'; // 垂直居中
+
+                            // 创建删除按钮
+                            const deleteButton = document.createElement('button');
+                            deleteButton.style.backgroundColor = 'red';
+                            deleteButton.style.color = 'white';
+                            deleteButton.style.border = 'none';
+                            deleteButton.style.borderRadius = '50%';
+                            deleteButton.style.padding = '5px';
+                            deleteButton.style.cursor = 'pointer';
+                            deleteButton.style.marginLeft = '10px'; // 给批注按钮添加间距
+                            const deleteIcon = document.createElement('i');
+                            deleteIcon.classList.add('el-icon-delete'); // 使用 Element UI 删除图标
+                            deleteIcon.style.fontSize = '20px';
+                            deleteIcon.style.color = '#fff'; // 设置图标颜色
+                            deleteButton.appendChild(deleteIcon);
+                            deleteButton.addEventListener('mousedown', function (e) {
+                                e.stopImmediatePropagation();
+                                e.preventDefault();
+                                _this.$emit('onDelete', paragraph.getAttribute('main-id'));
+                            });
+
+                            // 创建批注按钮
+                            const editButton = document.createElement('button');
+                            editButton.style.backgroundColor = 'rgb(19, 188, 32)';
+                            editButton.style.color = 'white';
+                            editButton.style.border = 'none';
+                            editButton.style.borderRadius = '50%';
+                            editButton.style.padding = '5px';
+                            editButton.style.marginLeft = '10px'; // 给批注按钮添加间距
+                            editButton.style.cursor = 'pointer';
+
+                            const editIcon = document.createElement('i');
+                            editIcon.classList.add('el-icon-edit'); // 使用 Element UI 批注图标
+                            editIcon.style.fontSize = '20px';
+                            editIcon.style.color = '#fff'; // 设置图标颜色
+
+                            editButton.appendChild(editIcon);
+                            editButton.addEventListener('mousedown', function (e) {
+                                e.stopImmediatePropagation();
+                                e.preventDefault();
+                                // 触发批注事件
+                                _this.$emit('onEdit', paragraph.getAttribute('main-id'));
+                            });
+
+                            // 将按钮添加到容器中
+                            wordButtonContainer.appendChild(editButton);
+                            wordButtonContainer.appendChild(deleteButton);
+
+                            if (_this.isEditComment) {
+                                // 创建批注按钮
+                                const commentButton = document.createElement('button');
+                                commentButton.style.backgroundColor = '#2b81ef';
+                                commentButton.style.color = 'white';
+                                commentButton.style.border = 'none';
+                                commentButton.style.borderRadius = '50%';
+                                commentButton.style.padding = '5px';
+                                commentButton.style.marginLeft = '10px'; // 给批注按钮添加间距
+                                commentButton.style.cursor = 'pointer';
+
+                                const commentIcon = document.createElement('i');
+                                commentIcon.classList.add('el-icon-chat-dot-square'); // 使用 Element UI 批注图标
+                                commentIcon.style.fontSize = '20px';
+                                commentIcon.style.color = '#fff'; // 设置图标颜色
+
+                                commentButton.appendChild(commentIcon);
+                                commentButton.addEventListener('mousedown', function (e) {
+                                    e.stopImmediatePropagation();
+                                    e.preventDefault();
+                                    // 触发批注事件
+                                    _this.$emit('onAddComment', paragraph.getAttribute('main-id'));
+                                    if (wordButtonContainer) {
+                                        wordButtonContainer.remove(); // 移除删除按钮
+                                        wordButtonContainer = null; // 清空按钮引用
+                                    }
+                                });
+
+                                wordButtonContainer.appendChild(commentButton);
+                            }
+
+                            wordButtonContainer.classList.add('wordButtonContainer'); // 给按钮
+                            // 将容器添加到页面中
+                            document.body.appendChild(wordButtonContainer);
+                        }
+                        ed.on('mousedown', function (e) {
+                            // 检查点击的位置是否是删除按钮或选中的 <p> 标签
+                            if (!currentParagraph || (e.target !== wordButtonContainer && !currentParagraph.contains(e.target))) {
+                                if (wordButtonContainer) {
+                                    wordButtonContainer.remove(); // 移除删除按钮
+                                    wordButtonContainer = null; // 清空按钮引用
+                                }
+                            }
+                        });
                     }
-                    
-                  
                 },
 
                 init_instance_callback: (editor) => {

From b3c77526a759d34d704be853e5f3338ec660b480 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, 2 Jan 2025 10:44:07 +0800
Subject: [PATCH 6/8] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                             |   2 +-
 src/assets/img/paypal.png                     | Bin 0 -> 2645 bytes
 src/assets/img/success.png                    | Bin 0 -> 2896 bytes
 src/assets/img/zhifubao.png                   | Bin 0 -> 2691 bytes
 src/components/common/Sidebar.vue             |  10 +-
 src/components/common/common.vue              |  14 +-
 src/components/common/langs/en.js             |  14 +-
 src/components/common/langs/zh.js             |  14 +-
 src/components/page/Complete_profile.vue      |  15 +
 .../JournalManagement/common.vue              |  59 +-
 src/components/page/PendingPaymentAuthor.vue  |  36 -
 src/components/page/PreIngestedEditor.vue     |   2 +
 src/components/page/articleList.vue           |  32 +
 .../pendingPayment/OrderConfirmation.vue      | 800 ++++++++++++++++++
 .../components/pendingPayment/OrderDetail.vue | 800 ++++++++++++++++++
 .../pendingPayment/PayPalButton copy 2.vue    |  84 ++
 .../pendingPayment/PayPalButton copy.vue      |  68 --
 .../pendingPayment/PayPalButton.vue           | 171 ++--
 .../page/components/pendingPayment/index.vue  |   9 +-
 .../components/pendingPayment/success.vue     | 118 +++
 src/components/page/orderListAuthor.vue       | 119 +++
 src/components/page/partyRole.vue             |  16 +
 src/main.js                                   |   2 +
 src/router/index.js                           |  27 +-
 24 files changed, 2153 insertions(+), 259 deletions(-)
 create mode 100644 src/assets/img/paypal.png
 create mode 100644 src/assets/img/success.png
 create mode 100644 src/assets/img/zhifubao.png
 delete mode 100644 src/components/page/PendingPaymentAuthor.vue
 create mode 100644 src/components/page/components/pendingPayment/OrderConfirmation.vue
 create mode 100644 src/components/page/components/pendingPayment/OrderDetail.vue
 create mode 100644 src/components/page/components/pendingPayment/PayPalButton copy 2.vue
 delete mode 100644 src/components/page/components/pendingPayment/PayPalButton copy.vue
 create mode 100644 src/components/page/components/pendingPayment/success.vue
 create mode 100644 src/components/page/orderListAuthor.vue

diff --git a/public/index.html b/public/index.html
index 7a05f02..7949a8c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,7 +16,7 @@
     <!-- built files will be auto injected -->
   </body><script src="<%=BASE_URL %>/tinymce/tinymce.min.js"></script>
 
-  
+  <script src="https://www.paypal.com/sdk/js?client-id=ARyoAhBNlTMDEBb6QvJYmK0gA4cfSS6WY0Vr2uJhX3NOe7V9qVCJuNwuRHRO09WGcTgS5AkuTIgRZDcx"></script>
 
 </html>
 
diff --git a/src/assets/img/paypal.png b/src/assets/img/paypal.png
new file mode 100644
index 0000000000000000000000000000000000000000..46c248b44aa83865f6dedfaa2b3d61be1e639c24
GIT binary patch
literal 2645
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

literal 0
HcmV?d00001

diff --git a/src/assets/img/success.png b/src/assets/img/success.png
new file mode 100644
index 0000000000000000000000000000000000000000..700e7a40153d31eb75113eb9bb79453dd4c10188
GIT binary patch
literal 2896
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

literal 0
HcmV?d00001

diff --git a/src/assets/img/zhifubao.png b/src/assets/img/zhifubao.png
new file mode 100644
index 0000000000000000000000000000000000000000..4da4faaaffc78bd50e356940c590142b17e4dcc8
GIT binary patch
literal 2691
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

literal 0
HcmV?d00001

diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue
index 202f8ec..0eceee8 100644
--- a/src/components/common/Sidebar.vue
+++ b/src/components/common/Sidebar.vue
@@ -191,10 +191,7 @@ export default {
                     index: '1',
                     title: this.$t('sidebar.author'),
                     subs: [
-                        {
-                            index: 'PendingPaymentAuthor',
-                            title: this.$t('sidebar.author4')
-                        },
+                      
                         {
                             index: 'articleList',
                             title: this.$t('sidebar.author1')
@@ -206,7 +203,10 @@ export default {
                         {
                             index: 'articleAdd',
                             title: this.$t('sidebar.author2')
-                        }
+                        } , {
+                            index: 'orderListAuthor',
+                            title: this.$t('sidebar.author4')
+                        },
                     ]
                 }
                 // ,{
diff --git a/src/components/common/common.vue b/src/components/common/common.vue
index 1b4465d..e6a6b8e 100644
--- a/src/components/common/common.vue
+++ b/src/components/common/common.vue
@@ -2,12 +2,17 @@
 //记得切换
 
 //正式
-// const mediaUrl = '/public/';
-// const baseUrl = '/';
+const mediaUrl = '/public/';
+const baseUrl = '/';
 
 
-const mediaUrl = 'https://submission.tmrjournals.com/public/';
-const baseUrl = '/api';
+// const mediaUrl = 'https://submission.tmrjournals.com/public/';
+// const baseUrl = '/api';
+const paypalInfo= {
+                sandbox: 'ARyoAhBNlTMDEBb6QvJYmK0gA4cfSS6WY0Vr2uJhX3NOe7V9qVCJuNwuRHRO09WGcTgS5AkuTIgRZDcx',//沙盒环境
+                production: ''
+            }
+
 
 
 //本地(正式环境 )
@@ -27,6 +32,7 @@ const baseUrl = '/api';
 export default {
     baseUrl,
     mediaUrl,
+    paypalInfo
     
 };
 </script>
diff --git a/src/components/common/langs/en.js b/src/components/common/langs/en.js
index 31e3346..0e92d3f 100644
--- a/src/components/common/langs/en.js
+++ b/src/components/common/langs/en.js
@@ -149,7 +149,7 @@ const en = {
 		author: 'Author',
 		author1: 'My manuscripts',
 		author2: 'Submit manuscript',
-		author4: 'Pending payment',
+		author4: 'Order List',
 		author3: 'Manuscripts in Draft',
 		editor: 'Editor',
 		editor1: 'Paper Editing System',
@@ -380,7 +380,19 @@ const en = {
 		journal:'Journal',
 		Paymentamount:'Payment Amount',
 		Paymentstatus:'Payment Status',
+		subtotal:'Subtotal',
 		payment:'Online Payment',
+		payDetail:'Payment Details',
+		total:'Total price',
+		youhui:'Discount',
+		submitOrder:'Submit Order',
+		state0:'Obligation',
+		state1:'Payment successful',
+		state2:'Cancelled',
+		paymentmethod:'Payment Method',
+		Disbursements:'Disbursements',
+		Confirmorderinformation:'Confirm order information',
+		orderDetail:'Order information',
 	}
 
 }
diff --git a/src/components/common/langs/zh.js b/src/components/common/langs/zh.js
index d47ec6b..6de5212 100644
--- a/src/components/common/langs/zh.js
+++ b/src/components/common/langs/zh.js
@@ -143,7 +143,7 @@ const zh = {
 		author1: '我的稿件',
 		author2: '新增稿件',
 		author3: '草稿箱',
-		author4: '待缴费',
+		author4: '订单列表',
 		editor: '编辑',
 		editor1: '待审稿件',
 		editormanage: '编辑管理',
@@ -373,7 +373,19 @@ const zh = {
 		journal:'期刊',
 		Paymentamount:'缴费金额',
 		Paymentstatus:'缴费状态',
+		subtotal:'小计',
 		payment:'在线缴费',
+		payDetail:'付款详情',
+		total:'总价',
+		youhui:'优惠',
+		submitOrder:'提交订单',
+		state0:'待付款',
+		state1:'已缴费',
+		state2:'已取消',
+		paymentmethod:'付款方式',
+		Disbursements:'已付款',
+		Confirmorderinformation:'确认订单信息',
+		orderDetail:'订单信息',
 	}
 }
 
diff --git a/src/components/page/Complete_profile.vue b/src/components/page/Complete_profile.vue
index 5898e4a..2bf5e6f 100644
--- a/src/components/page/Complete_profile.vue
+++ b/src/components/page/Complete_profile.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="container" >
+        
       <el-row :gutter="20" >        
           <el-alert v-if="alertShow"
           :title="'Dear '+ user_name + ' Congratulations! , The information will be hidden after ' + hideSec + ' seconds'"
@@ -12,6 +13,7 @@
           </el-col>  
     </el-row>
     <!-- 内容 -->
+    
     <el-row :gutter="20" class="content_box mt20">
         <!-- 文章引用 -->             
         <el-col :class="['item', 'borderBottom', Ainfo.refer_state.state? 'passborder' : 'notPassborder']">            
@@ -19,6 +21,19 @@
                     <span v-if="Ainfo.refer_state.state" class="el-icon-check pass status"> Complete</span>
                     <span v-else class="el-icon-pie-chart notPass status"> Pending</span>
                 </h5>
+            <div class="con">
+                <h4>Manuscript payment  </h4>
+                
+              
+               
+               <p class="mt10"><common-paypal-button style="width: 150px;"
+                        :amount="40.00"
+                        :orderId="4477"
+                        @payment-success="handlePaymentSuccess"
+                        @payment-error="handlePaymentError"
+                    /></p>
+               
+            </div>  
             <div class="con">
                 <h4>HTML Proofread  </h4>
                 
diff --git a/src/components/page/JournalManagement/JournalManagement/common.vue b/src/components/page/JournalManagement/JournalManagement/common.vue
index fb62fa9..f9b445d 100644
--- a/src/components/page/JournalManagement/JournalManagement/common.vue
+++ b/src/components/page/JournalManagement/JournalManagement/common.vue
@@ -107,15 +107,17 @@
                             "
                         >
                             <i class="el-icon-s-grid" style="color: #fff"></i> {{ $t('articleListEditor.JournalInstallment') }}
-                        </p>  <p
+                        </p>
+                        <p
                             @click="
                                 openJournal({
                                     ...scope.row
                                 })
                             "
-                            style=" background-color: #c2d4ff;
+                            style="
+                                background-color: #c2d4ff;
                                 color: #4665b0;
-                               
+
                                 cursor: pointer;
                                 padding: 2px 2px;
                                 font-weight: bold;
@@ -125,7 +127,6 @@
                         >
                             <i class="el-icon-connection" style="color: #4665b0"></i> {{ $t('menu.ClassificationmanagementInfo') }}
                         </p>
-                      
 
                         <p
                             @click="
@@ -144,13 +145,23 @@
         <el-dialog :title="$t('GroupClassification.edit')" :visible.sync="editDialogVisible" width="600px" :before-close="handleEditClose">
             <el-form ref="detail_form" :model="detailForm" :rules="rules" label-width="165px">
                 <el-form-item label="Journal :">
-                    <p style="display: flex;align-items: center;justify-content: space-between;">
+                    <p style="display: flex; align-items: center; justify-content: space-between">
                         <span>{{ detailForm.title }}</span>
-                    <span style="border-radius: 4px;padding: 0 4px;line-height: 24px;height: 24px;box-sizing: border-box;border: 1px solid rgb(0, 102, 153) !important; color: rgb(0, 102, 153);font-size: 12px">
-                        {{ getCycle(currentJournal.cycle) }}
-                    </span>  
+                        <span
+                            style="
+                                border-radius: 4px;
+                                padding: 0 4px;
+                                line-height: 24px;
+                                height: 24px;
+                                box-sizing: border-box;
+                                border: 1px solid rgb(0, 102, 153) !important;
+                                color: rgb(0, 102, 153);
+                                font-size: 12px;
+                            "
+                        >
+                            {{ getCycle(currentJournal.cycle) }}
+                        </span>
                     </p>
-                  
                 </el-form-item>
                 <!-- <el-form-item label="Cover Image :" prop="image">
                     <el-upload class="avatar-uploader" ref="upIconIMg"
@@ -177,6 +188,10 @@
                     <el-input-number v-model="detailForm.kfen" :min="0" v-if="source == 'all'"></el-input-number>
                     <span v-else>{{ detailForm.kfen }}</span>
                 </el-form-item>
+                <el-form-item label="Fee :" prop="fee">
+                    <el-input-number v-model="detailForm.fee" :min="0" v-if="source == 'all'"></el-input-number>
+                    <span v-else>{{ detailForm.fee }}</span>
+                </el-form-item>
                 <!-- 简介 -->
                 <el-form-item label="Introduction :" prop="scope">
                     <el-input type="textarea" rows="5" v-model="detailForm.scope"></el-input>
@@ -188,7 +203,7 @@
             </span>
         </el-dialog>
         <el-drawer
-        append-to-body
+            append-to-body
             destroy-on-close
             :title="$t('GroupClassification.Journal') + ' : ' + currentJournal.title"
             :visible.sync="drawer"
@@ -207,10 +222,14 @@
             :before-close="handleCloseJournalInstallment"
             size="90%"
         >
-            <commonJournalInstallment ref="commonJournalInstallmentRef" :journal="currentJournal" :urlList="urlList"></commonJournalInstallment>
+            <commonJournalInstallment
+                ref="commonJournalInstallmentRef"
+                :journal="currentJournal"
+                :urlList="urlList"
+            ></commonJournalInstallment>
         </el-drawer>
         <el-drawer
-        append-to-body
+            append-to-body
             destroy-on-close
             :title="$t('GroupClassification.Journal') + ' : ' + currentJournal.title"
             :visible.sync="drawerAgreement"
@@ -519,16 +538,15 @@ export default {
             });
         },
         openJournalInstallment(data) {
-        //    this.$router.push({
-        //        path: '/JournalInstallment',
-        //        query: {
-        //            journal_id: data.journal_id
-        //        }
+            //    this.$router.push({
+            //        path: '/JournalInstallment',
+            //        query: {
+            //            journal_id: data.journal_id
+            //        }
 
-        //    })
+            //    })
 
-
-        var that = this;
+            var that = this;
             this.currentJournal = data;
             this.drawerJournalInstallment = true;
             this.$nextTick(() => {
@@ -545,6 +563,7 @@ export default {
                 email: data.email,
                 epassword: data.epassword,
                 kfen: data.kfen,
+                fee: data.fee,
                 scope: data.scope
             };
             this.editDialogVisible = true;
diff --git a/src/components/page/PendingPaymentAuthor.vue b/src/components/page/PendingPaymentAuthor.vue
deleted file mode 100644
index 906b48e..0000000
--- a/src/components/page/PendingPaymentAuthor.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-    <div>
-      <PendingPayment ref="PendingPayment" :list="articles">
-      <template slot="tableItem">
-      
-      </template>
-      </PendingPayment>
-    </div>
-  </template>
-  
-  <script>
-  import PendingPayment from '@/components/page/components/pendingPayment/index.vue';
-  export default {
-    components: {
-      PendingPayment
-    },
-    data() {
-      return {
-        articles: [
-          { id: 1, title: '稿件1', author: '作者1', amount: 100, status: '未缴费' },
-          { id: 2, title: '稿件2', author: '作者2', amount: 200, status: '未缴费' },
-          { id: 3, title: '稿件3', author: '作者3', amount: 300, status: '未缴费' },
-          // 更多稿件数据...
-        ]
-      };
-    },
-    methods: {
-      payArticle(article) {
-        // 在这里实现缴费逻辑，例如调用后端API进行缴费
-        // 缴费成功后更新article.status为'已缴费'
-        article.status = '已缴费';
-        this.$message.success(`已成功为稿件 ${article.title} 缴费`);
-      }
-    }
-  };
-  </script>
\ No newline at end of file
diff --git a/src/components/page/PreIngestedEditor.vue b/src/components/page/PreIngestedEditor.vue
index d578662..15485c7 100644
--- a/src/components/page/PreIngestedEditor.vue
+++ b/src/components/page/PreIngestedEditor.vue
@@ -1,5 +1,7 @@
 <template>
     <div>
+
+        
         <div class="tab_post">
             <div v-for="(item, index) in tabsList" @click="jumpTab(index, item)" :class="tabName == item.refName ? 'P_style' : ''">
                 <h5>
diff --git a/src/components/page/articleList.vue b/src/components/page/articleList.vue
index 9e867db..83a3b47 100644
--- a/src/components/page/articleList.vue
+++ b/src/components/page/articleList.vue
@@ -56,7 +56,9 @@
 						<el-badge is-dot :hidden="item.editor_act==1?false:true">
 							{{item.title}}
 						</el-badge>
+					
 					</p>
+					
 					<p style="margin-bottom: 8px;">
 						<font style="color: #666b7a;">ID : </font>
 						{{item.accept_sn}}
@@ -75,12 +77,15 @@
 						</font>
 						<b style="font-weight: normal;margin: 0 0 0 5px;">{{item.ctime}}</b>
 					</p>
+					
 					<div class="man_state" :style="item.state,'3' | stateChange">
 						<b :style="item.state,'4' | stateChange">
 							{{item.state,'tst' | stateChange}}
 						</b>
 					</div>
+					
 					<div class="man_btn">
+						
 						<span @click="esy_mtps(item.article_id)">
 							<i class="el-icon-collection"></i>Manuscript Tracking
 						</span>
@@ -100,7 +105,18 @@
 								<!-- </el-badge>  -->
 							</span>
 						</span>
+						
+						
 					</div>
+					<el-button v-if="item.state == 6&&item.is_buy==0" size="mini" type="primary"  style="position: absolute;top: 38%;right: 10px;background: #ff5000 !important;border-color: #ff5000 !important;" @click="goOrderConfirmation(item)">Payment</el-button>
+					<el-button v-if="item.is_buy==1" size="mini" type="text"  style="position: absolute;top: 38%;right: 10px;color: #ff5000 !important;">{{ $t('pendingPayment.state1') }}</el-button>
+					<!-- v-if="item.state == 6&&item.is_buy==0" -->
+					<!-- <common-paypal-button 
+                        :amount="item.article_id"
+                        :orderId="item.article_id"
+                        @payment-success="handlePaymentSuccess"
+                        @payment-error="handlePaymentError"
+                    /> -->
 				</div>
 
 				<div class="man_progess" v-if="item.state==4" :style="item.state,'2' | stateChange">
@@ -530,6 +546,22 @@
 					});
 
 			},
+			goOrderConfirmation(data){
+this.$router.push({
+					path: '/OrderConfirmation',
+					query: {
+						id: data.article_id
+					}
+				});
+			},
+			goOrderConfirmationDetail(data){
+this.$router.push({
+					path: '/OrderDetail',
+					query: {
+						id: data.article_id
+					}
+				});
+			},
 			// 点击稿件内容文件
 			esy_deta(e) {
 				this.$api
diff --git a/src/components/page/components/pendingPayment/OrderConfirmation.vue b/src/components/page/components/pendingPayment/OrderConfirmation.vue
new file mode 100644
index 0000000..d1ebf34
--- /dev/null
+++ b/src/components/page/components/pendingPayment/OrderConfirmation.vue
@@ -0,0 +1,800 @@
+<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>
+
+        <div class="order-confirmation">
+            
+            <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')"><p>{{ articleInfo.title }}</p></el-descriptions-item>
+   
+    
+</el-descriptions>
+       
+        </div>
+        <div
+            id="settlementContainer"
+            class="trade-container type-of-affix-right-panel-to-bottom bg-white overflow-hidden flex-col rounded-t-16"
+        >
+            <div class="SettlementHeader">
+                <div class="title1">{{ $t('pendingPayment.payDetail') }}</div>
+            </div>
+            <div class="settlementPanelContainer">
+                <div class="priceWrap">
+                    <div class="priceLine priceLine_total">
+                        <div class="priceTotal_title">{{ $t('pendingPayment.total') }}</div>
+                        <div class="priceRight">
+                            <div class="trade-price-container price">
+                                <span class="trade-price-symbol priceTotal_unit">$</span>
+                                <span class="trade-price-integer priceTotal_num">{{ formatAmount(total) }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="priceLine priceLine_total">
+                        <div class="priceTotal_title" style="font-weight: 400">{{ $t('pendingPayment.youhui') }}</div>
+                        <div class="priceRight" style="font-weight: 400; color: #7c889c">
+                            <div class="trade-price-container price">
+                                <span class="trade-price-symbol priceTotal_unit" style="font-weight: 400; color: #7c889c">$</span>
+                                <span class="trade-price-integer priceTotal_num" style="font-weight: 400; color: #7c889c">0</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="paymentCard" class="trade-container type-of-normal rounded-8 mx-16 bg-gray mt-24 mb-24 pb-20 pt-20">
+                        <div class="SettlementOption">
+                            <div class="title">
+                                <label class="ant-checkbox-wrapper">
+                                    <span>
+                                        <div class="option">
+                                            <img
+                                                src="https://img.alicdn.com/imgextra/i2/O1CN01Ao5ka31RmZsasktnV_!!6000000002154-2-tps-88-88.png"
+                                                class="optionIcon"
+                                            />
+                                            <div class="titleArea">
+                                                <div class="clamp-wrap clamp-ellipsis optionTitle" style="-webkit-line-clamp: unset">
+                                                    {{ $t('pendingPayment.paymentmethod') }}
+                                                </div>
+                                                <div
+                                                    class="clamp-wrap clamp-ellipsis optionSubTitle"
+                                                    style="-webkit-line-clamp: unset"
+                                                ></div>
+                                            </div>
+                                        </div>
+                                    </span>
+                                </label>
+                            </div>
+                            <div class="SettlementInstallmentOptionArea">
+                                <div class="optionArea">
+                                    <div
+                                        class="installmentOption"
+                                        :class="selectedPaymentMethod == 'PayPal' ? 'isSelect' : ''"
+                                        @click="selectPaymentMethod('PayPal')"
+                                    >
+                                        <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/paypal.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">
+                                                        PayPal
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div v-if="selectedPaymentMethod === 'PayPal'" class="checkmark">✔</div>
+                                        </div>
+                                    </div>
+                                    <!-- <div
+                                        class="installmentOption"
+                                        :class="selectedPaymentMethod == 'Alipay' ? 'isSelect' : ''"
+                                        @click="selectPaymentMethod('Alipay')"
+                                    >
+                                        <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">
+                                                        支付宝
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div v-if="selectedPaymentMethod === 'Alipay'" class="checkmark">✔</div>
+                                        </div>
+                                    </div> -->
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="SettlementSubmit">
+                <div class="price">
+                    <p class="title2">{{ $t('pendingPayment.Disbursements') }}</p>
+                    <div class="totalPrice">
+                        <div class="trade-price-container">
+                            <span class="trade-price-symbol totalPrice_unit"><span class="currency">$</span></span>
+                            <span class="trade-price-integer totalPrice_num">{{ formatAmount(total) }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="btnBox">
+                    <div class="btn" @click="submit">{{ $t('pendingPayment.submitOrder') }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+           
+            orderInfo: {},
+            articleInfo: {},
+            journalInfo: {},
+            total: '',
+            selectedPaymentMethod: 'PayPal', // 默认选中 PayPal
+            articleId: this.$route.query.id,
+            urlList: {
+                detail: 'api/Order/preOrderDetail',
+                createdOrder: 'api/Order/creatArticleOrder',
+                completeOrder: 'api/Order/completeOrder',
+            },
+            orderId: '1234567890', // 订单号
+            orderItems: [], // 订单明细
+            totalAmount: '130.00', // 订单总价
+            needInvoice: false, // 是否需要发票
+            invoiceTitle: '', // 发票抬头
+            invoiceContent: '' // 发票内容
+        };
+    },
+    methods: {
+        submit() {
+            // 假设 PayPal 按钮的容器有 id="paypal-button-container"
+            const paypalButtonContainer = document.getElementById('paypal-container');
+
+            // 删除所有 PayPal 按钮
+            if (paypalButtonContainer) {
+                paypalButtonContainer.innerHTML = '';
+                paypalButtonContainer.innerHTML = '<div id="paypal-payment-button"></div>';
+            }
+            if (process.env.NODE_ENV === 'development') {
+                console.log('当前是开发环境');
+            } else if (process.env.NODE_ENV === 'production') {
+                console.log('当前是生产环境');
+            } else if (process.env.NODE_ENV === 'test') {
+                console.log('当前是测试环境');
+            }
+
+            if (this.selectedPaymentMethod == 'PayPal') {
+                this.getPayPal();
+            }
+        },
+        getPayPal(id) {
+            var that = this;
+            window.paypal
+                .Buttons({
+                    style: {
+                        layout: 'horizontal', // 水平布局
+                        shape: 'rect', // 矩形形状
+                        label: 'paypal', // 显示 PayPal 标签
+                        tagline: false, // 隐藏标语
+                        color: 'blue', // 按钮颜色为蓝色
+                        size: 'small' // 按钮大小为大
+                    },
+                    onInit: () => {
+                        // 支付按钮加载完成 通知原生关闭loading
+                        console.log('--------1.支付按钮加载完成 关闭loading--------');
+                        // 自动点击 执行支付
+                        console.log('--------2.自动点击 执行支付--------');
+                        // 如果按钮获取到 就 自动执行点击 否则显示按钮
+                        const paypalButton = window.frames[1].document.querySelector('.paypal-button');
+                        if (paypalButton) paypalButton.click();
+                        else {
+                            document.querySelector('#paypal-container').style.display = 'block';
+                            // document.querySelector('#loading').style.display = 'none';
+                        }
+                    },
+                    createOrder: (data, actions) => {
+                        return this.$api
+                            .post(this.urlList.createdOrder, {
+                                article_id: this.articleId
+                            })
+                            .then((res) => {
+                                console.log('res at line 222:', res);
+that.orderInfo=res.data.detail
+                                document.querySelector('#paypal-container').style.display = 'none';
+                                return res.data.paypal.jsonResponse.id;
+                            });
+                    },
+                    onApprove(data, actions) {
+                        return actions.order.capture().then((details) => {
+                        	console.log('details at line 232:', details.id)
+                           
+                        
+                            const loading = that.$loading({
+                                lock: true,
+                                text: 'Loading',
+                                spinner: 'el-icon-loading',
+                                background: 'rgba(0, 0, 0, 0.7)'
+                            });
+                            setTimeout(() => {
+                                loading.close();
+                                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: {
+                                        id: that.articleId
+                                    }
+                                });
+                            }, 500);
+                        });
+                    },
+                    onError(error) {
+                        console.error('支付失败：', error);
+                        that.$message.error('Payment error, please contact the journal editor!');
+                    }
+                })
+                .render('#paypal-payment-button')
+                .then(() => {})
+                .catch((err) => {
+                    console.error('Error rendering PayPal button:', err);
+                });
+            document.querySelector('.paypal-overlay').addEventListener('click', function (event) {
+                event.stopPropagation();
+            });
+        },
+        getDetail() {
+            this.$api
+                .post(this.urlList.detail, {
+                    article_id: this.articleId
+                })
+                .then((res) => {
+                    console.log('res at line 191:', res);
+                    if (res.code == 0) {
+                        this.articleInfo = res.data.article_detail;
+                        this.journalInfo = res.data.journal_detail;
+                        // this.orderItems = [
+                        //     {
+                        //         ...this.articleInfo,
+                        //         fee: this.journalInfo.fee,
+                        //         journal: this.journalInfo.title
+                        //     }
+                        // ];
+                        this.total = this.journalInfo.fee;
+                    }
+                });
+        },
+        formatAmount(amount) {
+            return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        },
+        selectPaymentMethod(method) {
+            console.log('method at line 191:', method);
+            this.selectedPaymentMethod = method;
+            this.$forceUpdate();
+        },
+        payWithAlipay() {
+            // 实现支付宝支付逻辑
+            alert('使用支付宝支付');
+        },
+        payWithPayPal() {
+            // 实现PayPal支付逻辑
+            alert('使用PayPal支付');
+        }
+    },
+    created() {
+        this.getDetail();
+    },
+    activated() {
+        this.getDetail();
+    }
+};
+</script>
+<style scoped>
+.order-confirmation {
+    text-align: left;
+    padding: 20px;
+    background-color: #fff;
+    /* border: 1px solid #ccc; */
+    border-radius: 16px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    /* margin: 20px auto; */
+    margin-top: 20;
+
+    box-sizing: border-box;
+}
+h3 {
+    margin-bottom: 20px;
+}
+.order-confirmation-box {
+    width: 1040px;
+    margin: 0 auto;
+    height: 100%;
+
+    padding-top: 20px;
+    box-sizing: border-box;
+    /* background-color: #f3f6f8; */
+}
+.orderHeader {
+    align-items: center;
+    background-color: #f3f6f8;
+    border-radius: 8px;
+    color: #11192d;
+    display: flex;
+    flex-direction: row;
+    font-size: 14px;
+    height: 48px;
+    padding: 0 16px;
+    text-align: center;
+}
+.grey {
+    width: 100%;
+    overflow: hidden;
+    padding: 20px;
+    box-sizing: border-box;
+    background-color: #f3f6f8;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+::v-deep .el-table th {
+    background-color: #f3f6f8 !important;
+    color: #11192d !important;
+}
+::v-deep .el-table {
+    border-top-left-radius: 8px !important;
+    border-top-right-radius: 8px !important;
+}
+.price-24 {
+    font-size: 30px;
+    height: 30px;
+    line-height: 34px;
+}
+.trade-price-container {
+    float: right;
+    font-weight: bold;
+    /* width: 100%; */
+    /* align-items: flex-end; */
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.trade-price-label,
+.trade-price-symbol {
+    color: #ff5000;
+    font-size: 16px;
+    height: 16px;
+    line-height: 16px;
+}
+
+.trade-price-symbol {
+    /* font-family: AlibabaSans102v1TaoBao-Bold */
+}
+
+.trade-price-decimal,
+.trade-price-integer,
+.trade-price-point {
+    color: #ff5000;
+    /* font-family: AlibabaSans102v1TaoBao-Bold; */
+    font-size: 26px;
+    height: 26px;
+    line-height: 26px;
+}
+.super-text,
+.trade-tips {
+    color: #50607a;
+    font-size: 12px;
+}
+
+#settlementContainer {
+    background-image: linear-gradient(180deg, #ffebe0, #fff 100px);
+}
+.rounded-t-16 {
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+}
+.bg-white {
+    background-color: #fff;
+    margin-top: 20px;
+}
+.SettlementHeader {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 2px;
+    padding: 24px 16px;
+}
+
+.title1 {
+    color: #11192d;
+    font-size: 16px;
+    font-weight: 600;
+    height: 16px;
+    line-height: 16px;
+    margin-right: 8px;
+}
+
+.goodNum {
+    align-items: baseline;
+    color: #11192d;
+    display: flex;
+    flex-direction: row;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16px;
+}
+
+.goodNum p {
+    color: #11192d;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 16px;
+    margin: 0 2px;
+    text-align: center;
+}
+
+.priceWrap {
+    padding: 0 16px;
+}
+
+.priceWrap .priceLine {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+}
+
+.priceWrap .priceLine .priceTotal_title {
+    color: #11192d;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.priceWrap .priceLine .priceRight {
+    align-items: flex-end;
+    display: flex;
+    flex-direction: row;
+    padding-right: 16px;
+    position: relative;
+}
+
+.priceWrap .priceLine .priceRight img {
+    height: 8px;
+    position: absolute;
+    right: 0;
+    top: 6px;
+    width: 8px;
+}
+
+.priceWrap .priceLine .priceRight img.arrow_up {
+    transform: rotate(180deg);
+}
+
+.priceWrap .priceLine .priceRight .price {
+    align-items: baseline;
+}
+
+.priceWrap .priceLine_total {
+    margin-bottom: 16px;
+}
+
+.priceWrap .priceTotal_unit {
+    color: #11192d;
+
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 14px;
+    margin-right: 2px;
+}
+
+.priceWrap .priceTotal_num {
+    color: #11192d;
+
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 18px;
+}
+
+.priceWrap .pricePromotion_pre {
+    color: #ff5000;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 14px;
+}
+
+.priceWrap .pricePromotion_unit {
+    color: #ff5000;
+
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 14px;
+    margin: 0 2px 0 4px;
+}
+
+.priceWrap .pricePromotion_num {
+    color: #ff5000;
+
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 18px;
+}
+.rounded-8 {
+    border-radius: 8px;
+}
+.SettlementOption--Qu5uk29m {
+    margin-bottom: 16px;
+}
+
+.SettlementOption--Qu5uk29m:last-child {
+    margin-bottom: 0;
+}
+
+.option {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    white-space: nowrap;
+    word-break: keep-all;
+}
+
+.optionIcon {
+    height: 16px;
+    margin-right: 8px;
+    width: 16px;
+}
+
+.titleArea {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.optionArea {
+    -moz-column-gap: 8px;
+    column-gap: 8px;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 20px;
+}
+
+.optionSubTitle {
+    color: #7c889c;
+    font-size: 12px;
+}
+
+.optionTitle {
+    color: #11192d;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 14px;
+}
+.bg-gray {
+    background-color: #f3f6f8;
+}
+.pb-20 {
+    padding-bottom: 20px;
+}
+.installmentOption {
+    background-color: #fff;
+    border-radius: 4px;
+    cursor: pointer;
+    height: 30px;
+    margin-bottom: 8px;
+    padding: 9px 16px;
+    width: calc(25% - 36px);
+    position: relative;
+}
+.trade-layout-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.trade-layout-col {
+    display: flex;
+    flex-direction: column;
+}
+.icon {
+    height: 16px;
+    margin-right: 8px;
+    width: 16px;
+}
+.iconWrapper {
+    align-items: center;
+    display: flex;
+    height: 100%;
+}
+
+.title {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 16px 12px;
+}
+
+.title .ant-checkbox-wrapper {
+    flex-grow: 1;
+    overflow: hidden;
+}
+
+.title .ant-checkbox + span {
+    overflow: hidden;
+    width: 100%;
+}
+
+.title .ant-checkbox {
+    top: 0;
+}
+.SettlementInstallmentOptionArea,
+.SettlementInstallmentOptionAreaExpanded {
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    padding: 0 16px;
+}
+.pt-20 {
+    padding-top: 20px;
+}
+.settlementPanelContainer {
+    border-bottom: 1px solid #f0f3f5;
+    padding-bottom: 24px;
+}
+.SettlementSubmit {
+    align-items: center;
+    background-color: #fff;
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 16px;
+    box-shadow: 0 -1px 0 0 #f0f3f5;
+    box-sizing: border-box;
+    display: flex;
+    height: 80px;
+    padding: 16px;
+}
+
+.SettlementSubmit,
+.SettlementSubmit .price {
+    justify-content: space-between;
+}
+
+.SettlementSubmit .title2 {
+    color: #11192d;
+    font-size: 14px;
+    font-weight: 400;
+    height: 14px;
+    line-height: 14px;
+}
+
+.SettlementSubmit .totalPrice {
+    align-items: flex-end;
+    display: flex;
+    height: 38px;
+}
+
+.SettlementSubmit .totalPrice_unit {
+    color: #ff5000;
+
+    font-size: 14px;
+}
+
+.SettlementSubmit .totalPrice_num {
+    color: #ff5000;
+
+    font-size: 24px;
+    line-height: 24px;
+}
+
+.SettlementSubmit .btnBox {
+    align-items: center;
+    display: flex;
+}
+
+.SettlementSubmit .back {
+    background-color: #fff;
+    border: 1px solid #e5e8ec;
+    border-radius: 8px;
+    color: #7c889c;
+    cursor: pointer;
+    flex: 0 0 56px;
+    font-size: 16px;
+    font-weight: 600;
+    height: 46px;
+    line-height: 46px;
+    position: relative;
+    text-align: center;
+    transition: all 0.3s ease;
+    width: 56px;
+}
+
+.SettlementSubmit .back:hover:after {
+    background-color: rgba(0, 0, 0, 0.03);
+    border-radius: 8px;
+    content: ' ';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+}
+
+.SettlementSubmit .btn {
+    background-color: #ff5000;
+    border-radius: 8px;
+    color: #fff;
+    cursor: pointer;
+    flex: 0 0 160px;
+    font-size: 16px;
+    font-weight: 600;
+    height: 48px;
+    line-height: 48px;
+    margin-left: 12px;
+    position: relative;
+    text-align: center;
+    transition: all 0.3s ease;
+    width: 160px;
+}
+
+.SettlementSubmit .btn:hover:after {
+    background-color: rgba(0, 0, 0, 0.03);
+    border-radius: 8px;
+    content: ' ';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+}
+
+.btn_disabled {
+    color: hsla(0, 0%, 100%, 0.5) !important;
+    pointer-events: none !important;
+}
+
+.btn_loading {
+    background-color: #f5f5f5;
+}
+.checkmark {
+    position: absolute;
+    right: 5px;
+    top: 16px;
+    font-size: 20px;
+    color: #ff5000;
+}
+.isSelect {
+    border: 0.5px solid #ff5000;
+}
+.tableInfo{
+    font-size: 14px;
+}
+</style>
diff --git a/src/components/page/components/pendingPayment/OrderDetail.vue b/src/components/page/components/pendingPayment/OrderDetail.vue
new file mode 100644
index 0000000..28e277d
--- /dev/null
+++ b/src/components/page/components/pendingPayment/OrderDetail.vue
@@ -0,0 +1,800 @@
+<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>
+
+        <div class="order-confirmation">
+            
+            <el-descriptions :title="$t('pendingPayment.orderDetail')" 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')"><p>{{ articleInfo.title }}</p></el-descriptions-item>
+   
+    
+</el-descriptions>
+       
+        </div>
+        <div
+            id="settlementContainer"
+            class="trade-container type-of-affix-right-panel-to-bottom bg-white overflow-hidden flex-col rounded-t-16"
+        >
+            <div class="SettlementHeader">
+                <div class="title1">{{ $t('pendingPayment.payDetail') }}</div>
+            </div>
+            <div class="settlementPanelContainer">
+                <div class="priceWrap">
+                    <div class="priceLine priceLine_total">
+                        <div class="priceTotal_title">{{ $t('pendingPayment.total') }}</div>
+                        <div class="priceRight">
+                            <div class="trade-price-container price">
+                                <span class="trade-price-symbol priceTotal_unit"><span class="currency">$</span></span>
+                                <span class="trade-price-integer priceTotal_num">{{ formatAmount(total) }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="priceLine priceLine_total">
+                        <div class="priceTotal_title" style="font-weight: 400">{{ $t('pendingPayment.youhui') }}</div>
+                        <div class="priceRight" style="font-weight: 400; color: #7c889c">
+                            <div class="trade-price-container price">
+                                <span class="trade-price-symbol priceTotal_unit" style="font-weight: 400; color: #7c889c">$</span>
+                                <span class="trade-price-integer priceTotal_num" style="font-weight: 400; color: #7c889c">0</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="paymentCard" class="trade-container type-of-normal rounded-8 mx-16 bg-gray mt-24 mb-24 pb-20 pt-20">
+                        <div class="SettlementOption">
+                            <div class="title">
+                                <label class="ant-checkbox-wrapper">
+                                    <span>
+                                        <div class="option">
+                                            <img
+                                                src="https://img.alicdn.com/imgextra/i2/O1CN01Ao5ka31RmZsasktnV_!!6000000002154-2-tps-88-88.png"
+                                                class="optionIcon"
+                                            />
+                                            <div class="titleArea">
+                                                <div class="clamp-wrap clamp-ellipsis optionTitle" style="-webkit-line-clamp: unset">
+                                                    {{ $t('pendingPayment.paymentmethod') }}
+                                                </div>
+                                                <div
+                                                    class="clamp-wrap clamp-ellipsis optionSubTitle"
+                                                    style="-webkit-line-clamp: unset"
+                                                ></div>
+                                            </div>
+                                        </div>
+                                    </span>
+                                </label>
+                            </div>
+                            <div class="SettlementInstallmentOptionArea">
+                                <div class="optionArea">
+                                    <div
+                                        class="installmentOption"
+                                        :class="selectedPaymentMethod == 'PayPal' ? 'isSelect' : ''"
+                                        @click="selectPaymentMethod('PayPal')"
+                                    >
+                                        <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/paypal.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">
+                                                        PayPal
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div v-if="selectedPaymentMethod === 'PayPal'" class="checkmark">✔</div>
+                                        </div>
+                                    </div>
+                                    <!-- <div
+                                        class="installmentOption"
+                                        :class="selectedPaymentMethod == 'Alipay' ? 'isSelect' : ''"
+                                        @click="selectPaymentMethod('Alipay')"
+                                    >
+                                        <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">
+                                                        支付宝
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div v-if="selectedPaymentMethod === 'Alipay'" class="checkmark">✔</div>
+                                        </div>
+                                    </div> -->
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="SettlementSubmit">
+                <div class="price">
+                    <p class="title2">{{ $t('pendingPayment.Disbursements') }}</p>
+                    <div class="totalPrice">
+                        <div class="trade-price-container">
+                            <span class="trade-price-symbol totalPrice_unit"><span class="currency">$</span></span>
+                            <span class="trade-price-integer totalPrice_num">{{ formatAmount(total) }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="btnBox">
+                    <div class="btn">{{ $t('pendingPayment.submitOrder') }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+        
+            orderInfo: {},
+            articleInfo: {},
+            journalInfo: {},
+            total: '',
+            selectedPaymentMethod: 'PayPal', // 默认选中 PayPal
+            articleId: this.$route.query.id,
+            urlList: {
+                detail: 'api/Order/preOrderDetail',
+                createdOrder: 'api/Order/creatArticleOrder',
+                completeOrder: 'api/Order/completeOrder',
+            },
+            orderId: '1234567890', // 订单号
+            orderItems: [], // 订单明细
+            totalAmount: '130.00', // 订单总价
+            needInvoice: false, // 是否需要发票
+            invoiceTitle: '', // 发票抬头
+            invoiceContent: '' // 发票内容
+        };
+    },
+    methods: {
+        submit() {
+            // 假设 PayPal 按钮的容器有 id="paypal-button-container"
+            const paypalButtonContainer = document.getElementById('paypal-container');
+
+            // 删除所有 PayPal 按钮
+            if (paypalButtonContainer) {
+                paypalButtonContainer.innerHTML = '';
+                paypalButtonContainer.innerHTML = '<div id="paypal-payment-button"></div>';
+            }
+            if (process.env.NODE_ENV === 'development') {
+                console.log('当前是开发环境');
+            } else if (process.env.NODE_ENV === 'production') {
+                console.log('当前是生产环境');
+            } else if (process.env.NODE_ENV === 'test') {
+                console.log('当前是测试环境');
+            }
+
+            if (this.selectedPaymentMethod == 'PayPal') {
+                this.getPayPal();
+            }
+        },
+        getPayPal(id) {
+            var that = this;
+            window.paypal
+                .Buttons({
+                    style: {
+                        layout: 'horizontal', // 水平布局
+                        shape: 'rect', // 矩形形状
+                        label: 'paypal', // 显示 PayPal 标签
+                        tagline: false, // 隐藏标语
+                        color: 'blue', // 按钮颜色为蓝色
+                        size: 'small' // 按钮大小为大
+                    },
+                    onInit: () => {
+                        // 支付按钮加载完成 通知原生关闭loading
+                        console.log('--------1.支付按钮加载完成 关闭loading--------');
+                        // 自动点击 执行支付
+                        console.log('--------2.自动点击 执行支付--------');
+                        // 如果按钮获取到 就 自动执行点击 否则显示按钮
+                        const paypalButton = window.frames[1].document.querySelector('.paypal-button');
+                        if (paypalButton) paypalButton.click();
+                        else {
+                            document.querySelector('#paypal-container').style.display = 'block';
+                            // document.querySelector('#loading').style.display = 'none';
+                        }
+                    },
+                    createOrder: (data, actions) => {
+                        return this.$api
+                            .post(this.urlList.createdOrder, {
+                                article_id: this.articleId
+                            })
+                            .then((res) => {
+                                console.log('res at line 222:', res);
+that.orderInfo=res.data.detail
+                                document.querySelector('#paypal-container').style.display = 'none';
+                                return res.data.paypal.jsonResponse.id;
+                            });
+                    },
+                    onApprove(data, actions) {
+                        return actions.order.capture().then((details) => {
+                        	console.log('details at line 232:', details.id)
+                           
+                        
+                            const loading = that.$loading({
+                                lock: true,
+                                text: 'Loading',
+                                spinner: 'el-icon-loading',
+                                background: 'rgba(0, 0, 0, 0.7)'
+                            });
+                            setTimeout(() => {
+                                loading.close();
+                                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: {
+                                        id: that.articleId
+                                    }
+                                });
+                            }, 500);
+                        });
+                    },
+                    onError(error) {
+                        console.error('支付失败：', error);
+                        that.$message.error('Payment error, please contact the journal editor!');
+                    }
+                })
+                .render('#paypal-payment-button')
+                .then(() => {})
+                .catch((err) => {
+                    console.error('Error rendering PayPal button:', err);
+                });
+            document.querySelector('.paypal-overlay').addEventListener('click', function (event) {
+                event.stopPropagation();
+            });
+        },
+        getDetail() {
+            this.$api
+                .post(this.urlList.detail, {
+                    article_id: this.articleId
+                })
+                .then((res) => {
+                    console.log('res at line 191:', res);
+                    if (res.code == 0) {
+                        this.articleInfo = res.data.article_detail;
+                        this.journalInfo = res.data.journal_detail;
+                        // this.orderItems = [
+                        //     {
+                        //         ...this.articleInfo,
+                        //         fee: this.journalInfo.fee,
+                        //         journal: this.journalInfo.title
+                        //     }
+                        // ];
+                        this.total = this.journalInfo.fee;
+                    }
+                });
+        },
+        formatAmount(amount) {
+            return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        },
+        selectPaymentMethod(method) {
+            console.log('method at line 191:', method);
+            this.selectedPaymentMethod = method;
+            this.$forceUpdate();
+        },
+        payWithAlipay() {
+            // 实现支付宝支付逻辑
+            alert('使用支付宝支付');
+        },
+        payWithPayPal() {
+            // 实现PayPal支付逻辑
+            alert('使用PayPal支付');
+        }
+    },
+    created() {
+        this.getDetail();
+    },
+    activated() {
+        this.getDetail();
+    }
+};
+</script>
+<style scoped>
+.order-confirmation {
+    text-align: left;
+    padding: 20px;
+    background-color: #fff;
+    /* border: 1px solid #ccc; */
+    border-radius: 16px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    /* margin: 20px auto; */
+    margin-top: 20;
+
+    box-sizing: border-box;
+}
+h3 {
+    margin-bottom: 20px;
+}
+.order-confirmation-box {
+    width: 1040px;
+    margin: 0 auto;
+    height: 100%;
+
+    padding-top: 20px;
+    box-sizing: border-box;
+    /* background-color: #f3f6f8; */
+}
+.orderHeader {
+    align-items: center;
+    background-color: #f3f6f8;
+    border-radius: 8px;
+    color: #11192d;
+    display: flex;
+    flex-direction: row;
+    font-size: 14px;
+    height: 48px;
+    padding: 0 16px;
+    text-align: center;
+}
+.grey {
+    width: 100%;
+    overflow: hidden;
+    padding: 20px;
+    box-sizing: border-box;
+    background-color: #f3f6f8;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+::v-deep .el-table th {
+    background-color: #f3f6f8 !important;
+    color: #11192d !important;
+}
+::v-deep .el-table {
+    border-top-left-radius: 8px !important;
+    border-top-right-radius: 8px !important;
+}
+.price-24 {
+    font-size: 30px;
+    height: 30px;
+    line-height: 34px;
+}
+.trade-price-container {
+    float: right;
+    font-weight: bold;
+    /* width: 100%; */
+    /* align-items: flex-end; */
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.trade-price-label,
+.trade-price-symbol {
+    color: #ff5000;
+    font-size: 16px;
+    height: 16px;
+    line-height: 16px;
+}
+
+.trade-price-symbol {
+    /* font-family: AlibabaSans102v1TaoBao-Bold */
+}
+
+.trade-price-decimal,
+.trade-price-integer,
+.trade-price-point {
+    color: #ff5000;
+    /* font-family: AlibabaSans102v1TaoBao-Bold; */
+    font-size: 26px;
+    height: 26px;
+    line-height: 26px;
+}
+.super-text,
+.trade-tips {
+    color: #50607a;
+    font-size: 12px;
+}
+
+#settlementContainer {
+    background-image: linear-gradient(180deg, #ffebe0, #fff 100px);
+}
+.rounded-t-16 {
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+}
+.bg-white {
+    background-color: #fff;
+    margin-top: 20px;
+}
+.SettlementHeader {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 2px;
+    padding: 24px 16px;
+}
+
+.title1 {
+    color: #11192d;
+    font-size: 16px;
+    font-weight: 600;
+    height: 16px;
+    line-height: 16px;
+    margin-right: 8px;
+}
+
+.goodNum {
+    align-items: baseline;
+    color: #11192d;
+    display: flex;
+    flex-direction: row;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16px;
+}
+
+.goodNum p {
+    color: #11192d;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 16px;
+    margin: 0 2px;
+    text-align: center;
+}
+
+.priceWrap {
+    padding: 0 16px;
+}
+
+.priceWrap .priceLine {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+}
+
+.priceWrap .priceLine .priceTotal_title {
+    color: #11192d;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.priceWrap .priceLine .priceRight {
+    align-items: flex-end;
+    display: flex;
+    flex-direction: row;
+    padding-right: 16px;
+    position: relative;
+}
+
+.priceWrap .priceLine .priceRight img {
+    height: 8px;
+    position: absolute;
+    right: 0;
+    top: 6px;
+    width: 8px;
+}
+
+.priceWrap .priceLine .priceRight img.arrow_up {
+    transform: rotate(180deg);
+}
+
+.priceWrap .priceLine .priceRight .price {
+    align-items: baseline;
+}
+
+.priceWrap .priceLine_total {
+    margin-bottom: 16px;
+}
+
+.priceWrap .priceTotal_unit {
+    color: #11192d;
+
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 14px;
+    margin-right: 2px;
+}
+
+.priceWrap .priceTotal_num {
+    color: #11192d;
+
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 18px;
+}
+
+.priceWrap .pricePromotion_pre {
+    color: #ff5000;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 14px;
+}
+
+.priceWrap .pricePromotion_unit {
+    color: #ff5000;
+
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 14px;
+    margin: 0 2px 0 4px;
+}
+
+.priceWrap .pricePromotion_num {
+    color: #ff5000;
+
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 18px;
+}
+.rounded-8 {
+    border-radius: 8px;
+}
+.SettlementOption--Qu5uk29m {
+    margin-bottom: 16px;
+}
+
+.SettlementOption--Qu5uk29m:last-child {
+    margin-bottom: 0;
+}
+
+.option {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    white-space: nowrap;
+    word-break: keep-all;
+}
+
+.optionIcon {
+    height: 16px;
+    margin-right: 8px;
+    width: 16px;
+}
+
+.titleArea {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.optionArea {
+    -moz-column-gap: 8px;
+    column-gap: 8px;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 20px;
+}
+
+.optionSubTitle {
+    color: #7c889c;
+    font-size: 12px;
+}
+
+.optionTitle {
+    color: #11192d;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 14px;
+}
+.bg-gray {
+    background-color: #f3f6f8;
+}
+.pb-20 {
+    padding-bottom: 20px;
+}
+.installmentOption {
+    background-color: #fff;
+    border-radius: 4px;
+    cursor: pointer;
+    height: 30px;
+    margin-bottom: 8px;
+    padding: 9px 16px;
+    width: calc(25% - 36px);
+    position: relative;
+}
+.trade-layout-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.trade-layout-col {
+    display: flex;
+    flex-direction: column;
+}
+.icon {
+    height: 16px;
+    margin-right: 8px;
+    width: 16px;
+}
+.iconWrapper {
+    align-items: center;
+    display: flex;
+    height: 100%;
+}
+
+.title {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 16px 12px;
+}
+
+.title .ant-checkbox-wrapper {
+    flex-grow: 1;
+    overflow: hidden;
+}
+
+.title .ant-checkbox + span {
+    overflow: hidden;
+    width: 100%;
+}
+
+.title .ant-checkbox {
+    top: 0;
+}
+.SettlementInstallmentOptionArea,
+.SettlementInstallmentOptionAreaExpanded {
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    padding: 0 16px;
+}
+.pt-20 {
+    padding-top: 20px;
+}
+.settlementPanelContainer {
+    border-bottom: 1px solid #f0f3f5;
+    padding-bottom: 24px;
+}
+.SettlementSubmit {
+    align-items: center;
+    background-color: #fff;
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 16px;
+    box-shadow: 0 -1px 0 0 #f0f3f5;
+    box-sizing: border-box;
+    display: flex;
+    height: 80px;
+    padding: 16px;
+}
+
+.SettlementSubmit,
+.SettlementSubmit .price {
+    justify-content: space-between;
+}
+
+.SettlementSubmit .title2 {
+    color: #11192d;
+    font-size: 14px;
+    font-weight: 400;
+    height: 14px;
+    line-height: 14px;
+}
+
+.SettlementSubmit .totalPrice {
+    align-items: flex-end;
+    display: flex;
+    height: 38px;
+}
+
+.SettlementSubmit .totalPrice_unit {
+    color: #ff5000;
+
+    font-size: 14px;
+}
+
+.SettlementSubmit .totalPrice_num {
+    color: #ff5000;
+
+    font-size: 24px;
+    line-height: 24px;
+}
+
+.SettlementSubmit .btnBox {
+    align-items: center;
+    display: flex;
+}
+
+.SettlementSubmit .back {
+    background-color: #fff;
+    border: 1px solid #e5e8ec;
+    border-radius: 8px;
+    color: #7c889c;
+    cursor: pointer;
+    flex: 0 0 56px;
+    font-size: 16px;
+    font-weight: 600;
+    height: 46px;
+    line-height: 46px;
+    position: relative;
+    text-align: center;
+    transition: all 0.3s ease;
+    width: 56px;
+}
+
+.SettlementSubmit .back:hover:after {
+    background-color: rgba(0, 0, 0, 0.03);
+    border-radius: 8px;
+    content: ' ';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+}
+
+.SettlementSubmit .btn {
+    background-color: #ff5000;
+    border-radius: 8px;
+    color: #fff;
+    cursor: pointer;
+    flex: 0 0 160px;
+    font-size: 16px;
+    font-weight: 600;
+    height: 48px;
+    line-height: 48px;
+    margin-left: 12px;
+    position: relative;
+    text-align: center;
+    transition: all 0.3s ease;
+    width: 160px;
+}
+
+.SettlementSubmit .btn:hover:after {
+    background-color: rgba(0, 0, 0, 0.03);
+    border-radius: 8px;
+    content: ' ';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+}
+
+.btn_disabled {
+    color: hsla(0, 0%, 100%, 0.5) !important;
+    pointer-events: none !important;
+}
+
+.btn_loading {
+    background-color: #f5f5f5;
+}
+.checkmark {
+    position: absolute;
+    right: 5px;
+    top: 16px;
+    font-size: 20px;
+    color: #ff5000;
+}
+.isSelect {
+    border: 0.5px solid #ff5000;
+}
+.tableInfo{
+    font-size: 14px;
+}
+</style>
diff --git a/src/components/page/components/pendingPayment/PayPalButton copy 2.vue b/src/components/page/components/pendingPayment/PayPalButton copy 2.vue
new file mode 100644
index 0000000..00f4837
--- /dev/null
+++ b/src/components/page/components/pendingPayment/PayPalButton copy 2.vue	
@@ -0,0 +1,84 @@
+<template>
+    <div ref="paypalButtonContainer"></div>
+  </template>
+  
+  <script>
+  import { defineComponent, onMounted, ref } from "vue";
+  
+  export default defineComponent({
+    name: "PayPalButton",
+    
+    props: {
+      amount: {
+        type: String,
+        required: true,
+      },
+      clientId: {
+        type: String,
+        required: true,
+      },
+    
+    },
+  
+    setup(props) {
+      const paypalButtonContainer = ref(null);
+  
+      // 动态加载 PayPal SDK
+      onMounted(() => {
+        if (!window.paypal) {
+          const script = document.createElement("script");
+          script.src = `https://www.paypal.com/sdk/js?client-id=${props.clientId}`;
+          script.async = true;
+          script.onload = () => renderPayPalButton();
+          document.body.appendChild(script);
+        } else {
+          renderPayPalButton();
+        }
+      });
+  
+      // 渲染 PayPal 按钮
+      const renderPayPalButton = () => {
+        
+        window.paypal.Buttons({
+            style: {
+    		layout: 'horizontal',
+    		shape:  'rect',
+    		label:  'paypal',
+    		tagline: false
+    	},
+          createOrder(data, actions) {
+            // return actions.order.create({
+            //   purchase_units: [
+            //     {
+            //       amount: {
+            //         value: props.amount, // 订单金额
+            //       },
+            //     },
+            //   ],
+            // });
+            return '6VT20279NK3463528'
+          },
+          onApprove(data, actions) {
+            return actions.order.capture().then((details) => {
+              console.log("支付成功！", details);
+              alert(`支付成功！支付者：${details.payer.name.given_name}`);
+            });
+          },
+          onError(error) {
+            console.error("支付失败：", error);
+            alert("支付失败，请重试！");
+          },
+        }).render(paypalButtonContainer.value);
+      };
+  
+      return {
+        paypalButtonContainer,
+      };
+    },
+  });
+  </script>
+  
+  <style scoped>
+  /* Add custom styles for the PayPal button if needed */
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/page/components/pendingPayment/PayPalButton copy.vue b/src/components/page/components/pendingPayment/PayPalButton copy.vue
deleted file mode 100644
index 7649284..0000000
--- a/src/components/page/components/pendingPayment/PayPalButton copy.vue	
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <div>
-        <PayPal
-            currency="USD"
-            :client="paypal"
-            :amount="amount"
-            :env="env"
-            @payment-authorized="onPaymentSuccess"
-            @payment-completed="onPaymentError"
-        >
-        </PayPal>
-    </div>
-</template>
-
-<script>
-import PayPal from 'vue-paypal-checkout';
-export default {
-    data() {
-        return {
-            paypal: {
-                sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr',
-                production: 'Ad-9iuPrN9U8zQxfcog7QweDSJsDY6ns2I5WaPjuuN_4ToE5LEGASm09j9x7VC0fbQkTmnpFtrZYpHEE'
-            },
-            // myItems: [
-            //     {
-            //         name: 'hat',
-            //         quantity: '1',
-            //         price: '5',
-            //         currency: 'USD'
-            //     },
-            //     {
-            //         name: 'handbag',
-            //         // description: "Black handbag.",
-            //         quantity: '1',
-            //         price: '5',
-            //         currency: 'USD'
-            //     }
-            // ],
-            amount: '9.99', // Amount to be paid
-            env: 'sandbox'
-        };
-    },
-    components: {
-        PayPal
-    },
-    methods: {
-        onPaymentSuccess(payment) {
-            try {
-                console.log('Payment successful!', payment);
-                this.$emit('payment-success', payment);
-            } catch (error) {
-                console.error('Error in onPaymentSuccess callback:', error);
-            }
-        },
-
-        onPaymentError(error) {
-            try {
-                console.error('Payment error:', error);
-                this.$emit('payment-error', error);
-            } catch (err) {
-                console.error('Error in onPaymentError callback:', err);
-            }
-        }
-    }
-};
-</script>
-
-<style scoped></style>
diff --git a/src/components/page/components/pendingPayment/PayPalButton.vue b/src/components/page/components/pendingPayment/PayPalButton.vue
index 41c3270..7af2b53 100644
--- a/src/components/page/components/pendingPayment/PayPalButton.vue
+++ b/src/components/page/components/pendingPayment/PayPalButton.vue
@@ -1,126 +1,69 @@
 <template>
-    <div>
-        <PayPal
-            currency="USD"
-            :client="paypal"
-            :amount="amount"
-            :env="env"
-            :commit="true"
-            @payment-authorized="onPaymentSuccess"
-            @payment-completed="onPaymentCompleted"
-            @payment-cancelled="onPaymentCancel"
-            locale="en_US"
-            :button-style="myStyle"
-            :token="paymentToken"
-            :paypal-button="paypalButton"
-        >
-        </PayPal>
+    <!-- 动态生成一个唯一的ID以确保每个PayPal按钮都有一个独立的容器 -->
+    <div >
+        
+    <div :id="'paypal-button-container-' + orderId" ref="paypalButtonContainer"></div>
     </div>
+   
 </template>
-<!-- paymentID= "PAY-3L661344P7749433KLD2R5ZQ" -->
+
 <script>
-import PayPal from 'vue-paypal-checkout';
-export default {
-    data() {
-        return {
-            myStyle: {
-                label: 'checkout',
-                size: 'responsive',
-                shape: 'pill',
-                color: 'blue'
-            },
-            paymentToken: '2S842212TP193105C', // 存储自定义的 token
-            paypal: {
-                sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr',
-                production: 'Ad-9iuPrN9U8zQxfcog7QweDSJsDY6ns2I5WaPjuuN_4ToE5LEGASm09j9x7VC0fbQkTmnpFtrZYpHEE'
-            },
-            // myItems: [
-            //     {
-            //         name: 'hat',
-            //         quantity: '1',
-            //         price: '5',
-            //         currency: 'USD'
-            //     },
-            //     {
-            //         name: 'handbag',
-            //         // description: "Black handbag.",
-            //         quantity: '1',
-            //         price: '5',
-            //         currency: 'USD'
-            //     }
-            // ],
-            amount: '9.99', // Amount to be paid
-            env: 'sandbox'
-        };
+import { defineComponent, onMounted, ref, watch } from 'vue';
+
+export default defineComponent({
+    name: 'PayPalButton',
+
+    props: {
+        amount: {
+            type: String,
+            required: true
+        },
+        clientId: {
+            type: String,
+            required: true,
+            default:'ARyoAhBNlTMDEBb6QvJYmK0gA4cfSS6WY0Vr2uJhX3NOe7V9qVCJuNwuRHRO09WGcTgS5AkuTIgRZDcx'
+        },
+        orderId: {
+            // type: String,
+            // required: true
+        }
     },
-    components: {
-        PayPal
-    },
-    created() {
-        // this.fetchCustomToken();
+    mounted() {
+        this.getPayPal();
     },
     methods: {
-        // 配置 PayPal 按钮（传递自定义的 token）
-        paypalButton(data, actions) {
-            return actions.payment.create({
-                transactions: [
-                    {
-                        amount: {
-                            total: '20.00',
-                            currency: 'USD'
-                        },
-                        custom: this.paymentToken // 将自定义 token 作为 custom 数据传递
+        getPayPal() {
+            var that = this;
+            window.paypal
+                .Buttons({
+                    style: {
+                        layout: 'horizontal', // 水平布局
+                        shape: 'rect', // 矩形形状
+                        label: 'paypal', // 显示 PayPal 标签
+                        tagline: false, // 隐藏标语
+                        color: 'blue', // 按钮颜色为蓝色
+                        size: 'small' // 按钮大小为大
+                    },
+                    createOrder: (data, actions) => {
+                        return '6XN58648LW618025W';
+                    },
+                    onApprove(data, actions) {
+                        return actions.order.capture().then((details) => {
+                            console.log('支付成功！', details);
+                            that.$emit('payment-success', details); // 触发成功事件
+                        });
+                    },
+                    onError(error) {
+                        console.error('支付失败：', error);
+                        that.$emit('payment-error', error); // 触发失败事件
                     }
-                ]
-            });
-        },
-        async fetchCustomToken() {
-            try {
-                this.customToken = '2S842212TP193105C'; // 假设返回的 JSON 里有 token 字段
-            } catch (error) {}
-        },
-
-        onPaymentSuccess(payment) {
-            try {
-                console.log('Payment successful Button!', payment);
-                // this.$emit('payment-success', payment);
-
-                // const token = this.paymentToken;
-
-                // // 使用token进行支付处理
-                // paypal.payment.execute(token, (error, payment) => {
-                // 	console.log('payment at line 73:', payment)
-                //     if (error) {
-                //         // 处理错误
-                //         console.error('Error in onPaymentSuccess callback:', error);
-                //     } else {
-                //         // 处理支付成功的情况
-                //         console.log('Payment successful Button!', payment);
-                //     }
-                // });
-            } catch (error) {
-                console.error('Error in onPaymentSuccess callback:', error);
-            }
-        },
-
-        onPaymentCompleted(error) {
-            try {
-                console.error('Payment paymentCompleted Button:', error);
-                this.$emit('payment-error', error);
-            } catch (err) {
-                console.error('Error in paymentCompleted callback:', err);
-            }
-        },
-        onPaymentCancel(error) {
-            try {
-                console.error('Payment cancel Button:', error);
-                this.$emit('payment-error', error);
-            } catch (err) {
-                console.error('Error in onPaymentCancel callback:', err);
-            }
+                })
+                .render('#paypal-button-container-' + that.orderId);
         }
     }
-};
+});
 </script>
 
-<style scoped></style>
+<style scoped>
+/* 可以添加自定义样式 */
+</style>
diff --git a/src/components/page/components/pendingPayment/index.vue b/src/components/page/components/pendingPayment/index.vue
index e4237fc..51d4cef 100644
--- a/src/components/page/components/pendingPayment/index.vue
+++ b/src/components/page/components/pendingPayment/index.vue
@@ -14,21 +14,18 @@
             <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>
+                     </template>
             </el-table-column>
         </el-table>
     </div>
 </template>
 
 <script>
-import PayPalButton from './PayPalButton.vue';
+
 
 export default {
     components: {
-        PayPalButton
+        
     },
     props: {
         list: {
diff --git a/src/components/page/components/pendingPayment/success.vue b/src/components/page/components/pendingPayment/success.vue
new file mode 100644
index 0000000..9ec0aea
--- /dev/null
+++ b/src/components/page/components/pendingPayment/success.vue
@@ -0,0 +1,118 @@
+<template>
+    <div class="success-box" v-if="articleInfo.accept_sn">
+        <div class="payment-success">
+            <div style="display: flex; align-items: center;margin-bottom: 10px;">
+                <h2 style="margin: 0 auto;display: flex; align-items: center">
+                    <img src="@/assets/img/success.png" alt="" style="margin-right: 20px; width: 128px; height: 128px" />Payment Successful
+                </h2>
+            </div>
+            <p>Thank you for your payment. Your order has been successfully processed.</p>
+            <p>
+                Article ID:
+
+                <span style="color: #333; font-weight: 600"> {{ articleInfo.accept_sn }}</span>
+            </p>
+            <p>
+                Total Amount: <span style="color: #ff5000"><span class="currency">$</span></span
+                ><span style="color: #ff5000; font-size: 24px; line-height: 24px">{{ formatAmount(total) }}</span>
+            </p>
+            <!-- <p>Payment Method: {{ paymentMethod }}</p> -->
+            <p>You will receive an email confirmation shortly.</p>
+            <button @click="goBack">Back to Order List</button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            urlList: {
+                detail: 'api/Order/preOrderDetail',
+                createdOrder: 'api/Order/creatArticleOrder'
+            },
+            articleInfo: {},
+            journalInfo: {},
+            total: '',
+            articleId: this.$route.query.id
+        };
+    },
+    created() {
+        this.getDetail();
+    },
+    methods: {
+        formatAmount(amount) {
+            return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        },
+        getDetail() {
+            this.$api
+                .post(this.urlList.detail, {
+                    article_id: this.articleId
+                })
+                .then((res) => {
+                    console.log('res at line 191:', res);
+                    if (res.code == 0) {
+                        this.articleInfo = res.data.article_detail;
+                        this.journalInfo = res.data.journal_detail;
+
+                        this.total = this.journalInfo.fee;
+                    }
+                });
+        },
+        goBack() {
+            this.$router.replace({ name: 'success' });
+            // 跳转到新的路由
+
+            this.$router.push({
+                path: '/orderListAuthor'
+            });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.payment-success {
+    margin-top: 40px;
+    margin: 0 auto;
+    text-align: center;
+    padding: 20px;
+    background-color: #fff;
+    border: 1px solid #c3e6cb;
+    border-radius: 16px;
+    color: #155724;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+    width: 600px;
+}
+
+h2 {
+    margin-bottom: 20px;
+}
+
+p {
+    margin-bottom: 10px;
+}
+
+button {
+    padding: 10px 20px;
+    background-color: #00c286;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 按钮添加阴影效果 */
+}
+
+button:hover {
+    background-color: #00c286;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 按钮悬停时的阴影效果 */
+}
+.success-box {
+    display: flex;
+    align-items: center;
+    /* justify-content: center; */
+    width: 100%;
+    height: 100%;
+}
+</style>
diff --git a/src/components/page/orderListAuthor.vue b/src/components/page/orderListAuthor.vue
new file mode 100644
index 0000000..63e5643
--- /dev/null
+++ b/src/components/page/orderListAuthor.vue
@@ -0,0 +1,119 @@
+<template>
+    <div>
+      <el-select v-model="state" @change="getList" placeholder="Please select status"
+					style="margin-bottom:10px;width: 200px;">
+					<!-- <el-option :key="0" label="All status" :value="0"></el-option> -->
+					
+					<el-option :key="1" :label="$t('pendingPayment.state0')" :value="0"></el-option>
+					<el-option :key="1" :label="$t('pendingPayment.state1')" :value="1"></el-option>
+					<el-option :key="2" :label="$t('pendingPayment.state2')" :value="2"></el-option>
+					
+				</el-select>
+      <el-table :data="orderList" style="width: 100%">
+           
+            <el-table-column prop="id" label="ID" width="300"><template slot-scope="scope">
+              <p><span>ID：</span>{{ scope.row.article_detail.accept_sn }}</p>
+              <p><span>{{ $t('pendingPayment.journal') }}：</span>{{ scope.row.journal_detail.title }}</p>
+                   
+                </template></el-table-column>
+            <el-table-column prop="title" :label="$t('pendingPayment.title')"><template slot-scope="scope">
+                   {{ scope.row.article_detail.title }}
+                </template>
+            </el-table-column>
+           
+            <el-table-column prop="real_fee" :label="$t('pendingPayment.Paymentamount')" width="140">
+                <template slot-scope="scope">
+                  <span class="currency">$</span> {{ formatAmount(scope.row.real_fee) }}
+                </template>
+                
+            </el-table-column>
+            <el-table-column prop="status" :label="$t('pendingPayment.Paymentstatus')" width="140">
+              <template slot-scope="scope">
+                  <span v-if="scope.row.state==0" style="color: #ff5000;">{{ $t('pendingPayment.state0') }}</span>
+                  <span v-if="scope.row.state==1" style="color: #00c286;">{{ $t('pendingPayment.state1') }}</span>
+                  <span v-if="scope.row.state==2" style="color: #b0b0b0;">{{ $t('pendingPayment.state2') }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="" width="140">
+                <template slot-scope="scope">
+                  <el-button size="mini" style="background: #ff5000 !important;border-color: #ff5000 !important;" type="primary" v-if="scope.row.state==0"  @click="goOrderConfirmation(scope.row)">Payment</el-button>
+                  <!-- <el-button size="mini"  type="primary" v-if="scope.row.state==1"  @click="goOrderDetail(scope.row)">Detail</el-button> -->
+                     </template>
+            </el-table-column>
+        </el-table>
+    </div>
+  </template>
+  
+  <script>
+  import PendingPayment from '@/components/page/components/pendingPayment/index.vue';
+  export default {
+    components: {
+      PendingPayment
+    },
+    data() {
+      return {
+        state:0,
+        user_id: localStorage.getItem('U_id'),
+        urlList: {
+          list:'api/Order/getUserOrder'
+        },
+        orderList: [
+          
+          // 更多稿件数据...
+        ]
+      };
+    },
+    methods: {
+      goOrderConfirmation(data){
+this.$router.push({
+					path: '/OrderConfirmation',
+					query: {
+						id: data.article_id
+					}
+				});
+			},
+      goOrderDetail(data){
+this.$router.push({
+					path: '/OrderDetail',
+					query: {
+						id: data.article_id
+					}
+				});
+			},
+      formatAmount(amount) {
+            return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        },
+      getList(){
+        this.$api
+                .post(this.urlList.list, {
+                  user_id: this.user_id,
+                  state:this.state
+                })
+                .then((res) => {
+                    console.log('res at line 191:', res);
+                    if (res.code == 0) {
+                        this.orderList = res.data.list;
+                       
+                    }
+                });
+      },
+      payArticle(article) {
+        // 在这里实现缴费逻辑，例如调用后端API进行缴费
+        // 缴费成功后更新article.status为'已缴费'
+        article.status = '已缴费';
+        this.$message.success(`已成功为稿件 ${article.title} 缴费`);
+      }
+    },
+    created(){
+this.getList()
+    },
+    activated(){
+this.getList()
+    },
+  };
+  </script>
+  <style scoped>
+.currency {
+    font-weight: bold;
+    /* margin-right: 5px; */
+}</style>
\ No newline at end of file
diff --git a/src/components/page/partyRole.vue b/src/components/page/partyRole.vue
index c9364e5..e37fd36 100644
--- a/src/components/page/partyRole.vue
+++ b/src/components/page/partyRole.vue
@@ -695,6 +695,15 @@
                         </div>
                     </div>
                 </el-tab-pane>
+                <el-tab-pane label="User Order">
+                   
+                    <PendingPayment ref="PendingPayment" :list="orderList">
+      <template slot="tableItem">
+      
+      </template>
+      </PendingPayment>
+                   
+                </el-tab-pane>
             </el-tabs>
         </div>
 
@@ -1101,9 +1110,13 @@
 </template>
 
 <script>
+  import PendingPayment from '@/components/page/components/pendingPayment/index.vue';
 export default {
     data() {
         return {
+            orderList:[ { id: 1, title: '稿件1', author: '作者1', amount: 100, status: '未缴费',orderId:'6VT20279NK3463528' },
+          { id: 2, title: '稿件2', author: '作者2', amount: 200, status: '未缴费',orderId:'6VT20279NK3463528'  },
+          { id: 3, title: '稿件3', author: '作者3', amount: 300, status: '未缴费' ,orderId:'6VT20279NK3463528' },],
             citeLoading: false,
             wosLoading: false,
             authorList: [],
@@ -1357,6 +1370,9 @@ export default {
             }
         };
     },
+    components: {
+      PendingPayment
+    },
     mounted() {},
     created() {
         this.getSelectData();
diff --git a/src/main.js b/src/main.js
index 90a1a36..3ca2231 100644
--- a/src/main.js
+++ b/src/main.js
@@ -73,6 +73,8 @@ Vue.component("Editor", Editor);
 
 import commonTable from '@/components/page/components/table/table.vue'
 Vue.component('common-table', commonTable);
+import commonPayPalButton from '@/components/page/components/pendingPayment/PayPalButton.vue'
+Vue.component('common-paypal-button', commonPayPalButton);
 import commonTiff from '@/components/page/components/table/tiff.vue'
 Vue.component('common-tiff', commonTiff);
 import commonContent from '@/components/page/components/table/content.vue'
diff --git a/src/router/index.js b/src/router/index.js
index 370af33..22caf5c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -327,10 +327,31 @@ export default new Router({
 			}
 		},
 		{
-			path: '/PendingPaymentAuthor',
-			component: () => import('../components/page/PendingPaymentAuthor.vue'),
+			path: '/OrderConfirmation',
+			component: () => import('../components/page/components/pendingPayment/OrderConfirmation.vue'),
 			meta: {
-				title: 'Pending Payment'
+				title: 'Order Confirmation'
+			}
+		},
+		{
+			path: '/OrderDetail',
+			component: () => import('../components/page/components/pendingPayment/OrderDetail.vue'),
+			meta: {
+				title: 'Order Detail'
+			}
+		},
+		{
+			path: '/success',
+			component: () => import('../components/page/components/pendingPayment/success.vue'),
+			meta: {
+				title: 'Success'
+			}
+		},
+		{
+			path: '/orderListAuthor',
+			component: () => import('../components/page/orderListAuthor.vue'),
+			meta: {
+				title: 'Order List'
 			}
 		},
 		{

From f78254b29cbad20ee2d01a0b2921bd448a96a168 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, 2 Jan 2025 10:53:35 +0800
Subject: [PATCH 7/8] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page/components/pendingPayment/PayPalButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/page/components/pendingPayment/PayPalButton.vue b/src/components/page/components/pendingPayment/PayPalButton.vue
index 7af2b53..2edf677 100644
--- a/src/components/page/components/pendingPayment/PayPalButton.vue
+++ b/src/components/page/components/pendingPayment/PayPalButton.vue
@@ -21,7 +21,7 @@ export default defineComponent({
         clientId: {
             type: String,
             required: true,
-            default:'ARyoAhBNlTMDEBb6QvJYmK0gA4cfSS6WY0Vr2uJhX3NOe7V9qVCJuNwuRHRO09WGcTgS5AkuTIgRZDcx'
+            default:'ATqBigrhcNdqR8J83aDjTOoJHsAVz0U45JRY4H0stcEcv0mQrMDHQmyrydQInYd1w4lJ1ee3Wsblm2WP'
         },
         orderId: {
             // type: String,

From bfe10dbe213e23e458291d3143802cb87be67593 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, 2 Jan 2025 10:53:59 +0800
Subject: [PATCH 8/8] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 7949a8c..f588847 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,7 +16,7 @@
     <!-- built files will be auto injected -->
   </body><script src="<%=BASE_URL %>/tinymce/tinymce.min.js"></script>
 
-  <script src="https://www.paypal.com/sdk/js?client-id=ARyoAhBNlTMDEBb6QvJYmK0gA4cfSS6WY0Vr2uJhX3NOe7V9qVCJuNwuRHRO09WGcTgS5AkuTIgRZDcx"></script>
+  <script src="https://www.paypal.com/sdk/js?client-id=ATqBigrhcNdqR8J83aDjTOoJHsAVz0U45JRY4H0stcEcv0mQrMDHQmyrydQInYd1w4lJ1ee3Wsblm2WP"></script>
 
 </html>