管理端显示还款计划
一、后端接口
1、Controller
创建AdminLendReturnController
@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
@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
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
import lendReturnApi from '@/api/core/lend-return'
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 }) }
3、页面模板
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>
一、后端接口
Controller
创建 LendReturnController
@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
async asyncData({ $axios, params }) { ...... //还款计划 let responseLendReturnList = await $axios.$get( '/api/core/lendReturn/list/' + lendId ) return { ......, lendReturnList: responseLendReturnList.data.list, //还款计划 } },
一、后端接口
Controller
创建 LendItemReturnController
@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
@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
data() { return { ......, lendItemReturnList: [], //回款计划 } }, mounted() { ...... //回款计划 this.fetchLendItemReturnList() },
methods
//回款计划 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
<!-- 回款计划 --> <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>
