尚融宝28-投资列表展示(尚融宝盈(宁波)投资中心(有限合伙))

尚融宝28-投资列表展示

目录

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

（一）后端

（二）前端

二、网站端显示投资记录

（一）后端

（二）前端

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

（一）后端

（二）前端

四、网站端显示还款计划

（一）后端

（二）前端

五、网站端显示回款计划

（一）后端

（二）前端

---

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

推荐整理分享尚融宝28-投资列表展示(尚融宝盈(宁波)投资中心(有限合伙))，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:尚融公司,尚融资本怎么样,尚融科技有限公司怎么样,尚融宝项目,尚融商城是真的吗,尚融宝项目,尚融宝项目,尚融资本是不是骗局,内容如对您有帮助，希望把文章链接给更多的朋友！

controller

创建 AdminLendItemController

@Api(tags = "标的的投资")@RestController@RequestMapping("/admin/core/lendItem")@Slf4jpublic 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

接口：LendItemService

List<LendItem> selectByLendId(Long lendId);

实现：LendItemServiceImpl

@Overridepublic List<LendItem> selectByLendId(Long lendId) { QueryWrapper<LendItem> queryWrapper = new QueryWrapper(); queryWrapper.eq("lend_id", lendId); List<LendItem> 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

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

<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>二、网站端显示投资记录（一）后端

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);}（二）前端

页面脚本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 { @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

接口：LendReturnService

List<LendReturn> selectByLendId(Long lendId);

实现：LendReturnServiceImpl

@Overridepublic List<LendReturn> selectByLendId(Long lendId) { QueryWrapper<LendReturn> queryWrapper = new QueryWrapper(); queryWrapper.eq("lend_id", lendId); List<LendReturn> 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将还款计划放在投资记录后面<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>四、网站端显示还款计划（一）后端

创建 LendReturnController

@Api(tags = "还款计划")@RestController@RequestMapping("/api/core/lendReturn")@Slf4jpublic 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, //还款计划 }},五、网站端显示回款计划（一）后端

创建 LendItemReturnController

@Api(tags = "回款计划")@RestController@RequestMapping("/api/core/lendItemReturn")@Slf4jpublic 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); }}

接口：LendItemReturnService

List<LendItemReturn> selectByLendId(Long lendId, Long userId);

 实现：LendItemReturnServiceImpl

@Overridepublic 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);}（二）前端

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

<!-- 回款计划 --><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>