From 47ceff5834e22094efab7d74ea848223bd2ba4d8 Mon Sep 17 00:00:00 2001
From: pangxingyue <120277894@qq.com>
Date: Thu, 11 Mar 2021 14:15:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=A4=A7=E5=B0=8F=E5=86=99?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ebiz/insureAgain/insureInformation.vue    | 635 ++++++++++++++++++
 src/views/ebiz/insureAgain/payment.vue        |  98 +++
 src/views/ebiz/insureAgain/paymentResult.vue  |  68 ++
 .../ebiz/insureAgain/productInformation.vue   | 180 +++++
 .../ebiz/insureAgain/signConfirmation.vue     |  90 +++
 5 files changed, 1071 insertions(+)
 create mode 100644 src/views/ebiz/insureAgain/insureInformation.vue
 create mode 100644 src/views/ebiz/insureAgain/payment.vue
 create mode 100644 src/views/ebiz/insureAgain/paymentResult.vue
 create mode 100644 src/views/ebiz/insureAgain/productInformation.vue
 create mode 100644 src/views/ebiz/insureAgain/signConfirmation.vue

diff --git a/src/views/ebiz/insureAgain/insureInformation.vue b/src/views/ebiz/insureAgain/insureInformation.vue
new file mode 100644
index 000000000..ac96440f1
--- /dev/null
+++ b/src/views/ebiz/insureAgain/insureInformation.vue
@@ -0,0 +1,635 @@
+<template>
+  <div class="insure-again">
+    <ProgressBar :active="active" />
+    <DropdownBox>
+      <template #boxTitle>
+        <span class="title">投保人信息</span>
+      </template>
+      <InfoCell label="姓名">{{userInfo.name}}</InfoCell>
+      <InfoCell label="证件类型">{{userInfo.idType | idToText('insuredIdType')}}</InfoCell>
+      <InfoCell label="出生日期">{{userInfo.birthday}}</InfoCell>
+      <InfoCell label="证件截止日期">{{userInfo.certiexpiredate}}</InfoCell>
+      <select-radio v-validate="'required'" label="性别" name="性别" required :radios="sexRadio" :value.sync="userInfo.sex" :disabled="true"></select-radio>
+      <InfoCell label="国籍">{{userInfo.nativeplace | idToText('nativeplace')}}</InfoCell>
+      <van-field :value="userInfo.marriageStatus" required label="婚姻状况" name="婚姻状况" v-validate="'required'"
+        right-icon="arrow" placeholder="请选择" @click="toSelect('10','','appntDTO')" />
+      <InfoCell label="职业类别">{{userInfo.occupationCode}}</InfoCell>
+      <InfoCell label="移动电话">{{userInfo.mobile}}</InfoCell>
+      <InfoCell label="电子邮箱">{{userInfo.email}}</InfoCell>
+      <!-- <InfoCell label="有无社保">
+        <van-button class="mr10" size="small" type="danger" round>有</van-button>
+        <van-button plain size="small" type="danger" round>无</van-button>
+      </InfoCell> -->
+      <select-radio v-validate="'required'" :radios="medicalRadio" label="有无社保" name="有无社保" required :value.sync="userInfo.medical" :disabled="true"></select-radio>
+      <InfoCell label="税收居民身份">{{userInfo.taxResidentId | idToText('taxIdentity')}}</InfoCell>
+      <InfoCell label="联系地址">{{homeName}}</InfoCell>
+      <InfoCell label="详细联系地址">{{userInfo.homeAddress}}</InfoCell>
+    </DropdownBox>
+    <DropdownBox>
+      <template #boxTitle>
+        <span class="title">被保险人信息</span>
+      </template>
+      <InfoCell label="姓名">{{insuredPersonInfo.name}}</InfoCell>
+      <InfoCell label="证件类型">{{userInfo.idType | idToText('idType')}}</InfoCell>
+      <InfoCell label="证件号码">{{insuredPersonInfo.idNo}}</InfoCell>
+      <InfoCell label="出生日期">{{insuredPersonInfo.birthday}}</InfoCell>
+      <select-radio required :radios="sexRadio" label="性别" name="性别" v-validate="'required'" :value.sync="insuredPersonInfo.sex" :disabled="true"></select-radio>
+      <InfoCell label="国籍">{{insuredPersonInfo.nativeplace | idToText('nativeplace')}}</InfoCell>
+      <van-field :value="insuredPersonInfo.marriageStatus" required label="婚姻状况" name="婚姻状况" v-validate="'required'"
+        right-icon="arrow" placeholder="请选择" @click="toSelect('10','','insuredDTOs')" />
+      <InfoCell label="职业类别">{{insuredPersonInfo.occupationCode}}</InfoCell>
+      <select-radio :radios="medicalRadio" label="有无社保" name="有无社保" v-validate="'required'" required :value.sync="insuredPersonInfo.medical"
+        :disabled="true"></select-radio>
+      <InfoCell label="税收居民身份">{{insuredPersonInfo.name}}</InfoCell>
+      <InfoCell label="联系地址">{{insuredHomeName}}</InfoCell>
+      <InfoCell label="详细地址">{{userInfo.homeAddress}}</InfoCell>
+    </DropdownBox>
+    <DropdownBox>
+      <template #boxTitle>
+        <span class="title">受益人信息</span>
+      </template>
+      <div v-if="bnftype === '0'">
+        <InfoCell label="受益类型">法定受益人</InfoCell>
+      </div>
+      <div v-else>
+        <div v-for="(item, index) in bnfPersonInfo" :key="index">
+          <InfoCell label="受益类型">指定受益人</InfoCell>
+          <InfoCell label="是被保险人的">{{ item.relationToInsured | idToText('relationToAppnt') }}</InfoCell>
+          <InfoCell label="姓名">{{ item.name }}</InfoCell>
+          <InfoCell label="证件类型">{{item.idType | idToText('insuredIdType')}}</InfoCell>
+          <InfoCell label="证件截止日期">{{item.certiexpiredate}}</InfoCell>
+          <!-- <InfoCell label="性别">
+          <van-button class="mr10" size="small" type="danger" round>男</van-button>
+          <van-button plain size="small" type="danger" round>女</van-button>
+        </InfoCell> -->
+          <select-radio required :disabled="true" :radios="sexRadio" label="性别" name="性别" v-validate="'required'"
+            :value.sync="item.sex"></select-radio>
+          <van-field :value="item.nativeplace | idToText('nativeplace')" label="国籍" name="国籍" required v-validate="'required'"
+            right-icon="arrow" placeholder="请选择" @click="toSelect('1','','bnfDTOs',index)" />
+          <van-field :value="item.marriageStatus" required label="婚姻状况" name="婚姻状况" v-validate="'required'"
+            right-icon="arrow" placeholder="请选择" @click="toSelect('10','','bnfDTOs',index)" />
+          <van-field v-model="item.mobile" clearable label="移动电话" name="移动电话" required placeholder="请输入" v-validate="'required|mobileLength11|mobileStartWith1|mobile'"
+            maxlength="11" />
+          <van-field v-model="bnfHomeName[index]" readonly label="联系地址" name="联系地址" required right-icon="arrow"
+            placeholder="请选择" v-validate="'required|contactAdderss'" @click="areaChoose('2','bnfDTOs',index)" />
+          <van-field v-model="item.homeAddress" label="" name="详细地址" placeholder="具体到街道、门牌号、楼号、单元号、室号" v-validate="'required|homeAddressNum|homeAddressCh'"
+            clearable maxlength="30" :readonly="false" style="font-size: 3.5vw;" />
+          <van-field @click="openOccupation(index)" label="职业类别" name="职业类别" :value="item.occupationName" right-icon="arrow" />
+          <InfoCell label="受益顺序"></InfoCell>
+          <InfoCell label="受益比例">{{ item.bnfLot }}%</InfoCell>
+        </div>
+      </div>
+    </DropdownBox>
+    <DropdownBox>
+      <template #boxTitle>
+        <span class="title">账户信息</span>
+      </template>
+      <InfoCell label="账户名称">{{accountPersonInfo.accountName}}</InfoCell>
+      <InfoCell label="开户银行">{{accountPersonInfo.bankName}}</InfoCell>
+      <InfoCell label="银行账号">{{accountPersonInfo.cardBookCode}}</InfoCell>      
+      <van-field lable="签名" name="签名" value="签名" @click="signTo" />
+    </DropdownBox>    
+    <van-button type="danger" class="bottom-btn" v-no-more-click="1000" @click="nextStep">下一步</van-button>
+    <!-- 字段选择 -->
+    <van-popup v-model="popupShow" position="bottom">
+      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="popupShow = false" />
+    </van-popup>
+    <!-- 联系地址选择 -->
+    <van-popup v-model="homeShow" position="bottom">
+      <van-area :area-list="areaLists" value="450000" @confirm="sureArea($event, '2')" @cancel="homeShow = false" />
+    </van-popup>
+    <!-- 职业类别弹窗 -->
+    <van-popup v-model="occupationShowPicker" position="bottom">
+      <occupation-for-loop @chooseOccupation="chooseOccupation" :name="occupationName" :code="occupationCode"></occupation-for-loop>
+    </van-popup>
+  </div>
+</template>
+<script>
+import { Field, Area } from 'vant'
+import ProgressBar from '@/components/ebiz/insureAgain/ProgressBar'
+import DropdownBox from '@/components/ebiz/insureAgain/DropdownBox'
+import InfoCell from '@/components/ebiz/insureAgain/InfoCell'
+// import { saveOrUpdateOrderInfo, getOrderDetail } from '@/api/ebiz/insureAgain/insureAgain'
+import { getOrderDetail, saveOrUpdateOrderInfo } from '@/api/ebiz/sale/sale'
+import DataDictionary from '@/assets/js/utils/data-dictionary'
+import SelectRadio from '@/components/ebiz/SelectRadio'
+import getAreaName from '@/assets/js/utils/getAreaNameForSale'
+import areaLists from '@/assets/js/utils/areaNewForSale'
+import { selectComp, getIdentityInfo } from './js/methods'
+import OccupationForLoop from '@/components/ebiz/occipation/OccupationForLoop'
+export default {
+  name: 'InsureInformation',
+  components: {
+    ProgressBar,
+    DropdownBox,
+    InfoCell,
+    OccupationForLoop,
+    [SelectRadio.name]: SelectRadio,
+    [Field.name]: Field,
+    [Area.name]: Area
+  },
+  computed: {},
+  data() {
+    return {
+      homeName: '', //投保人联系地址
+      insuredHomeName: '', //被投保人联系地址
+      bnfHomeName: [], //受益人联系地址
+      isSpecialRead: false,
+      active: 0,
+      userInfo: {}, //投保人信息
+      insuredPersonInfo: {}, //被投保人信息
+      bnfPersonInfo: {}, //受益人信息
+      accountPersonInfo: {}, //账户信息
+      sexRadio: [
+        {
+          label: '男',
+          value: '0'
+        },
+        {
+          label: '女',
+          value: '1'
+        }
+      ],
+      medicalRadio: [
+        {
+          label: '有',
+          value: '0'
+        },
+        {
+          label: '无',
+          value: '1'
+        }
+      ],
+      columns: [],
+      popupShow: false,
+      userType: '', //保险人类型
+      bnftype: '', //受益人类型
+      bnfIndex: '', //受益人索引
+      homeShow: false, //联系地址搜索栏显示
+      areaLists: areaLists, //地址信息
+      occupationShowPicker: false, //职业类别     
+      occupationName: '', 
+      occupationCode: '', 
+    }
+  },
+  created() {
+    this.getOrderDetail()
+  },
+  mounted() {    
+    setTimeout(() => {
+      window.EWebBridge.webCallAppInJs('webview_left_button', {
+        intercept: '1'
+      })
+    }, 100)
+    window.appCallBack = this.appCallBack
+  },
+  methods: {
+    /**
+     * @description: 签名
+     * @param {*}
+     * @return {*}
+     */
+    async signTo() {
+      const res = await EWebBridge.webCallAppInJs('ca_sign', signParam)
+      let signRes = JSON.parse(res)
+      console.log(signRes, '======================signRes=======================')
+    },
+    appCallBack(data) {
+      if (data.trigger == 'left_button_click') {
+        this.$jump({
+          flag: 'h5',
+          extra: {
+            url: location.origin + `/#/insureAgain`,
+            forbidSwipeBack: '1',
+            needRefresh: '1'
+          },
+          routerInfo: { path: `/insureAgain` }
+        })
+      }
+    },
+    getOrderDetail() {
+      getOrderDetail({ orderNo: localStorage.orderNo }).then(res => {
+        if (res.result == 0) {
+          //投保人信息返显
+          this.userInfo = res.orderDTO.appntDTO
+          this.setCustomerMarriage(res.orderDTO.appntDTO.marriage)
+          //是否长期
+          this.userInfo.effectiveDateType = res.orderDTO.appntDTO.effectiveDateType == 'false' ? false : true
+          //有无社保
+          this.userInfo.medical = res.orderDTO.appntDTO.medical
+
+          this.$utils.intLocalStorage(res)
+          this.homeName = getAreaName([{ code: this.userInfo.homeProvince }, { code: this.userInfo.homeCity }, { code: this.userInfo.homeArea }])
+
+          // 被投保人信息
+          this.insuredPersonInfo = res.orderDTO.insuredDTOs[0]
+          if (this.insuredPersonInfo.homeProvince.length) {
+            this.insuredHomeName = getAreaName([
+              { code: this.insuredPersonInfo.homeProvince },
+              { code: this.insuredPersonInfo.homeCity },
+              { code: this.insuredPersonInfo.homeArea }
+            ])
+          }
+          //受益人信息
+          //bnfFlag 0-法定受益人 1-指定受益人
+
+          let btnasd = `[
+					{
+						"area": "450103",
+						"birthday": "1980-01-02",
+						"bnfLot": 50,
+						"bnfOrder": 1,
+						"bnfType": "0",
+						"certiexpiredate": "2035-03-31",
+						"city": "450100",
+						"effectiveDateType": "false",
+						"healthGrade": "1",
+						"idNo": "110101198001020219",
+						"idType": "1",
+						"lifeGrade": "2",
+						"marriage": "2",
+						"mobile": "13707711024",
+						"name": "爱来",
+						"nativeplace": "1",
+						"occupationCode": "2070202",
+						"occupationName": "保险推销员",
+						"province": "450000",
+						"relationToInsured": "3",
+						"sex": "1",
+						"village": "百苑小区101号",
+						"yearSalary": "23"
+					},
+					{
+						"area": "450103",
+						"birthday": "1983-03-12",
+						"bnfLot": 50,
+						"bnfOrder": 1,
+						"bnfType": "0",
+						"certiexpiredate": "2035-03-31",
+						"city": "450100",
+						"effectiveDateType": "false",
+						"healthGrade": "1",
+						"idNo": "452624198303120727",
+						"idType": "1",
+						"lifeGrade": "1",
+						"marriage": "1",
+						"mobile": "13707711024",
+						"name": "艾琳马上来",
+						"nativeplace": "1",
+						"occupationCode": "4070103",
+						"occupationName": "经纪人(内勤)",
+						"province": "450000",
+						"relationToInsured": "4",
+						"sex": "1",
+						"village": "百苑小区101号",
+						"yearSalary": "32"
+					},
+          	{
+						"area": "450103",
+						"birthday": "1983-03-12",
+						"bnfLot": 50,
+						"bnfOrder": 1,
+						"bnfType": "0",
+						"certiexpiredate": "2035-03-31",
+						"city": "450100",
+						"effectiveDateType": "false",
+						"healthGrade": "1",
+						"idNo": "452624198303120727",
+						"idType": "1",
+						"lifeGrade": "1",
+						"marriage": "1",
+						"mobile": "13707711024",
+						"name": "艾琳马上来",
+						"nativeplace": "1",
+						"occupationCode": "4070103",
+						"occupationName": "经纪人(内勤)",
+						"province": "450000",
+						"relationToInsured": "4",
+						"sex": "1",
+						"village": "百苑小区101号",
+						"yearSalary": "32"
+					}
+				]`
+          res.orderDTO.orderInfoDTO.bnfFlag = '1'
+          if (res.orderDTO.orderInfoDTO.bnfFlag === '0') {
+            this.bnftype = '0'
+          } else if (res.orderDTO.orderInfoDTO.bnfFlag === '1') {
+            this.bnftype = '1'
+            res.orderDTO.insuredDTOs[0].bnfDTOs = JSON.parse(btnasd)
+            if (res.orderDTO.insuredDTOs[0].bnfDTOs) {
+              this.bnfPersonInfo = res.orderDTO.insuredDTOs[0].bnfDTOs || JSON.parse(btnasd)
+              this.bnfPersonInfo.forEach((item, index) => {
+                this.bnfHomeName[index] = getAreaName([{ code: item.province }, { code: item.city }, { code: item.area }])
+              })
+            }
+          }
+          // 账户信息
+          this.accountPersonInfo = res.orderDTO.orderAccountDTO
+        }
+      })
+    },
+
+    setCustomerMarriage(marriageCode) {
+      for (let status of DataDictionary.marriage) {
+        if (status.id == marriageCode) {
+          this.userInfo.marriageStatus = status.text
+          this.userInfo.marriage = status.id
+        }
+      }
+    },
+    /**
+     * @description: 弹框选择
+     * @param {*} pickerType 1、国家地区 2、证件类型 3、文化程度 4、有无社保(弃用) 5、税收居民身份 6、婚姻状况
+      7、在职情况 8、收入来源
+     * @param {*} valueKey
+     * @param {*} userType  appntDTO 投保人 insuredDTOs 被投保人  bnfDTOs 受益人 orderAccountDTO 账号信息
+     * @param {*} bnfIndex  受益人索引
+     * @return {*}
+     */
+
+    toSelect(pickerType, valueKey, userType, bnfIndex) {
+      bnfIndex ? (this.bnfIndex = 1) : (this.bnfIndex = 0)
+      ;[this.popupShow, this.pickerType] = [true, pickerType]
+      if (valueKey) this.valueKey = valueKey
+      userType ? (this.userType = userType) : ''
+      switch (pickerType) {
+        case '1':
+          this.columns = DataDictionary.nativeplace
+          break
+        case '2':
+          this.columns = DataDictionary.insuredIdType
+          break
+        case '4':
+          this.columns = [{ id: 0, text: '有' }, { id: 1, text: '无' }]
+          break
+        case '5':
+          this.columns = DataDictionary.taxIdentity
+          break
+        case '8':
+          this.columns = DataDictionary.salarySource
+          break
+        case '9':
+          this.productCodes.length = 0
+          this.productCodes.push('GFRS_M0024')
+          getCompany({ productCodes: this.productCodes }).then(res => {
+            if (res.result == 0) {
+              this.columns = res.content
+            } else {
+              this.$toast(res.resultMessage)
+            }
+          })
+          break
+        case '10':
+          this.columns = DataDictionary.marriage
+          break
+      }
+    },
+    //确认选择字段
+    onConfirm(value) {      
+      this.popupShow = false
+      if (this.pickerType == '1') {
+        if (this.userType === 'appntDTO') {
+          this.userInfo.nativeplace = value.id
+        } else if (this.userType === 'insuredDTOs') {
+          this.insuredPersonInfo.nativeplace = value.id
+        } else if (this.userType === 'bnfDTOs') {
+          this.bnfPersonInfo[this.bnfIndex].nativeplace = value.id
+        } else if (this.userType === 'orderAccountDTO') {
+          this.accountPersonInfo.nativeplace = value.id
+        }
+      } else if (this.pickerType == '2') {
+        //身份证以外的证件类型可以使用长期
+        if (value.id != '1') {
+          this.effectiveDateTypeAble = false
+        } else {
+          //若身份证件类型为身份证，自动带入年龄
+          let age = utilsAge.getAge(this.userInfo.birthday, new Date())
+          this.effectiveDateTypeAble = !(age > 45)
+          // 身份证号码不存在时赋默认值
+          if (!this.userInfo.idNo) {
+            this.userInfo.idNo = ''
+          }
+          //若身份证件类型为身份证，自动带入性别
+          let sexSign =
+            this.userInfo.idNo.length == 18 ? this.userInfo.idNo.substr(16, 1) : this.userInfo.idNo.length == 15 ? this.userInfo.idNo.substr(14, 1) : ''
+          //18位身份证第17位是性别位, 奇男偶女;15位身份证第15位是性别位, 奇男偶女
+          if (sexSign) {
+            if (parseInt(sexSign) % 2 == 0) {
+              this.userInfo.sex = '1'
+            } else {
+              this.userInfo.sex = '0'
+            }
+          }
+        }
+        this.userInfo.idType = value.id
+      } /*else if (this.pickerType == '3') {
+        this.userInfo.degree = value.id
+      }*/ else if (this.pickerType == '4') {
+        this.userInfo.socialSecurity = value.id
+      } else if (this.pickerType == '5') {
+        this.userInfo.taxResidentId = value.id
+      } /*else if (this.pickerType == '6') {
+        this.userInfo.marriage = value.id
+      } else if (this.pickerType == '7') {
+        this.userInfo.jobStatus = value.id
+      } */ else if (
+        this.pickerType == '8'
+      ) {
+        this.userInfo.salarySource = value.id
+      } else if (this.pickerType == '9') {
+        this.userInfo.workcompany = value
+      } else if (this.pickerType === '10') {
+        if (this.userType === 'appntDTO') {
+          this.userInfo.marriageStatus = value.text
+        } else if (this.userType === 'insuredDTOs') {
+          this.insuredPersonInfo.marriageStatus = value.text
+        } else if (this.userType === 'bnfDTOs') {
+          this.bnfPersonInfo[this.bnfIndex].marriageStatus = value.text
+        } else if (this.userType === 'orderAccountDTO') {
+          this.accountPersonInfo.marriageStatus = value.text
+        }
+      }
+    },
+    /**
+     * @description: 地区选择
+     * @param {*} pickerType 1户籍 2联系地址 3单位地址
+     * @param {*} userType appntDTO 投保人 insuredDTOs 被投保人  bnfDTOs 受益人 orderAccountDTO 账号信息
+     * @param {*} bnfIndex 受益人索引
+     * @return {*}
+     */
+    areaChoose(pickerType, userType, bnfIndex) {
+      userType ? (this.userType = userType) : ''
+      if (this.isAppnt) {
+        return
+      }
+      switch (pickerType) {
+        // case '1': //户籍
+        //   this.censusShow = true
+        //   break
+        case '2': //联系地址
+          this.homeShow = true
+          if (userType === 'bnfDTOs') {
+            this.bnfIndex = bnfIndex
+          }
+          break
+        case '3': //单位地址
+          this.areaShow = true
+          break
+        default:
+          break
+      }
+    },
+    /**
+     * @description: 区域选择
+     * @param {*} area 地区信息
+     * @param {*} pickerType 1户籍 2联系地址 3单位地址
+     * @return {*}
+     */
+    sureArea(area, pickerType) {
+      console.log('area :>> ', area)
+      switch (pickerType) {
+        // case '1': //单位地址
+        //   this.areaName = getAreaName(area)
+        //   ;[this.userInfo.companyProvince, this.userInfo.companyCity, this.userInfo.companyArea] = [area[0].code, area[1].code, area[2].code]
+        //   this.areaShow = false
+        //   break
+        case '2': //联系地址
+          // this.homeName = `${area[0].name}-${area[1].name}-${area[2].name}`;
+          if (this.userType === 'appntDTO') {
+            this.homeName = getAreaName(area)[(this.userInfo.homeProvince, this.userInfo.homeCity, this.userInfo.homeArea)] = [
+              area[0].code,
+              area[1].code,
+              area[2].code
+            ]
+          } else if (this.userType === 'insuredDTOs') {
+            this.insuredHomeName = getAreaName(area)[
+              (this.insuredPersonInfo.homeProvince, this.insuredPersonInfo.homeCity, this.insuredPersonInfo.homeArea)
+            ] = [area[0].code, area[1].code, area[2].code]
+          } else if (this.userType === 'bnfDTOs') {
+            this.bnfHomeName[this.bnfIndex] = getAreaName(area)
+            ;[this.bnfPersonInfo[this.bnfIndex]['province'], this.bnfPersonInfo[this.bnfIndex]['city'], this.bnfPersonInfo[this.bnfIndex]['area']] = [
+              area[0].code,
+              area[1].code,
+              area[2].code
+            ]
+          }
+          this.homeShow = false
+          break
+        // case '3': //户籍
+        //   this.census = getAreaName(area)
+        //   ;[this.userInfo.householdProvince, this.userInfo.householdCity] = [area[0].code, area[1].code]
+        //   this.censusShow = false
+        //   break
+      }
+    },
+    /**
+     * @description: 
+     * @param {*} index
+     * @return {*}
+     */
+    selectClick(index) {
+      selectComp(this, index, '1')
+    },
+
+    specialRead(payload) {
+      this.isSpecialRead = payload
+    },
+    async nextStep(page) {
+      // const authRes = await EWebBridge.webCallAppInJs('face_auth', {
+      //    businessSource: '1', //业务来源:1-电投，2-入司，3-理赔，4-保全
+      //    number: this.userInfo.idNo, //身份证号码
+      //    name: this.userInfo.name //姓名
+      // })              
+      // if (JSON.parse(authRes).state !== '1') {
+      //    this.$toast('人脸识别失败！')
+      //    return false;
+      // }
+      // 验证
+      // console.log(this.userInfo, '=====================================this.userInfo')
+      // console.log(this.insuredPersonInfo, '=====================================this.insuredPersonInfo')            
+      let valid = await this.$validator.validate()
+      if (true === valid) {
+        for (let status of DataDictionary.marriage) {
+          if (status.text === this.userInfo.marriageStatus) {
+            this.userInfo.marriage = status.id
+          }
+        }
+        this.save()
+      } else {
+        return this.$toast(this.$validator.errors.all()[0])
+      }    
+    },
+    async save() {
+      let params = {
+        orderType: 'APPNT_ORDER',
+        orderDTO: {
+          orderInfoDTO: {
+            orderNo: localStorage.orderNo,
+            isElecCont: this.isElecCont
+          },          
+          appntDTO: this.userInfo,
+          insuredDTOs: this.insuredPersonInfo,
+          orderAccountDTO: this.accountPersonInfo
+        }
+      }
+      let str = ''
+      let resultData = await saveOrUpdateOrderInfo(params)
+      if (resultData.result == 0) {        
+        localStorage.setItem('orderNo', resultData.orderNo)                
+        this.$jump({
+            flag: 'h5',
+            extra: {
+              url: location.origin + `/#/insureAgain/productInformation`
+            },
+            routerInfo: {
+              path: `/insureAgain/productInformation`
+            }
+        })
+      } else {
+        this.$toast(resultData.resultMessage)
+      }
+    },
+    /**
+     * @description: 
+     * @param {*} data
+     * @return {*}
+     */
+    chooseOccupation(data) {      
+      let { code, name, healthGrade, lifeGrade } = data
+      this.$jump({
+        flag: 'navigation',
+        extra: {
+          title: '职业类别',
+          hiddenRight: '1'
+        }
+      })      
+      this.occupationShowPicker = false
+      this.bnfPersonInfo[this.bnfIndex]['occupationName'] = name;
+      this.bnfPersonInfo[this.bnfIndex]['occupationCode'] = code;    
+    },
+
+    /**
+     * @description: 
+     * @param {*}
+     * @return {*}
+     */
+    openOccupation(index) {
+      this.occupationShowPicker = !this.occupationShowPicker
+      this.bnfIndex = index
+      this.occupationName = this.bnfPersonInfo[this.bnfIndex]['occupationName'];      
+      this.occupationCode = this.bnfPersonInfo[this.bnfIndex]['occupationCode'];           
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.insure-again {
+  padding-bottom: 45px;
+}
+.input {
+  border: none;
+  text-align: center;
+}
+</style>
diff --git a/src/views/ebiz/insureAgain/payment.vue b/src/views/ebiz/insureAgain/payment.vue
new file mode 100644
index 000000000..995c76221
--- /dev/null
+++ b/src/views/ebiz/insureAgain/payment.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <van-cell-group>
+    <van-cell title="投保人" value="李磊" />
+    <van-cell title="支付金额" value="2,000.00" />
+    <van-cell value="2,000.00">
+      <template #title>
+        <img class="icon mr5" :src="src" />
+        <span class="custom-title">银行卡支付</span>
+      </template>
+      <template #default>
+        <van-radio name="bank" v-model="checked" />
+      </template>
+    </van-cell>
+    <van-cell value="2,000.00">
+      <template #title>
+        <img class="icon mr5" :src="vxSrc" />
+        <span class="custom-title">银行卡支付</span>
+      </template>
+      <template #default>
+        <van-radio disabled name="vx" v-model="checked" />
+      </template>
+    </van-cell>
+    <van-cell title="姓名" value="静静" />
+    <van-cell title="卡号" value="563353455325345345" />
+    <van-cell title="银行" value="交通银行" />
+  </van-cell-group>
+    <div class="action-bar">
+        <div class="btns">
+            <van-button type="danger" v-no-more-click="1000" @click="backToList">返回可重新转保保单列表</van-button>
+            <van-button type="danger" v-no-more-click="1000" @click="nextStep">去支付</van-button>
+        </div>
+    </div> 
+  </div>
+</template>
+
+<script>
+import { Radio } from 'vant'
+
+export default {
+  name: 'InsureAgainPayment',
+  components: {
+    [Radio.name]: Radio
+  },
+  data() {
+    return {
+      checked: 'bank',
+      // 银行卡支付图片地址
+      src: this.$assetsUrl + 'images/cardImg.png',
+      // 微信支付图片地址
+      vxSrc: this.$assetsUrl + 'images/vxImg.png'
+    }
+  },
+  methods: {
+    backToList() {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/insureAgain`,
+          forbidSwipeBack: '1',
+          needRefresh: '1'
+        },
+        routerInfo: { path: `/insureAgain` }
+      })
+    },
+    nextStep(){}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+/deep/ .van-cell__title {
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  width: 20px;
+}
+
+/deep/ .van-radio {
+  justify-content: flex-end;
+}
+
+.action-bar {
+  position: fixed;
+  bottom: 0;
+  background: #fff;
+  width: 100vw;
+}
+
+.btns {
+  display: flex;
+  /deep/ .van-button--danger {
+    flex: 1;
+  }
+}
+</style>
diff --git a/src/views/ebiz/insureAgain/paymentResult.vue b/src/views/ebiz/insureAgain/paymentResult.vue
new file mode 100644
index 000000000..69cc54053
--- /dev/null
+++ b/src/views/ebiz/insureAgain/paymentResult.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="payment-result p10 bg-white">
+    <div class="emoji bg-white p30 van-hairline--surround mb5">
+      <img class="img mb20" :src="emojiSuccess" />
+      <p class="msg">支付成功</p>
+    </div>
+    <div class="bg-white">
+      <van-cell title="付款人" value="李磊" />
+      <van-cell title="投保单号" value="8186270000011900" />
+      <van-cell title="支付金额" value="2000.00" />
+    </div>
+
+    <p class="ps p10">{{ psText }}</p>
+
+    <van-button type="danger" class="bottom-btn" v-no-more-click="1000">返回可重新投保保单列表</van-button>
+  </div>
+</template>
+
+<script>
+import emojiSuccess from '@/assets/images/renewalManage/u51859.png'
+import emojiFailed from '@/assets/images/renewalManage/u51859.png'
+
+export default {
+  computed: {
+    emoji() {
+      if (this.resultState) {
+        return this.emojiSuccess
+      } else {
+        return emojiFailed
+      }
+    },
+    psText() {
+      if (this.resultState) {
+        return '温馨提示： 您的新保单将于2021年2月20日生效，请您前往官微或联 系保单服务人员签收您的保单。'
+      } else {
+        return '温馨提示：亲，您本次提交的重新申请，因XX原因，未提交成功，如需帮助，可联系保单服务专员或拨打公司服务热线：400-694-6688。'
+      }
+    }
+  },
+  data() {
+    return {
+      emojiSuccess,
+      emojiFailed,
+      resultState: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.payment-result {
+  .emoji {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  .img {
+    width: 50px;
+  }
+
+  .ps {
+    color: #ff0000;
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/src/views/ebiz/insureAgain/productInformation.vue b/src/views/ebiz/insureAgain/productInformation.vue
new file mode 100644
index 000000000..cdfa81ec0
--- /dev/null
+++ b/src/views/ebiz/insureAgain/productInformation.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="insure-again">
+    <ProgressBar :active.sync="active" />
+    <!-- 险种信息 -->
+    <p style="font-weight: bold;" class="bg-white p10 van-hairline--bottom">保险计划详情</p>
+    <InfoCell label="保险期间" />
+    <InfoCell label="交费期间" />
+    <InfoCell label="交费频率" />
+    <DropdownBox :gutter="false">
+      <template #boxTitle>
+        <span style="font-weight: bold;">主险</span>
+        <span class="ml30">国富人寿附加住院医疗保险（B款）</span>
+      </template>
+      <InfoCell label="保险责任" />
+      <InfoCell label="保额(万元)" />
+      <InfoCell>
+        <template #cellLabel>
+          <span style="font-weight: bold;">保费(元)</span>
+        </template>
+      </InfoCell>
+    </DropdownBox>
+    <DropdownBox :gutter="false">
+      <template #boxTitle>
+        <van-checkbox v-model="remitRiskA" shape="square" checked-color="#ee0a24">
+          <span style="font-weight: bold;">附加险</span>
+          <span class="ml30">国富人寿附加住院医疗保险（B款）</span>
+        </van-checkbox>
+      </template>
+      <InfoCell label="保险责任" />
+      <InfoCell label="住院医疗保险金" />
+      <InfoCell label="住院津贴保险金" />
+      <InfoCell label="恶性肿瘤住院津贴保险金" />
+      <InfoCell label="免赔额" />
+      <InfoCell label="赔付比例" />
+      <InfoCell>
+        <template #cellLabel>
+          <span style="font-weight: bold;">保费(元)</span>
+        </template>
+      </InfoCell>
+    </DropdownBox>
+    <DropdownBox>
+      <template #boxTitle>
+        <span style="font-weight: bold;">附加险</span>
+        <span class="ml30">国富人寿附加综合意外伤害保险</span>
+      </template>
+      <InfoCell label="保险责任" />
+      <InfoCell label="意外身故/伤残保险金" />
+      <InfoCell label="轨道列车意外身故保险金/轨道列车意外伤残保险金" />
+      <InfoCell label="客运汽车意外身故保险金/客运汽车意外伤残保险金" />
+      <InfoCell label="免赔额" />
+      <InfoCell label="赔付比例" />
+      <InfoCell>
+        <template #cellLabel>
+          <span style="font-weight: bold;">保费(元)</span>
+        </template>
+      </InfoCell>
+      <template #footer>
+        <div style="text-align: center;" class="p10 bg-white">
+          <van-button size="small" round type="danger" @click="readSpecialPromise" :disabled="isRead">
+            {{ isRead ? '已阅读《特别约定》' : '点击这里阅读《特别约定》' }}
+          </van-button>
+        </div>
+      </template>
+    </DropdownBox>
+
+    <van-popup v-model="show" position="right" :style="style">
+      <ReadingAgreement :needTime="false">
+        <h3 class="p10">特别约定提示</h3>
+        <p class="p10">
+          尊敬的xxx先生/女士：
+          “投保《国富人寿国富民惠医疗保险2020》，以有社保身份投保的保单：理赔时，若通过社会基本医疗保险或者公费医疗就诊并结算的，意外伤害医疗保险金的赔付比例为80%，免赔额为0元；理赔时，若未通过社会基本医疗保险或者公费医疗就诊并结算的，意外伤害医疗保险金的赔付比例为60%，免赔额为100元。以无社保身份投保的保单：理赔时，若未通过社会基本医疗保险或者公费医疗就诊并结算的，意外伤害医疗保险金的赔付比例为70%，免赔额为100元；理赔时，若通过社会基本医疗保险或者公费医疗就诊并结算的，意外伤害医疗保险金的赔付比例为90%，免赔额为0元。
+        </p>
+        <template #action>
+          <div class="btns">
+            <van-button type="danger" @click="backToList">不同意</van-button>
+            <van-button type="danger" @click="readAgreement">同意</van-button>
+          </div>
+        </template>
+      </ReadingAgreement>
+    </van-popup>
+
+    <van-button type="danger" class="bottom-btn" v-no-more-click="1000" @click="nextStep">下一步</van-button>
+  </div>
+</template>
+
+<script>
+import ProgressBar from '@/components/ebiz/insureAgain/ProgressBar'
+import DropdownBox from '@/components/ebiz/insureAgain/DropdownBox'
+import InfoCell from '@/components/ebiz/insureAgain/InfoCell'
+import ReadingAgreement from '@/components/ebiz/insureAgain/ReadingAgreement'
+import { Checkbox, RadioGroup, Radio, Dialog } from 'vant'
+export default {
+  name: 'productInformation',
+  components: {
+    ProgressBar,
+    DropdownBox,
+    InfoCell,    
+    ReadingAgreement,
+    [Checkbox.name]: Checkbox,
+    [RadioGroup.name]: RadioGroup,
+    [Radio.name]: Radio
+  },
+  data() {
+    return {
+      radio: 1,
+      show: false,
+      remitRiskA: false,
+      style: { height: '100vh', width: '100vw' },
+      isRead: false,
+      active: 1
+    }
+  },
+  methods: {
+    appCallBack(data) {
+      if (data.trigger == 'left_button_click') {
+        if (this.show) {
+          this.show = false
+          setTimeout(() => {
+            window.EWebBridge.webCallAppInJs('webview_left_button', {
+              intercept: '1'
+            })
+          }, 100)
+        } else {
+          this.backToList()
+        }
+      }
+    },
+    readSpecialPromise() {
+      setTimeout(() => {
+        window.EWebBridge.webCallAppInJs('webview_left_button', {
+          img: this.$assetsUrl + 'images/del-close-btn@3x.png',
+          intercept: '1' //是否拦截原生返回事件 1是 其他否
+        })
+      }, 100)
+      this.show = true
+      window.appCallBack = this.appCallBack
+    },
+    backToList() {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/insureAgain`,
+          forbidSwipeBack: '1',
+          needRefresh: '1'
+        },
+        routerInfo: { path: `/insureAgain` }
+      })
+    },
+    readAgreement() {
+      this.show = false
+      this.isRead = true
+      setTimeout(() => {
+        window.EWebBridge.webCallAppInJs('webview_left_button', {
+          intercept: '1' //是否拦截原生返回事件 1是 其他否
+        })
+      }, 100)
+    },
+    nextStep() {
+      if (!this.isRead) {
+        Dialog.alert({
+          title: '提示',
+          message: '亲，请您阅读和确认特别约定哦~',
+          confirmButtonColor: '#ff0000'
+        })
+      } else {
+        
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.btns {
+  display: flex;
+  /deep/ .van-button--danger {
+    flex: 1;
+  }
+}
+</style>
diff --git a/src/views/ebiz/insureAgain/signConfirmation.vue b/src/views/ebiz/insureAgain/signConfirmation.vue
new file mode 100644
index 000000000..699905074
--- /dev/null
+++ b/src/views/ebiz/insureAgain/signConfirmation.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="insure-again">
+    <ProgressBar :active.sync="active" />
+    <van-cell-group class="mb10">
+      <van-cell title="销售人员工号" value="1450000562" />
+      <van-cell title="销售人员姓名" value="韦辉" />
+      <van-cell title="投保单号" value="823942423492392" />
+      <van-cell title="投保日期" value="2021-03-01" />
+      <van-cell title="保费合计" value="2,000.00" />
+    </van-cell-group>
+    <DropdownBox>
+      <template #boxTitle>
+        <span class="mr10">投保人</span>
+        <span>李磊</span>
+      </template>
+      <p style="font-size: 14px; color: #666666;" class="p15">以下内容需要您按照顺序并阅读确认：</p>
+      <div class="files pl15">
+        <p class="mb5">需阅读</p>
+        <p class="file-name">
+          <span style="color: #0099ff;">《国富人寿投保须知》</span>
+          <StateRadio :result.sync="result" />
+        </p>
+      </div>
+      <div class="files pl15 pt10">
+        <p class="mb5">需阅读</p>
+        <p class="file-name">
+          <span style="color: #0099ff;">《国富人寿投保须知》</span>
+          <StateRadio :result.sync="result" />
+        </p>
+      </div>
+      <div class="files pl15 pt10 pb10">
+        <p class="mb5">需阅读</p>
+        <p class="file-name">
+          <span style="color: #0099ff;">《国富人寿投保须知》</span>
+          <StateRadio :result.sync="result" />
+        </p>
+      </div>
+    </DropdownBox>
+
+    <van-button type="danger" class="bottom-btn" v-no-more-click="1000" @click="nextStep">提交</van-button>
+  </div>
+</template>
+
+<script>
+import ProgressBar from '@/components/ebiz/insureAgain/ProgressBar'
+import DropdownBox from '@/components/ebiz/insureAgain/DropdownBox'
+import InfoCell from '@/components/ebiz/insureAgain/InfoCell'
+import StateRadio from '@/components/ebiz/insureAgain/StateRadio'
+export default {
+  name: 'signConfirmation',
+  components: {
+    ProgressBar,
+    DropdownBox,
+    InfoCell,
+    StateRadio
+  },
+  data() {
+    return {
+      result: 2,
+      active: 3
+    }
+  },
+  methods: {
+    nextStep() {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/insureAgain/payment`,
+          forbidSwipeBack: '1',
+          needRefresh: '1'
+        },
+        routerInfo: { path: `/insureAgain/payment` }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.file-name {
+  display: flex;
+  align-items: center;
+}
+
+.files {
+  p {
+    font-size: 14px;
+  }
+}
+</style>