0
0

尚融宝28-投资列表展示

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

（一）后端

controller

创建 AdminLendItemController

  1. @Api(tags = "标的的投资")
  2. @RestController
  3. @RequestMapping("/admin/core/lendItem")
  4. @Slf4j
  5. public class AdminLendItemController {
  7.     @Resource
  8.     private LendItemService lendItemService;
  10.     @ApiOperation("获取列表")
  11.     @GetMapping("/list/{lendId}")
  12.     public R list(
  13.             @ApiParam(value = "标的id", required = true)
  14.             @PathVariable Long lendId) {
  15.         List<LendItem> list = lendItemService.selectByLendId(lendId);
  16.         return R.ok().data("list", list);
  17.     }
  18. }

service

接口：LendItemService

  1. List<LendItem> selectByLendId(Long lendId);

实现：LendItemServiceImpl

  1. @Override
  2. public List<LendItem> selectByLendId(Long lendId) {
  3.     QueryWrapper<LendItem> queryWrapper = new QueryWrapper();
  4.     queryWrapper.eq("lend_id", lendId);
  5.     List<LendItem> lendItemList = baseMapper.selectList(queryWrapper);
  6.     return lendItemList;
  7. }

（二）前端

创建api

api/core/lend-item.js

  1. import request from '@/utils/request'
  3. export default {
  4.   getList(lendId) {
  5.     return request({
  6.       url: `/admin/core/lendItem/list/` + lendId,
  7.       method: 'get'
  8.     })
  9.   }
  10. }

页面脚本

views/core/lend/detail.vue

  1. import lendItemApi from '@/api/core/lend-item'
  1. data() {
  2.   return {
  3.     ......,
  5.     lendItemList: [] //投资列表
  6.   }
  7. },
  9. created() {
  10.   if (this.$route.params.id) {
  11.     ......
  13.     // 投资记录
  14.     this.fetchLendItemList()
  15.   }
  16. },

methods

  1. fetchLendItemList() {
  2.   lendItemApi.getList(this.$route.params.id).then(response => {
  3.     this.lendItemList = response.data.list
  4.   })
  5. }

页面模板

views/core/lend/detail.vue

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

  1. <h4>投资记录</h4>
  2. <el-table :data="lendItemList" stripe style="width: 100%" border>
  3.     <el-table-column type="index" label="序号" width="70" align="center" />
  4.     <el-table-column prop="lendItemNo" label="投资编号" />
  5.     <el-table-column prop="investName" label="投资用户" />
  6.     <el-table-column prop="investAmount" label="投资金额" />
  7.     <el-table-column label="年化利率">
  8.         <template slot-scope="scope">
  9.             {{ scope.row.lendYearRate * 100 }}%
  10.         </template>
  11.     </el-table-column>
  12.     <el-table-column prop="investTime" label="投资时间" />
  13.     <el-table-column prop="lendStartDate" label="开始日期" />
  14.     <el-table-column prop="lendEndDate" label="结束日期" />
  15.     <el-table-column prop="expectAmount" label="预期收益" />
  16.     <el-table-column prop="investTime" label="投资时间" />
  17. </el-table>

二、网站端显示投资记录

（一）后端

controller

LendItemController

  1. @ApiOperation("获取列表")
  2. @GetMapping("/list/{lendId}")
  3. public R list(
  4.     @ApiParam(value = "标的id", required = true)
  5.     @PathVariable Long lendId) {
  6.     List<LendItem> list = lendItemService.selectByLendId(lendId);
  7.     return R.ok().data("list", list);
  8. }

（二）前端

页面脚本pages/lend/_id.vue

  1. async asyncData({ $axios, params }) {
  2.     ......
  3.     
  4.     //投资记录
  5.     let responseLendItemList = await $axios.$get(
  6.       '/api/core/lendItem/list/' + lendId
  7.     )
  9.     return {
  10.       ......,
  11.       lendItemList: responseLendItemList.data.list, //投资记录
  12.     }
  13. },

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

（一）后端

controller

创建AdminLendReturnController

  1. @Api(tags = "还款记录")
  2. @RestController
  3. @RequestMapping("/admin/core/lendReturn")
  4. @Slf4j
  5. public class AdminLendReturnController {
  7.     @Resource
  8.     private LendReturnService lendReturnService;
  10.     @ApiOperation("获取列表")
  11.     @GetMapping("/list/{lendId}")
  12.     public R list(
  13.             @ApiParam(value = "标的id", required = true)
  14.             @PathVariable Long lendId) {
  15.         List<LendReturn> list = lendReturnService.selectByLendId(lendId);
  16.         return R.ok().data("list", list);
  17.     }
  18. }

