37. 尚融宝后台投资列表展示
后台显示投资记录
需求
后端
controller
AdminLendItemController.java
package com.indi.srb.core.controller.admin;
@Api(tags = "投资记录")
@RestController
@RequestMapping("/admin/core/lendItem")
public class AdminLendItemController {
@Resource
private LendItemService lendItemService;
@ApiOperation("获取列表")
@GetMapping("/list/{lendId}")
public R list(
@ApiParam(value = "标的id",required = true)
@PathVariable Long lendId){
List<LendItem> lendItemList = lendItemService.listByIdAndStatus(lendId, LendItemEnum.PAY_OK.getStatus());
return R.ok().setData("list",lendItemList);
}
}
前端
api
api/core/lend-item.js
import request from '@/utils/request'
export default {
getList(lendId) {
return request({
url: `/admin/core/lendItem/list/${
lendId}`,
method: 'get'
})
}
}
template
views/core/lend/detail.vue
放在借款人信息后面
<h4>投资记录h4>
<el-table :data="lendItemList" stripe style="width: 100%" border>
<el-table-column type="index" label="序号" width="70" align="center" />
<el-table-column prop="lendItemNo" label="投资编号" />
<el-table-column prop="investName" label="投资用户" />
<el-table-column prop="investAmount" label="投资金额" />
<el-table-column label="年化利率">
<template slot-scope="scope">
{
{ scope.row.lendYearRate * 100 }}%
template>
el-table-column>
<el-table-column prop="investTime" label="投资时间" />
<el-table-column prop="lendStartDate" label="开始日期" />
<el-table-column prop="lendEndDate" label="结束日期" />
<el-table-column prop="expectAmount" label="预期收益" />
<el-table-column prop="investTime" label="投资时间" />
el-table>
script
views/core/lend/detail.vue
<script>
import lendItemApi from '@/api/core/lend-item'
export default {
data() {
return {
lendItemList: [], // 投资列表
}
},
created() {
if (this.$route.params.id) {
// 投资记录
this.fetchLendItemList()
}
},
methods: {
fetchLendItemList() {
lendItemApi.getList(this.$route.params.id).then(response => {
this.lendItemList = response.data.list
})
},
script>
后台显示还款计划
需求
后端
controller
AdminLendReturnController.java
package com.indi.srb.core.controller.admin;
@Api(tags = "还款记录")
@RestController
@RequestMapping("/admin/core/lendReturn")
public class AdminLendReturnController {
@Resource
private LendReturnService lendReturnService;
@ApiOperation("获取列表")
@GetMapping("/list/{lendId}")
public R list(
@ApiParam(value = "标的id", required = true)
@PathVariable Long lendId){
List<LendReturn> lendReturnList = lendReturnService.listByLendId(lendId);
return R.ok().setData("list",lendReturnList);
}
}
service
LendReturnService.java
List<LendReturn> listByLendId(Long lendId);
LendReturnServiceImpl.java
@Override
public List<LendReturn> listByLendId(Long lendId) {
QueryWrapper<LendReturn> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("lend_id",lendId);
return baseMapper.selectList(queryWrapper);
}
前端
api
api/core/lend-return.js
import request from '@/utils/request'
export default{
getList(lendId){
return request({
url: `/admin/core/lendReturn/list/${
lendId}`,
method: 'get'
})
}
}
template
views/core/lend/detail.vue
将还款计划放在投资记录后面
<h4>还款计划h4>
<el-table :data="lendReturnList" stripe style="width: 100%" border>
<el-table-column type="index" label="序号" width="70" align="center" />
<el-table-column prop="currentPeriod" label="当前的期数" />
<el-table-column prop="principal" label="本金" />
<el-table-column prop="interest" label="利息" />
<el-table-column prop="total" label="本息" />
<el-table-column prop="returnDate" label="还款日期" width="150" />
<el-table-column prop="realReturnTime" label="实际还款时间" />
<el-table-column label="是否逾期">
<template slot-scope="scope">
<span v-if="scope.row.overdue">
是（逾期金额：{
{ scope.row.overdueTotal }}元）
span>
<span v-else>否span>
template>
el-table-column>
<el-table-column label="状态" width="80">
<template slot-scope="scope">
{
{ scope.row.status === 0 ? '未还款' : '已还款' }}
template>
el-table-column>
el-table>
script
views/core/lend/detail.vue
<script>
import lendItemApi from '@/api/core/lend-item'
export default {
data() {
return {
lendReturnList: [] // 还款计划列表
}
},
created() {
if (this.$route.params.id) {
// 还款计划
this.fetchLendReturnList()
}
},
methods: {
fetchLendReturnList() {
lendReturnApi.getList(this.$route.params.id).then(response => {
this.lendReturnList = response.data.list
})
},
script>