目錄
一、管理員端顯示投資記錄
（一）后端
（二）前端
二、網(wǎng)站端顯示投資記錄
（一）后端
（二）前端
三、管理員端顯示還款計(jì)劃
（一）后端
（二）前端
四、網(wǎng)站端顯示還款計(jì)劃
（一）后端
（二）前端
五、網(wǎng)站端顯示回款計(jì)劃
（一）后端
（二）前端
一、管理員端顯示投資記錄
（一）后端
controller
創(chuàng)建 AdminLendItemController
@Api(tags = "標(biāo)的的投資")
@RestController
@RequestMapping("/admin/core/lendItem")
@Slf4j
public class AdminLendItemController {
@Resource
private LendItemService lendItemService;
@ApiOperation("獲取列表")
@GetMapping("/list/{lendId}")
public R list(
@ApiParam(value = "標(biāo)的id", required = true)
@PathVariable Long lendId) {
List<LendItem> list = lendItemService.selectByLendId(lendId);
return R.ok().data("list", list);
}
}service
接口：LendItemService
List<LendItem> selectByLendId(Long lendId);實(shí)現(xiàn)：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;
}（二）前端
創(chuàng)建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'
})
}
}頁(yè)面腳本
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
})
}頁(yè)面模板
views/core/lend/detail.vue
將投資記錄放在借款人信息后面
<h4>投資記錄</h4>
<el-table :data="lendItemList" stripe style="width: 100%" border>
<el-table-column type="index" label="序號(hào)" width="70" align="center" />
<el-table-column prop="lendItemNo" label="投資編號(hào)" />
<el-table-column prop="investName" label="投資用戶(hù)" />
<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="投資時(shí)間" />
<el-table-column prop="lendStartDate" label="開(kāi)始日期" />
<el-table-column prop="lendEndDate" label="結(jié)束日期" />
<el-table-column prop="expectAmount" label="預(yù)期收益" />
<el-table-column prop="investTime" label="投資時(shí)間" />
</el-table>二、網(wǎng)站端顯示投資記錄
（一）后端
controller
LendItemController
@ApiOperation("獲取列表")
@GetMapping("/list/{lendId}")
public R list(
@ApiParam(value = "標(biāo)的id", required = true)
@PathVariable Long lendId) {
List<LendItem> list = lendItemService.selectByLendId(lendId);
return R.ok().data("list", list);
}（二）前端
頁(yè)面腳本pages/lend/_id.vue
async asyncData({ $axios, params }) {
......
//投資記錄
let responseLendItemList = await $axios.$get(
'/api/core/lendItem/list/' + lendId
)
return {
......,
lendItemList: responseLendItemList.data.list, //投資記錄
}
},三、管理員端顯示還款計(jì)劃
（一）后端
controller
創(chuàng)建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 = "標(biāo)的id", required = true)
@PathVariable Long lendId) {
List<LendReturn> list = lendReturnService.selectByLendId(lendId);
return R.ok().data("list", list);
}
}service
接口：LendReturnService
List<LendReturn> selectByLendId(Long lendId);實(shí)現(xiàn)：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;
}（二）前端
創(chuàng)建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'
})
}
}頁(yè)面腳本
views/core/lend/detail.vue
import lendReturnApi from '@/api/core/lend-return'data() {
return {
......,
lendReturnList: [] //還款計(jì)劃列表
}
},
created() {
if (this.$route.params.id) {
......
// 還款計(jì)劃
this.fetchLendReturnList()
}
},methods
fetchLendReturnList() {
lendReturnApi.getList(this.$route.params.id).then(response => {
this.lendReturnList = response.data.list
})
}頁(yè)面模板
views/core/lend/detail.vue
將還款計(jì)劃放在投資記錄后面
<h4>還款計(jì)劃</h4>
<el-table :data="lendReturnList" stripe style="width: 100%" border>
<el-table-column type="index" label="序號(hào)" width="70" align="center" />
<el-table-column prop="currentPeriod" label="當(dāng)前的期數(shù)" />
<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="實(shí)際還款時(shí)間" />
<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="狀態(tài)" width="80">
<template slot-scope="scope">
{{ scope.row.status === 0 ? '未還款' : '已還款' }}
</template>
</el-table-column>
</el-table>四、網(wǎng)站端顯示還款計(jì)劃
（一）后端
創(chuàng)建 LendReturnController
@Api(tags = "還款計(jì)劃")
@RestController
@RequestMapping("/api/core/lendReturn")
@Slf4j
public class LendReturnController {
@Resource
private LendReturnService lendReturnService;
@ApiOperation("獲取列表")
@GetMapping("/list/{lendId}")
public R list(
@ApiParam(value = "標(biāo)的id", required = true)
@PathVariable Long lendId) {
List<LendReturn> list = lendReturnService.selectByLendId(lendId);
return R.ok().data("list", list);
}
}（二）前端
頁(yè)面腳本pages/lend/_id.vue
async asyncData({ $axios, params }) {
......
//還款計(jì)劃
let responseLendReturnList = await $axios.$get(
'/api/core/lendReturn/list/' + lendId
)
return {
......,
lendReturnList: responseLendReturnList.data.list, //還款計(jì)劃
}
},五、網(wǎng)站端顯示回款計(jì)劃
（一）后端
創(chuàng)建 LendItemReturnController
@Api(tags = "回款計(jì)劃")
@RestController
@RequestMapping("/api/core/lendItemReturn")
@Slf4j
public class LendItemReturnController {
@Resource
private LendItemReturnService lendItemReturnService;
@ApiOperation("獲取列表")
@GetMapping("/auth/list/{lendId}")
public R list(
@ApiParam(value = "標(biāo)的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);
}
}接口：LendItemReturnService
List<LendItemReturn> selectByLendId(Long lendId, Long userId);?實(shí)現(xiàn)：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);
}（二）前端
頁(yè)面腳本pages/lend/_id.vue
data() {
return {
......,
lendItemReturnList: [], //回款計(jì)劃
}
},
mounted() {
......
//回款計(jì)劃
this.fetchLendItemReturnList()
},methods
//回款計(jì)劃
fetchLendItemReturnList() {
this.$axios
.$get('/api/core/lendItemReturn/auth/list/' + this.$route.params.id)
.then((response) => {
this.lendItemReturnList = response.data.list
})
},頁(yè)面模板文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-431942.html
pages/lend/_id.vue文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-431942.html
<!-- 回款計(jì)劃 -->
<div class="item-detail-body clearfix mrt30 ui-tab">
<div class="ui-tab-nav hd">
<ul>
<li class="nav_li active">
<a href="javascript:;">回款計(jì)劃</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>期數(shù)</th>
<th>本金(元)</th>
<th>利息(元)</th>
<th>本息(元)</th>
<th>計(jì)劃回款日期</th>
<th>實(shí)際回款日期</th>
<th>狀態(tài)</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>到了這里，關(guān)于尚融寶28-投資列表展示的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