service

接口：LendReturnService

  1. List<LendReturn> selectByLendId(Long lendId);

实现：LendReturnServiceImpl

  1. @Override
  2. public List<LendReturn> selectByLendId(Long lendId) {
  3.     QueryWrapper<LendReturn> queryWrapper = new QueryWrapper();
  4.     queryWrapper.eq("lend_id", lendId);
  5.     List<LendReturn> lendReturnList = baseMapper.selectList(queryWrapper);
  6.     return lendReturnList;
  7. }

（二）前端

创建Api

api/core/lend-return.js

  1. import request from '@/utils/request'
  3. export default {
  4.   getList(lendId) {
  5.     return request({
  6.       url: `/admin/core/lendReturn/list/` + lendId,
  7.       method: 'get'
  8.     })
  9.   }
  10. }

页面脚本

views/core/lend/detail.vue

  1. import lendReturnApi from '@/api/core/lend-return'
  1. data() {
  2.   return {
  3.     ......,
  5.     lendReturnList: [] //还款计划列表
  6.   }
  7. },
  9. created() {
  10.   if (this.$route.params.id) {
  11.     ......
  13.     // 还款计划
  14.     this.fetchLendReturnList()
  15.   }
  16. },

methods

  1. fetchLendReturnList() {
  2.     lendReturnApi.getList(this.$route.params.id).then(response => {
  3.         this.lendReturnList = response.data.list
  4.     })
  5. }

页面模板

views/core/lend/detail.vue

将还款计划放在投资记录后面

  1. <h4>还款计划</h4>
  2. <el-table :data="lendReturnList" stripe style="width: 100%" border>
  3.     <el-table-column type="index" label="序号" width="70" align="center" />
  4.     <el-table-column prop="currentPeriod" label="当前的期数" />
  5.     <el-table-column prop="principal" label="本金" />
  6.     <el-table-column prop="interest" label="利息" />
  7.     <el-table-column prop="total" label="本息" />
  8.     <el-table-column prop="returnDate" label="还款日期" width="150" />
  9.     <el-table-column prop="realReturnTime" label="实际还款时间" />
  10.     <el-table-column label="是否逾期">
  11.         <template slot-scope="scope">
  12.             <span v-if="scope.row.overdue">
  13.                 是（逾期金额：{{ scope.row.overdueTotal }}元）
  14.             </span>
  15.             <span v-else>否</span>
  16.         </template>
  17.     </el-table-column>
  18.     <el-table-column label="状态" width="80">
  19.         <template slot-scope="scope">
  20.             {{ scope.row.status === 0 ? '未还款' : '已还款' }}
  21.         </template>
  22.     </el-table-column>
  23. </el-table>

四、网站端显示还款计划

（一）后端

创建 LendReturnController

  1. @Api(tags = "还款计划")
  2. @RestController
  3. @RequestMapping("/api/core/lendReturn")
  4. @Slf4j
  5. public class LendReturnController {
  7.     @Resource
  8.     private LendReturnService lendReturnService;
  10.     @ApiOperation("获取列表")
  11.     @GetMapping("/list/{lendId}")
  12.     public R list(
  13.             @ApiParam(value = "标的id", required = true)
  14.             @PathVariable Long lendId) {
  15.         List<LendReturn> list = lendReturnService.selectByLendId(lendId);
  16.         return R.ok().data("list", list);
  17.     }
  18. }

（二）前端

页面脚本pages/lend/_id.vue

  1. async asyncData({ $axios, params }) {
  2.     ......
  3.     
  4.     //还款计划
  5.     let responseLendReturnList = await $axios.$get(
  6.       '/api/core/lendReturn/list/' + lendId
  7.     )
  9.     return {
  10.       ......,
  11.       lendReturnList: responseLendReturnList.data.list, //还款计划
  12.     }
  13. },

五、网站端显示回款计划

（一）后端

