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

管理端显示还款计划

一、后端接口

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 list = lendReturnService.selectByLendId(lendId);
        return R.ok().data("list", list);
    }
}

2、Service

接口：LendReturnService

List selectByLendId(Long lendId);

实现：LendReturnServiceImpl 

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

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

还款计划

    
    
    
    
    
    
    
    
        
    
    
        
    

一、后端接口

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 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 list = lendItemReturnService.selectByLendId(lendId, userId);
        return R.ok().data("list", list);
    }
}

2、Service

接口：LendItemReturnService

List selectByLendId(Long lendId, Long userId);

实现：LendItemReturnServiceImpl 

@Override
public 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);
}

二、前端

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

 

    

        

            

                回款计划
            
        
    
    

        

            

                

                    

                        

                            
期数
                            
本金(元)
                            
利息(元)
                            
本息(元)
                            
计划回款日期
                            
实际回款日期
                            
状态
                            
是否逾期
                        
                    
                    

                        

                            
{{ lendItemReturn.currentPeriod }}
                            
￥{{ lendItemReturn.principal }}
                            
￥{{ lendItemReturn.interest }}
                            
￥{{ lendItemReturn.total }}
                            
{{ lendItemReturn.returnDate }}
                            
{{ lendItemReturn.realReturnTime }}
                            

                                {{ lendItemReturn.status === 0 ? '未还款' : '已还款' }}
                            
                            

                                
                                    是（逾期金额：{{ lendReturn.overdueTotal }}元）
                                
                                否
                            
                        
                    
                
            
        
    

 上篇链接：

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