产品详情投资记录

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