Table of contents
1. The administrator displays investment records
2. The website displays investment records
3. The administrator shows the repayment plan
4. The website shows the repayment plan
5. The payment collection plan is displayed on the website
1. The administrator displays investment records
(1) Backend
controller
Create AdminLendItemController
@Api(tags = "标的的投资")
@RestController
@RequestMapping("/admin/core/lendItem")
@Slf4j
public class AdminLendItemController {
@Resource
private LendItemService lendItemService;
@ApiOperation("获取列表")
@GetMapping("/list/{lendId}")
public R list(
@ApiParam(value = "标的id", required = true)
@PathVariable Long lendId) {
List<LendItem> list = lendItemService.selectByLendId(lendId);
return R.ok().data("list", list);
}
}service
Interface: LendItemService
List<LendItem> selectByLendId(Long lendId);Implementation: LendItemServiceImpl
@Override
public List<LendItem> selectByLendId(Long lendId) {
QueryWrapper<LendItem> queryWrapper = new QueryWrapper();
queryWrapper.eq("lend_id", lendId);
List<LendItem> lendItemList = baseMapper.selectList(queryWrapper);
return lendItemList;
}(2) Front end
create 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'
})
}
}page script
views/core/lend/detail.vue
import lendItemApi from '@/api/core/lend-item'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
})
}page template
views/core/lend/detail.vue
Put investment records behind borrower information
<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>2. The website displays investment records
(1) Backend
controller
LendItemController
@ApiOperation("获取列表")
@GetMapping("/list/{lendId}")
public R list(
@ApiParam(value = "标的id", required = true)
@PathVariable Long lendId) {
List<LendItem> list = lendItemService.selectByLendId(lendId);
return R.ok().data("list", list);
}(2) Front end
Page script pages/lend/_id.vue
async asyncData({ $axios, params }) {
......
//投资记录
let responseLendItemList = await $axios.$get(
'/api/core/lendItem/list/' + lendId
)
return {
......,
lendItemList: responseLendItemList.data.list, //投资记录
}
},3. The administrator shows the repayment plan
(1) Backend
controller
Create 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);
}
}service
Interface: LendReturnService
List<LendReturn> selectByLendId(Long lendId);Implementation: 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;
}(2) Front end
Create APIs
api/core/lend-return.js
import request from '@/utils/request'
export default {
getList(lendId) {
return request({
url: `/admin/core/lendReturn/list/` + lendId,
method: 'get'
})
}
}page script
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
})
}page template
views/core/lend/detail.vue
Put repayment plans behind investment records
<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>4. The website shows the repayment plan
(1) Backend
Create a 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);
}
}(2) Front end
Page script pages/lend/_id.vue
async asyncData({ $axios, params }) {
......
//还款计划
let responseLendReturnList = await $axios.$get(
'/api/core/lendReturn/list/' + lendId
)
return {
......,
lendReturnList: responseLendReturnList.data.list, //还款计划
}
},5. The payment collection plan is displayed on the website
(1) Backend
Create 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);
}
}Interface: LendItemReturnService
List<LendItemReturn> selectByLendId(Long lendId, Long userId);Implementation: 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);
}(2) Front end
Page script 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
})
},page template
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>