管理端显示还款计划
一、后端接口
1、Controller
创建AdminLendReturnController
代码语言：javascript复制@Api(tags = "还款记录")
@RestController
@RequestMapping("/admin/core/lendReturn")
@Slf4j
public class AdminLendReturnController {
@Resource
private LendReturnService lendReturnService;
@ApiOperation("获取列表")
@GetMapping("/list/{lendId}")
public R list(
@ApiParam(value = "标的id", required = true)
@PathVariable Long lendId) {
List<LendReturn> list = lendReturnService.selectByLendId(lendId);
return R.ok().data("list", list);
}
}2、Service
接口：LendReturnService
List<LendReturn> selectByLendId(Long lendId);
实现：LendReturnServiceImpl
代码语言：javascript复制@Override
public List<LendReturn> selectByLendId(Long lendId) {
QueryWrapper<LendReturn> queryWrapper = new QueryWrapper();
queryWrapper.eq("lend_id", lendId);
List<LendReturn> lendReturnList = baseMapper.selectList(queryWrapper);
return lendReturnList;
}二、前端
1、创建api
api/core/lend-return.js
代码语言：javascript复制import request from '@/utils/request'
export default {
getList(lendId) {
return request({
url: `/admin/core/lendReturn/list/` lendId,
method: 'get'
})
}
}2、页面脚本
views/core/lend/detail.vue
代码语言：javascript复制import lendReturnApi from '@/api/core/lend-return'data() {
return {
......,
lendReturnList: [] //还款计划列表
}
},
created() {
if (this.$route.params.id) {
......
// 还款计划
this.fetchLendReturnList()
}
},methods
代码语言：javascript复制fetchLendReturnList() {
lendReturnApi.getList(this.$route.params.id).then(response => {
this.lendReturnList = response.data.list
})
}3、页面模板
views/core/lend/detail.vue
将还款计划放在投资记录后面
代码语言：javascript复制<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>一、后端接口
Controller
创建 LendReturnController
代码语言：javascript复制@Api(tags = "还款计划")
@RestController
@RequestMapping("/api/core/lendReturn")
@Slf4j
public class LendReturnController {
@Resource
private LendReturnService lendReturnService;
@ApiOperation("获取列表")
@GetMapping("/list/{lendId}")
public R list(
@ApiParam(value = "标的id", required = true)
@PathVariable Long lendId) {
List<LendReturn> list = lendReturnService.selectByLendId(lendId);
return R.ok().data("list", list);
}
}二、前端
页面脚本
pages/lend/_id.vue
代码语言：javascript复制async asyncData({ $axios, params }) {
......
//还款计划
let responseLendReturnList = await $axios.$get(
'/api/core/lendReturn/list/' lendId
)
return {
......,
lendReturnList: responseLendReturnList.data.list, //还款计划
}
},一、后端接口
Controller
创建 LendItemReturnController
代码语言：javascript复制@Api(tags = "回款计划")
@RestController
@RequestMapping("/api/core/lendItemReturn")
@Slf4j
public class LendItemReturnController {
@Resource
private LendItemReturnService lendItemReturnService;
@ApiOperation("获取列表")
@GetMapping("/auth/list/{lendId}")
public R list(
@ApiParam(value = "标的id", required = true)
@PathVariable Long lendId, HttpServletRequest request) {
String token = request.getHeader("token");
Long userId = JwtUtils.getUserId(token);
List<LendItemReturn> list = lendItemReturnService.selectByLendId(lendId, userId);
return R.ok().data("list", list);
}
}2、Service
接口：LendItemReturnService
List<LendItemReturn> selectByLendId(Long lendId, Long userId);
实现：LendItemReturnServiceImpl
代码语言：javascript复制@Override
public List<LendItemReturn> selectByLendId(Long lendId, Long userId) {
QueryWrapper<LendItemReturn> queryWrapper = new QueryWrapper<>();
queryWrapper
.eq("lend_id", lendId)
.eq("invest_user_id", userId)
.orderByAsc("current_period");
return baseMapper.selectList(queryWrapper);
}二、前端
1、页面脚本
pages/lend/_id.vue
代码语言：javascript复制data() {
return {
......,
lendItemReturnList: [], //回款计划
}
},
mounted() {
......
//回款计划
this.fetchLendItemReturnList()
},methods
代码语言：javascript复制//回款计划
fetchLendItemReturnList() {
this.$axios
.$get('/api/core/lendItemReturn/auth/list/' this.$route.params.id)
.then((response) => {
this.lendItemReturnList = response.data.list
})
},2、页面模板
pages/lend/_id.vue
代码语言：javascript复制<!-- 回款计划 -->
<div class="item-detail-body clearfix mrt30 ui-tab">
<div class="ui-tab-nav hd">
<ul>
<li class="nav_li active">
<a href="javascript:;">回款计划</a>
</li>
</ul>
</div>
<div class="bd">
<div class="ui-tab-item active" style="display: block;">
<div class="repayment-list">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<thead>
<tr>
<th>期数</th>
<th>本金(元)</th>
<th>利息(元)</th>
<th>本息(元)</th>
<th>计划回款日期</th>
<th>实际回款日期</th>
<th>状态</th>
<th>是否逾期</th>
</tr>
</thead>
<tbody id="repayment_content">
<tr
v-for="lendItemReturn in lendItemReturnList"
:key="lendItemReturn.id"
>
<td>{{ lendItemReturn.currentPeriod }}</td>
<td class="c-orange">￥{{ lendItemReturn.principal }}</td>
<td class="c-orange">￥{{ lendItemReturn.interest }}</td>
<td class="c-orange">￥{{ lendItemReturn.total }}</td>
<td>{{ lendItemReturn.returnDate }}</td>
<td>{{ lendItemReturn.realReturnTime }}</td>
<td>
{{ lendItemReturn.status === 0 ? '未还款' : '已还款' }}
</td>
<td>
<span v-if="lendItemReturn.overdue">
是（逾期金额：{{ lendReturn.overdueTotal }}元）
</span>
<span v-else>否</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>上篇链接：
(1条消息) 微服务项目：尚融宝（56）（核心业务流程：投资列表展示（1））_一个风轻云淡的博客-CSDN博客
https://blog.csdn.net/m0_62436868/article/details/127020735?spm=1001.2014.3001.5502
