1. 产品详情接口分析 70
2. 产品详情和投资记录实现实现 71
2.1 产品详情 71
2.1.1 业务接口 71
操作micr-api模块
ProductService
//产品详情 根据产品id ，查询产品信息 71
ProductInfo queryById(Integer id);2.1.2 业务接口实现类 71
操作micr-dataservice模块
ProductServiceImpl
//产品详情 根据产品id ，查询产品信息 71
@Override
public ProductInfo queryById(Integer id) {
ProductInfo productInfo = null;
if( id != null && id > 0 ){
productInfo = productInfoMapper.selectByPrimaryKey(id);
}
return productInfo;
}2.2 投资记录 72
2.2.1 实体类 72
操作micr-api模块
BidInfoProduct
package com.bjpowernode.api.pojo;
import java.io.Serializable;
import java.math.BigDecimal;
/**
* 投资记录的实体类 72
*/
public class BidInfoProduct implements Serializable {
private Integer id;
private String phone;
private String bidTime;
private BigDecimal bidMoney;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getBidTime() {
return bidTime;
}
public void setBidTime(String bidTime) {
this.bidTime = bidTime;
}
public BigDecimal getBidMoney() {
return bidMoney;
}
public void setBidMoney(BigDecimal bidMoney) {
this.bidMoney = bidMoney;
}
}2.2.2 业务接口 72
操作micr-api模块
InvestService
package com.bjpowernode.api.service;
import com.bjpowernode.api.pojo.BidInfoProduct;
import java.util.List;
/**
* 投资记录 72
*/
public interface InvestService {
/** 查询某个产品的投资记录 */
List<BidInfoProduct> queryBidListByProductId(Integer productId,
Integer pageNo,
Integer pageSize);
}2.2.2 业务接口实现类 73
操作micr-dataservice模块
InvestServiceImpl
package com.bjpowernode.dataservice.service;
import com.bjpowernode.api.pojo.BidInfoProduct;
import com.bjpowernode.api.service.InvestService;
import com.bjpowernode.common.util.CommonUtil;
import com.bjpowernode.dataservice.mapper.BidInfoMapper;
import org.apache.dubbo.config.annotation.DubboService;
import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.List;
/**
* 投资记录实现类 73
*/
@DubboService(interfaceClass = InvestService.class,version = "1.0")
public class InvestServiceImpl implements InvestService {
@Resource
private BidInfoMapper bidInfoMapper;
/** 查询某个产品的投资记录 */
@Override
public List<BidInfoProduct> queryBidListByProductId(Integer productId,
Integer pageNo,
Integer pageSize) {
List<BidInfoProduct> bidList = new ArrayList<>();
if(productId != null && productId > 0 ){
pageNo = CommonUtil.defaultPageNo(pageNo);
pageSize = CommonUtil.defaultPageSize(pageSize);
int offset = (pageNo - 1) * pageSize;
bidList = bidInfoMapper.selectByProductId(productId,offset,pageSize);
}
return bidList;
}
}2.2.3 在mapper中定义方法 73
操作micr-dataservice
BidInfoMapper
//查询某个产品的投资记录 73
List<BidInfoProduct> selectByProductId(@Param("productId") Integer productId,
@Param("offset") int offset,
@Param("rows") Integer rows);2.2.4 遍写sql 72
格式化数据 72
我们选择在数据库中直接格式化数据，我们以7号产品为例
直接对手机号和日期做了格式化
CONCAT( SUBSTRING( u.phone FROM 1 FOR 3 ), "******", SUBSTRING( u.phone FROM 10 FOR 2 ) ) AS phone, //CONCAT拼接字符串，SUBSTRING截取字符串
DATE_FORMAT( bid.bid_time, "%Y-%m-%d %H:%i:%s" ) AS bidTime
SELECT
bid.id,
CONCAT( SUBSTRING( u.phone FROM 1 FOR 3 ), "******", SUBSTRING( u.phone FROM 10 FOR 2 ) ) AS phone,
DATE_FORMAT( bid.bid_time, "%Y-%m-%d %H:%i:%s" ) AS bidTime,
bid.bid_money AS bidMoney
FROM
b_bid_info bid
JOIN u_user u ON bid.uid = u.id
WHERE
bid.prod_id = 7
ORDER BY
bid.bid_time DESC
LIMIT 1,5
BidInfoMapper.xml 73
操作micr-dataservice
<!--查询某个产品的投资记录 73-->
<select id="selectByProductId" resultType="com.bjpowernode.api.pojo.BidInfoProduct">
SELECT
bid.id,
CONCAT( SUBSTRING( u.phone FROM 1 FOR 3 ), "******", SUBSTRING( u.phone FROM 10 FOR 2 ) ) AS phone,
DATE_FORMAT( bid.bid_time, "%Y-%m-%d %H:%i:%s" ) AS bidTime,
bid.bid_money AS bidMoney
FROM
b_bid_info bid
JOIN u_user u ON bid.uid = u.id
WHERE
bid.prod_id = #{productId}
ORDER BY
bid.bid_time DESC
LIMIT #{offset},#{rows}
</select>2.3 消费者controller 74
操作micr-web
在BaseController中声明
//投资服务 74
@DubboReference(interfaceClass = InvestService.class,version = "1.0")
protected InvestService investService;ProductController 74
/*查询某个产品的详情和投资记录 74*/
@ApiOperation(value = "产品详情",notes = "查询某个产品的详细信息和投资5条记录")
@GetMapping("/product/info")
public RespResult queryProductDetail(@RequestParam("productId") Integer id){
RespResult result = RespResult.fail();
if( id != null && id > 0 ){
//调用产品查询
ProductInfo productInfo = productService.queryById(id);
if( productInfo != null){
//查询投资记录
List<BidInfoProduct> bidInfoList = investService.queryBidListByProductId(id,1,5);
//查询成功
result = RespResult.ok();
result.setData(productInfo);
result.setList(bidInfoList);
} else {
result.setRCode(RCode.PRODUCT_OFFLINE);
}
}
return result;
}测试 75
启动后端
先使用postman测试,成功
http://localhost:8000/api/v1/product/info
3. 前端实现 75-76
前端我们不做重点，直接给出代码
ProductDetail.vue 76
<template>
<div>
<Header></Header>
<div class="content clearfix">
<div class="detail-left">
<div class="detail-left-title">{{ product.productName }}（{{ product.productNo }}期）</div>
<ul class="detail-left-number">
<li>
<span>历史年化收益率</span>
<p><b>{{ product.rate }}</b>%</p>
<span>历史年化收益率</span>
</li>
<li>
<span>募集金额（元）</span>
<p><b>{{ product.productMoney }}</b>元</p>
<span v-if="product.leftProductMoney > 0 ">募集中 剩余募集金额{{ product.leftProductMoney }}元</span>
<span v-else>已满标</span>
</li>
<li>
<span>投资周期</span>
<p v-if="product.productType == 0 "><b>{{product.cycle}}</b>天</p>
<p v-else><b>{{product.cycle}}</b>个月</p>
</li>
</ul>
<div class="detail-left-way">
<span>收益获取方式</span>
<span>收益返还：<i>到期还本付息</i></span>
</div>
<!--投资记录-->
<div class="datail-record">
<h2 class="datail-record-title">投资记录</h2>
<div class="datail-record-list">
<table align="center" width="880" border="0" cellspacing="0" cellpadding="0">
<colgroup>
<col style="width: 72px" />
<col style="width: 203px" />
<col style="width: 251px" />
<col style="width: 354px" />
</colgroup>
<thead class="datail_thead">
<tr>
<th>序号</th>
<th>投资人</th>
<th>投资金额（元）</th>
<th>投资时间</th>
</tr>
</thead>
<tbody>
<tr v-for="(bid,ind) in bidList" :key="bid.id">
<td>{{ind+1}}</td>
<td class="datail-record-phone">{{ bid.phone }}</td>
<td>{{ bid.bidMoney }}</td>
<td>{{ bid.bidTime }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--右侧-->
<div class="detail-right">
<div class="detail-right-title">立即投资</div>
<div class="detail-right-mode">
<h3 class="detail-right-mode-title">收益方式</h3>
<p class="detail-right-mode-p"><span>到期还本付息</span></p>
<h3 class="detail-right-mode-title">我的账户可用</h3>
<div class="detail-right-mode-rmb">
<p>资金（元）：******</p>
<a href="login.html" target="_blank">请登录</a>
</div>
<h3 class="detail-right-mode-title">预计本息收入（元）</h3>
<form action="" id="number_submit">
<p>请在下方输入投资金额</p>
<input type="text" placeholder="请输入日投资金额，应为100元整倍数" name="" class="number-money" >
<input type="submit" value="立即投资" class="submit-btn">
</form>
</div>
</div>
</div>
<Footer></Footer>
</div>
</template>
<script>
import Header from "@/components/common/Header";
import Footer from "@/components/common/Footer";
import {doGet} from "@/api/httpRequest";
export default {
name: "ProductDetail",
components:{
// eslint-disable-next-line vue/no-unused-components
Header,
// eslint-disable-next-line vue/no-unused-components
Footer
},
data(){
return {
product:{
id: 0,
productName: "",
rate: 0.0,
cycle: 0,
releaseTime: 0,
productType: 0,
productNo: "",
productMoney: 0,
leftProductMoney: 0,
bidMinLimit: 0,
bidMaxLimit: 0,
productStatus: 0,
productFullTime: "",
productDesc: ""
},
bidList:[
{
id: 0,
phone: "",
bidTime: "",
bidMoney: 0.00
}]
}
},
mounted() {
let productId = this.$route.query.productId;
doGet('/v1/product/info',{productId:productId})
.then(resp=>{
if( resp ) {
this.product = resp.data.data;
this.bidList = resp.data.list;
}
})
}
}
</script>
<style scoped>
</style>测试 76
