当前位置：首页 > news >正文

微服务项目：尚融宝（57）（核心业务流程：投资列表展示（2））

news 来源：原创 2024/5/2 15:47:09

管理端显示还款计划

一、后端接口

1、Controller

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

2、Service

接口：LendReturnService

List<LendReturn> selectByLendId(Long lendId);

实现：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;
}

二、前端

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

2、页面脚本

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

3、页面模板

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>

一、后端接口

Controller

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

二、前端

页面脚本

pages/lend/_id.vue

async asyncData({ $axios, params }) {
    ......
    
    //还款计划
    let responseLendReturnList = await $axios.$get(
      '/api/core/lendReturn/list/' + lendId
    )

    return {
      ......,
      lendReturnList: responseLendReturnList.data.list, //还款计划
    }
},

一、后端接口

Controller

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

2、Service

接口：LendItemReturnService

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

实现：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);
}

二、前端

1、页面脚本

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

2、页面模板

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>

上篇链接：

(1条消息) 微服务项目：尚融宝（56）（核心业务流程：投资列表展示（1））_一个风轻云淡的博客-CSDN博客https://blog.csdn.net/m0_62436868/article/details/127020735?spm=1001.2014.3001.5502