产品列表优化

src/router/ebiz/product.js

@@ -1,4 +1,5 @@
 //产品列表 定义相关组件
+import { improveProduct } from '@/router/ebiz/productFlowImprove'
 const productList = () => import('@/views/ebiz/product/ProductList')
 const productDetail = () => import('@/views/ebiz/product/ProductDetail')
 const productDocument = () => import('@/views/ebiz/product/ProductDocument')
@@ -40,5 +41,6 @@ export default [
       title: '首页产品',
       index: 4
     }
-  }
+  },
+  ...improveProduct
 ]

src/router/ebiz/productFlowImprove.js

@@ -0,0 +1,44 @@
+//产品列表 定义相关组件
+const productDetail = () => import('@/views/ebiz/product/ProductDetail')
+const productDocument = () => import('@/views/ebiz/product/ProductDocument')
+const homeProduct = () => import('@/views/ebiz/product/HomeProduct')
+
+/**@type {import("vue-router").RouteRecord}*/
+export const improveProduct = [
+  {
+    path: '/pfi/product/productList',
+    name: 'productList',
+    component: () =>import('@/views/ebiz/productFlowImprove/ProductList.vue'),
+    meta: {
+      title: '产品列表',
+      index: 1
+    }
+  },
+  {
+    path: '/pfi/product/productDetail/:productDetailCode',
+    name: 'productDetail',
+    component: productDetail,
+    meta: {
+      title: '产品详情',
+      index: 2
+    }
+  },
+  {
+    path: '/pfi/product/productDocument',
+    name: 'productDocument',
+    component: productDocument,
+    meta: {
+      title: '产品资料',
+      index: 3
+    }
+  },
+  {
+    path: '/pfi/product/homeProduct',
+    name: 'homeProduct',
+    component: homeProduct,
+    meta: {
+      title: '首页产品',
+      index: 4
+    }
+  }
+]

src/router/ebiz/sale.js

@@ -1,7 +1,7 @@
 //电子投保 定义相关组件
 const list = () => import('@/views/ebiz/sale/List')
 const insuredPerson = () => import('@/views/ebiz/sale/InsuredPerson')
-const insuredInfo = () => import('@/views/ebiz/sale/InsuredInfo')
+const insuredInfo = () => import('@/views/ebiz/sale/InsuredInfo.vue')
 const result = () => import('@/views/ebiz/sale/Result')
 const beneficiary = () => import('@/views/ebiz/sale/Beneficiary')
 const attachmentManagement = () => import('@/views/ebiz/sale/AttachmentManagement')

src/views/ebiz/product/ProductList.vue

@@ -13,7 +13,7 @@
         <div class="product-list-item-info fl ml10 w220">
           <p class="product-list-item-title fs16 fwb mt15">{{ item.productName }}</p>
           <p class="product-list-item-desc fs13 mt20 gray">{{ item.productDesc }}</p>
-        </div>
+        </div>duc
       </div>
       <p class="text-center p15 c-gray-base">-- END --</p>
     </div>

src/views/ebiz/productFlowImprove/HomeProduct.vue

