认清现实，放弃幻想，准备斗争
前端
1、创建页面组件
创建 src/views/core/borrow-info/list.vue
<template> <div class="app-container"> 借款列表 </div> </template> <script> export default { } </script>
创建 src/views/core/borrow-info/detail.vue
<template> <div class="app-container"> 借款详情 </div> </template> <script> export default { } </script>
2、配置路由
src/router/index.js
在“借款管理”下添加子路由
{ path: 'info-list', name: 'coreBorrowInfoList', component: () => import('@/views/core/borrow-info/list'), meta: { title: '借款列表' } }, { path: 'info-detail/:id', name: 'coreBorrowInfoDetail', component: () => import('@/views/core/borrow-info/detail'), meta: { title: '借款详情' }, hidden: true }
3、定义api
创建 src/api/core/borrow-info.js
import request from '@/utils/request' export default { getList() { return request({ url: `/admin/core/borrowInfo/list`, method: 'get' }) } }
4、页面脚本
src/views/core/borrow-info/list.vue
<script> import borrowInfoApi from '@/api/core/borrow-info' export default { data() { return { list: null // 列表 } }, created() { this.fetchData() }, methods: { // 加载列表数据 fetchData() { borrowInfoApi.getList().then(response => { this.list = response.data.list }) } } } </script>
5、页面模板
src/views/core/borrow-info/list.vue
<template> <div class="app-container"> <!-- 列表 --> <el-table :data="list" stripe> <el-table-column type="index" label="序号" width="60" align="center" /> <el-table-column prop="name" label="借款人姓名" width="90" /> <el-table-column prop="mobile" label="手机" /> <el-table-column prop="amount" label="借款金额" /> <el-table-column label="借款期限" width="90"> <template slot-scope="scope">{{ scope.row.period }}个月</template> </el-table-column> <el-table-column prop="param.returnMethod" label="还款方式" width="150" /> <el-table-column prop="param.moneyUse" label="资金用途" width="100" /> <el-table-column label="年化利率" width="90"> <template slot-scope="scope"> {{ scope.row.borrowYearRate * 100 }}% </template> </el-table-column> <el-table-column prop="param.status" label="状态" width="100" /> <el-table-column prop="createTime" label="申请时间" width="150" /> <el-table-column label="操作" width="150" align="center"> <template slot-scope="scope"> <el-button type="primary" size="mini"> <router-link :to="'/core/borrower/info-detail/' + scope.row.id"> 查看 </router-link> </el-button> <el-button v-if="scope.row.status === 1" type="warning" size="mini" @click="approvalShow(scope.row)" > 审批 </el-button> </template> </el-table-column> </el-table> </div> </template>
