Merge branch 'feature/GFRS-222【0423】续期管理-续期列表' into release/0911上线测试(贺报,续期)

# Conflicts:
#	.gitignore
#	src/assets/js/utils/request.js
#	src/config/urlMap.js
#	src/router/ebiz/index.js
#	src/store/index.js
#	src/views/app/Home.vue

.gitignore

@@ -1 +1,5 @@
 node_modules
+dist
+
+.eslintrc.js
+.prettierrc

src/api/ebiz/renewalManage/renewalManage.js

@@ -0,0 +1,62 @@
+import request from '@/assets/js/utils/request'
+import getUrl from '@/assets/js/utils/get-url'
+//获取续期客户列表
+export function getRenewalCustomerList(data) {
+  return request({
+    url: getUrl('/data/Customer/customerList', 1), //0=》mock数据 1=》正式数据
+    method: 'post',
+    data
+  })
+}
+//获取续期保单列表
+export function getPolicyList(data) {
+  return request({
+    url: getUrl('/renewal/renewal/getPolicyList', 1), //0=》mock数据 1=》正式数据
+    method: 'post',
+    data
+  })
+}
+//获取续期列表
+export function getList(data) {
+  return request({
+    url: getUrl('/renewal/renewal/getRenewalList', 1), //0=》mock数据 1=》正式数据
+    method: 'post',
+    data
+  })
+}
+
+//获取续期扣款详情
+export function getDetail(data) {
+  return request({
+    url: getUrl('/renewal/renewal/getRenewalDetail', 1), //0=》mock数据 1=》正式数据
+    method: 'post',
+    data
+  })
+}
+
+//获取短信模板
+export function getMsg(data) {
+  return request({
+    url: getUrl('/renewal/renewal/msgTemplate', 1),
+    method: 'post',
+    data
+  })
+}
+
+//发送短信
+export function sendMsg(data) {
+  return request({
+    url: getUrl('/renewal/renewal/sendSms', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 获取失效/终止保单列表
+export function getInvalidOrderList(data) {
+  return request({
+    url: getUrl('/sale/policy/policyListAgent', 1),
+    method: 'post',
+    data
+  })
+}

src/assets/js/utils/request.js

@@ -80,7 +80,24 @@ let productStore = [
 ]
 // 卡单
 let cardList = []
-let whiteList = ['/customer/agent/getCustomersList', ...proposal, ...sale, ...agentEnter, ...claims, ...survey, ...manpower, ...productStore, ...preserve]
+
+// 续期
+let renewalManage = [
+  '/renewal/getRenewalList' //续期列表查询
+]
+
+let whiteList = [
+  '/customer/agent/getCustomersList',
+  ...proposal,
+  ...sale,
+  ...agentEnter,
+  ...claims,
+  ...survey,
+  ...manpower,
+  ...productStore,
+  ...preserve,
+  ...renewalManage
+]
 
 // 创建axios实例
 const service = axios.create({

src/assets/js/utils/request1.js

@@ -0,0 +1,70 @@
+import axios from 'axios'
+import { Dialog, Toast } from 'vant'
+
+let sale = ['/sale/order/orderDetail'] //在线投保
+
+// 卡单
+let cardList = []
+let whiteList = [...sale]
+
+// 创建axios实例
+const service = axios.create({
+  timeout: 66666666 // 请求超时时间
+})
+
+// request拦截器
+service.interceptors.request.use(
+  config => {
+    let relativePath = config.url && config.url.split('v1')[1]
+    if (whiteList.includes(relativePath)) {
+      // Toast.loading({
+      //   duration: 0, // 持续展示 toast
+      //   forbidClick: true, // 禁用背景点击
+      //   loadingType: 'spinner',
+      //   message: '加载中……'
+      // })
+    }
+
+    config.headers['token'] = window.localStorage.getItem('token')
+    // config.headers['token'] = ``
+    return config
+  },
+  error => {
+    // Do something with request error
+    Promise.reject(error)
+  }
+)
+
+// respone拦截器
+service.interceptors.response.use(
+  response => {
+    const res = response.data
+    console.log(res, 'res')
+
+    if (res.code != 0) {
+      if (res.code == 10001 || res.code == 10002) {
+        Dialog.confirm({
+          confirmButtonText: '重新登录',
+          message: '你已被登出，可以取消继续留在该页面，或者重新登录'
+        }).then(() => {
+          //eslint-disable-next-line
+          EWebBridge.webCallAppInJs('bridge', {
+            flag: 'login'
+          })
+        })
+      } else {
+        //Toast.fail(res.msg)
+      }
+      return Promise.reject(res)
+    } else {
+      return response.data.content
+    }
+  },
+  error => {
+    console.log('err' + error) // for debug
+    //Toast.fail(error.message)
+    return Promise.reject(error)
+  }
+)
+
+export default service

src/assets/js/utils/toastLoading.js

@@ -0,0 +1,15 @@
+// 全屏loading工具类
+import { Toast } from 'vant'
+import Vue from 'vue'
+Vue.use(Toast)
+
+export function openLoading() {
+  Toast.loading({
+    mask: true,
+    message: '加载中...',
+    duration: 0 // 持续展示 toast
+  })
+}
+export function closeLoading() {
+  Toast.clear()
+}

src/config/renewalManage.js

@@ -0,0 +1,9 @@
+//续期管理
+let mockBaseUrl = 'http://mock-api.com/LwnaDLg1.mock'
+export default {
+  //获取续期列表
+  '/renewal/getRenewalList': mockBaseUrl + '/renewal/getRenewalList',
+  '/renewal/getRenewalDetail': mockBaseUrl + '/renewal/getRenewalDetail',
+  '/renewal/msgTemplate': mockBaseUrl + '/renewal/msgTemplate',
+  '/renewal/sendSms': mockBaseUrl + '/renewal/sendSms'
+}

src/config/urlMap.js

@@ -14,6 +14,7 @@ import survey from './survey'
 import manpower from './manpower'
 import cardList from './cardList'
 import preserve from './preserve'
+import renewalManage from './renewalManage'
 
 import agentEenter from './agentEenter'
 const mockBaseUrl = 'http://rap2api.taobao.org/app/mock'
@@ -23,6 +24,6 @@ let baseObj = {
   '/user/info': mockBaseUrl + '/223948/info',
   '/user/logout': mockBaseUrl + '/223948/logout'
 }
-Object.assign(baseObj, proposal, sale, customer, my, product, serve, common, cardList, survey, manpower, preserve, agentEenter, manpower)
+Object.assign(baseObj, proposal, sale, customer, my, product, serve, common, cardList, survey, manpower, preserve, agentEenter, manpower, renewalManage)
 
 export default baseObj

src/filters/index.js

@@ -157,7 +157,7 @@ export default {
     // return str
 
     //摘自国富群：这个在报文转换的时候，核心返回“—”的时候，直接返回空。 @于维琦(于维琦) 前端如果保额为空，直接展示“—”@皮伟(皮伟) 你跟她碰一下怎么改
-    if (moneyStr === null) {
+    if (moneyStr === null || moneyStr == '' || moneyStr === 'null') {
       return '—'
     }
     let str = ''

src/router/ebiz/index.js

@@ -23,6 +23,7 @@ import institutionalPerform from './institutionalPerform'
 import performance from './performance'
 import attendance from './attendance'
 
+import renewalManage from './renewalManage'
 export default [
   ...proposal,
   ...sale,
@@ -45,5 +46,6 @@ export default [
   ...productStore,
   ...performance,
   ...attendance,
-  ...congratulation
+  ...congratulation,
+  ...renewalManage
 ] //根据需要进行删减

src/router/ebiz/renewalManage.js

@@ -0,0 +1,62 @@
+const list = () => import('@/views/ebiz/renewalManage/List')
+const customerList = () => import('@/views/ebiz/renewalManage/customerList')
+const policyList = () => import('@/views/ebiz/renewalManage/policyList')
+const detail = () => import('@/views/ebiz/renewalManage/Detail')
+const policyDetail = () => import('@/views/ebiz/renewalManage/policyDetail')
+const msgTemplate = () => import('@/views/ebiz/renewalManage/MsgTemplate')
+export default [
+  {
+    path: '/renewalManage/list',
+    name: 'renewalManageList',
+    component: list,
+    meta: {
+      title: '续期管理',
+      index: 1
+    }
+  },
+  {
+    path: '/renewalManage/customerList',
+    name: 'customerList',
+    component: customerList,
+    meta: {
+      title: '客户续期清单',
+      index: 1
+    }
+  },
+  {
+    path: '/renewalManage/policyList',
+    name: 'policyList',
+    component: policyList,
+    meta: {
+      title: '保单列表',
+      index: 1
+    }
+  },
+  {
+    path: '/renewalManage/policyDetail',
+    name: 'policyDetail',
+    component: policyDetail,
+    meta: {
+      title: '保单详情',
+      index: 1
+    }
+  },
+  {
+    path: '/renewalManage/detail/:contNo/:payToDate/:payFlag',
+    name: 'renewalManageDetail',
+    component: detail,
+    meta: {
+      title: '续期扣款详情',
+      index: 1
+    }
+  },
+  {
+    path: '/renewalManage/msgTemplate',
+    name: 'msgTemplate',
+    component: msgTemplate,
+    meta: {
+      title: '短信模板',
+      index: 1
+    }
+  }
+]

src/views/ebiz/renewalManage/Detail.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="detail-container">
+    <div>
+      <div v-if="$route.params.payFlag === '0'" class="status">
+        <img src="@/assets/images/renewalManage/u51770.png" />
+        <div class="resultTitle">续期待扣款</div>
+      </div>
+      <div v-else-if="$route.params.payFlag === '1'" class="status">
+        <img src="@/assets/images/renewalManage/u51859.png" />
+        <div class="resultTitle">续期扣款成功</div>
+      </div>
+      <div v-else-if="$route.params.payFlag === '2'" class="status">
+        <img src="@/assets/images/renewalManage/u17218.png" />
+        <div class="resultTitle">续期扣款失败</div>
+      </div>
+      <div v-else-if="$route.params.payFlag === '3'" class="status">
+        <img src="@/assets/images/renewalManage/u17218.png" />
+        <div class="resultTitle">续期扣款中</div>
+      </div>
+    </div>
+    <div>
+      <div class="cell">
+        <div class="wrapper">
+          <div class="cellLeft">保单号</div>
+          <div class="cellRight contNo" @click="toDetail">{{ renewalDTO.contNo }}</div>
+        </div>
+      </div>
+      <div class="cell">
+        <div class="wrapper">
+          <div class="cellLeft">险种名称</div>
+          <div class="cellRight">{{ renewalDTO.riskName }}</div>
+        </div>
+      </div>
+      <div class="cell">
+        <div class="wrapper">
+          <div class="cellLeft">金额(元)</div>
+          <div class="cellRight">{{ renewalDTO.money }}</div>
+        </div>
+      </div>
+      <div class="cell">
+        <div class="wrapper">
+          <div class="cellLeft">保额(元)</div>
+          <div class="cellRight">{{ renewalDTO.money }}</div>
+        </div>
+      </div>
+      <div class="cell">
+        <div class="wrapper">
+          <div class="cellLeft">投保人</div>
+          <div class="cellRight">{{ renewalDTO.appntName }}</div>
+        </div>
+      </div>
+      <div class="cell">
+        <div class="wrapper">
+          <div class="cellLeft">被保人</div>
+          <div class="cellRight">{{ renewalDTO.insuredName }}</div>
+        </div>
+      </div>
+      <div class="cell">
+        <div class="wrapper">
+          <div class="cellLeft">转账银行</div>
+          <div class="cellRight">{{ renewalDTO.bankCode }}</div>
+        </div>
+      </div>
+      <div class="cell">
+        <div class="wrapper">
+          <div class="cellLeft">转账账号</div>
+          <div class="cellRight">{{ renewalDTO.bankAccNo }}</div>
+        </div>
+      </div>
+      <div class="cell">
+        <div class="wrapper">
+          <div class="cellLeft">交费次数</div>
+          <div class="cellRight">{{ renewalDTO.payTimes }}</div>
+        </div>
+      </div>
+      <div class="cell">
+        <div class="wrapper">
+          <div class="cellLeft">应交日</div>
+          <div class="cellRight">{{ renewalDTO.payToDate }}</div>
+        </div>
+      </div>
+      <div class="cell" v-if="$route.params.payFlag === '2'">
+        <div class="wrapper">
+          <div class="cellLeft">最近转账失败原因</div>
+          <div class="cellRight">{{ renewalDTO.defaultReson }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="phone">
+      <div @click="callSystem">
+        <van-icon name="phone" class="phoneIcon" />
+        <span class="fs14">拨打电话</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Cell, CellGroup, Icon } from 'vant'
+import { getDetail } from '@/api/ebiz/renewalManage/renewalManage'
+export default {
+  name: 'renewalDetail',
+  components: {
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+    [Icon.name]: Icon
+  },
+  data() {
+    return {
+      // 续期保单详情
+      renewalDTO: {}
+    }
+  },
+  mounted() {
+    this.getDetail()
+  },
+  methods: {
+    toDetail() {
+      localStorage.setItem('policyNo', this.$route.params.contNo)
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/renewalManage/policyDetail`
+        },
+        routerInfo: {
+          path: `/renewalManage/policyDetail`
+        }
+      })
+    },
+    async getDetail() {
+      let contNo = this.$route.params.contNo
+      let payToDate = this.$route.params.payToDate
+      let payFlag = this.$route.params.payFlag
+      this.$toast.loading({
+        message: '加载中...',
+        forbidClick: true,
+        loadingType: 'spinner'
+      })
+      let result = await getDetail({ contNo, payToDate, payFlag })
+      if (result.result === '0') {
+        if (result.content) {
+          this.renewalDTO = result.content
+        }
+      } else {
+        this.$toast(result.resultMessage)
+      }
+    },
+    //打电话
+    callSystem() {
+      // eslint-disable-next-line no-undef
+      EWebBridge.webCallAppInJs('callSystem', {
+        system: 'tel',
+        number: this.renewalDTO.appntPhone
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.contNo {
+  color: red;
+}
+
+.cellLeft,
+.cellRight {
+  font-size: 14px;
+}
+
+.resultTitle {
+  font-size: 20px;
+  font-weight: bold;
+  margin: 0.25em 0;
+}
+.status {
+  text-align: center;
+  padding: 2em 0;
+}
+
+.detail-container {
+  position: relative;
+  min-height: 100vh;
+  background-color: #fff;
+  padding-bottom: 3em;
+}
+
+.cell {
+  padding: 0 1em;
+}
+
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #f5f5f5;
+  padding: 0.75em 0;
+}
+
+.phoneIcon {
+  font-size: 35px;
+  color: #e9332e;
+}
+
+.phone {
+  position: fixed;
+  bottom: 1em;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+.phone > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>

src/views/ebiz/renewalManage/List.vue

@@ -0,0 +1,404 @@
+<template>
+  <div class="renewal-manage bg-white">
+    <div>
+      <van-sticky>
+        <div>
+          <van-search placeholder="请输入保单号/投保人" v-model="searchVal" show-action>
+            <template slot="action">
+              <div @click="search">搜索</div>
+            </template>
+          </van-search>
+        </div>
+        <van-cell-group @click="selectTime = true">
+          <van-cell :value="payDate" is-link>
+            <template #title>
+              <span class="custom-title">应交日</span>
+              <span style="font-size: 10px; color: #6b6b6b;">(查询范围：当前月份前溯3月~后推1月)</span>
+            </template>
+          </van-cell>
+        </van-cell-group>
+        <van-tabs v-model="active" sticky @change="tabChange" class="changeTab">
+          <van-tab title="应收未收" :name="0"></van-tab>
+          <van-tab title="已交费" :name="1"></van-tab>
+          <van-tab title="扣款失败" :name="2"></van-tab>
+          <van-tab title="失效/终止" :name="3"></van-tab>
+        </van-tabs>
+      </van-sticky>
+      <van-list v-if="active !== 3" :immediate-check="false" v-model="loading" :finished="finished" :finished-text="finishedText">
+        <div v-for="item in list" :key="item.contNo" class="dataList">
+          <div style="font-size: 16px;" class="flex justify-content-s dataLine">
+            <div style="flex: 1;">
+              <span class="data-text">保单号:</span><span class="ml10">{{ item.contNo }}</span>
+            </div>
+            <div>
+              <span>金额:</span><span class="green">{{ item.money }}元</span>
+            </div>
+          </div>
+          <div class="dataLine grayText">
+            <span class="data-text">投保人:</span><span class="ml10">{{ item.appntName }}</span>
+          </div>
+          <div class="dataLine grayText">
+            <span class="data-text">被保人:</span><span class="ml10">{{ item.insuredName }}</span>
+          </div>
+          <div class="dataLine grayText">
+            <span class="data-text">转账银行:</span><span class="ml10">{{ item.bankName }}</span>
+          </div>
+          <div class="dataLine grayText">
+            <span class="data-text">转账账号:</span><span class="ml10">{{ item.accNo }}</span>
+          </div>
+          <div class="dataLine grayText">
+            <span class="data-text">险种名称:</span><span class="ml10">{{ item.riskName }}</span>
+          </div>
+          <div class="dataLine grayText">
+            <span class="data-text">应交日:</span><span class="ml10">{{ item.payToDate }}</span>
+          </div>
+          <div class="dataLine detail-wrapper">
+            <span class="grayText data-text">保单状态:</span><span class="ml10 grayText">{{ item.state | stateFilter }}</span>
+            <div class="detail-text" @click="goDetail(item)">
+              <span>详情</span>
+              <van-icon name="arrow" />
+              <van-icon class="detail-arrow" name="arrow" />
+            </div>
+          </div>
+        </div>
+      </van-list>
+      <div v-if="list.length === 0 && active !== 3" class="list text-center">
+        <img :src="src" />
+        <div class="mt20">暂无数据</div>
+      </div>
+      <van-list v-if="active === 3" :immediate-check="false" v-model="invalidLoading" :finished="invalidFinished" :finished-text="invalidFinishedText">
+        <div style="padding: 1em; border-bottom: 1px solid #e5e5e5;" class="invalidOrder" v-for="item in invalidListComputed" :key="item.id">
+          <p class="invalidLine">{{ item.riskName }}</p>
+          <p class="invalidLine fs14" style="color: #999;">
+            <span class="data-text-invalid">保单号:</span><span class="ml10">{{ item.policyNo }}</span>
+          </p>
+          <p class="invalidLine fs14">
+            <span class="data-text-invalid">投保人:</span><span class="ml10">{{ item.appntName }}</span>
+          </p>
+          <p class="invalidLine fs14">
+            <span class="data-text-invalid">被保人:</span><span class="ml10">{{ item.insuredName }}</span>
+          </p>
+          <p class="invalidLine fs14">
+            <span class="data-text-invalid">保额(元):</span><span class="ml10">{{ item.amount }}</span>
+          </p>
+          <p class="invalidLine fs14">
+            <span class="data-text-invalid">保单生效日期:</span><span class="ml10">{{ item.cvaliDate }}</span>
+          </p>
+          <div class="invalidLine fs14" style="display: flex;">
+            <span class="data-text-invalid">保单状态:</span>
+            <span class="ml10">终止</span>
+            <div class="detail-text" @click="toPolicyDetail(item)">
+              <span>详情</span>
+              <van-icon name="arrow" />
+              <van-icon class="detail-arrow" name="arrow" />
+            </div>
+          </div>
+        </div>
+      </van-list>
+      <div v-if="invalidListComputed.length === 0 && active === 3" class="list text-center">
+        <img :src="src" />
+        <div class="mt20">暂无数据</div>
+      </div>
+    </div>
+    <van-popup v-model="selectTime" position="bottom">
+      <van-datetime-picker
+        v-model="currentDate"
+        type="year-month"
+        title="选择年月"
+        :formatter="formatter"
+        @cancel="selectTime = false"
+        @confirm="onDateConfirm"
+      />
+    </van-popup>
+  </div>
+</template>
+<script>
+import { Sticky, Tabs, Tab, Col, Row, Search, Field, List, Icon, Cell, CellGroup, DatetimePicker, Popup } from 'vant'
+import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
+import { getList, getInvalidOrderList } from '@/api/ebiz/renewalManage/renewalManage'
+import formatDate from '@/assets/js/utils/date-utils'
+
+export default {
+  name: 'renewalManageList',
+  components: {
+    [Field.name]: Field,
+    [Tabs.name]: Tabs,
+    [Tab.name]: Tab,
+    [Col.name]: Col,
+    [Row.name]: Row,
+    [Search.name]: Search,
+    [Sticky.name]: Sticky,
+    [FieldDatePicter.name]: FieldDatePicter,
+    [List.name]: List,
+    [Icon.name]: Icon,
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+    [DatetimePicker.name]: DatetimePicker,
+    [Popup.name]: Popup
+  },
+  data() {
+    return {
+      selectTime: false,
+      currentDate: new Date(),
+      loading: false,
+      invalidLoading: false,
+      finishedText: '',
+      finished: true,
+      invalidFinished: true,
+      invalidFinishedText: '',
+      // 扣款日期
+      payDate: formatDate.formatDate(new Date(), 'yyyy-MM'),
+      // 搜索内容
+      searchVal: '',
+      list: [],
+      invalidList: [],
+      active: 0,
+      isShow: false,
+      src: this.$assetsUrl + 'images/background.png'
+    }
+  },
+  computed: {
+    invalidListComputed() {
+      let result = []
+      if (this.invalidList) {
+        result = this.invalidList.filter(item => {
+          if (item.appntName.includes(this.searchVal) || item.policyNo.includes(this.searchVal)) {
+            return true
+          }
+        })
+        if (result.length === 0) {
+          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+          this.invalidFinishedText = ''
+        }
+      }
+      return result
+    }
+  },
+  created() {
+    document.title = '续期应收清单'
+    this.getpolicyList()
+  },
+  methods: {
+    formatter(type, val) {
+      if (type === 'year') {
+        return `${val}年`
+      } else if (type === 'month') {
+        return `${val}月`
+      }
+      return val
+    },
+    // 获取续期保单列表
+    async getpolicyList() {
+      let param = {
+        // 失效/终止状态不限制时间
+        payDate: this.active === 4 ? '' : this.payDate,
+        otherNo: this.searchVal,
+        payFlag: this.active
+      }
+      this.$toast.loading({
+        duration: 0,
+        message: '加载中...',
+        forbidClick: true,
+        loadingType: 'spinner'
+      })
+      this.list.splice(0)
+      this.finishedText = ''
+      let result = await getList(param)
+      if (result.result === '0') {
+        if (result.content) {
+          if (result.content.list) {
+            for (let item of result.content.list) {
+              for (let value in item) {
+                if (!item[value]) {
+                  item[value] = '-'
+                }
+              }
+            }
+            this.list = result.content.list
+            this.finishedText = '没有更多了...'
+          } else {
+            this.list = []
+          }
+        }
+        this.$toast.clear()
+      } else {
+        this.finishedText = ''
+        this.$toast.clear()
+        this.$toast(result.resultMessage)
+      }
+    },
+    async getInvalidList(data) {
+      this.invalidList.splice(0)
+      this.$toast.loading({
+        duration: 0,
+        message: '加载中...',
+        forbidClick: true,
+        loadingType: 'spinner'
+      })
+      this.invalidFinishedText = ''
+      let result = await getInvalidOrderList(data)
+      this.$toast.clear()
+      if (result.result === '0') {
+        if (result.policyListDTOList) {
+          for (let item of result.policyListDTOList) {
+            for (let value in item) {
+              if (!item[value]) {
+                item[value] = '-'
+              }
+            }
+            // 0: 已承保, 1: 终止
+            if (item.orderStatus === '1') {
+              this.invalidList.push(item)
+            }
+          }
+          this.invalidFinishedText = '没有更多了...'
+        }
+      } else {
+        this.invalidFinishedText = ''
+        this.$toast(result.resultMessage)
+      }
+    },
+    // 搜索
+    search() {
+      if (this.active !== 3) {
+        this.getpolicyList()
+      }
+    },
+    // 选定日期
+    onDateConfirm(val) {
+      this.payDate = formatDate.formatDate(val, 'yyyy-MM')
+      this.selectTime = false
+      this.getpolicyList()
+    },
+    // 去保单详情页
+    goDetail(val) {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/renewalManage/detail/${val.contNo}/${val.payToDate}/${val.payFlag}`
+        },
+        routerInfo: {
+          path: `/renewalManage/detail/${val.contNo}/${val.payToDate}/${val.payFlag}`
+        }
+      })
+    },
+    toPolicyDetail(item) {
+      localStorage.setItem('policyNo', item.policyNo)
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/renewalManage/policyDetail`
+        },
+        routerInfo: {
+          path: `/renewalManage/policyDetail`
+        }
+      })
+    },
+    // 切换扣款状态tab
+    tabChange(name) {
+      this.searchVal = ''
+      if (name !== 3) {
+        this.active = name
+        this.getpolicyList()
+      } else {
+        this.getInvalidList({ status: '2' })
+      }
+    }
+  },
+  filters: {
+    stateFilter(val) {
+      switch (val) {
+        case '0':
+          return '投保中'
+        case '1':
+          return '有效'
+        case '4':
+          return '终止'
+        default:
+          return '-'
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.data-text {
+  display: inline-block;
+  width: 65px;
+  text-align: left;
+}
+
+.data-text-invalid {
+  display: inline-block;
+  width: 90px;
+  text-align: left;
+}
+
+/deep/ .van-cell__title {
+  flex: 5;
+}
+
+.timePicker {
+  position: sticky;
+  bottom: 0;
+}
+
+.grayText {
+  color: #999999;
+}
+
+.detail-wrapper {
+  display: flex;
+  justify-content: flex-start;
+}
+.detail-arrow {
+  margin-left: -0.5em;
+}
+
+.invalidLine {
+  margin-bottom: 0.5em;
+}
+
+.detail {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.detail-text {
+  display: flex;
+  margin-left: auto;
+  align-items: center;
+  color: red;
+}
+
+.dataList {
+  padding: 0.5em;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.dataLine {
+  padding: 0.25em 0;
+  font-size: 14px;
+}
+
+.changeTab {
+  margin-top: -1px;
+}
+
+/deep/ .mb1 {
+  margin-bottom: 1px !important;
+}
+.renewal-manage {
+  background: rgba(236, 249, 255, 1);
+  min-height: 100vh;
+  img {
+    width: 253px;
+    height: 201px;
+  }
+}
+
+/deep/ .van-field__label {
+  width: 50%;
+}
+</style>

src/views/ebiz/renewalManage/MsgTemplate.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <div class="msg-content">
+      <div v-for="(item, index) in msgContentArr" :key="index" v-html="`${item}`"></div>
+    </div>
+    <div class="flex justify-content-s bottom-btn">
+      <van-button class=" bottom0 left0" square type="danger" size="large" @click="sendMsg" v-no-more-click="1000">发送</van-button>
+      <van-button class=" bottom0 left0" square plain type="danger" v-no-more-click="1000" @click="cancell" size="large">取消</van-button>
+    </div>
+  </div>
+</template>
+<script>
+import { getMsg, sendMsg } from '@/api/ebiz/renewalManage/renewalManage'
+
+export default {
+  name: 'msgTemplate',
+  components: {},
+  data() {
+    return {
+      //短信内容，测试专用
+      //msgContent:
+      //'尊敬的客户：/n/t您好！感谢您选择国富人寿保险。我是国富人寿代理人xxx。您在我公司购买的xxxxxx保险进行了续期扣款，扣款失败！详细信息请电话咨询！/n/&保单尾号：xxxxxxxxx/n产品名称：xxxxxx', //短信模板内容
+      msgContentArr: []
+    }
+  },
+  created() {
+    document.body.style.backgroundColor = '#fff'
+  },
+  beforeRouteLeave(to, from, next) {
+    document.body.style.backgroundColor = ''
+    next()
+  },
+  mounted() {
+    this.getMsg()
+  },
+  methods: {
+    //获取短信模板
+    getMsg() {
+      let parmas = {}
+      parmas = Object.assign({}, this.$store.getters.getRenewalMsgParam)
+      delete parmas.applicant
+      delete parmas.duePayDate
+      delete parmas.currentPeriod
+      delete parmas.receiveMobile
+      getMsg(parmas).then(res => {
+        if (res.result == '0') {
+          this.msgContentArr = res.content.msg
+            .replace(/\/n/g, '<br>')
+            .replace(/\/t/g, '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;')
+            .split('/&')
+        } else this.$toast(res.resultMessage)
+      })
+    },
+    // 发送短信
+    sendMsg() {
+      let parmas = {}
+      parmas = Object.assign({}, this.$store.getters.getRenewalMsgParam)
+      delete parmas.applicant
+      delete parmas.duePayDate
+      delete parmas.currentPeriod
+      sendMsg(parmas).then(res => {
+        if (res.result == '0') {
+          this.$toast('发送成功')
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    //取消发送
+    cancell() {
+      this.$jump({
+        flag: 'goBack',
+        extra: {
+          index: '-1'
+        },
+        routerInfo: {
+          path: `/renewalManage/detail`
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.msg-content {
+  div {
+    font-size: 16px;
+    padding: 30px 20px 0;
+    text-align: right;
+  }
+  div:first-child {
+    text-align: left !important;
+  }
+}
+.justify-content-s > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px 0;
+  width: 50%;
+}
+</style>

src/views/ebiz/renewalManage/compontents/cellLine.vue

@@ -0,0 +1,46 @@
+<!--  -->
+<template>
+  <div class="cellLine" :class="size">
+    <template v-if="dwidth">
+      <span :style="{ color: fontColor }" class="name">{{ title }}:</span>
+    </template>
+    <template v-else>
+      <div v-if="title" class="name">{{ title }}:</div>
+    </template>
+    <span :style="{ color: fontColor }" v-if="text"> {{ text }}</span>
+    <span v-else> 暂无</span>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+
+export default {
+  data() {
+    return {}
+  },
+  props: ['title', 'text', 'fontColor', 'size', 'dwidth'], 
+  name: 'cellLine',
+  components: {},
+  computed: {},
+  mounted() {},
+  methods: {}
+}
+</script>
+<style lang="scss" scoped>
+.cellLine {
+  padding: 3px;
+  font-size: 14px;
+  color: #000;
+}
+div.name {
+  display: inline-block;
+  width: 28%;
+}
+.large {
+  font-size: 16px;
+}
+.small {
+  font-size: 12px;
+}
+</style>

src/views/ebiz/renewalManage/compontents/item.vue

@@ -0,0 +1,43 @@
+<!--  -->
+<template>
+  <div class="item">
+    <template v-if="text && text != 0">
+      <van-cell :title="title" :value="text" />
+    </template>
+    <template v-else>
+      <van-cell :title="title" value="—" />
+    </template>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { Cell } from 'vant'
+Vue.use(Cell)
+export default {
+  data() {
+    return {}
+  },
+  props: ['title', 'text'],
+  name: 'item',
+  components: {},
+  computed: {},
+  mounted() {},
+  methods: {}
+}
+</script>
+<style lang="scss" scoped>
+.item:not(:last-child) .van-cell::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  bottom: 0;
+  left: 4.26667vw;
+  border-bottom: 1px solid #ebedf0;
+  transform: scaleY(0.5);
+  content: '';
+  border-bottom: 1px solid #dadada;
+}
+</style>

src/views/ebiz/renewalManage/customerList.vue

@@ -0,0 +1,338 @@
+<template>
+  <div class="container">
+    <van-search placeholder="请输入客户姓名/电话" v-model="searchVal" @input="searchList" />
+    <div v-if="isSuccess">
+      <div v-if="customerList.length > 0">
+        <van-index-bar highlight-color="#E9332E" v-if="!searchVal" :index-list="indexList">
+          <div v-for="(item, index) in customerList" :key="index" class="bg-white mb10">
+            <van-index-anchor :index="item.key" class="border-gb" />
+            <div
+              v-for="(item, index) in customerList[index].list"
+              :key="index"
+              class="pr15 h60 flex align-items-c border-gb bg-white mr15"
+              @click="go('policyList', item)"
+            >
+              <img class="w40 ml15" src="../../../assets/images/bnf_avatar.png" />
+              <div class="ml10 flex1" style="line-height:25px">
+                <div>{{ item.appntName }}</div>
+              </div>
+            </div>
+          </div>
+        </van-index-bar>
+        <div v-else>
+          <div v-for="(item, index) in newList" :key="index" class="pr15 h60 flex align-items-c border-gb bg-white mr15" @click="go('customerInfo', item)">
+            <img class="w40 ml15" src="../../../assets/images/bnf_avatar.png" />
+            <div class="ml10 flex1" style="line-height:25px">
+              <div>{{ item.appntName }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="customerList.length <= 0 || isFlag" class="text-center">
+      <img class="mt40" src="@/assets/images/pic_page-non.png" />
+      <div class="fs17 mt40">暂无客户</div>
+    </div>
+    <van-popup v-model="show1" position="right" :style="{ width: '70%', height: '100%' }">
+      <div class="tab pv10 ph20 border-gb">
+        <p class="fs16 mv10 h30 c-gray-dark">客户筛选</p>
+        <ul class="fs13 flex justify-content-s flex-wrap">
+          <li
+            v-for="(item, index) in tabList1"
+            :key="index"
+            @click="selectTab('tab1', index)"
+            :class="{ active: index == active1 }"
+            class="pv6 ph10 m5
+          c-gray-darker"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+      </div>
+      <div class="tab pv10 ph20 border-gb">
+        <p>客户来源</p>
+        <ul class="fs13 flex justify-content-s flex-wrap">
+          <li
+            v-for="(item, index) in tabList2"
+            :key="index"
+            @click="selectTab('tab2', index)"
+            :class="{ active: index == active2 }"
+            class="pv6 ph10 m5 c-gray-darker"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+      </div>
+      <div class="bottom-btn flex">
+        <van-button class="green" color="#FEEFD8" @click="reset" v-no-more-click="1000">重置</van-button>
+        <van-button type="danger" @click="select" v-no-more-click="1000">确定</van-button>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { Search, Cell, IndexBar, IndexAnchor, Popup, Button, Tag } from 'vant'
+import { getRenewalCustomerList } from '@/api/ebiz/renewalManage/renewalManage'
+import { openLoading, closeLoading } from '@/assets/js/utils/toastLoading.js'
+export default {
+  name: 'login',
+  components: {
+    [Search.name]: Search,
+    [Cell.name]: Cell,
+    [IndexBar.name]: IndexBar,
+    [IndexAnchor.name]: IndexAnchor,
+    [Popup.name]: Popup,
+    [Button.name]: Button,
+    [Tag.name]: Tag
+  },
+  data() {
+    return {
+      searchVal: '',
+      show1: false,
+      show2: false,
+      active1: 0,
+      active2: 0,
+      isFlag: false,
+      // type: ['success', 'primary', 'danger', ''],
+      type: ['success', 'primary', ''],
+      indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#'],
+      customerList: [],
+      newList: [],
+      isSuccess: false,
+      tabList1: [
+        {
+          name: '全部',
+          value: ''
+        },
+        {
+          name: '准客户',
+          value: '0'
+        },
+        {
+          name: '老客户',
+          value: '1'
+        }
+      ],
+      tabList2: [
+        {
+          name: '全部',
+          value: ''
+        },
+        {
+          name: '转介绍',
+          value: '0'
+        },
+        {
+          name: '缘故',
+          value: '1'
+        },
+        {
+          name: '陌生',
+          value: '2'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getCustomerList() //客户列表查询
+  },
+
+  methods: {
+    searchList() {
+      let $this = this
+      $this.newList = []
+      if ($this.searchVal) {
+        $this.customerList.map(function(item) {
+          item.list.map(function(item) {
+            if (item.appntName.search($this.searchVal) != -1) {
+              $this.newList.push(item)
+              if ($this.length <= 0) {
+                $this.isFlag = true
+              }
+            }
+          })
+        })
+      } else {
+        $this.getCustomerList()
+      }
+    },
+    selectTab(name, index) {
+      if (name == 'tab1') {
+        this.active1 = index
+      } else if (name == 'tab2') {
+        this.active2 = index
+      }
+    },
+    select() {
+      let $this = this
+      let sxIndex = $this.active1 - 1
+      let lyIndex = $this.active2 - 1
+      if (sxIndex < 0) {
+        sxIndex = ''
+      }
+      if (lyIndex < 0) {
+        lyIndex = ''
+      }
+      $this.show1 = false
+      $this.getCustomerList(sxIndex, lyIndex)
+    },
+    reset() {
+      this.active1 = ''
+      this.active2 = ''
+    },
+    //获取客户列表
+    getCustomerList(customerType, customerSource) {
+      openLoading()
+      let $this = this
+      $this.customerList = []
+      let data = {
+        customerType: customerType,
+        customerSource: customerSource
+      }
+      getRenewalCustomerList(data)
+        .then(res => {
+          closeLoading()
+          if (res.result == 0) {
+            $this.formatData(res)
+            $this.isSuccess = true
+            // if ($this.customerList[0].key == '#') {
+            //   let tempObj = $this.customerList[0]
+            //   $this.customerList.splice(0, 1)
+            //   $this.customerList.push(tempObj)
+            // }
+
+            //根据新数据获取筛选列表
+            $this.newList = []
+            $this.customerList.map(function(item) {
+              item.list.map(function(item) {
+                if (item.customerName.search($this.searchVal) != -1 || item.customerPhone.search($this.searchVal) != -1) {
+                  $this.newList.push(item)
+                  if ($this.length <= 0) {
+                    $this.isFlag = true
+                  }
+                }
+              })
+            })
+          }
+        })
+        .catch(err => {})
+    },
+    formatData(data) {
+      //数据重新组装
+      // let i
+      // for (i in data.content) {
+      //   this.customerList.push({
+      //     key: data.content[i].groupByChar,
+      //     list: data.content[i]
+      //   })
+      // }
+      var map = {},
+        dest = []
+      for (var i = 0; i < data.content.length; i++) {
+        var ai = data.content[i]
+        if (!map[ai.groupByChar]) {
+          dest.push({
+            key: ai.groupByChar,
+
+            list: [ai]
+          })
+          map[ai.groupByChar] = ai
+        } else {
+          for (var j = 0; j < dest.length; j++) {
+            var dj = dest[j]
+            if (dj.groupByChar == ai.groupByChar) {
+              dj.data.push(ai)
+              break
+            }
+          }
+        }
+      }
+      this.customerList = dest
+      this.indexList = dest.map(item => {
+        return item.key
+      })
+    },
+    close() {
+      this.show2 = false
+    },
+    //获取原生通讯录方法
+    phoneList() {
+      this.close()
+      EWebBridge.webCallAppInJs('contactList', {})
+    },
+    go(path, item) {
+      if (item) {
+        // url = path + '?id=' + encodeURIComponent(id)
+        localStorage.setItem('customerInfo', JSON.stringify(item))
+      }
+      console.log(path, 'path')
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#/renewalManage/' + path
+        },
+        routerInfo: {
+          path: path
+        }
+      })
+      this.close()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  .van-search__content {
+    background: #fff !important;
+    border-radius: 10px;
+  }
+  .van-search {
+    background: none !important;
+  }
+  .list {
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+  .tab {
+    p {
+      line-height: 30px;
+    }
+    ul {
+      li {
+        border-radius: 4px;
+        background: #f5f5f5;
+        &.active {
+          background: #e9332e;
+          color: #fff !important;
+          border: none;
+        }
+      }
+    }
+  }
+  .bottom-btn {
+    width: 100%;
+    button {
+      width: 50%;
+      border: none !important;
+    }
+  }
+  .box {
+    li {
+      height: 40px;
+      line-height: 40px;
+      border-bottom: 1px solid #ededed;
+    }
+  }
+}
+.van-tag--plain {
+  margin-right: 10px;
+}
+.van-tag--primary.van-tag--plain {
+  color: #5ca7de;
+}
+.van-tag--success.van-tag--plain {
+  color: #7ed321;
+}
+</style>

src/views/ebiz/renewalManage/policyDetail.vue

@@ -0,0 +1,427 @@
+<template>
+  <div class="detail-container pb50">
+    <van-collapse v-model="activeNames">
+      <!-- 保单信息 -->
+      <van-collapse-item title="保单信息" name="1" class="pb10 pt10">
+        <van-cell-group>
+          <van-cell title="保单号" :value="OrderInfoDTO.contNo" />
+          <van-cell title="生效日期" :value="OrderInfoDTO.cvaliDate" />
+          <van-cell title="保单状态" :value="OrderInfoDTO.contState" />
+          <van-cell title="签收状态" :value="OrderInfoDTO.orderStatusText" />
+          <van-cell v-if="OrderInfoDTO.receiptDate != null && OrderInfoDTO.receiptDate != ''" title="签收日期" :value="OrderInfoDTO.receiptDate" />
+        </van-cell-group>
+      </van-collapse-item>
+
+      <!-- 投保人信息 -->
+      <van-collapse-item title="投保人信息" name="2" class="detail-title pb10">
+        <van-cell-group>
+          <van-cell title="投保人" :value="appntDTO.name" />
+          <van-cell title="性别" :value="appntDTO.sexText" />
+          <van-cell title="证件类型" :value="appntDTO.idTypeText" />
+          <van-cell title="证件号码" :value="appntDTO.idNo" />
+          <van-cell title="联系电话" :value="appntDTO.mobileStar" />
+        </van-cell-group>
+      </van-collapse-item>
+
+      <!-- 多被保险人信息 -->
+      <div v-for="(item, index) in insuredDTOs" :key="index" class="pb10">
+        <van-collapse-item title="被保险人信息" :name="index + 40" class="pb10">
+          <van-cell-group>
+            <!-- <van-cell title="是投保人的" :value="item.relationToAppnt" /> -->
+            <van-cell title="姓名" :value="item.name" />
+            <van-cell title="性别" :value="item.sexText" />
+            <van-cell title="证件类型" :value="item.idTypeText" />
+            <van-cell title="证件号码" :value="item.idNo" />
+            <van-cell title="联系电话" :value="item.mobile" />
+          </van-cell-group>
+        </van-collapse-item>
+        <div v-for="(itm, i) in item.bnfDTOs" :key="i" class="pb10">
+          <!-- 受益人信息 -->
+          <van-collapse-item title="受益人信息" :name="i + 81">
+            <van-cell-group>
+              <van-cell title="受益人" :value="itm.bnfTypeText" />
+              <div v-if="itm.bnfType == '1'">
+                <van-cell title="姓名" :value="itm.name" />
+                <van-cell title="性别" :value="itm.sexText" />
+                <!-- <van-cell title="是被保险人的" :value="itm.relationText" /> -->
+                <van-cell title="受益比例" :value="`${itm.bnfLot * 100}%`" v-if="itm.bnfLot != null" />
+                <van-cell title="证件类型" :value="itm.idTypeText" />
+                <van-cell title="证件号码" :value="itm.idNo" />
+              </div>
+            </van-cell-group>
+          </van-collapse-item>
+        </div>
+        <div v-for="(it, ind) in list" :key="it.riskName">
+          <van-collapse-item title="险种信息" :name="ind + 10">
+            <van-cell-group>
+              <van-cell title="险种名称" :value="it.riskName" />
+              <van-cell title="保险期间" :value="it.insuYear" />
+
+              <!-- <van-cell title="交费期间" :value="Number(it.years) > 30 ? '至70周岁' : `${it.years}年交`" /> -->
+              <van-cell title="交费期间" :value="it.payIntv" />
+
+              <van-cell title="险种保额(元)" :value="it.amt | moneyFormat" />
+              <van-cell title="险种保费(元)" :value="it.mainPremDetail | moneyFormat" />
+              <van-collapse-item title="附加险信息" :name="num + 61" v-for="(i, num) in it.addtion" :key="num">
+                <van-cell-group>
+                  <van-cell title="险种名称" :value="i.riskName" />
+                  <van-cell title="保险期间" :value="i.insuYear" />
+
+                  <!-- <van-cell title="交费期间" :value="Number(i.years) > 30 ? '至70周岁' : `${i.years}年交`" /> -->
+                  <van-cell title="交费期间" :value="i.payIntv" />
+                  <van-cell title="险种保额(元)" v-if="i.amt == '1' || i.amt == '2' || i.amt == '3'" :value="`计划${i.amt}`"></van-cell>
+                  <van-cell title="险种保额(元)" :value="i.amt | moneyFormat" v-else />
+                  <van-cell title="险种保费(元)" :value="i.prem | moneyFormat" />
+                </van-cell-group>
+              </van-collapse-item>
+            </van-cell-group>
+          </van-collapse-item>
+        </div>
+      </div>
+      <!-- 续期信息 -->
+      <div class="detail-title pb10">
+        <van-collapse-item title="续期交费信息" name="100">
+          <van-cell-group>
+            <item title="交费方式" :text="renewalManage.payMode"></item>
+            <item title="转账银行" :text="renewalManage.bankName"></item>
+            <item title="转账账号" :text="renewalManage.bankAccNo"></item>
+            <item title="下次扣款日" :text="renewalManage.paytoDate"></item>
+
+            <van-cell title="下期扣款金额(元)" :value="renewalManage.xqprem | moneyFormat" />
+          </van-cell-group>
+        </van-collapse-item>
+      </div>
+    </van-collapse>
+
+    <!-- <van-dialog v-model="show" title="提示" show-cancel-button @confirm="authConfirm(authCode)" @cancel="clearTimer">
+      <p class="p10 fs14">为确保是您本人操作，短信验证码已发送至您手机号{{ encyCustomerMobile }}，请您输入验证码以完成后续投保操作。</p>
+      <van-cell-group class="flex align-items-c pr5 mb15">
+        <van-field maxlength="6" placeholder="请输入短信验证码" v-model="authCode" clearable label-width="0" />
+        <van-button type="danger" plain size="small" class="w160 p0" @click="getAuthCode" :disabled="codeDisabled" v-no-more-click="2000">{{
+          codeDisabled ? `${countDown}s后重新获取` : '获取验证码'
+        }}</van-button>
+      </van-cell-group>
+    </van-dialog> -->
+  </div>
+</template>
+
+<script>
+import { Collapse, CollapseItem, Cell, CellGroup, Button, Field, Dialog } from 'vant'
+import { getPolicyDetail, getReceiptSign } from '@/api/ebiz/serve/serve'
+import { getAuthCode, autchCodeCheck } from '@/api/ebiz/sale/sale'
+import { checkPhone } from '@/api/ebiz/customer/customer'
+import dataDictionary from '@/assets/js/utils/data-dictionary' //根据数据字典进行页面展示
+import { formatAllRisk } from '@/assets/js/utils/formatRiskList'
+import item from './compontents/item'
+export default {
+  data() {
+    return {
+      show: false, // 获取短信验证码
+      codeDisabled: false, // 获取验证码按钮是否禁用
+      timeId: null, // 计时器ID
+      countDown: 60, // 倒计时
+      authCode: '', // 验证码
+      smsAuthNum: 3,
+      operaFlag: null,
+      encyCustomerMobile: null,
+      customerMobile: null,
+      sid: null,
+      //人脸识别认证次数
+      faceAuthCount: {
+        appnt: 0,
+        insured: 0,
+        weixin: 0
+      },
+      // 折叠面板
+      activeNames: ['1'],
+      // 保单基本信息
+      OrderInfoDTO: {},
+      // 投保人信息
+      appntDTO: {},
+      // 被保险人信息
+      insuredDTOs: [],
+      renewalManage: {}, // 续期信息
+      // 保单号
+      contNo: '',
+
+      list: []
+    }
+  },
+  created() {
+    // 获取保单详情
+    this.getPolicyDetail()
+  },
+  components: {
+    item,
+    [Collapse.name]: Collapse,
+    [CollapseItem.name]: CollapseItem,
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+    [Button.name]: Button,
+    [Field.name]: Field,
+    [Dialog.name]: Dialog
+  },
+  methods: {
+    // 获取短信验证码
+    getAuthCode() {
+      this.codeDisabled = true
+      //倒计时
+      this.timeId = setInterval(() => {
+        this.countDown--
+        if (this.countDown <= 0) {
+          window.clearInterval(this.timeId)
+          this.codeDisabled = false
+          this.countDown = 60
+        }
+      }, 1000)
+      getAuthCode({
+        operateType: 'appntInfoEntry',
+        type: 'H5',
+        operateCode: this.customerMobile,
+        system: 'agentApp',
+        operateCodeType: '0'
+      }).then(res => {
+        console.log(res)
+        if (res.result == 0) {
+          this.sid = res.sessionId
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    // 验证码确认事件
+    async authConfirm() {
+      //清理计时器
+      this.clearTimer()
+      this.changeSubmit()
+    },
+    // 清理计时器
+    clearTimer() {
+      window.clearInterval(this.timeId)
+      this.timeId = null
+      this.countDown = 60
+      this.codeDisabled = false
+    },
+    //提交变更申请
+    async changeSubmit() {
+      if (null == this.sid) {
+        this.$toast('请先进行发送短信验证码')
+        return
+      }
+      let res = await autchCodeCheck({
+        smsId: this.sid,
+        code: this.authCode
+      })
+      if (res.result == 0) {
+        this.toNextPage()
+      } else {
+        this.$toast(res.resultMessage)
+      }
+    },
+    realPeopelCheck() {
+      this.$toast.loading({
+        // 持续展示 toast
+        duration: 0,
+        // 禁用背景点击s
+        forbidClick: true,
+        loadingType: 'spinner',
+        message: '加载中……'
+      })
+      let data = {
+        name: this.appntDTO.name,
+        idType: this.appntDTO.idType,
+        idNo: this.appntDTO.idNo,
+        mobile: this.appntDTO.mobile
+      }
+      this.customerMobile = this.appntDTO.mobile
+      this.encyCustomerMobile = this.customerMobile.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
+      this.authCode = null
+      // eslint-disable-next-line no-unused-vars
+      return new Promise((resolve, reject) => {
+        checkPhone(data).then(res => {
+          if (res.result == '0') {
+            console.log(res)
+            this.show = true
+          } else {
+            Dialog.confirm({
+              title: '提示',
+              message: '抱歉，您预留的手机号非您本人的手机号，请进行线下投保！',
+              showCancelButton: false
+            })
+          }
+        })
+      })
+    },
+    // 获取保单详情
+    getPolicyDetail() {
+      let that = this
+      let data = {
+        policyNo: window.localStorage.getItem('policyNo')
+        // policyNo: '809920190000597308'
+      }
+
+      getPolicyDetail(data).then(res => {
+        if (res.result == '0') {
+          let appntDTO = res.content.appntDTO
+          let orderInfoDTO = res.content.orderInfoDTO
+          this.renewalManage = res.content.xqPayDTO
+          // 保单信息
+          if (orderInfoDTO.orderStatus == '0') {
+            orderInfoDTO.orderStatusText = '未签收'
+          } else if (orderInfoDTO.orderStatus == '1') {
+            orderInfoDTO.orderStatusText = '已签收'
+          } else {
+            orderInfoDTO.orderStatusText = ''
+          }
+          // 测试用
+          // orderInfoDTO.orderStatus = '0'
+          that.OrderInfoDTO = orderInfoDTO
+          // 投保人信息
+          this.filterData(dataDictionary.sex, 'sex', appntDTO)
+          this.filterData(dataDictionary.idType, 'idType', appntDTO)
+          that.appntDTO = appntDTO
+          window.localStorage.setItem('saleInsuredInfo', JSON.stringify(appntDTO))
+          // 被保险人信息
+          res.content.insuredDTOs.map(insured => {
+            insured.riskDTOLst.map(risk => {
+              Number(risk.payIntv)
+              switch (risk.payIntv) {
+                case -1:
+                  risk.payIntv = '不定期交'
+                  break
+                case 0:
+                  risk.payIntv = '一次交清'
+                  break
+                case 1:
+                  risk.payIntv = '月交'
+                  break
+                case 3:
+                  risk.payIntv = '季交'
+                  break
+                case 6:
+                  risk.payIntv = '半年交'
+                  break
+                case 12:
+                  risk.payIntv = '年交'
+                  break
+              }
+              if (risk.insuYear == '70') {
+                risk.insuYear = '至70周岁'
+              } else if (risk.insuYear == '75') {
+                risk.insuYear = '至75周岁'
+              } else if (risk.insuYear == '80') {
+                risk.insuYear = '至80周岁'
+              } else if (risk.insuYear == '106') {
+                risk.insuYear = '终身'
+              } else {
+                risk.insuYear = `${risk.insuYear}年`
+              }
+            })
+            this.filterData(dataDictionary.sex, 'sex', insured)
+            this.filterData(dataDictionary.idType, 'idType', insured)
+            this.filterData(dataDictionary.relationToAppnt, 'relation', insured)
+            insured.bnfDTOs.map(bnf => {
+              this.filterData(dataDictionary.bnfType, 'bnfType', bnf)
+              this.filterData(dataDictionary.sex, 'sex', bnf)
+              this.filterData(dataDictionary.idType, 'idType', bnf)
+              this.filterData(dataDictionary.relationToAppnt, 'relation', bnf)
+            })
+          })
+
+          that.insuredDTOs = res.content.insuredDTOs
+          this.list = formatAllRisk(this.insuredDTOs[0].riskDTOLst)
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    //根据数据字典 将后端返回的数据渲染到页面中
+    filterData(dictionary, key, pageData) {
+      dictionary.forEach(item => {
+        if (pageData[key] == item.id) {
+          pageData[key + 'Text'] = item.text //渲染页面使用的字段
+        }
+      })
+    },
+    // 回执签收
+    next() {
+      let that = this
+      if (this.faceAuthCount.appnt < this.smsAuthNum) {
+        if (this.appntDTO.idType == '1') {
+          //证件类型为身份证时，进行人脸识别
+          EWebBridge.webCallAppInJs('face_auth', {
+            number: this.appntDTO.idNo, //身份证号码
+            name: this.appntDTO.name //姓名
+          }).then(data => {
+            this.$toast.loading({
+              duration: 0, // 持续展示 toast
+              forbidClick: true, // 禁用背景点击
+              loadingType: 'spinner',
+              message: '加载中……'
+            })
+            this.$toast.clear()
+            if (JSON.parse(data).state == '1') {
+              this.toNextPage()
+            } else {
+              that.faceAuthCount.appnt++
+              if (that.faceAuthCount.appnt >= this.smsAuthNum) {
+                this.realPeopelCheck()
+              }
+            }
+          })
+        } else {
+          this.toNextPage()
+        }
+      } else {
+        this.realPeopelCheck()
+      }
+    },
+    toNextPage() {
+      let params = {
+        contNo: window.localStorage.getItem('policyNo')
+      }
+      getReceiptSign(params).then(res => {
+        if (res.result == '0') {
+          this.$toast.clear()
+          window.localStorage.setItem('insurance-policyUrl', res.signUrl)
+          window.localStorage.setItem('detailJump', '1')
+          window.localStorage.setItem('contNo', this.OrderInfoDTO.contNo)
+          window.localStorage.setItem('orderNo', this.OrderInfoDTO.orderNo)
+          window.localStorage.setItem('orderStatus', this.OrderInfoDTO.orderStatus)
+          window.localStorage.setItem('saleInsuredInfo', JSON.stringify(this.appntDTO))
+          this.$jump({
+            flag: 'h5',
+            extra: {
+              url: location.origin + '/#/sale/signatureOfElectronic',
+              forbidSwipeBack: '1',
+              title: '保险合同签收回执电子确认书签名'
+            },
+            routerInfo: {
+              path: '/sale/signatureOfElectronic'
+            }
+          })
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.detail-container {
+  .van-hairline--top-bottom::after {
+    border: none;
+  }
+  /deep/ .van-collapse-item__content {
+    padding-top: 0;
+  }
+  /deep/.van-collapse-item__title {
+    padding-left: 30px;
+  }
+  /deep/ .van-cell__value {
+    text-align: left !important;
+  }
+}
+</style>

src/views/ebiz/renewalManage/policyList.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="policy-list-container">
+    <div class="policy-list-content">
+      <van-tabs @click="onClick">
+        <van-tab :title="item" v-for="(item, index) in titleList" :key="index"></van-tab>
+        <div v-if="list">
+          <div class="fs12" style="border-bottom: 1px solid #d7d7d7;" v-for="(item, index) in list" :key="index">
+            <div class="bg-white pv15 pr15 pl10" @click="goToDetail(item.policyNo)">
+              <cellLine :text="item.riskName" size="large"></cellLine>
+              <cellLine title="保单号" dwidth="0" :text="item.policyNo" fontColor="#7d7e80" size="small"></cellLine>
+              <cellLine title="投保人" :text="item.appntName"></cellLine>
+              <cellLine title="被保人" :text="item.insuredName"></cellLine>
+              <cellLine title="保额(元)" :text="item.amount"></cellLine>
+              <cellLine title="保单生效日期" :text="item.cvaliDate"></cellLine>
+              <cellLine title="保单状态" :text="item.orderStatus == '0' ? '有效' : '终止'"></cellLine>
+            </div>
+          </div>
+        </div>
+        <div v-else class="text-center">
+          <img class="mt40 w250" src="@/assets/images/pic_page-non.png" />
+          <div class="fs17 c-gray-dark mt40">暂无保单列表</div>
+        </div>
+      </van-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Search, List, Tab, Tabs, Tag, Row, Col } from 'vant'
+import { getPolicyList } from '@/api/ebiz/renewalManage/renewalManage'
+import { openLoading, closeLoading } from '@/assets/js/utils/toastLoading.js'
+import cellLine from './compontents/cellLine'
+export default {
+  data() {
+    return {
+      // 搜索框
+      titleList: ['有效', '失效/终止'],
+      lineWidth: 45,
+      // 列表信息
+      policyListDTOList: [],
+      // 高亮的 tab 栏
+      active: '1',
+      list: [], // 列表
+      invalidList: [], // 无效列表
+      customerNumber: localStorage.getItem('customerNumber'),
+      customerInfo: []
+    }
+  },
+  created() {
+    let that = this
+    // 获取表单列表
+    this.customerInfo = JSON.parse(localStorage.getItem('customerInfo'))
+    this.lineWidth = document.body.clientWidth / 2
+    that.getPolicyList()
+  },
+  methods: {
+    onClick(index) {
+      this.active = index + 1 + ''
+      this.getPolicyList()
+    },
+    // 获取保单列表
+    getPolicyList() {
+      openLoading()
+      let data = {
+        status: this.active,
+        idNo: this.customerInfo.idNo,
+        idType: this.customerInfo.idType,
+        sex: this.customerInfo.sex,
+        appntName: this.customerInfo.appntName,
+        birthday: this.customerInfo.birthday
+      }
+      getPolicyList(data).then(res => {
+        closeLoading()
+        if (res.result == 0) {
+          this.list = res.policyListDTOList
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    // 点击去详情
+    goToDetail(policyNo) {
+      console.log(policyNo)
+      window.localStorage.setItem('policyNo', policyNo)
+      let that = this
+      that.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#/renewalManage/policyDetail'
+        },
+        routerInfo: {
+          path: '/renewalManage/policyDetail'
+        }
+      })
+    }
+  },
+  components: {
+    cellLine,
+    [Search.name]: Search,
+    [List.name]: List,
+    [Tab.name]: Tab,
+    [Tabs.name]: Tabs,
+    [Tag.name]: Tag,
+    [Row.name]: Row,
+    [Col.name]: Col
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/sass/variables.scss';
+.list-container {
+  .list-content {
+    .list-header {
+      background: $white;
+    }
+    .list-main {
+      background: $white;
+    }
+  }
+}
+</style>