{
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)"
![img](https://img-blog.csdnimg.cn/img_convert/ecbb35dc4200c7c9da5aafc4bd95bf87.png)
![img](https://img-blog.csdnimg.cn/img_convert/4f27e5e9f5daf1ff04fc45d30156266d.png)
![img](https://img-blog.csdnimg.cn/img_convert/9373cb25f7bf41917613809cfefd4904.png)
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!**
**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**
**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**
里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**
**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**