目录

一、管理员端显示投资记录

（一）后端

（二）前端

二、网站端显示投资记录

（一）后端

（二）前端

三、管理员端显示还款计划

（一）后端

（二）前端

四、网站端显示还款计划

（一）后端

（二）前端

五、网站端显示回款计划

（一）后端

（二）前端

一、管理员端显示投资记录

（一）后端

controller

创建 AdminLendItemController

@Api(tags = "标的的投资")@RestController@RequestMapping("/admin/core/lendItem")@Slf4jpublic class AdminLendItemController {@Resourceprivate LendItemService lendItemService;@ApiOperation("获取列表")@GetMapping("/list/{lendId}")public R list(@ApiParam(value = "标的id", required = true)@PathVariable Long lendId) {List list = lendItemService.selectByLendId(lendId);return R.ok().data("list", list);}}

service

接口：LendItemService

List selectByLendId(Long lendId);

实现：LendItemServiceImpl

@Overridepublic List selectByLendId(Long lendId) {QueryWrapper queryWrapper = new QueryWrapper();queryWrapper.eq("lend_id", lendId);List lendItemList = baseMapper.selectList(queryWrapper);return 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'})}}

页面脚本

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})}

页面模板

views/core/lend/detail.vue

将投资记录放在借款人信息后面

投资记录
{{ scope.row.lendYearRate * 100 }}%

二、网站端显示投资记录

（一）后端

controller

LendItemController

@ApiOperation("获取列表")@GetMapping("/list/{lendId}")public R list(@ApiParam(value = "标的id", required = true)@PathVariable Long lendId) {List list = lendItemService.selectByLendId(lendId);return R.ok().data("list", list);}

（二）前端

页面脚本pages/lend/_id.vue

async asyncData({ $axios, params }) {......//投资记录let responseLendItemList = await $axios.$get('/api/core/lendItem/list/' + lendId)return {......,lendItemList: responseLendItemList.data.list, //投资记录}},

三、管理员端显示还款计划

（一）后端

controller

创建AdminLendReturnController

@Api(tags = "还款记录")@RestController@RequestMapping("/admin/core/lendReturn")@Slf4jpublic class AdminLendReturnController {@Resourceprivate LendReturnService lendReturnService;@ApiOperation("获取列表")@GetMapping("/list/{lendId}")public R list(@ApiParam(value = "标的id", required = true)@PathVariable Long lendId) {List list = lendReturnService.selectByLendId(lendId);return R.ok().data("list", list);}}

service

接口：LendReturnService

List selectByLendId(Long lendId);

实现：LendReturnServiceImpl

@Overridepublic List selectByLendId(Long lendId) {QueryWrapper queryWrapper = new QueryWrapper();queryWrapper.eq("lend_id", lendId);List lendReturnList = baseMapper.selectList(queryWrapper);return lendReturnList;}

（二）前端

创建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'})}}

页面脚本

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})}

页面模板

views/core/lend/detail.vue将还款计划放在投资记录后面

还款计划
是（逾期金额：{{ scope.row.overdueTotal }}元）否{{ scope.row.status === 0 ? '未还款' : '已还款' }}

四、网站端显示还款计划

（一）后端

创建 LendReturnController

@Api(tags = "还款计划")@RestController@RequestMapping("/api/core/lendReturn")@Slf4jpublic class LendReturnController {@Resourceprivate LendReturnService lendReturnService;@ApiOperation("获取列表")@GetMapping("/list/{lendId}")public R list(@ApiParam(value = "标的id", required = true)@PathVariable Long lendId) {List 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, //还款计划}},

五、网站端显示回款计划

（一）后端

创建 LendItemReturnController

@Api(tags = "回款计划")@RestController@RequestMapping("/api/core/lendItemReturn")@Slf4jpublic class LendItemReturnController {@Resourceprivate 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 list = lendItemReturnService.selectByLendId(lendId, userId);return R.ok().data("list", list);}}

接口：LendItemReturnService

List selectByLendId(Long lendId, Long userId);

实现：LendItemReturnServiceImpl

@Overridepublic List selectByLendId(Long lendId, Long userId) {QueryWrapper queryWrapper = new QueryWrapper();queryWrapper.eq("lend_id", lendId).eq("invest_user_id", userId).orderByAsc("current_period");return baseMapper.selectList(queryWrapper);}

（二）前端

页面脚本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})},

页面模板

pages/lend/_id.vue

回款计划
期数
本金(元)
利息(元)
本息(元)
计划回款日期
实际回款日期
状态
是否逾期
{{ lendItemReturn.currentPeriod }}
￥{{ lendItemReturn.principal }}
￥{{ lendItemReturn.interest }}
￥{{ lendItemReturn.total }}
{{ lendItemReturn.returnDate }}
{{ lendItemReturn.realReturnTime }}
{{ lendItemReturn.status === 0 ? '未还款' : '已还款' }}
是（逾期金额：{{ lendReturn.overdueTotal }}元）否