GFRS-2576 健康险销售个险产品交叉销售需求

src/router/ebiz/serve.js

@@ -5,6 +5,7 @@ const policyList = () => import('@/views/ebiz/serve/PolicyList')
 const caseApplication = () => import('@/views/ebiz/serve/CaseApplication')
 const Result = () => import('@/views/ebiz/serve/Result')
 const airSign = () => import('@/views/ebiz/serve/AirSign')
+const crossPolicyList = () => import('@/views/ebiz/serve/CrossPolicyList')
 
 export default [
   {
@@ -65,5 +66,15 @@ export default [
     meta: {
       title: '电子签收'
     }
+  },
+  {
+    // 交叉渠道保单列表
+    path: '/serve/CrossPolicyList',
+    name: 'crossPolicyList',
+    component: crossPolicyList,
+    meta: {
+      title: '交叉保单列表',
+      index: 1
+    }
   }
 ]

src/views/ebiz/serve/CrossPolicyList.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="list-container">
+    <div class="list-content" v-if="!isShow">
+      <div class="list-header">
+        <van-search placeholder="请输入保单号/投保人姓名/被保险人姓名" v-model="search" />
+      </div>
+      <div class="fs12" v-for="(item, index) in NewItems" :key="index">
+        <div class="flex align-items-c justify-content-c h40">
+          <div>
+            保单号:
+          </div>
+          <div>{{ item | orderNoFilter }}</div>
+        </div>
+
+        <div class="bg-white pv15 pr15 pl10 ml15 mr15">
+          <div class="flex justify-content-s  align-items-c">
+            <div>
+              <div class="w45 inline-b">
+                <van-tag plain color="#5CA7DE">投保</van-tag>
+              </div>
+              <span class="fs15 c-gray-dark">{{ item.appntName }}</span>
+            </div>
+          </div>
+
+          <div class="mv15">
+            <div class="w45 inline-b">
+              <van-tag plain color="#DD9C56">被保</van-tag>
+            </div>
+            <span class="fs15 c-gray-dark">{{ item.insuredName }}</span>
+          </div>
+
+          <div class="mv10">
+            <span class="w45 inline-b">
+              <van-tag plain type="danger">主险</van-tag>
+            </span>
+            <span class="fs15 c-gray-dark">{{ item.riskName }}</span>
+          </div>
+
+          <van-row class="mb15">
+            <van-col span="12" class="fwb fs15">保额（元）</van-col>
+            <van-col span="12" class="text-right fwb" style="color: red">{{ item.amount | amtFormat }}</van-col>
+          </van-row>
+          <div class="pt15" style="border-top:1px solid #dadada">
+            <div class="flex justify-content-s">
+              <div class="w120 inline-b">
+                <van-tag plain color="#999999">保单生效日期</van-tag>
+              </div>
+              <span class="fs14 c-gray-dark">{{ item.cvaliDate }}</span>
+            </div>
+          </div>
+
+          <div class="mt10 flex justify-content-fe">
+            <van-button round @click="goToDetail(item.orderStatus, item.policyNo)" size="small" class="mr5" type="danger" plain v-no-more-click="1000"
+              >查看详情</van-button
+            >
+          </div>
+        </div>
+      </div>
+      <div v-if="NewItems.length == 0" class="list  text-center">
+        <img :src="src" />
+        <div class="mt20">暂无保单</div>
+      </div>
+    </div>
+    <div v-else class="list  text-center">
+      <img :src="src" />
+      <div class="mt20" v-if="errMessage != ''">{{ errMessage }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Search, List, Tag, Row, Col } from 'vant'
+import { getpolicyListAgent } from '@/api/ebiz/serve/serve'
+export default {
+  data() {
+    return {
+      // 搜索框
+      search: '',
+      // 列表信息
+      policyListDTOList: [],
+      // 无数据时候显示
+      isShow: false,
+      // 图片路径
+      src: this.$assetsUrl + 'images/background.png',
+      errMessage: ''
+    }
+  },
+  created() {
+    // 获取表单列表
+    this.getCrossPolicyListAgent()
+  },
+  computed: {
+    NewItems() {
+      let _this = this
+      var NewItems = []
+      this.policyListDTOList.map(function(item) {
+        if (item.riskName.search(_this.search) != -1 || item.policyNo.search(_this.search) != -1 || item.appntName.search(_this.search) != -1) {
+          NewItems.push(item)
+        }
+      })
+      return NewItems
+    }
+  },
+  methods: {
+    // 获取交叉保单列表
+    getCrossPolicyListAgent() {
+      let data = {
+        type : 'cross',
+        "userModel": {
+          "agentCom": "14501002",
+          "branchType": "1",
+          "comName": "",
+          "id": "Y0000089",
+          "manageComCode": "864501",
+          "manageComName": "青秀一区",
+          "mobile": "15688899889",
+          "name": "人001",
+          "system": "1",
+          "userType": 1
+        }
+      }
+      this.$toast.loading({
+        duration: 0, // 持续展示 toast
+        forbidClick: false, // 禁用背景点击
+        loadingType: 'spinner',
+        message: '列表数据加载中……'
+      })
+      getpolicyListAgent(data).then(res => {
+        //orderStatus 1 承保  0 核保 4终止
+        if (res.result == '0') {
+          this.$toast.clear()
+          //过滤掉 核保状态的数据 只展示承保和终止的保单
+          res.policyListDTOList.reverse()
+          this.policyListDTOList = res.policyListDTOList
+          console.log(this.policyListDTOList)
+        } else {
+          this.isShow = true
+          this.errMessage = res.resultMessage || '暂无保单'
+        }
+      })
+    },
+    // 点击去详情
+    goToDetail(orderStatus, value) {
+      window.localStorage.setItem('policyNo', value)
+      let that = this
+      that.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#/serve/detail'
+        },
+        routerInfo: {
+          path: '/serve/detail'
+        }
+      })
+    }
+  },
+  components: {
+    [Search.name]: Search,
+    [List.name]: List,
+    [Tag.name]: Tag,
+    [Row.name]: Row,
+    [Col.name]: Col
+  },
+  filters: {
+    orderNoFilter(orderInfo) {
+      if (orderInfo.saleChnl === '2' || orderInfo.saleChnl === '团险') {
+        return orderInfo.grpContNo
+      } else {
+        return orderInfo.policyNo
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/sass/variables.scss';
+.list-container {
+  height: 100%;
+  .list {
+    height: 100%;
+  }
+  .list-content {
+    height: 100%;
+    .list-header {
+      background: $white;
+    }
+  }
+  img {
+    width: 253px;
+    height: 201px;
+  }
+}
+</style>