39 lines
1.5 KiB
Vue
39 lines
1.5 KiB
Vue
<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> |