创建 LendItemReturnController

  1. @Api(tags = "回款计划")
  2. @RestController
  3. @RequestMapping("/api/core/lendItemReturn")
  4. @Slf4j
  5. public class LendItemReturnController {
  7.     @Resource
  8.     private LendItemReturnService lendItemReturnService;
  10.     @ApiOperation("获取列表")
  11.     @GetMapping("/auth/list/{lendId}")
  12.     public R list(
  13.             @ApiParam(value = "标的id", required = true)
  14.             @PathVariable Long lendId, HttpServletRequest request) {
  16.         String token = request.getHeader("token");
  17.         Long userId = JwtUtils.getUserId(token);
  18.         List<LendItemReturn> list = lendItemReturnService.selectByLendId(lendId, userId);
  19.         return R.ok().data("list", list);
  20.     }
  21. }

接口：LendItemReturnService

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

实现：LendItemReturnServiceImpl

  1. @Override
  2. public List<LendItemReturn> selectByLendId(Long lendId, Long userId) {
  3.     QueryWrapper<LendItemReturn> queryWrapper = new QueryWrapper<>();
  4.     queryWrapper
  5.         .eq("lend_id", lendId)
  6.         .eq("invest_user_id", userId)
  7.         .orderByAsc("current_period");
  8.     return baseMapper.selectList(queryWrapper);
  9. }

（二）前端

页面脚本pages/lend/_id.vue

  1. data() {
  2.   return {
  3.     ......,
  5.     lendItemReturnList: [], //回款计划
  6.   }
  7. },
  9. mounted() {
  10.   ......
  12.   //回款计划
  13.   this.fetchLendItemReturnList()
  14. },

methods

  1. //回款计划
  2. fetchLendItemReturnList() {
  3.     this.$axios
  4.         .$get('/api/core/lendItemReturn/auth/list/' + this.$route.params.id)
  5.         .then((response) => {
  6.         this.lendItemReturnList = response.data.list
  7.     })
  8. },

页面模板

pages/lend/_id.vue

  1. <!-- 回款计划 -->
  2. <div class="item-detail-body clearfix mrt30 ui-tab">
  3.     <div class="ui-tab-nav hd">
  4.         <ul>
  5.             <li class="nav_li active">
  6.                 <a href="javascript:;">回款计划</a>
  7.             </li>
  8.         </ul>
  9.     </div>
  10.     <div class="bd">
  11.         <div class="ui-tab-item active" style="display: block;">
  12.             <div class="repayment-list">
  13.                 <table border="0" cellpadding="0" cellspacing="0" width="100%">
  14.                     <thead>
  15.                         <tr>
  16.                             <th>期数</th>
  17.                             <th>本金(元)</th>
  18.                             <th>利息(元)</th>
  19.                             <th>本息(元)</th>
  20.                             <th>计划回款日期</th>
  21.                             <th>实际回款日期</th>
  22.                             <th>状态</th>
  23.                             <th>是否逾期</th>
  24.                         </tr>
  25.                     </thead>
  26.                     <tbody id="repayment_content">
  27.                         <tr
  28.                             v-for="lendItemReturn in lendItemReturnList"
  29.                             :key="lendItemReturn.id"
  30.                             >
  31.                             <td>{{ lendItemReturn.currentPeriod }}</td>
  32.                             <td class="c-orange">￥{{ lendItemReturn.principal }}</td>
  33.                             <td class="c-orange">￥{{ lendItemReturn.interest }}</td>
  34.                             <td class="c-orange">￥{{ lendItemReturn.total }}</td>
  35.                             <td>{{ lendItemReturn.returnDate }}</td>
  36.                             <td>{{ lendItemReturn.realReturnTime }}</td>
  37.                             <td>
  38.                                 {{ lendItemReturn.status === 0 ? '未还款' : '已还款' }}
  39.                             </td>
  40.                             <td>
  41.                                 <span v-if="lendItemReturn.overdue">
  42.                                     是（逾期金额：{{ lendReturn.overdueTotal }}元）
  43.                                 </span>
  44.                                 <span v-else>否</span>
  45.                             </td>
  46.                         </tr>
  47.                     </tbody>
  48.                 </table>
  49.             </div>
  50.         </div>
  51.     </div>
  52. </div>
标签： javascript vue.js 微服务
本文转载自: https://blog.csdn.net/m0_62946761/article/details/130438036
版权归原作者 zoeil 所有， 如有侵权，请联系我们删除。
登录后发布评论

“尚融宝28-投资列表展示”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？