数据看板页面以及产品列表页面和编辑客户信息页面基础代码编写

src/views/GBC/ProductDetail.vue

@@ -1,213 +0,0 @@
-<template>
-  <div class="product-detail-container">
-    <!-- tab 栏 -->
-    <van-sticky>
-      <van-tabs v-model="active" color="#E9332EFF" title-active-color="#E9332EFF" class="">
-        <van-tab title="产品特色" class="mt10"> </van-tab>
-        <van-tab title="产品资料" class="mt10"> </van-tab>
-      </van-tabs>
-    </van-sticky>
-    <div v-show="active == '0'" class="pt10 pb45 clearfix">
-      <img class="product-detail-introduct-image fl" :src="item" alt="" v-for="(item, index) in introductImages" :key="index" />
-    </div>
-    <van-list v-show="active == '1'">
-      <van-cell
-        class="product-detail-list-item p10 fs12 fw400 bg-white"
-        :title="item.name"
-        is-link
-        v-for="(item, index) in docuList"
-        :key="index"
-        @click="goDocu(item.url, item.type, item.name)"
-      />
-    </van-list>
-    <!-- 底部按钮 -->
-    <div class="bottom-area bottom-btn" v-if="branchType != 3">
-      <van-button class="m-btn fl green" color="#FEEFD8" @click="goProposal">制作建议书</van-button>
-      <van-button class="m-btn fr" type="danger" @click="goInsure">立即投保</van-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import { Tab, Tabs, List, Row, Col, Icon, Cell, Sticky } from 'vant'
-import { getProductInfo } from '@/api/ebiz/product/product.js'
-import { funcPermCheck } from '@/api/ebiz/common/common'
-import riskRules from '@/views/common/risk-rules.js'
-import { getAgentInfo } from '@/api/ebiz/my/my.js'
-
-export default {
-  components: {
-    [Tab.name]: Tab,
-    [Tabs.name]: Tabs,
-    [List.name]: List,
-    [Row.name]: Row,
-    [Col.name]: Col,
-    [Icon.name]: Icon,
-    [Cell.name]: Cell,
-    [Sticky.name]: Sticky
-  },
-  data() {
-    return {
-      isCheck: 0, //查看是否有权限
-      active: 2,
-      docuList: [], // 产品资料文件
-      introductImages: [], // 产品特色图片
-      itemProductDTOS: [], // 产品信息
-      branchType:'3',
-    }
-  },
-  created() {
-    //获取展示的产品的 code
-    // let code = localStorage.productDetailCode
-    let code = this.$route.params.productDetailCode
-    console.log(code)
-    this.getProductDetail(code)
-    funcPermCheck({}).then(res => {
-      this.isCheck = res.result
-    })
-  },
-  mounted(){
-    this.getAgentInfo()
-  },
-  methods: {
-    getAgentInfo(){
-      getAgentInfo({}).then(res=>{
-        if(res.result == 0){
-          console.log('getAgentInfo',res)
-          this.branchType = res.branchType
-        }
-      })
-    },
-    goDocu(url, type, name) {
-      let pdfUrl = encodeURIComponent(url)
-      this.$jump({
-        flag: 'h5',
-        extra: {
-          title: name,
-          // url: 'http://47.96.143.111/pdfjs/web/viewer.html?file=' + url //测试代码
-          url: this.$mainUrl + '/pdfjs/web/viewer.html?file=' + pdfUrl
-        }
-      })
-      // 跳转到产品资料详情
-      // 保存url
-      // window.localStorage.setItem('documentInfo', JSON.stringify({ documentUrl: url, documentType: type }))
-      // // 保存文件类型
-      // // 0-图片, 1-pdf, 2-word, 3-excel
-      // window.localStorage.setItem('documentType', type)
-      // this.$jump({
-      //   flag: 'h5',
-      //   extra: {
-      //     url: location.origin + '/#/product/productDocument'
-      //   },
-      //   routerInfo: {
-      //     path: `/product/productDocument`
-      //   }
-      // })
-    },
-    goProposal() {
-      this.$CacheUtils.removeLocItem('orderNo')
-      // 跳转到制作建议书( 投保人信息 )
-      this.$jump({
-        flag: 'h5',
-        extra: {
-          url: location.origin + '/#/proposal/appnt'
-        },
-        routerInfo: {
-          path: `/proposal/appnt`
-        }
-      })
-    },
-    async goInsure() {
-      if (this.isCheck == '1') {
-        //校验该代理人是否有该产品的售卖权限
-        return this.$toast('您暂无使用权限！如有问题咨询，请联系个险业务部。')
-      }
-      localStorage.orderNo = ''
-      localStorage.chooseProductCodes = '' //置空所选险种
-      let path = `/sale/insuredInfo`
-      let flagPermission = {
-        flag:true
-      }
-      if (this.$route.params.productDetailCode == 'GFRSPRO_M0024' || this.$route.params.productDetailCode == 'GFRSPRO_M0040') {
-        flagPermission = await riskRules.getProductSellPermissionList('GFRS_M0040', this)
-        let specilFlag = '1'
-        path = `${path}?specilFlag=${specilFlag}`
-      } else if (this.$route.params.productDetailCode == 'GFRSPRO_M0044') {
-        flagPermission = await riskRules.getProductSellPermissionList('GFRS_M0044', this)
-        let specilFlag = '1'
-        path = `${path}?specilFlag=${specilFlag}`
-      }else if (this.$route.params.productDetailCode == 'GFRSPRO_M0051') {
-        flagPermission = await riskRules.getProductSellPermissionList('GFRS_M0051', this)
-        let specilFlag = '1'
-        path = `${path}?specilFlag=${specilFlag}`
-      } else {
-        flagPermission.flag = false
-      }
-      if (flagPermission.flag) {
-        //校验该代理人是否有该产品的售卖权限
-        return this.$toast(flagPermission.resultMessage)
-      }
-      // 从产品列表进入时，存储所选产品的code--如果是选择产品, 进入电子投保, 在主险列表能默认选中我在产品列表选择的产品
-      localStorage.productCodeChooseFromList = this.itemProductDTOS[0].productCode      // 跳转到投保建议
-      this.$jump({
-        flag: 'h5',
-        extra: {
-          url: location.origin + '/#' + path
-        },
-        routerInfo: {
-          path: path
-        }
-      })
-    },
-    async getProductDetail(code) {
-      // 获取产品详情数据
-      console.log(code)
-      const res = await getProductInfo({
-        itemCode: code,
-        platform: 'app'
-      })
-      console.log(res)
-      if (res.result == 0) {
-        // 获取产品特色图片
-        this.introductImages = res.productShowInfo.introductImages
-        // 获取产品资料文件
-        this.docuList = res.productShowInfo.documents
-        this.itemProductDTOS = res.productShowInfo.itemProductDTOS
-      }
-    }
-  },
-  beforeRouteLeave(to, from, next) {
-    document.body.style.backgroundColor = ''
-    next()
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.product-detail-container {
-  /deep/.van-sticky {
-    background: #fff;
-  }
-  .product-detail-introduct-image {
-    width: 100%;
-  }
-  // /deep/.van-tabs__content {
-  //   margin-bottom: 45px;
-  // }
-  // /deep/.van-tabs__content::after {
-  //   content: '';
-  //   display: table;
-  //   clear: both;
-  // }
-}
-.bottom-area {
-  /deep/.m-btn {
-    width: 50%;
-    border-color: transparent;
-  }
-  /deep/.van-button--default {
-    background-color: #feefd8;
-    color: #e9332e;
-  }
-}
-</style>

src/views/GBC/customerDetail.vue

@@ -1,6 +1,30 @@
 <template>
   <div>
-    编辑客户信息
+    <div style="background: #fff;margin: 10px;padding: 10px;border-radius: 5px;">
+      <div style="display: flex;font-size: 14px;font-weight: bold;">
+        <span style="width: 25%;display: flex;align-items: center;align-items: center;line-height: 30px;justify-content: center;">保单数量</span>
+        <span style="width: 25%;display: flex;align-items: center;align-items: center;line-height: 30px;justify-content: center">家庭成员</span>
+        <span style="width: 25%;display: flex;align-items: center;align-items: center;line-height: 30px;justify-content: center;">总保额</span>
+        <span style="width: 25%;display: flex;align-items: center;align-items: center;line-height: 30px;justify-content: center;">总保费</span>
+      </div>
+      <div style="display: flex;font-size: 13px;color: #999;margin-top: 10px;">
+        <span style="width: 25%;display: flex;align-items: flex-end;align-items: baseline;justify-content: center;">
+          <span style="color: #EC5449;font-size: 22px;margin-right: 7px;font-weight: bold;">4</span>份
+        </span>
+        <span style="width: 25%;display: flex;align-items: flex-end;align-items: baseline;justify-content: center;">
+          <span style="color: #EC5449;font-size: 22px;margin-right: 7px;font-weight: bold;">5</span>人
+        </span>
+        <span style="width: 25%;display: flex;align-items: flex-end;align-items: baseline;justify-content: center;">
+          <span style="color: #EC5449;font-size: 22px;margin-right: 7px;font-weight: bold;">60</span>万元
+        </span>
+        <span style="width: 25%;display: flex;align-items: flex-end;align-items: baseline;justify-content: center;">
+          <span style="color: #EC5449;font-size: 22px;margin-right: 7px;font-weight: bold;">10</span>万元
+        </span>
+      </div>
+    </div>
+    <div v-for="(item,index) in dataList1" :key="index">
+      <div class="triangle"></div>
+    </div>
   </div>
 </template>
 
@@ -17,7 +41,16 @@ export default {
   },
   data() {
     return {
-
+      dataList1:[
+        {name:'刘亚丽',type:'妻子',src:"",sex:'女'},
+        {name:'刘桂芬',type:'母亲',src:"",sex:'女'},
+        {name:'谢居安',type:'父亲',src:"",sex:'女'},
+        {name:'谢危',type:'儿子',src:"",sex:'女'},
+        {name:'刘亚丽',type:'妻子',src:"",sex:'女'},
+        {name:'刘桂芬',type:'母亲',src:"",sex:'女'},
+        {name:'谢居安',type:'父亲',src:"",sex:'女'},
+        {name:'谢危',type:'儿子',src:"",sex:'女'},
+      ],
     }
   },
   created() {
@@ -36,5 +69,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+  .triangle {
+    width: 0;
+    height: 0;
+    border-width: 15px; /* 设置边长 */
+    border-style: solid;
+    border-color: transparent transparent #000000 transparent; /* 透明色为背景色，#000000为需要显示的颜色 */
+  }
 </style>

src/views/GBC/projectDetail.vue

@@ -64,23 +64,65 @@
           <p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目成员分配</p>
           <p style="color: #a7a7a7;font-size: 14px;">数据截止日期：2024-03-30</p>
         </div>
-        <div style="margin-top: 10px;margin-bottom: 5px;background: rgba(255, 87, 83, 1);line-height: 30px;display: flex;align-items: center;color: #fff;font-size: 14px;">
+        <div style="margin-top: 10px;margin-bottom: 3px;background: rgba(255, 87, 83, 0.7);line-height: 30px;display: flex;align-items: center;color: #fff;font-size: 14px;">
           <span style="width: 18%;display: flex;justify-content: center;">成员</span>
           <span style="width: 22%;display: flex;justify-content: center;">角色</span>
           <span style="width: 30%;display: flex;justify-content: center;">累计标保(元)</span>
           <span style="width: 30%;display: flex;justify-content: center;">受理标保(元)</span>
         </div>
+        <div>
+          <div v-for="item in dataList2" style="background: rgba(251, 235, 230, 0.44);margin-bottom: 1px;line-height: 30px;display: flex;align-items: center;color: #333;font-size: 13px;">
+            <span style="width: 18%;display: flex;justify-content: center;">{{item.name}}</span>
+            <span style="width: 22%;display: flex;justify-content: center;">{{item.role}}</span>
+            <span style="width: 30%;display: flex;justify-content: center;">{{item.value1}}</span>
+            <span style="width: 30%;display: flex;justify-content: center;">{{item.value2}}</span>
+          </div>
+        </div>
+      </div>
+
+      <div style="margin: 10px;padding: 10px;background: #fff;border-radius: 5px;">
+        <div style="border-bottom: 1px dashed #666;padding-bottom: 15px;">
+          <p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目数据统计</p>
+          <p style="color: #a7a7a7;font-size: 14px;">数据截止日期：2024-03-30</p>
+        </div>
+        <div style="margin-top: 10px;margin-bottom: 3px;background: rgba(255, 87, 83, 0.7);line-height: 30px;display: flex;align-items: center;color: #fff;font-size: 14px;">
+          <span style="width: 25%;display: flex;justify-content: center;">小组</span>
+          <span style="width: 25%;display: flex;justify-content: center;">组长</span>
+          <span style="width: 25%;display: flex;justify-content: center;">获客人数</span>
+          <span style="width: 25%;display: flex;justify-content: center;">获客率</span>
+        </div>
+        <div>
+          <div style="background: rgba(251, 235, 230, 0.44);margin-bottom: 1px;line-height: 30px;display: flex;align-items: center;color: #333;font-size: 13px;">
+            <span style="width: 50%;display: flex;justify-content: center;">项目合并</span>
+            <span style="width: 25%;display: flex;justify-content: center;">890</span>
+            <span style="width: 25%;display: flex;justify-content: center;">89%</span>
+          </div>
+        </div>
+        <div>
+          <div v-for="(item,index) in dataList3" :key="index" style="background: rgba(251, 235, 230, 0.44);margin-bottom: 1px;line-height: 30px;display: flex;align-items: center;color: #333;font-size: 13px;">
+            <span style="width: 25%;display: flex;justify-content: center;">{{item.name}}</span>
+            <span style="width: 25%;display: flex;justify-content: center;">{{item.role}}</span>
+            <span style="width: 25%;display: flex;justify-content: center;">{{item.value1}}</span>
+            <span style="width: 25%;display: flex;justify-content: center;">{{item.value2}}</span>
+          </div>
+        </div>
       </div>
     </div>
     <div v-if="tabActive == 'productList'">
-      <div>产品列表</div>
+      <div v-for="(item,index) in dataList4" @click="goProductDetail(item.productCode)" :key="index" style="background: #fff;border-radius: 5px;margin: 5px;display: flex;padding: 5px;">
+        <img :src="item.productImageUrl"  style="display: inline-block;width: 35%;border-radius: 5px;"/>
+        <div style="display: inline-block;width: 65%;padding-left: 10px;">
+          <p style="font-size: 16px;">{{item.productName}}</p>
+          <p style="font-size: 14px;color: #bdbdbd;margin-top: 20px;">{{item.productDesc}}</p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import { Tab, Tabs, Search, DropdownMenu, DropdownItem, Circle } from 'vant'
-
+import { getList } from '@/api/ebiz/product/product.js'
 export default {
   components: {
     [Tab.name]: Tab,
@@ -156,13 +198,32 @@ export default {
         {name:'累计承保人数(人)',value:'9569'},
         {name:'累计承保件数(件)',value:'262'},
       ],
+      dataList2:[
+        {name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
+        {name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
+        {name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
+        {name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
+        {name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
+        {name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
+        {name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
+      ],
+      dataList3:[
+        {name:'A组',role:'李艾',value1:'600',value2:'60'},
+        {name:'A组',role:'李艾',value1:'600',value2:'60'},
+        {name:'A组',role:'李艾',value1:'600',value2:'60'},
+        {name:'A组',role:'李艾',value1:'600',value2:'60'},
+        {name:'A组',role:'李艾',value1:'600',value2:'60'},
+        {name:'A组',role:'李艾',value1:'600',value2:'60'},
+        {name:'A组',role:'李艾',value1:'600',value2:'60'},
+      ],
+      dataList4:[],
     }
   },
   created() {
 
   },
   mounted(){
-
+    this.getProductList()
   },
   methods: {
     goCustomerDetail(data){
@@ -173,6 +234,33 @@ export default {
         },
       })
     },
+    getProductList(){
+      let params = {
+        type: 'app'
+      }
+      getList(params).then(res=>{
+        if(res.result == '0') {
+          this.dataList4 = this.dataList4.concat(res.productList)
+          this.dataList4 = this.dataList4.concat(res.productList)
+          this.dataList4 = this.dataList4.concat(res.productList)
+          this.dataList4 = this.dataList4.concat(res.productList)
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    goProductDetail(productCode) {
+      localStorage.productDetailCode = productCode
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/product/ProductDetail/${productCode}`
+        },
+        routerInfo: {
+          path: `/product/ProductDetail/${productCode}`
+        }
+      })
+    },
   },
   computed: {
     text() {