您现在的位置是：首页 >学无止境 >尚融宝28-投资列表展示网站首页学无止境

尚融宝28-投资列表展示

zoeil 2023-07-07 12:00:03
简介尚融宝28-投资列表展示

目录

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

（一）后端

（二）前端

二、网站端显示投资记录

（一）后端

（二）前端

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

（一）后端

（二）前端

四、网站端显示还款计划

（一）后端

（二）前端

五、网站端显示回款计划

（一）后端

（二）前端

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

（一）后端

controller

创建 AdminLendItemController

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

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

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

（二）前端

创建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")
@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, //还款计划
    }
},

五、网站端显示回款计划

（一）后端

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

接口：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);
}

（二）前端

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

风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