@@ -0,0 +1,476 @@
+<template>
+  <div ref="product" class="home-product-container pb20">
+    <!-- 非个险 -->
+    <template v-if="!isPersonalInsu">
+      <div class="home-product-content" v-if="branchType != '12'">
+        <!-- 产品中心 -->
+        <div class="pcenter-title flex pt10 mr20 mb10 ml15 justify-content-s  align-items-c" style="height: 30px;">
+          <h3 class="center-title fs15 pl10" style="border-left: 4px solid red;">知识社区</h3>
+          <span class="more fs13 c-gray-base" @click="checkZssqMore"><span>查看更多</span><van-icon name="arrow"/></span>
+        </div>
+        <div class="home-product-pcenter">
+          <div class="pcenter-list">
+            <div class="pcenter-title flex mt4 mb10 mr15 ml10 justify-content-s">
+              <div class="zssq zssq_1" @click="checkZssq">
+                <p class="zssq_p1">人到中年</p>
+                <p class="zssq_p2">是时候给自己填份保障了</p>
+              </div>
+              <div class="zssq zssq_2" @click="checkZssq">
+                <p class="zssq_p1">加班劳累</p>
+                <p class="zssq_p2">是时候给自己填份保障了</p>
+              </div>
+            </div>
+            <div class="pcenter-title flex mt4 mr15 mb10 ml10 justify-content-s">
+              <div class="zssq zssq_3" @click="checkZssq">
+                <p class="zssq_p1">年金保障</p>
+                <p class="zssq_p2">是时候给自己填份保障了</p>
+              </div>
+              <div class="zssq zssq_4" @click="checkZssq">
+                <p class="zssq_p1">高危工种</p>
+                <p class="zssq_p2">是时候给自己填份保障了</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div style="height: 10px;width: 100%;background-color: #f5f5f5;" />
+      <div class="home-product-content">
+        <!-- 产品中心 -->
+        <div class="pcenter-title flex pt10 mr20 mb10 justify-content-s align-items-c">
+          <h3 class="center-title fs15 pl10 ml15" style="border-left: 4px solid red;">产品中心</h3>
+          <span class="more fs13 c-gray-base" @click="getMore"><span>查看更多</span><van-icon name="arrow"/></span>
+        </div>
+        <div class="home-product-pcenter">
+          <div class="pcenter-list mr20 mb10 ml15">
+            <template v-if="branchType != '6'">
+              <div class="pcenter-item text-center">
+                <img src="../../../assets/images/home_product_center_m0092.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0095')" />
+              </div>
+              <div class="pcenter-item text-center">
+                <img src="../../../assets/images/home_product_center_m0094.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0094')" />
+              </div>
+            </template>
+            <template v-else-if="branchType == '6'">
+              <div class="pcenter-item text-center">
+                <img src="../../../assets/images/home_cp_3.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0036')" />
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </template>
+    <!-- 个险 -->
+    <template v-if="isPersonalInsu">
+      <div class="home-product-content" v-if="branchType != '12'">
+        <!-- 机构排名/业绩排名 -->
+        <div class="pcenter-title flex pt10 pb10 mr15 justify-content-s align-items-c" style="height: 50px;">
+          <img v-if="isInner" class="title-img" :src="organizationImgUrl" />
+          <img v-else class="title-img" :src="performanceImgUrl" />
+        </div>
+        <div class="home-product-pcenter performance">
+          <div class="pcenter-list">
+            <table class="myTable" cellspacing="0" cellpadding="0">
+              <tr>
+                <th v-for="(thead, index) in theads" :class="{ 'sticky-col': index <= 1 }" :key="index" :style="{ backgroundColor: isGoodStart =='0' ? '#fff':isGoodStart =='1' ? '#FF4A28' : '#4473ee' }">{{ thead }}</th>
+              </tr>
+              <template v-if="isInner">
+                <tr v-for="(org, i) in organizationData" :key="i" :class="{ hidden: i >= 5 && !idMoreDataShow,'goodStartWhite':isGoodStart == '0','goodStart':isGoodStart == '1','goodStartBlue':isGoodStart == '2' }">
+                  <td class="sticky-col">{{ i == 0 ? '-' : i + '' }}</td>
+                  <td class="org-name sticky-col">{{ org.name | blankFilter }}</td>
+                  <td>{{ org.ysbfDay | blankFilter }}</td>
+                  <td>{{ org.ysbfMon | blankFilter }}</td>
+                  <td>{{ org.cbbfDay | blankFilter }}</td>
+                  <td>{{ org.cbbfMon | blankFilter }}</td>
+                </tr>
+                <tr v-if="organizationData.length === 0">
+                  <td :colspan="theads.length" style="text-align: left; padding-left: 28%;">
+                    <span v-if="isTableDataLoad">暂无数据</span>
+                    <van-loading v-if="!isTableDataLoad" type="spinner" />
+                  </td>
+                </tr>
+              </template>
+              <template v-else>
+                <tr v-for="(org, i) in performanceData" :key="i" :class="{ hidden: i >= 5 && !idMoreDataShow,'goodStartWhite':isGoodStart == '0','goodStart':isGoodStart == '1','goodStartBlue':isGoodStart == '2' }">
+                  <td class="sticky-col">{{ org.rank | blankFilter }}</td>
+                  <td class="sticky-col">{{ org.name | blankFilter }}</td>
+                  <td class="org-name">{{ org.comName | blankFilter }}</td>
+                  <td>{{ org.ysbb | blankFilter }}</td>
+                  <td>{{ org.bzbf | blankFilter }}</td>
+                </tr>
+                <tr v-if="performanceData.length === 0">
+                  <td :colspan="theads.length" style="text-align: left; padding-left: 28%;">
+                    <span v-if="isTableDataLoad">暂无数据</span>
+                    <van-loading v-if="!isTableDataLoad" type="spinner" />
+                  </td>
+                </tr>
+              </template>
+            </table>
+          </div>
+        </div>
+        <div class="ml15 mr15 mb10 mt10 more-text" @click="showMore">
+          <van-icon :class="{ arrowUp: idMoreDataShow }" :style="{color : isGoodStart =='0' ? '#fff':isGoodStart =='1' ? '#E13929' : '#7C9DF3' }" name="play" />
+          <span>{{ !idMoreDataShow ? '查看更多' : '收起' }}</span>
+        </div>
+      </div>
+      <div style="height: 10px;width: 100%;background-color: #f5f5f5;" />
+      <div class="home-product-content">
+        <!-- 产品中心 -->
+        <div class="pcenter-title flex pt10 mr20 mb10 justify-content-s align-items-c">
+          <img class="title-img" :src="productCenterImgUrl" />
+          <span class="more fs13 c-gray-base" @click="getMore"><span>查看更多</span><van-icon name="arrow"/></span>
+        </div>
+        <div class="home-product-pcenter">
+          <div class="pcenter-list mr20 mb10 ml15">
+            <div class="pcenter-item text-center">
+                <img src="../../../assets/images/home_product_center_m0092.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0095')" />
+              </div>
+              <div class="pcenter-item text-center">
+                <img src="../../../assets/images/home_product_center_m0094.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0094')" />
+              </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { Loading } from 'vant'
+import performance from '@/assets/images/goodStart/performanceIcon.png'
+import product from '@/assets/images/goodStart/product.png'
+import { getAgentInfo } from '@/api/ebiz/my/my'
+import { getCongratulationList } from '@/api/ebiz/congratulation/congratulation.js'
+import dateUtil from '@/assets/js/utils/date-utils.js'
+// import { orgShortNames } from '@/assets/js/utils/orgShortName'
+import CacheUtils from '@/assets/js/utils/cacheUtils'
+export default {
+  components: {
+    [Loading.name]: Loading
+  },
+  data() {
+    return {
+      branchType:'',
+      idMoreDataShow: false,
+      isTableDataLoad: false,
+      performance,
+      product,
+      isGoodStart: '0',    // 是否开门红 0-默认
+      isPersonalInsu: true, // 是否个险渠道
+      isInner: false,
+      organizationTheads: ['排名', '机构', '当日预收(保费)', '月预收保费', '日承保保费', '月承保保费'],
+      performanceTheads: ['排名', '姓名', '营销服务部', '预收期交', '承保期交'],
+      organizationData: [],
+      performanceData: [],
+      organizationImgUrl: '',    // 机构排名图片
+      organizationKmhImgUrl: this.$assetsUrl + '/images/goodStart/organizationKmh.png',    // 机构排名开门红图片
+      organizationNormalImgUrl: this.$assetsUrl + '/images/goodStart/organizationTitle.png',    // 机构排名普通蓝色图片
+      performanceImgUrl: '',     // 业绩排名图片
+      performanceKmhImgUrl: this.$assetsUrl + '/images/goodStart/performanceKmh.png',       // 业绩排名开门红图片
+      performanceNormalImgUrl: this.$assetsUrl + '/images/goodStart/performanceTitle.png',     // 业绩排名普通蓝色图片
+      productCenterImgUrl: '',    // 产品中心图片
+      productCenterKmhImgUrl: this.$assetsUrl + 'images/goodStart/productKmh.png',    // 产品中心开门红图片
+      productCenterNormalImgUrl: this.$assetsUrl + 'images/goodStart/product.png',    // 产品中心普通蓝色图片
+      personalInsu: ['1','N1','N2','N3','N5','T','S','JZG']  // 个险渠道编码及其他展示个险渠道类型的渠道编码
+    }
+  },
+  computed: {
+    theads() {
+      if (this.isInner) {
+        return this.organizationTheads
+      } else {
+        return this.performanceTheads
+      }
+    }
+  },
+  async created() {
+    let arr = window.location.href.split('?token=')
+    if (!!arr && arr.length > 1) {
+      CacheUtils.setLocItem('token', arr[1])
+    }
+    await this.getAgentInfo()
+    if (this.isPersonalInsu) {
+      await this.getTableData()
+    }
+  },
+  methods: {
+    async getTableData() {
+      let currMonth = dateUtil.formatDate(new Date(), 'yyyy-MM-dd')
+      let data = await getCongratulationList({ date: currMonth, queryType: 'm', type: 'kmh' })
+      if (this.isInner) {
+        this.organizationData = data.content
+        // for (let org of this.organizationData) {
+        //   for (let shortName of orgShortNames) {
+        //     if (org.code === shortName.code) {
+        //       org.name = shortName.name
+        //     }
+        //   }
+        // }
+      } else {
+        this.performanceData = data.content.list
+        // for (let org of this.performanceData) {
+        //   for (let shortName of orgShortNames) {
+        //     if (org.comCode === shortName.code) {
+        //       org.comName = shortName.name
+        //     }
+        //   }
+        // }
+      }
+      this.$nextTick(() => {
+        this.isTableDataLoad = true
+        const width = this.$refs.product.offsetWidth
+        const height = this.$refs.product.offsetHeight
+        console.log('after width: ', width)
+        console.log('after height: ', height)
+        window.EWebBridge.webCallAppInJs('updateWebHeight', {
+          width,
+          height,
+          isLoadMore: this.idMoreDataShow
+        })
+      })
+    },
+    async getAgentInfo() {
+      const result = await getAgentInfo({})
+      if (result.result === '0') {
+        // 内外勤判断
+        this.isInner = /^N{1}/.test(result.branchType) || /^S/.test(result.branchType) || /^T/.test(result.branchType) || /^JZG/.test(result.branchType)    // 判断是否内勤
+        this.branchType = result.branchType //6 网销渠道
+        this.isGoodStart = result.showTemplateKmh === 'KMH'? '1':'2'   // 判断是否开门红 1-开门红  2-否
+        this.isPersonalInsu = this.personalInsu.indexOf(result.branchType) > -1  // 判断是否个险渠道
+        this.organizationImgUrl = this.isGoodStart =='1'?this.organizationKmhImgUrl:this.organizationNormalImgUrl
+        this.performanceImgUrl = this.isGoodStart =='1'?this.performanceKmhImgUrl:this.performanceNormalImgUrl
+        this.productCenterImgUrl = this.isGoodStart =='1'?this.productCenterKmhImgUrl:this.productCenterNormalImgUrl
+      } else {
+        this.$toast(result.resultMessage)
+      }
+    },
+    showMore() {
+      this.idMoreDataShow = !this.idMoreDataShow
+      this.$nextTick(() => {
+        const width = this.$refs.product.offsetWidth
+        const height = this.$refs.product.offsetHeight
+        console.log('after width: ', width)
+        console.log('after height: ', height)
+        window.EWebBridge.webCallAppInJs('updateWebHeight', {
+          width,
+          height,
+          isLoadMore: this.idMoreDataShow
+        })
+      })
+    },
+    //查看更多
+    getMore() {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#/product/productList'
+        },
+        routerInfo: {
+          path: '/product/productList'
+        }
+      })
+    },
+    //查看详情
+    goDetail(code) {
+      //将产品 code 存起来
+      localStorage.productDetailCode = code
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/product/productDetail/${code}`
+        },
+        routerInfo: {
+          path: `/product/productDetail/${code}`
+        }
+      })
+    },
+    checkZssq() {
+      // eslint-disable-next-line no-undef
+      EWebBridge.webCallAppInJs('bridge', {
+        flag: 'webview_toast',
+        extra: { content: '功能开发中，敬请期待' }
+      })
+    },
+    checkZssqMore() {
+      let that = this
+      let zssqUrl = that.$zssqUrl
+      if (zssqUrl == '') {
+        // eslint-disable-next-line no-undef
+        EWebBridge.webCallAppInJs('bridge', {
+          flag: 'webview_toast',
+          extra: { content: '功能开发中，敬请期待' }
+        })
+      } else {
+        this.$jump({
+          flag: 'h5',
+          extra: {
+            // title: '知识社区',
+            url: zssqUrl
+          }
+        })
+      }
+    }
+  },
+  filters: {
+    blankFilter(val) {
+      if (val) {
+        return val
+      } else {
+        return '-'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sticky-col {
+  text-align: center;
+}
+
+th.sticky-col:nth-of-type(1),
+td.sticky-col:nth-of-type(1) {
+  width: 40px;
+  position: sticky;
+  left: 0;
+}
+
+/*th.sticky-col:nth-of-type(2),
+td.sticky-col:nth-of-type(2) {
+  position: sticky;
+  left: 50px;
+}*/
+
+.home-product-container {
+  background-color: #ffffff;
+  .home-product-selected-item {
+    box-sizing: border-box;
+    box-shadow: 0 4px 10px 0px rgba(90, 125, 189, 0.13);
+    img {
+      width: 50px;
+      height: 60px;
+    }
+  }
+}
+.zssq {
+  width: 48%;
+  height: 40px;
+  padding: 8px 0px 8px 0;
+}
+.zssq_p1 {
+  padding-left: 16px;
+  font-size: 12px;
+  line-height: 20px;
+}
+.zssq_p2 {
+  font-size: 12px;
+  line-height: 20px;
+  transform: scale(0.8);
+}
+.zssq_1 {
+  background: url(../../../assets/images/zssq_1.png) no-repeat;
+  background-size: 100% 100%;
+  color: #c26b58;
+}
+.zssq_2 {
+  background: url(../../../assets/images/zssq_2.png) no-repeat;
+  background-size: 100% 100%;
+  color: #4f74a6;
+}
+.zssq_3 {
+  background: url(../../../assets/images/zssq_3.png) no-repeat;
+  background-size: 100% 100%;
+  color: #be8054;
+}
+.zssq_4 {
+  background: url(../../../assets/images/zssq_4.png) no-repeat;
+  background-size: 100% 100%;
+  color: #4fa1a6;
+}
+.myTable {
+  text-align: center;
+  width: 100%;
+  border-collapse: collapse;
+  td,
+  th {
+    padding: 10px 2px;
+    background-color: #fff;
+    color: #2e323d;
+    font-size: 14px;
+  }
+  th {
+    border: none;
+    background: #4473ee;
+    font-weight: normal;
+    color: #ffffff;
+    text-align: center;
+  }
+  tr {
+    border-top: 2px solid #ffffff;
+  }
+  tr:first-child {
+    border-bottom: 6px solid #ffffff;
+  }
+}
+
+.goodStart{
+  td {
+    background-color: #FFE4DF
+  }
+}
+.goodStartBlue{
+  td {
+    background-color: #e6edff
+  }
+}
+.goodStartWhite{
+  td {
+    background-color: #fff
+  }
+}
+
+.performance {
+  overflow: hidden;
+  overflow-x: auto;
+  margin: 0 15px;
+}
+
+.performance::-webkit-scrollbar {
+  width: 10px;
+  height: 8px;
+}
+
+.performance::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #dadada;
+}
+
+.performance::-webkit-scrollbar-track {
+  box-shadow: 0 0 1px inset #dddddd;
+}
+
+.title-img {
+  height: 40px;
+}
+
+.more-text {
+  color: #666666;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .van-icon {
+    transform: rotate(90deg);
+  }
+  .arrowUp {
+    transform: rotate(270deg);
+  }
+}
+
+span,
+i {
+  vertical-align: middle;
+}
+
+.org-name {
+  width: 5em;
+}
+</style>

src/views/ebiz/productFlowImprove/ProductDetail.vue

@@ -0,0 +1,213 @@
+<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 '../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/ebiz/productFlowImprove/ProductDocument.vue

@@ -0,0 +1,70 @@
+<template>
+  <div id="product-document-container">
+    <div id="pdf" v-if="isPdf"></div>
+  </div>
+</template>
+
+<script>
+import Pdfh5 from 'pdfh5'
+import { Loading } from 'vant'
+export default {
+  data() {
+    return {
+      pdfh5: null,
+      showPdf: true, // 展示 pdf 文件
+      isPdf: '' // 是否 pdf
+    }
+  },
+  created() {
+    // localStorage.documentInfo = JSON.stringify({ documentUrl: 'http://47.96.143.111:8000/app/product/DCRS_M0001/bxflM1.pdf', documentType: '1' })
+    let type = JSON.parse(localStorage.getItem('documentInfo')).documentType
+    let url = JSON.parse(localStorage.getItem('documentInfo')).documentUrl
+    this.isPdf = type == '1' ? true : false
+    console.log(this.isPdf)
+    this.url = url
+  },
+  mounted() {
+    if (this.isPdf) {
+      this.$toast.loading({
+        duration: 0, // 持续展示 toast
+        forbidClick: true, // 禁用背景点击
+        loadingType: 'spinner',
+        message: '加载中……'
+      })
+      //实例化
+      this.pdfh5 = new Pdfh5('#pdf', {
+        pdfurl: this.url
+      })
+      this.pdfh5.on('complete', (status, msg, time) => {
+        this.$toast.clear()
+        console.log('状态：' + status + '，信息：' + msg + '，耗时：' + time + '毫秒，总页数：' + this.totalNum)
+      })
+      this.pdfh5.on('error', (msg, time) => {
+        console.log(msg, time)
+      })
+    }
+  },
+  components: {
+    [Loading.name]: Loading
+  },
+  beforeRouteLeave(to, from, next) {
+    document.body.style.backgroundColor = ''
+    next()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '/pdfh5/css/pdfh5.css';
+* {
+  padding: 0;
+  margin: 0;
+}
+html,
+body,
+#product-document-container,
+#demo {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/ebiz/productFlowImprove/ProductList.vue

@@ -0,0 +1,288 @@
+<template>
+  <div v-if="isSuccess" class="product-list-container">
+    <div class="pt10 mb10 mr5 ml5 product-search-bar">
+      <van-search @search="handleSearchClick" v-model="searchText" show-action placeholder="请输入产品名称">
+        <template #action>
+          <div @click="handleSearchClick">搜索</div>
+        </template>
+      </van-search>
+    </div>
+
+    <van-tabs v-model="activeRiskType">
+      <van-tab v-for="item in riskTypeList" :title="item.name" :key="item.name" :name="item.name" />
+    </van-tabs>
+    <!-- 产品列表展示 -->
+    <div v-if="productList.length" class="mt10 product-list">
+      <div
+        class="product-list-item bg-white clearfix pt10 pb10 pl12 pr14 h120 mb1"
+        v-for="(item, index) in productList"
+        :key="index"
+        @click="goDetail(item.productCode)"
+      >
+        <!-- <img :src="$assetsUrl + 'images/product_item1.png'" alt="" class="fl w120 h120" /> -->
+        <img :src="item.productImageUrl" alt="" class="fl w120 h120" />
+        <div class="product-list-item-info fl ml10 w220">
+          <p class="product-list-item-title fs16 fwb mt15">{{ item.productName }}</p>
+          <p class="product-list-item-desc fs13 mt20 gray">{{ item.productDesc }}</p>
+        </div>
+      </div>
+      <p class="text-center p15 c-gray-base">-- END --</p>
+    </div>
+    <!-- 没有匹配产品的提示 -->
+    <div v-else class="product-list-default-bg absolute top150">
+      <img src="@/assets/images/pic_page-non.png" alt="" />
+      <p class="gray text-center">暂无产品</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Popup, Tag, Tabs, Tab, Search } from 'vant'
+import { getCategory, getList } from '@/api/ebiz/product/product.js'
+import { getAgentInfo } from '@/api/ebiz/my/my.js'
+export default {
+  data() {
+    return {
+      searchText: '',
+      activeRiskType: { name: '全部' },
+      list: [], // 列表项(展示列表)
+      proList: [], //所有的产品
+      risks: [], // 险别
+      label: '', // 筛选字段
+      finished: true, // 是否已加载完成
+      showSideBar: true, // 侧边弹框的显示与隐藏
+      risk: '', // 选中的险种
+      branchType: '',
+      isSuccess: false,
+      searchList: []
+    }
+  },
+  computed: {
+    /** 险种类型 */
+    riskTypeList() {
+      const [categoryCode = [], channelCode = []] = this.searchList
+
+      if (Number(this.branchType) === 3) return channelCode.content
+      else return categoryCode.content
+    },
+    productList() {
+      const name = this.activeRiskType
+
+      return this.proList.filter(product => {
+        if (name === '全部') return true
+        return product.productDesc === name
+      })
+    }
+  },
+  created() {
+    this.$CacheUtils.removeLocItem('proposalNo')
+    this.$CacheUtils.removeLocItem('canMoveOn')
+    this.$CacheUtils.removeLocItem('orderNo')
+    this.getLists()
+    this.getTypes()
+    // 初始化显示按钮
+    setTimeout(() => {
+      this.filterBtn()
+    }, 500)
+  },
+  mounted() {
+    this.getAgentInfo()
+    // 筛选按钮的点击事件
+    window.appCallBack = this.appCallBack
+  },
+  components: {
+    [Tabs.name]: Tabs,
+    [Tab.name]: Tab,
+    [Popup.name]: Popup,
+    [Tag.name]: Tag,
+    [Search.name]: Search
+  },
+  methods: {
+    getAgentInfo() {
+      getAgentInfo({}).then(res => {
+        if (res.result == 0) {
+          console.log('getAgentInfo', res)
+          this.branchType = res.branchType
+        }
+      })
+    },
+    // eslint-disable-next-line no-unused-vars
+    appCallBack(data, flag) {
+      // 筛选按钮的点击事件
+      this.showSideBar = true
+    },
+    filterBtn() {
+      // 筛选按钮的显示
+      // eslint-disable-next-line no-undef
+      setTimeout(() => {
+        EWebBridge.webCallAppInJs('webview_right_button', {
+          btns: [
+            {
+              img: this.$assetsUrl + 'images/filter_btn.png',
+              route: { flag: '', extra: {} }
+            }
+          ]
+        })
+      }, 500)
+    },
+    async getLists() {
+      // 获取产品列表
+      const res = await getList({
+        type: 'app'
+      })
+      if (!Number(res.result)) {
+        this.isSuccess = true
+        this.proList = this.list = res.productList
+      }
+    },
+    async getTypes() {
+      // 获取产品类别
+      const res = await getCategory({
+        type: 'app'
+      })
+      if (!Number(res.result)) {
+        this.searchList = res.categorys
+        this.searchList.forEach(item => {
+          item.content.forEach((items, index) => {
+            items.isActive = !index
+          })
+        })
+      }
+    },
+    reset() {
+      // 筛选的重置操作
+      // 全部按钮选中; list全部匹配(点击全部的时候可以通过匹配规则匹配到所有的产品)
+      this.searchList.forEach(item => {
+        item.content.forEach((items, index) => {
+          if (index == 0) {
+            items.isActive = true
+          } else {
+            items.isActive = false
+          }
+        })
+      })
+      this.list = this.proList
+      this.showSideBar = false
+    },
+    submit() {
+      let params = {}
+      this.searchList.forEach(item => {
+        item.content.forEach(item1 => {
+          if (item1.isActive) {
+            params[item.codeType] = item1.code
+          }
+        })
+      })
+      let thisList = this.proList
+
+      thisList.forEach(item => {
+        item.select = true
+      })
+      for (let key in params) {
+        if (params[key]) {
+          thisList.forEach(item => {
+            if (item[key] != params[key]) {
+              item.select = false
+            }
+          })
+        }
+      }
+      this.list = []
+      thisList.forEach(item => {
+        if (item.select) {
+          this.list.push(item)
+        }
+      })
+      this.showSideBar = false
+    },
+    toggleActive(data1, data2) {
+      // 筛选的点击事件
+      this.searchList.forEach((item, index) => {
+        if (item.codeType == data1.codeType) {
+          item.content.forEach(item1 => {
+            if (item1.code == data2.code) {
+              this.$nextTick(() => {
+                item1.isActive = true
+              })
+            } else {
+              this.$nextTick(() => {
+                item1.isActive = false
+              })
+            }
+          })
+        }
+      })
+      this.$nextTick(() => {
+        this.searchList = JSON.parse(JSON.stringify(this.searchList))
+      })
+    },
+    goDetail(productCode) {
+      // 跳转到产品详情
+      // this.$jump({
+      //   routerInfo: `/product/ProductDetail/${id}`
+      // })
+
+      localStorage.productDetailCode = productCode
+
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/product/ProductDetail/${productCode}`
+        },
+        routerInfo: {
+          path: `/product/ProductDetail/${productCode}`
+        }
+      })
+    },
+    handleSearchClick() {
+      console.log(`search`)
+    }
+  },
+  beforeRouteLeave(to, from, next) {
+    document.body.style.backgroundColor = ''
+    next()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/sass/common.scss';
+.product-list-container {
+  background: #f7f9ff;
+  min-height: calc(100vh - 10px);
+  .product-search-bar{
+     border-radius: 8px;
+    overflow: hidden;
+  }
+  .product-list-default-bg {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .product-list-risk-type {
+    border-top: 1px solid #f5f5f5;
+    border-bottom: 1px solid #f5f5f5;
+    .title {
+      line-height: 30px;
+    }
+    .product-list-risk-container {
+      // flex-direction: flex-start;
+      flex-wrap: wrap;
+    }
+    .product-list-risk-container:after {
+      content: '';
+      width: 30%;
+      border: 1px solid transparent;
+    }
+  }
+  .bottom-area {
+    /deep/.m-btn {
+      width: 50%;
+      border-color: transparent;
+    }
+    /deep/.van-button--default {
+      background-color: #d4f4ec;
+      color: #e9332e;
+    }
+  }
+}
+</style>

src/views/ebiz/saleFlowProImprove/SaleInsuredInfo.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SaleInsuredInfo'
+}
+</script>
+
+<style lang="scss" scoped></style>

yarn.lock

@@ -5005,7 +5005,7 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
-he@1.2.x, he@^1.1.0:
+he@1.2.x, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -10567,13 +10567,13 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.6.10:
+vue-template-compiler@^2.7.16:
-  version "2.6.11"
+  version "2.7.16"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"
-  integrity sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==
+  integrity sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==
   dependencies:
     de-indent "^1.0.2"
-    he "^1.1.0"
+    he "^1.2.0"
 
 vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   version "1.9.1"