提交

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: '/api', //本地
-	baseURL: '/', //正式
+	// baseURL: '/', //正式
 
 });
 

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')

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',
+	}
 
 }
 

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:'在线缴费',
+	}
 }
 
 

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>

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>

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>

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'),