31. 尚融宝标的管理
整体流程图
标的列表
需求
一、后端实现
1、entity
在Lend.java类中扩展以下字段
@ApiModelProperty(value = "其他参数")
@TableField(exist = false)
private Map<String, Object> param = new HashMap<>();
2、controller
添加 AdminLendController.java
package com.indi.srb.core.controller.admin;
@Api(tags = "标的管理")
@RestController
@RequestMapping("/admin/core/lend")
public class AdminLendController {
@Resource
private LendService lendService;
@ApiOperation("标的列表")
@GetMapping("/list")
public R list(){
List<Lend> list = lendService.selectList();
return R.ok().setData("list",list);
}
}
3、service
LendService.java
List<Lend> selectList();
LendServiceImpl.java
@Resource
private DictService dictService
@Override
public List<Lend> selectList() {
List<Lend> list = baseMapper.selectList(null);
list.forEach(lend -> {
setExtensionLend(lend);
});
return list;
}
/**
* 设置扩展字段
* @param lend
*/
private void setExtensionLend(Lend lend) {
Map<String,Object> map = new HashMap<>();
map.put("status", LendStatusEnum.getMsgByStatus(lend.getStatus()));
map.put("returnMethod",dictService.getNameByDictCodeAndValue("returnMethod",lend.getReturnMethod()));
lend.setParam(map);
}
二、前端实现
1、创建页面组件
创建 src/views/core/lend/list.vue
创建 src/views/core/lend/detail.vue
2、配置路由
src/router/index.js
{
path: '/core/lend',
component: Layout,
redirect: '/core/lend/list',
name: 'coreLend',
meta: {
title: '标的管理', icon: 'el-icon-s-flag' },
alwaysShow: true,
children: [
{
path: 'list',
name: 'coreLendList',
component: () => import('@/views/core/lend/list'),
meta: {
title: '标的列表' }
},
{
path: 'detail/:id',
name: 'coreLendDetail',
component: () => import('@/views/core/lend/detail'),
meta: {
title: '标的详情' },
hidden: true
}
]
},
3、定义api
创建 src/api/core/lend.js
import request from '@/utils/request'
export default {
getList() {
return request({
url: `/admin/core/lend/list`,
method: 'get'
})
}
}
4、template
src/views/core/lend/list.vue
<template>
<div class="app-container">
<el-table :data="list" stripe>
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column prop="lendNo" label="标的编号" width="160" />
<el-table-column prop="amount" label="标的金额" />
<el-table-column prop="period" label="投资期数" />
<el-table-column label="年化利率">
<template slot-scope="scope">
{
{ scope.row.lendYearRate * 100 }}%
template>
el-table-column>
<el-table-column prop="investAmount" label="已投金额" />
<el-table-column prop="investNum" label="投资人数" />
<el-table-column prop="publishDate" label="发布时间" width="150" />
<el-table-column prop="lendStartDate" label="开始日期" />
<el-table-column prop="lendEndDate" label="结束日期" />
<el-table-column prop="param.returnMethod" label="还款方式" />
<el-table-column prop="param.status" label="状态" />
<el-table-column label="操作" width="150" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini">
<router-link :to="'/core/lend/detail/' + scope.row.id">
查看
router-link>
el-button>
<el-button
v-if="scope.row.status == 1"
type="warning"
size="mini"
@click="makeLoan(scope.row.id)"
>
放款
el-button>
template>
el-table-column>
el-table>
div>
template>
5、script
src/views/core/lend/list.vue
<script>
import lendApi from '@/api/core/lend'
export default {
data() {
return {
list: null // 列表
}
},
created() {
this.fetchData()
},
methods: {
// 加载列表数据
fetchData() {
lendApi.getList().then(response => {
this.list = response.data.list
})
}
}
}
script>
标的详情
需求
一、后端实现
1、controller
AdminLendController.java
@ApiOperation("标的详情")
@GetMapping("/getLendDetail/{id}")
public R getLendDetail(
@ApiParam(value = "标的id", required = true)
@PathVariable Long id) {
Map<String, Object> lendDetail = lendService.getLendDetail(id);
return R.ok().setData("lendDetail", lendDetail);
}
2、service
LendService.java
Map<String, Object> getLendDetail(Long id);
LendServiceImpl.java
@Resource
private BorrowerService borrowerService;
@Override
public Map<String, Object> getLendDetail(Long id) {
// 获取表的信息
Lend lend = baseMapper.selectById(id);
setExtensionLend(lend);
QueryWrapper<Borrower> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("user_id", lend.getUserId());
Borrower borrower = borrowerService.getBaseMapper().selectOne(queryWrapper);
// 获取借款人信息
BorrowerDetailVO borrowerDetailVO = borrowerService.getBorrowerDetailVO(borrower.getId());
Map<String,Object> map = new HashMap<>();
map.put("lend",lend);
map.put("borrower",borrowerDetailVO);
return map;
}
二、前端实现
1、定义api
src/api/core/lend.js
show(id) {
return request({
url: `/admin/core/lend/show/${
id}`,
method: 'get'
})
}
2、页面模板
src/views/core/lend/detail.vue
<template>
<div class="app-container">
<h4>标的信息h4>
<table
class="table table-striped table-condenseda table-bordered"
width="100%"
>
<tbody>
<tr>
<th width="15%">标的编号th>
<td width="35%">
<b>{
{ lendDetail.lend.lendNo }}b>
td>
<th width="15%">标题th>
<td width="35%">{
{ lendDetail.lend.title }}td>
tr>
<tr>
<th>标的金额th>
<td>{
{ lendDetail.lend.amount }}元td>
<th>投资期数th>
<td>{
{ lendDetail.lend.period }}个月td>
tr>
<tr>
<th>年化利率th>
<td>
标的：{
{ lendDetail.lend.lendYearRate * 100 }}%
<br />
平台：{
{ lendDetail.lend.serviceRate * 100 }}%
td>
<th>还款方式th>
<td>{
{ lendDetail.lend.param.returnMethod }}td>
tr>
<tr>
<th>最低投资金额th>
<td>{
{ lendDetail.lend.lowestAmount }}元td>
<th>发布日期th>
<td>{
{ lendDetail.lend.publishDate }}td>
tr>
<tr>
<th>开始日期th>
<td>{
{ lendDetail.lend.lendStartDate }}td>
<th>结束日期th>
<td>{
{ lendDetail.lend.lendEndDate }}td>
tr>
<tr>
<th>已投金额th>
<td>
<b>{
{ lendDetail.lend.investAmount }}元b>
td>
<th>投资人数th>
<td>{
{ lendDetail.lend.investNum }}人td>
tr>
<tr>
<th>状态th>
<td>
<b>{
{ lendDetail.lend.param.status }}b>
td>
<th>创建时间th>
<td>{
{ lendDetail.lend.createTime }}td>
tr>
<tr>
<th>说明th>
<td colspan="3">
<b>{
{ lendDetail.lend.lendInfo }}b>
td>
tr>
tbody>
table>
<h4>平台收益信息h4>
<table
class="table table-striped table-condenseda table-bordered"
width="100%"
>
<tbody>
<tr>
<th width="15%">标的预期收益th>
<td width="35%">
<b>{
{ lendDetail.lend.expectAmount }}元b>
td>
<th width="15%">标的已获取收益th>
<td width="35%">{
{ lendDetail.lend.realAmount }}元td>
tr>
tbody>
table>
<h4>借款人信息h4>
<table
class="table table-striped table-condenseda table-bordered"
width="100%"
>
<tbody>
<tr>
<th width="15%">借款人th>
<td width="35%">
<b>{
{ lendDetail.borrower.name }}b>
td>
<th width="15%">手机th>
<td width="35%">{
{ lendDetail.borrower.mobile }}td>
tr>
<tr>
<th>身份证th>
<td>{
{ lendDetail.borrower.idCard }}td>
<th>性别th>
<td>{
{ lendDetail.borrower.sex }}td>
tr>
<tr>
<th>年龄th>
<td>{
{ lendDetail.borrower.age }}td>
<th>是否结婚th>
<td>{
{ lendDetail.borrower.marry }}td>
tr>
<tr>
<th>学历th>
<td>{
{ lendDetail.borrower.education }}td>
<th>行业th>
<td>{
{ lendDetail.borrower.industry }}td>
tr>
<tr>
<th>月收入th>
<td>{
{ lendDetail.borrower.income }}td>
<th>还款来源th>
<td>{
{ lendDetail.borrower.returnSource }}td>
tr>
<tr>
<th>创建时间th>
<td>{
{ lendDetail.borrower.createTime }}td>
<th>状态th>
<td>{
{ lendDetail.borrower.status }}td>
tr>
tbody>
table>
<el-row style="text-align:center;margin-top: 40px;">
<el-button @click="back">
返回
el-button>
el-row>
div>
template>
3、页面脚本
src/views/core/lend/detail.vue
<script>
import lendApi from '@/api/core/lend'
import '@/styles/show.css'
export default {
data() {
return {
lendDetail: {
lend: {
param: {
}
},
borrower: {
}
}
}
},
created() {
if (this.$route.params.id) {
this.fetchDataById()
}
},
methods: {
fetchDataById() {
lendApi.show(this.$route.params.id).then(response => {
this.lendDetail = response.data.lendDetail
})
},
back() {
this.$router.push({
path: '/core/lend/list' })
}
}
}
script>