zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
始于初见
2024-12-26 10:56:40 +08:00
parent 351c126997
commit caba79154f
8 changed files with 159 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/page/PendingPaymentAuthor.vue Normal file
View File

@@ -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>

39
src/components/page/PendingPaymentEditor.vue Normal file
View File

@@ -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>

48
src/components/page/components/pendingPayment/index.vue Normal file
View File

@@ -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>