diff --git a/src/api/ebiz/preserve/preserve.js b/src/api/ebiz/preserve/preserve.js
index 966ee6cd6..148a5999c 100644
--- a/src/api/ebiz/preserve/preserve.js
+++ b/src/api/ebiz/preserve/preserve.js
@@ -60,3 +60,11 @@ export function renewalChange(data) {
     data
   })
 }
+//客户详情
+// export function customerInfo(data) {
+//   return request({
+//     url: getUrl('/edor/customer/customerInfo', 0),
+//     method: 'post',
+//     data
+//   })
+// }
diff --git a/src/config/preserve.js b/src/config/preserve.js
index 841a9987a..5a2a9cb59 100644
--- a/src/config/preserve.js
+++ b/src/config/preserve.js
@@ -3,6 +3,7 @@ let mockBaseUrl = 'http://rap2.taobao.org:38080/app/mock/250585/'
 export default {
   '/edor/customer/customerInfo': mockBaseUrl + '/edor/customer/customerInfo', //客户详情
   '/edor/customer/customerList': mockBaseUrl + '/edor/customer/customerList', //客户搜索
+  '/edor/customer/policyList': mockBaseUrl + '/edor/customer/policyList',
   '/edor/item/change': mockBaseUrl + '/edor/item/change',
   '/edor/sign/save': mockBaseUrl + '/edor/sign/save',
   '/edor/query/queryDetails': mockBaseUrl + '/edor/query/queryDetails'
diff --git a/src/router/ebiz/preserve.js b/src/router/ebiz/preserve.js
index 2a5a9b295..d57f16cb4 100644
--- a/src/router/ebiz/preserve.js
+++ b/src/router/ebiz/preserve.js
@@ -10,6 +10,8 @@ const contactInfo = () => import('@/views/ebiz/preserve/ContactInfo')
 const contacAgreement = () => import('@/views/ebiz/preserve/ContacAgreement')
 const contactConfirmation = () => import('@/views/ebiz/preserve/ContactConfirmation')
 const beneficiaryInfo = () => import('@/views/ebiz/preserve/BeneficiaryInfo')
+const beneficiaryInfoAdd = () => import('@/views/ebiz/preserve/BeneficiaryInfoAdd')
+const beneficiaryInfoDetail = () => import('@/views/ebiz/preserve/BeneficiaryInfoDetail')
 const beneficiaryConfirmation = () => import('@/views/ebiz/preserve/BeneficiaryConfirmation')
 const surrenderInfo = () => import('@/views/ebiz/preserve/SurrenderInfo')
 const surrenderConfirmation = () => import('@/views/ebiz/preserve/SurrenderConfirmation')
@@ -70,6 +72,24 @@ export default [
       index: 5
     }
   },
+  {
+    path: '/preserve/beneficiaryInfoAdd',
+    name: 'beneficiaryInfoAdd',
+    component: beneficiaryInfoAdd,
+    meta: {
+      title: '指定受益人信息',
+      index: 105
+    }
+  },
+  {
+    path: '/preserve/beneficiaryInfoDetail',
+    name: 'beneficiaryInfoDetail',
+    component: beneficiaryInfoDetail,
+    meta: {
+      title: '指定受益人信息',
+      index: 105
+    }
+  },
   {
     path: '/preserve/surrenderInfo',
     name: 'surrenderInfo',
diff --git a/src/views/ebiz/preserve/AutopayAuthorization.vue b/src/views/ebiz/preserve/AutopayAuthorization.vue
index 2a872362f..ddc951ba2 100644
--- a/src/views/ebiz/preserve/AutopayAuthorization.vue
+++ b/src/views/ebiz/preserve/AutopayAuthorization.vue
@@ -111,4 +111,4 @@ export default {
   line-height: 30px;
   border-bottom: 1px solid #dadada;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/ebiz/preserve/BeneficiaryConfirmation.vue b/src/views/ebiz/preserve/BeneficiaryConfirmation.vue
index b09433e35..35a7b8d07 100644
--- a/src/views/ebiz/preserve/BeneficiaryConfirmation.vue
+++ b/src/views/ebiz/preserve/BeneficiaryConfirmation.vue
@@ -1 +1,240 @@
-<!--受益人变更-保全代办确认页-->
\ No newline at end of file
+<!--受益人变更页面-->
+<template>
+  <div class="beneficiary-container">
+    <div h10></div>
+    <div class="fs14 flex justify-content-s pv12 ph15 van-hairline--bottom">
+      <label class="c-gray-dark">被保险人</label>
+      <span class="c-gray-darker">{{ insuredName }}</span>
+    </div>
+    <div class="fs14 pv12 ph15 van-hairline--bottom flex">
+      <label class="c-gray-dark">身故受益人</label>
+      <div class="ml20 c-gray-darker">
+        <van-radio-group :disabled="isDisType" v-model="type" class="flex">
+          <van-radio name="1">法定受益人</van-radio>
+          <van-radio name="2" class="ml10">指定受益人</van-radio>
+        </van-radio-group>
+      </div>
+    </div>
+    <!-- 受益人列表 -->
+    <div class="fs14 beneficiary-list" v-if="type == 2">
+      <ul>
+        <li class="pv20 ph15 item" v-for="(item, index) in beneficiaries" :key="index">
+          <div class="bg-white p15" @click="detail(index)">
+            <div class="flex justify-content-s c-gray-darker">
+              <div>
+                <img src="@/assets/images/bnf_avatar.png" width="40" height="40" class="radius50 v-middle" />
+                <span class="ml10 c-gray-base">{{ item.name }}</span>
+              </div>
+            </div>
+            <p class="mt20">
+              <span class="c-gray-dark">是被保险人的</span>
+              <span class="ml20">{{ item.relationToInsured | idToText('relationToAppnt') }}</span>
+            </p>
+            <p class="mt10">
+              <span class="c-gray-dark">受益份额</span>
+              <span class="ml35">{{ item.bnfLot }}%</span>
+            </p>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <van-dialog
+      v-model="show"
+      title="短信确认"
+      show-cancel-button
+      class="dialog-delete"
+      cancelButtonColor="#4FC6B3"
+      confirmButtonColor="#FFFFFF"
+      @confirm="authConfirm(authCode)"
+      @cancel="clearTimer"
+    >
+      <p class="p10 fs14">向此手机发送验证码确认用户身份</p>
+      <p class="p10 fs14" style="border-bottom: 1px solid #ebedf0;">{{ '15512341234' | Mask }}</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>
+
+    <van-button type="danger" class="bottom-btn" @click="nextStep">提交申请</van-button>
+  </div>
+</template>
+
+<script>
+import { Field, CellGroup, RadioGroup, Radio, Icon, Dialog } from 'vant'
+import { getAuthCode, autchCodeCheck } from '@/api/ebiz/sale/sale'
+export default {
+  name: 'BeneficiaryConfirmation',
+  components: {
+    [Field.name]: Field,
+    [CellGroup.name]: CellGroup,
+    [RadioGroup.name]: RadioGroup,
+    [Radio.name]: Radio,
+    [Icon.name]: Icon,
+    [Dialog.name]: Dialog
+  },
+  filters: {
+    Mask: function(value) {
+      if (value) {
+        return value.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
+      } else {
+        return ''
+      }
+    }
+  },
+  data() {
+    let feachData = {
+      surrenderDTOList: [
+        {
+          surrenderId: '',
+          edorapplyNo: '',
+          surrenderType: '2',
+          bnfDTOs: []
+        }
+      ]
+    }
+    return {
+      show: false, // 获取短信验证码
+      codeDisabled: false, // 获取验证码按钮是否禁用
+      timeId: null, // 计时器ID
+      countDown: 60, // 倒计时
+      authCode: '', // 验证码
+      feachData: feachData,
+      type: '',
+      isDisType: false,
+      policy: null,
+      insuredName: '', //被保险人
+      beneficiaries: [] // 指定受益人列表
+    }
+  },
+  created() {
+    // 获取保单列表存储的数据
+    this.policy = JSON.parse(localStorage['preserve-policy'])
+    this.insuredName = this.policy.insuredName
+    this.type = this.policy.bnfDTOs[0].bnfType
+    this.isDisType = true
+    this.beneficiaries = this.policy.bnfDTOs
+  },
+  mounted() {},
+  methods: {
+    //告知信息
+    nextStep() {
+      this.showAuth()
+    },
+    detail(index) {
+      // edit=0
+      let path = '/preserve/BeneficiaryInfoDetail?edit=' + index
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#' + path
+        },
+        routerInfo: {
+          path: path
+        }
+      })
+    },
+    // 显示验证码  van-dialog
+    showAuth() {
+      this.show = true
+    },
+    // 获取短信验证码
+    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',
+        sessionId: '',
+        validateCode: '',
+        operateCode: this.customerMobile,
+        system: '',
+        operateCodeType: '0'
+      }).then(res => {
+        if (res.result == 0) {
+          this.sessionId = res.sessionId
+        } else {
+          this.$toast({
+            message: res.resultMessage,
+            onClose: this.showAuth
+          })
+        }
+      })
+    },
+    // 验证码确认事件
+    async authConfirm() {
+      //清理计时器
+      this.clearTimer()
+      this.changeSubmit()
+    },
+    // 清理计时器
+    clearTimer() {
+      window.clearInterval(this.timeId)
+      this.timeId = null
+      this.countDown = 60
+      this.codeDisabled = false
+    },
+    //提交变更申请
+    async changeSubmit() {
+      if (!this.sessionId) {
+        this.$toast({
+          message: '请先获取验证码',
+          onClose: this.showAuth
+        })
+        return
+      }
+      let res = await autchCodeCheck({
+        smsId: this.sessionId,
+        code: this.authCode
+      })
+      if (res.result == 0) {
+        this.$jump({
+          flag: 'h5',
+          extra: {
+            url: location.origin + `/#/preserve/submitResult`,
+            backToFirst: '1'
+          },
+          routerInfo: {
+            path: `/preserve/submitResult`
+          }
+        })
+      } else {
+        this.show = false
+        this.$toast({
+          message: res.resultMessage,
+          onClose: this.showAuth
+        })
+      }
+    }
+  },
+  beforeDestroy() {
+    //清理计时器
+    this.clearTimer()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.beneficiary-container {
+  .add-btn {
+    width: 80%;
+    margin: 20px auto;
+    border: 1px dashed #999;
+  }
+  .beneficiary-list {
+    margin-bottom: 65px;
+  }
+  .item {
+    background-color: #f5f5f5;
+  }
+}
+</style>
diff --git a/src/views/ebiz/preserve/BeneficiaryInfo.vue b/src/views/ebiz/preserve/BeneficiaryInfo.vue
index 048b818fd..df097ccbd 100644
--- a/src/views/ebiz/preserve/BeneficiaryInfo.vue
+++ b/src/views/ebiz/preserve/BeneficiaryInfo.vue
@@ -1 +1,196 @@
-<!--受益人变更页面-->
\ No newline at end of file
+<!--受益人变更页面-->
+<template>
+  <div class="beneficiary-container">
+    <div h10></div>
+    <div class="fs14 flex justify-content-s pv12 ph15 van-hairline--bottom">
+      <label class="c-gray-dark">被保险人</label>
+      <span class="c-gray-darker">{{ insuredName }}</span>
+    </div>
+    <div class="fs14 pv12 ph15 van-hairline--bottom flex">
+      <label class="c-gray-dark">身故受益人</label>
+      <div class="ml20 c-gray-darker">
+        <van-radio-group :disabled="isDisType" v-model="type" class="flex">
+          <van-radio name="1">法定受益人</van-radio>
+          <van-radio name="2" class="ml10">指定受益人</van-radio>
+        </van-radio-group>
+      </div>
+    </div>
+    <!-- 受益人列表 -->
+    <div class="fs14 beneficiary-list" v-if="type == 2">
+      <ul>
+        <li class="pv20 ph15 item" v-for="(item, index) in beneficiaries" :key="index">
+          <div class="bg-white p15">
+            <div class="flex justify-content-s c-gray-darker">
+              <div>
+                <img src="@/assets/images/bnf_avatar.png" width="40" height="40" class="radius50 v-middle" />
+                <span class="ml10 c-gray-base">{{ item.name }}</span>
+              </div>
+              <div>
+                <van-icon name="delete" class="mr20" size="20" @click="deleteBeneficiary(index)" />
+                <van-icon name="edit" size="20" @click="editBeneficiary(index)" />
+              </div>
+            </div>
+            <p class="mt20">
+              <span class="c-gray-dark">是被保险人的</span>
+              <span class="ml20">{{ item.relationToInsured | idToText('relationToAppnt') }}</span>
+            </p>
+            <p class="mt10">
+              <span class="c-gray-dark">受益份额</span>
+              <span class="ml35">{{ item.bnfLot }}%</span>
+            </p>
+          </div>
+        </li>
+      </ul>
+      <div class="add-btn mt20 text-center p15 c-gray-base" @click="add">+ 添加指定受益人</div>
+    </div>
+    <van-button type="danger" class="bottom-btn" @click="nextStep">下一步</van-button>
+  </div>
+</template>
+
+<script>
+import { RadioGroup, Radio, Icon, Dialog } from 'vant'
+import { edorChange } from '@/api/ebiz/preserve/preserve'
+
+export default {
+  name: 'BeneficiaryInfo',
+  components: {
+    [RadioGroup.name]: RadioGroup,
+    [Radio.name]: Radio,
+    [Icon.name]: Icon,
+    [Dialog.name]: Dialog
+  },
+  data() {
+    let feachData = {
+      surrenderDTOList: [
+        {
+          surrenderId: '',
+          edorapplyNo: '',
+          surrenderType: '2',
+          bnfDTOs: []
+        }
+      ]
+    }
+    return {
+      feachData: feachData,
+      type: '',
+      isDisType: false,
+      policy: null,
+      insuredName: '', //被保险人
+      beneficiaries: [] // 指定受益人列表
+    }
+  },
+  created() {
+    // 获取保单列表存储的数据
+    this.policy = JSON.parse(localStorage['preserve-policy'])
+    console.log(this.policy)
+    this.insuredName = this.policy.insuredName
+
+    this.type = this.policy.bnfDTOs[0].bnfType
+    if (this.type == 2) {
+      this.isDisType = true
+    }
+
+    this.beneficiaries = this.policy.bnfDTOs
+  },
+  mounted() {},
+  methods: {
+    //告知信息
+    nextStep() {
+      if (this.type == 2 && this.beneficiaries.length == 0) {
+        this.$toast('受益人列表不能为空')
+        return
+      }
+      this.feachData.surrenderDTOList[0].bnfDTOs = this.beneficiaries
+      edorChange(this.feachData)
+        .then(res => {
+          if (res.result == 0) {
+            this.policy.bnfDTOs = this.beneficiaries
+            localStorage['preserve-policy'] = JSON.stringify(this.policy)
+            this.$jump({
+              flag: 'h5',
+              extra: {
+                url: location.origin + '/#/preserve/HandleResult?entry=beneficiary'
+              },
+              routerInfo: '/preserve/HandleResult?entry=beneficiary'
+            })
+          } else {
+            this.$toast(res.resultMessage)
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    //添加受益人
+    add() {
+      let beneRatio = 0
+      this.beneficiaries.forEach(item => {
+        beneRatio += parseFloat(item.bnfLot)
+      })
+      console.log(beneRatio)
+      if (beneRatio >= 100) {
+        return this.$toast('受益份额已满~')
+      }
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#/preserve/BeneficiaryInfoAdd'
+        },
+        routerInfo: {
+          path: '/preserve/BeneficiaryInfoAdd'
+        }
+      })
+    },
+    // 删除受益人
+    deleteBeneficiary(index) {
+      Dialog.confirm({
+        className: 'dialog-delete',
+        title: '提示',
+        message: '您确认要删除该受益人吗?',
+        cancelButtonColor: '#E9332E',
+        confirmButtonColor: '#FFFFFF'
+      })
+        .then(() => {
+          // 删除页面中的对应数据
+          this.beneficiaries.splice(index, 1)
+          this.policy.bnfDTOs = this.beneficiaries
+          localStorage['preserve-policy'] = JSON.stringify(this.policy)
+        })
+        .catch(() => {
+          return
+        })
+    },
+    // 编辑受益人
+    editBeneficiary(index) {
+      this.policy.bnfDTOs = this.beneficiaries
+      localStorage['preserve-policy'] = JSON.stringify(this.policy)
+      let path = '/preserve/BeneficiaryInfoAdd?edit=' + index
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#' + path
+        },
+        routerInfo: {
+          path: path
+        }
+      })
+    }
+  },
+  filters: {}
+}
+</script>
+<style lang="scss" scoped>
+.beneficiary-container {
+  .add-btn {
+    width: 80%;
+    margin: 20px auto;
+    border: 1px dashed #999;
+  }
+  .beneficiary-list {
+    margin-bottom: 65px;
+  }
+  .item {
+    background-color: #f5f5f5;
+  }
+}
+</style>
diff --git a/src/views/ebiz/preserve/BeneficiaryInfoAdd.vue b/src/views/ebiz/preserve/BeneficiaryInfoAdd.vue
new file mode 100644
index 000000000..011265e1e
--- /dev/null
+++ b/src/views/ebiz/preserve/BeneficiaryInfoAdd.vue
@@ -0,0 +1,616 @@
+<template>
+  <div class="add-beneficiary-container pb50">
+    <!-- 基本信息 -->
+    <van-cell-group>
+      <van-field
+        :value="userInfo.relationToInsured | idToText('relationToAppnt')"
+        required
+        readonly
+        label="是被保险人的"
+        name="是被保险人的"
+        right-icon="arrow"
+        placeholder="请选择"
+        v-validate="'required'"
+        @click="toSelect('7')"
+      />
+      <customer-picker
+        @on-choose="chooseCustomer"
+        v-validate="'required|name'"
+        name="姓名"
+        label="姓名"
+        required
+        :value.sync="userInfo.name"
+        :parentShowPicker.sync="customerShowPicker"
+        @nameChange="nameChange"
+        @on-click="selectClick('1')"
+        :readonly="!!$route.query.edit"
+      ></customer-picker>
+      <van-field
+        :value="userInfo.idType | idToText('idType')"
+        v-validate="'required'"
+        readonly
+        required
+        label="证件类型"
+        name="证件类型"
+        right-icon="arrow"
+        placeholder="请选择"
+        @click="toSelect('2')"
+      />
+      <van-field
+        v-model="userInfo.idNo"
+        label="证件号码"
+        name="证件号码"
+        required
+        placeholder="请输入"
+        maxlength="18"
+        clearable
+        v-validate="'required'"
+        @blur="getRelatedData(userInfo.idNo)"
+      ></van-field>
+      <!-- <FieldDatePicter
+        :v-validate="{ required: effectiveDateRequired }"
+        label="证件起始日期"
+        name="证件起始日期"
+        :required="isRequired"
+        :defaultDate="new Date()"
+        :value.sync="userInfo.certificateValidate"
+        type="date"
+        @confirm="onDateConfirm($event, '1')"
+        ref="certificateValidate"
+        :flag="certificateValidateShow"
+        :readonly="idLimit"
+      ></FieldDatePicter> -->
+      <FieldDatePicter
+        :v-validate="{ required: effectiveDateRequired }"
+        label="证件截止日期"
+        name="证件截止日期"
+        :required="isRequired"
+        :defaultDate="new Date()"
+        :value.sync="userInfo.effectiveDate"
+        type="date"
+        @confirm="onDateConfirm($event, '1')"
+        ref="effectiveDate"
+        :flag="effectiveDateShow"
+        :readonly="idLimit"
+      ></FieldDatePicter>
+      <div class="border-bt relative fs14 p10 flex align-center">
+        <van-checkbox v-model="userInfo.effectiveDateType" class="fr" :disabled="effectiveDateTypeAble" @change="effectiveDataTypeChange">长期</van-checkbox>
+      </div>
+      <select-radio :radios="sexRadio" required label="性别" :value.sync="userInfo.sex"></select-radio>
+      <van-field
+        :value="userInfo.nationality | idToText('nativeplace')"
+        readonly
+        label="国家/地区"
+        name="国家/地区"
+        required
+        v-validate="'required'"
+        right-icon="arrow"
+        placeholder="请选择"
+        @click="toSelect('1')"
+      />
+      <van-field
+        v-model="userInfo.bnfOrder"
+        required
+        readonly
+        label="受益顺序"
+        name="受益顺序"
+        placeholder="请输入"
+        v-validate="'required|onlyNumber'"
+        maxlength="1"
+      />
+      <van-field
+        v-model="userInfo.bnfLot"
+        label="受益比例(%)"
+        name="受益比例"
+        placeholder="请输入"
+        required
+        v-validate="'required|onlyNumber'"
+        maxlength="3"
+        clearable
+      />
+
+      <template v-if="false">
+        <van-field
+          v-model="userInfo.mobile"
+          clearable
+          label="联系电话"
+          name="联系电话"
+          required
+          placeholder="请输入"
+          v-validate="'required|mobile'"
+          maxlength="11"
+        />
+        <van-field
+          v-model="areaName"
+          readonly
+          label="联系地址"
+          name="联系地址"
+          required
+          right-icon="arrow"
+          placeholder="请选择"
+          v-validate="'required'"
+          @click="chooseArea"
+        />
+        <van-field v-model="userInfo.village" label="" name="详细地址" placeholder="请输入详细地址" v-validate="'required'" clearable maxlength="30" />
+        <van-field v-model="userInfo.email" required label="电子邮箱" name="电子邮箱" placeholder="请输入" v-validate="'required|email'" clearable />
+        <occupation-picker
+          :value.sync="userInfo.occupationCode"
+          :chooseName.sync="userInfo.occupationName"
+          :lifeGrade.sync="userInfo.lifeGrade"
+          :healthGrade.sync="userInfo.healthGrade"
+          clearable
+          label="职业类别"
+          name="职业类别"
+          required
+          v-validate="'required'"
+          placeholder="请选择"
+          :parentShowPicker.sync="occupationShowPicker"
+          @on-click="selectClick('2')"
+          @on-choose="chooseOccupation"
+        />
+      </template>
+    </van-cell-group>
+    <van-button type="danger" class="bottom-btn" @click="nextStep" v-no-more-click="1000">添加</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="areaShow" position="bottom">
+      <van-area :area-list="areaList" :value="areaValue" @confirm="sureArea($event, '1')" @cancel="areaShow = false" />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { Field, CellGroup, Checkbox, Popup, Picker, Area } from 'vant'
+import SelectRadio from '@/components/ebiz/SelectRadio'
+import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
+import OccupationPicker from '@/components/ebiz/occipation/OccupationPicker'
+import DataDictionary from '@/assets/js/utils/data-dictionary'
+import areaList from '@/assets/js/utils/area'
+import getAreaName from '@/assets/js/utils/get-area-name'
+import utilsAge from '@/assets/js/utils/age'
+import IdentityCardScan from '@/components/ebiz/sale/IdentityCardScan'
+import CustomerPicker from '@/components/ebiz/customer/CustomerPicker'
+import idNoCheck from '@/assets/js/utils/idNoCheck'
+import { idToData } from './js/verification'
+import { selectComp } from './js/methods'
+let relationToInsured = DataDictionary.relationToAppnt
+
+export default {
+  name: 'beneficiaryInfoAdd',
+  components: {
+    [SelectRadio.name]: SelectRadio,
+    [FieldDatePicter.name]: FieldDatePicter,
+    [OccupationPicker.name]: OccupationPicker,
+    [Field.name]: Field,
+    [CellGroup.name]: CellGroup,
+    [Checkbox.name]: Checkbox,
+    [Popup.name]: Popup,
+    [Picker.name]: Picker,
+    [Area.name]: Area,
+    [IdentityCardScan.name]: IdentityCardScan,
+    [CustomerPicker.name]: CustomerPicker
+  },
+  data() {
+    return {
+      effectiveDateTypeAble: true, //长期按钮是否禁用
+      isScan: false, //是否显示证件扫描组件
+      sexRadio: [
+        {
+          label: '男',
+          value: '0'
+        },
+        {
+          label: '女',
+          value: '1'
+        }
+      ],
+      currentPopupIndex: '',
+      relationToAppnt: '',
+      popupShow: false,
+      areaShow: false,
+      pickerType: undefined,
+      columns: [],
+      valueKey: 'text',
+      nationality: '',
+      idType: '居民身份证',
+      degree: '',
+      socialSecurity: '',
+      taxIdentity: '',
+      areaName: '',
+      areaValue: '110101',
+      effectiveDateRequired: true, //证件截止日期是否需要校验
+      effectiveDateShow: true, //证件截止日期是否可以选择
+      marriage: '',
+      isRequired: '', //长期前是否有*
+      userInfo: {
+        bnfId: '',
+        bnfType: '2',
+        bnfGrade: '',
+        name: '',
+        sex: '0',
+        nationality: '1',
+        birthday: '',
+        idType: '1',
+        idNo: '',
+        certificateValidate: '',
+        effectiveDate: '',
+        effectiveDateType: false, //是否长期
+        bnfNo: '1',
+        bnfOrder: 1,
+        bnfLot: '',
+        phone: '',
+        province: '',
+        city: '',
+        area: '',
+        postalAddress: '',
+        email: '',
+        occupationCode: '',
+        occupationName: '' // 职业中文
+      },
+      areaList: areaList,
+      occupationShowPicker: false,
+      customerShowPicker: false, //客户列表展示
+      idLimit: false, //证件起止日期是否只读
+      policy: null,
+      bnfDTOs: []
+    }
+  },
+  created() {
+    this.policy = JSON.parse(localStorage['preserve-policy'])
+    this.bnfDTOs = this.policy.bnfDTOs
+    if (this.$route.query.edit) {
+      this.editIndex = this.$route.query.edit
+      this.userInfo = this.bnfDTOs[this.$route.query.edit]
+    }
+  },
+  mounted() {},
+  methods: {
+    //监听名字变化
+    nameChange(name) {
+      this.userInfo.name = name
+    },
+    selectClick(index) {
+      selectComp(this, index, '3')
+    },
+    chooseOccupation() {
+      this.$jump({
+        flag: 'navigation',
+        extra: {
+          title: '指定受益人信息',
+          hiddenRight: '1'
+        }
+      })
+      this.occupationShowPicker = false
+    },
+    //弹框选择
+    toSelect(pickerType, valueKey) {
+      //pickerType 1、国家地区 2、证件类型 3、文化程度 4、有无社保 5、税收居民身份 6、婚姻状况
+      ;[this.popupShow, this.pickerType] = [true, pickerType]
+      if (valueKey) this.valueKey = valueKey
+      if (pickerType == '1') {
+        this.columns = DataDictionary.nativeplace
+      } else if (pickerType == '2') {
+        this.columns = DataDictionary.idType
+      } else if (pickerType == '7') {
+        this.columns = relationToInsured
+      }
+    },
+    //确认选择字段
+    onConfirm(value) {
+      // console.log(value,this.pickerType)
+      this.popupShow = false
+      if (this.pickerType == '1') {
+        ;[this.userInfo.nationality, this.nationality] = [value.id, value.text]
+      } else if (this.pickerType == '2') {
+        this.idLimit = false
+        this.userInfo.idNo = this.userInfo.effectiveDate = this.userInfo.birthday = ''
+        // this.userInfo.sex = '0'
+        this.effectiveDateTypeAble = false
+        //身份证以外的证件类型可以使用长期
+        if (value.id == '1') {
+          let age = utilsAge.getAge(this.userInfo.birthday, new Date())
+          this.effectiveDateTypeAble = age <= 45
+        } else {
+          this.effectiveDateTypeAble = false
+        }
+        ;[this.userInfo.idType, this.idType] = [value.id, value.text]
+      } else if (this.pickerType == '3') {
+        ;[this.userInfo.degree, this.degree] = [value.id, value.text]
+      } else if (this.pickerType == '4') {
+        ;[this.userInfo.socialSecurity, this.socialSecurity] = [value.id, value.text]
+      } else if (this.pickerType == '5') {
+        ;[this.userInfo.taxIdentity, this.taxIdentity] = [value.id, value.text]
+      } else if (this.pickerType == '6') {
+        ;[this.userInfo.marriage, this.marriage] = [value.id, value.text]
+      } else if (this.pickerType == '7') {
+        ;[this.userInfo.relationToInsured, this.relationToAppnt] = [value.id, value.text]
+      }
+    },
+    //证件起始截止日期
+    onDateConfirm(val, type) {
+      switch (type) {
+        case '1':
+          {
+            this.userInfo.effectiveDateType = false
+            //如果录入日期早于当前日期
+            if (Date.parse(val) < Date.parse(new Date())) {
+              this.userInfo.effectiveDate = ''
+              this.$refs.effectiveDate.date = ''
+              return this.$toast('您的证件已过期')
+            }
+          }
+          break
+        case '2':
+          {
+            //出生日期
+            //如果录入日期晚于当前日期
+            if (Date.parse(val) > Date.parse(new Date())) {
+              this.userInfo.birthday = ''
+              this.$refs.birthday.date = ''
+              return this.$toast('出生日期不晚于当日')
+            }
+            //长期判断
+            if (this.userInfo.idType == '1') {
+              let age = utilsAge.getAge(this.userInfo.birthday, new Date())
+              this.effectiveDateTypeAble = age <= 45
+            }
+            //出生证有效期
+            if (this.userInfo.idType == '3') {
+              if (Date.parse(this.userInfo.effectiveDate) - Date.parse(val) > Date.parse('1973-01-01')) {
+                this.userInfo.birthday = ''
+                this.$refs.birthday.date = ''
+                return this.$toast('出生证有效期或出生日期有误')
+              }
+            }
+          }
+          break
+      }
+    },
+    //选择客户
+    chooseCustomer(data) {
+      console.log(data)
+      this.customerShowPicker = false
+      this.$jump({
+        flag: 'navigation',
+        extra: {
+          title: '指定受益人信息',
+          hiddenRight: '1'
+        }
+      })
+      this.userInfo.name = data.customerName //用户名
+      this.userInfo.sex = data.customerSex.toString() //性别
+      this.userInfo.nationality = data.country //国家地区
+      this.userInfo.birthday = data.birthday //出生日期
+      this.userInfo.idType = data.customerIdType //证件类型
+      this.userInfo.idNo = data.customerIdNumber //证件号码
+      if (data.idEffectEndDate == '9999-01-01') {
+        this.userInfo.effectiveDateType = true //是否长期
+      } else {
+        this.userInfo.effectiveDate = data.idEffectEndDate //证件截止日期
+      }
+      this.userInfo.occupationCode = data.occupationCode //职业类别编码
+      this.userInfo.occupationName = data.occupationName //职业类别名称
+      this.userInfo.lifeGrade = data.lifeGrade //寿险等级
+      this.userInfo.healthGrade = data.healthGrade //健康等级
+      // //计算年龄
+      let age = utilsAge.getAge(this.userInfo.birthday, new Date())
+      // // 长期按钮是否禁用
+      this.effectiveDateTypeAble = age <= 45
+      // //数据是否从客户列表拉取
+      this.fromCustomer = true
+      this.getRelatedData(this.userInfo.idNo, '1')
+    },
+    nextStep() {
+      // 计算年龄
+      let age = utilsAge.getAge(this.userInfo.birthday, new Date())
+      // 页面跳转
+      this.$validator.validate().then(valid => {
+        if (true === valid) {
+          // 受益人是被保险人的配偶
+          if (this.userInfo.relationToInsured == '2') {
+            //如果性别男小于22岁 或者 性别女小于20岁
+            if ((this.userInfo.sex == '0' && age < 22) || (this.userInfo.sex == '1' && age < 20)) {
+              return this.$toast('年龄与婚姻状况不符')
+            }
+          }
+          //如果证件类型是身份证
+          if (this.userInfo.idType == '1') {
+            //校验性别是否与身份证号码位相符
+            if (this.userInfo.idNo.length == '18') {
+              //18位身份证第17位是性别位, 奇男偶女
+              let sexSign = this.userInfo.idNo.substr(16, 1)
+              if ((parseInt(sexSign) % 2 == 0 && this.userInfo.sex != 1) || (parseInt(sexSign) % 2 != 0 && this.userInfo.sex != 0)) {
+                return this.$toast('性别录入与身份证不符')
+              }
+
+              //18位身份证第7-14位是生日位, 年月日
+              let birthSign = this.userInfo.idNo.substr(6, 8)
+              if (
+                this.userInfo.birthday.substr(0, 4) != birthSign.substr(0, 4) ||
+                this.userInfo.birthday.substr(5, 2) != birthSign.substr(4, 2) ||
+                this.userInfo.birthday.substr(8, 2) != birthSign.substr(6, 2)
+              ) {
+                return this.$toast('生日录入与身份证不符')
+              }
+            }
+
+            // 证件号码规则校验
+            if (!idNoCheck.isIdno(this.userInfo.idNo)) {
+              console.log('证件号码校验有误')
+              return this.$toast('您填写的证件号码有误')
+            }
+
+            //年龄在0-15周岁之间
+            if (age <= 15) {
+              if (Date.parse(this.userInfo.effectiveDate) - Date.parse(new Date()) > Date.parse('1975-01-01')) {
+                this.userInfo.effectiveDate = ''
+                this.$refs.effectiveDate.date = ''
+                return this.$toast('证件有效期不正常，未满16周岁的公民身份证有效期应小于等于5年')
+              }
+              //年龄在 16-25 周岁之间
+            } else if (age >= 16 && age <= 25) {
+              if (Date.parse(this.userInfo.effectiveDate) - Date.parse(new Date()) > Date.parse('1980-01-01')) {
+                this.userInfo.effectiveDate = ''
+                this.$refs.effectiveDate.date = ''
+                return this.$toast('证件有效期不正常，16周岁至25周岁公民身份证有效期应小于等于10年')
+              }
+              //年龄在 26-45 周岁之间
+            } else if (age >= 26 && age <= 45) {
+              if (Date.parse(this.userInfo.effectiveDate) - Date.parse(new Date()) > Date.parse('1990-01-01')) {
+                this.userInfo.effectiveDate = ''
+                this.$refs.effectiveDate.date = ''
+                return this.$toast('证件有效期不正常，26周岁至45周岁公民身份证有效期应小于等于20年')
+              }
+            }
+            //证件类型是户口本
+          } else if (this.userInfo.idType == '2') {
+            if (age > 16) {
+              return this.$toast('客户年龄在16周岁以上，不能使用户口本作为有效证件')
+            }
+            //证件类型是出生证明
+          } else if (this.userInfo.idType == '3') {
+            if (age >= 2) {
+              return this.$toast('客户年龄在2周岁及以上，不能使用出生证作为有效证件')
+            }
+          }
+
+          if (this.userInfo.bnfLot > 100) {
+            return this.$toast('受益份额不能超过100~')
+          }
+
+          // 收益份额不超过 100%
+          let ratio = 0
+          this.bnfDTOs.forEach(item => {
+            ratio += parseFloat(item.bnfLot)
+          })
+          if (!this.$route.query.edit) {
+            ratio += parseFloat(this.userInfo.bnfLot)
+
+            if (this.userInfo.idNo != '') {
+              // 受益人不能重复添加 (证件号码为基准)
+              let isDbAdd = this.bnfDTOs.some(item => {
+                return item.idNo == this.userInfo.idNo
+              })
+              if (isDbAdd) {
+                return this.$toast('受益人不支持重复添加')
+              }
+            }
+          } else {
+            ratio = ratio - this.bnfDTOs[this.editIndex].bnfLot + parseFloat(this.userInfo.bnfLot)
+
+            let isDbAdd = this.bnfDTOs.some((item, index) => {
+              return index != this.editIndex && item.idNo == this.userInfo.idNo
+            })
+            if (isDbAdd) {
+              return this.$toast('受益人不支持重复添加')
+            }
+          }
+          if (ratio > 100) {
+            return this.$toast('受益份额有误,请重新输入~')
+          }
+
+          if (!this.$route.query.edit) {
+            this.bnfDTOs.push(this.userInfo)
+          } else {
+            this.bnfDTOs[this.editIndex] = this.userInfo
+          }
+          this.policy.bnfDTOs = this.bnfDTOs
+          localStorage['preserve-policy'] = JSON.stringify(this.policy)
+          this.$jump({
+            flag: 'h5',
+            extra: {
+              url: location.origin + '/#/preserve/BeneficiaryInfo',
+              needRefresh: '1'
+            },
+            routerInfo: {
+              path: '/preserve/BeneficiaryInfo'
+            }
+          })
+        } else {
+          this.$toast(this.$validator.errors.all()[0])
+        }
+      })
+    },
+    // 证件扫描
+    goScan() {
+      this.isScan = true
+    },
+    //区域选择
+    sureArea(area, type) {
+      switch (type) {
+        case '1': //单位地址
+          this.areaName = getAreaName(area)
+          ;[this.userInfo.province, this.userInfo.city, this.userInfo.area] = [area[0].code, area[1].code, area[2].code]
+          this.areaShow = false
+          break
+      }
+    },
+    chooseArea() {
+      this.areaShow = true
+    },
+    //长期状态改变时
+    effectiveDataTypeChange(val) {
+      //勾选长期状态时,证件截止日期置空
+      if (val) {
+        this.userInfo.effectiveDate = ''
+        this.effectiveDateRequired = false
+      } else {
+        this.effectiveDateRequired = true
+      }
+    },
+    //获取身份证扫描信息
+    getIdentityInfo(data) {
+      console.log(data)
+      if (data.name && data.name != '待识别') {
+        this.userInfo.effectiveDate = data.endDate
+        this.userInfo.name = data.name
+        this.userInfo.idNo = data.idNo
+      }
+      this.isScan = false
+    },
+    //时间戳格式处理
+    timeStampFormat(timeStamp) {
+      let date = new Date(timeStamp)
+      let year = date.getFullYear()
+      let month = date.getMonth() + 1
+      month = month.toString().padStart(2, '0')
+      let day = date.getDate()
+      day = day.toString().padStart(2, '0')
+      return `${year}-${month}-${day}`
+    },
+    getRelatedData(val, from) {
+      if (this.userInfo.idType != '1') {
+        return
+      }
+      // //如果证件校验不通过,恢复默认值
+      if (idToData(val).text) {
+        ;[this.userInfo.idNo, this.userInfo.sex, this.userInfo.birthday, this.effectiveDateTypeAble] = ['', '0', '', false]
+        return this.$toast(idToData(val).text)
+      }
+      this.userInfo.effectiveDateType = false
+      this.effectiveDateTypeAble = idToData(val).age <= 45
+      this.userInfo.birthday = idToData(val).birthday
+      this.userInfo.sex = idToData(val).sex
+      if (idToData(val).age > 45) {
+        if (from) {
+          this.userInfo.effectiveDateType = true
+        }
+        this.effectiveDateTypeAble = false
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.add-beneficiary-container {
+  .title {
+    font-weight: 600;
+    border-bottom: 1px solid #dadada;
+  }
+  /deep/.van-checkbox {
+    margin-left: auto;
+  }
+}
+</style>
diff --git a/src/views/ebiz/preserve/BeneficiaryInfoDetail.vue b/src/views/ebiz/preserve/BeneficiaryInfoDetail.vue
new file mode 100644
index 000000000..627e4ead4
--- /dev/null
+++ b/src/views/ebiz/preserve/BeneficiaryInfoDetail.vue
@@ -0,0 +1,291 @@
+<template>
+  <div class="add-beneficiary-container pb50">
+    <!-- 基本信息 -->
+    <van-cell-group>
+      <van-field
+        :value="userInfo.relationToInsured | idToText('relationToAppnt')"
+        required
+        readonly
+        label="是被保险人的"
+        name="是被保险人的"
+        right-icon="arrow"
+        placeholder="请选择"
+        v-validate="'required'"
+      />
+      <customer-picker
+        v-validate="'required|name'"
+        name="姓名"
+        label="姓名"
+        required
+        :value.sync="userInfo.name"
+        :parentShowPicker.sync="customerShowPicker"
+        readonly
+      ></customer-picker>
+      <van-field
+        :value="userInfo.idType | idToText('idType')"
+        v-validate="'required'"
+        readonly
+        required
+        label="证件类型"
+        name="证件类型"
+        right-icon="arrow"
+        placeholder="请选择"
+      />
+      <van-field
+        v-model="userInfo.idNo"
+        label="证件号码"
+        name="证件号码"
+        required
+        readonly
+        placeholder="请输入"
+        maxlength="18"
+        clearable
+        v-validate="'required'"
+      ></van-field>
+      <!-- <FieldDatePicter
+        :v-validate="{ required: effectiveDateRequired }"
+        label="证件起始日期"
+        name="证件起始日期"
+        :required="isRequired"
+        :defaultDate="new Date()"
+        :value.sync="userInfo.certificateValidate"
+        type="date"
+        @confirm="onDateConfirm($event, '1')"
+        ref="certificateValidate"
+        :flag="certificateValidateShow"
+        :readonly="idLimit"
+      ></FieldDatePicter> -->
+      <FieldDatePicter
+        :v-validate="{ required: effectiveDateRequired }"
+        label="证件截止日期"
+        name="证件截止日期"
+        :required="isRequired"
+        :defaultDate="new Date()"
+        :value.sync="userInfo.effectiveDate"
+        type="date"
+        @confirm="onDateConfirm($event, '1')"
+        ref="effectiveDate"
+        :flag="effectiveDateShow"
+        readonly
+      ></FieldDatePicter>
+      <div class="border-bt relative fs14 p10 flex align-center">
+        <van-checkbox v-model="userInfo.effectiveDateType" class="fr" :disabled="true">长期</van-checkbox>
+      </div>
+      <select-radio :radios="sexRadio" disabled required label="性别" :value.sync="userInfo.sex"></select-radio>
+      <van-field
+        :value="userInfo.nationality | idToText('nativeplace')"
+        readonly
+        label="国家/地区"
+        name="国家/地区"
+        required
+        v-validate="'required'"
+        right-icon="arrow"
+        placeholder="请选择"
+      />
+      <van-field
+        v-model="userInfo.bnfOrder"
+        required
+        readonly
+        label="受益顺序"
+        name="受益顺序"
+        placeholder="请输入"
+        v-validate="'required|onlyNumber'"
+        maxlength="1"
+      />
+      <van-field
+        v-model="userInfo.bnfLot"
+        label="受益比例(%)"
+        name="受益比例"
+        placeholder="请输入"
+        required
+        readonly
+        v-validate="'required|onlyNumber'"
+        maxlength="3"
+        clearable
+      />
+
+      <template v-if="false">
+        <van-field
+          v-model="userInfo.mobile"
+          clearable
+          label="联系电话"
+          name="联系电话"
+          required
+          readonly
+          placeholder="请输入"
+          v-validate="'required|mobile'"
+          maxlength="11"
+        />
+        <van-field
+          v-model="areaName"
+          readonly
+          label="联系地址"
+          name="联系地址"
+          required
+          right-icon="arrow"
+          placeholder="请选择"
+          v-validate="'required'"
+          @click="chooseArea"
+        />
+        <van-field v-model="userInfo.village" label="" readonly name="详细地址" placeholder="请输入详细地址" v-validate="'required'" clearable maxlength="30" />
+        <van-field v-model="userInfo.email" required readonly label="电子邮箱" name="电子邮箱" placeholder="请输入" v-validate="'required|email'" clearable />
+        <occupation-picker
+          :value.sync="userInfo.occupationCode"
+          :chooseName.sync="userInfo.occupationName"
+          :lifeGrade.sync="userInfo.lifeGrade"
+          :healthGrade.sync="userInfo.healthGrade"
+          clearable
+          label="职业类别"
+          name="职业类别"
+          required
+          v-validate="'required'"
+          placeholder="请选择"
+          readonly
+          :parentShowPicker.sync="occupationShowPicker"
+          @on-choose="chooseOccupation"
+        />
+      </template>
+    </van-cell-group>
+  </div>
+</template>
+
+<script>
+import { Field, CellGroup, Checkbox, Popup, Picker, Area } from 'vant'
+import SelectRadio from '@/components/ebiz/SelectRadio'
+import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
+import OccupationPicker from '@/components/ebiz/occipation/OccupationPicker'
+import DataDictionary from '@/assets/js/utils/data-dictionary'
+import areaList from '@/assets/js/utils/area'
+import getAreaName from '@/assets/js/utils/get-area-name'
+import utilsAge from '@/assets/js/utils/age'
+import IdentityCardScan from '@/components/ebiz/sale/IdentityCardScan'
+import CustomerPicker from '@/components/ebiz/customer/CustomerPicker'
+import idNoCheck from '@/assets/js/utils/idNoCheck'
+import { idToData } from './js/verification'
+import { selectComp } from './js/methods'
+let relationToInsured = DataDictionary.relationToAppnt
+
+export default {
+  name: 'beneficiaryInfoAdd',
+  components: {
+    [SelectRadio.name]: SelectRadio,
+    [FieldDatePicter.name]: FieldDatePicter,
+    [OccupationPicker.name]: OccupationPicker,
+    [Field.name]: Field,
+    [CellGroup.name]: CellGroup,
+    [Checkbox.name]: Checkbox,
+    [Popup.name]: Popup,
+    [Picker.name]: Picker,
+    [Area.name]: Area,
+    [IdentityCardScan.name]: IdentityCardScan,
+    [CustomerPicker.name]: CustomerPicker
+  },
+  data() {
+    return {
+      effectiveDateTypeAble: true, //长期按钮是否禁用
+      isScan: false, //是否显示证件扫描组件
+      sexRadio: [
+        {
+          label: '男',
+          value: '0'
+        },
+        {
+          label: '女',
+          value: '1'
+        }
+      ],
+      currentPopupIndex: '',
+      relationToAppnt: '',
+      popupShow: false,
+      areaShow: false,
+      pickerType: undefined,
+      columns: [],
+      valueKey: 'text',
+      nationality: '',
+      idType: '居民身份证',
+      degree: '',
+      socialSecurity: '',
+      taxIdentity: '',
+      areaName: '',
+      areaValue: '110101',
+      effectiveDateRequired: true, //证件截止日期是否需要校验
+      effectiveDateShow: true, //证件截止日期是否可以选择
+      marriage: '',
+      isRequired: '', //长期前是否有*
+      userInfo: {
+        bnfId: '',
+        bnfType: '2',
+        bnfGrade: '',
+        name: '',
+        sex: '0',
+        nationality: '1',
+        birthday: '',
+        idType: '1',
+        idNo: '',
+        certificateValidate: '',
+        effectiveDate: '',
+        effectiveDateType: false, //是否长期
+        bnfNo: '1',
+        bnfOrder: 1,
+        bnfLot: '',
+        phone: '',
+        province: '',
+        city: '',
+        area: '',
+        postalAddress: '',
+        email: '',
+        occupationCode: '',
+        occupationName: '' // 职业中文
+      },
+      areaList: areaList,
+      occupationShowPicker: false,
+      customerShowPicker: false, //客户列表展示
+      idLimit: false, //证件起止日期是否只读
+      policy: null,
+      bnfDTOs: []
+    }
+  },
+  created() {
+    this.policy = JSON.parse(localStorage['preserve-policy'])
+    this.bnfDTOs = this.policy.bnfDTOs
+    if (this.$route.query.edit) {
+      this.editIndex = this.$route.query.edit
+      this.userInfo = this.bnfDTOs[this.$route.query.edit]
+    }
+  },
+  mounted() {},
+  methods: {
+    chooseOccupation() {
+      this.$jump({
+        flag: 'navigation',
+        extra: {
+          title: '指定受益人信息',
+          hiddenRight: '1'
+        }
+      })
+      this.occupationShowPicker = false
+    },
+    //时间戳格式处理
+    timeStampFormat(timeStamp) {
+      let date = new Date(timeStamp)
+      let year = date.getFullYear()
+      let month = date.getMonth() + 1
+      month = month.toString().padStart(2, '0')
+      let day = date.getDate()
+      day = day.toString().padStart(2, '0')
+      return `${year}-${month}-${day}`
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.add-beneficiary-container {
+  .title {
+    font-weight: 600;
+    border-bottom: 1px solid #dadada;
+  }
+  /deep/.van-checkbox {
+    margin-left: auto;
+  }
+}
+</style>
diff --git a/src/views/ebiz/preserve/HandleResult.vue b/src/views/ebiz/preserve/HandleResult.vue
index 4bedd891d..80c6400e6 100644
--- a/src/views/ebiz/preserve/HandleResult.vue
+++ b/src/views/ebiz/preserve/HandleResult.vue
@@ -35,29 +35,53 @@ export default {
       case 'contact':
         this.path = '/preserve/ContactConfirmation?entry=contact'
         break
+      case 'beneficiary':
+        this.path = '/preserve/BeneficiaryConfirmation?entry=beneficiary&'
+        break
+      case 'renewal':
+        this.path = '2'
+        break
+      case 'bonus':
+        this.path = '3'
+        break
       default:
         this.path = ''
         break
     }
   },
-  mounted() {},
+  mounted() {
+    // document.body.style.backgroundColor = '#fff'
+  },
   methods: {
     nextStep() {
-      if (this.customerInfo.idType != '1') {
+      if (this.entry != 'beneficiary') {
+        // 如果 保全项不是 受益人变更、则 在证件类型为身份证时 直接接入人脸识别
+        // if (this.customerInfo.idType != '1') {
         // 如果证件类型不是身份证
         // 直接跳过人脸识别
         this.jumpNextPage(this.path)
-      } else if (this.entry != 'beneficiary') {
-        // 如果 保全项不是 受益人变更、则 在证件类型为身份证时 直接接入人脸识别
-        this.toFace()
+        // } else {
+        //   this.toFace({
+        //     number: this.customerInfo.idNo, //身份证号码
+        //     name: this.customerInfo.name //姓名
+        //   })
+        // }
       } else if (this.entry == 'beneficiary') {
         // 如果 保全项是 受益人变更、则进行特殊判断
         // 若被保险人≥18周岁，人脸识别录入被保人本人
         // 若被保险人＜18周岁，被保险人与投保人为子女关系，人脸识别录入未成年人父亲或母亲
         // toDo
+        //
+        // if (this.customerInfo.idType != '1'  ) {
+        //   // 如果证件类型不是身份证
+        //   // 直接跳过人脸识别
+        //   this.jumpNextPage(this.path)
+        // }
+        //
+        this.jumpNextPage(this.path)
       }
     },
-    jumpNextPage(path) {
+    jumpNextPage(path = '/preserve/BeneficiaryInfo') {
       this.$jump({
         flag: 'h5',
         extra: {
@@ -68,7 +92,7 @@ export default {
         }
       })
     },
-    toFace() {
+    toFace(config) {
       // eslint-disable-next-line no-undef
       EWebBridge.webCallAppInJs('face_auth', {
         number: this.customerInfo.idNo, //身份证号码
diff --git a/src/views/ebiz/preserve/PolicyList.vue b/src/views/ebiz/preserve/PolicyList.vue
index 8f230b2ad..ea7c60822 100644
--- a/src/views/ebiz/preserve/PolicyList.vue
+++ b/src/views/ebiz/preserve/PolicyList.vue
@@ -1 +1,161 @@
-<!--保单列表页-->
\ No newline at end of file
+<!--保单列表页-->
+<template>
+  <div class="proposal-list-container">
+    <!-- <van-list
+      v-model="loading"
+      :immediate-check="false"
+      :finished="finished"
+      :finished-text="finishedText"
+      error-text="请求失败，点击重新加载"
+      :error.sync="error"
+      @load="loadMore"
+      class="pb45"
+    > -->
+    <!-- <div v-if="isSuccess"> -->
+    <div v-if="policyList.length > 0">
+      <div class="fs12" v-for="(item, index) in policyList" :key="index" @click="toChange(item)">
+        <div class="flex align-items-c justify-content-c h40 gray">
+          <div>保单号:</div>
+          <div>{{ item.policyNo }}</div>
+        </div>
+
+        <div class="bg-white pv15 pr15 pl10 ml15 mr15">
+          <div class="flex justify-content-s  align-items-c">
+            <div>
+              <div class="w45 inline-b">
+                <van-tag plain color="#5CA7DE">投保</van-tag>
+              </div>
+              <span class="fs15 c-gray-dark">{{ item.appntName }}</span>
+            </div>
+          </div>
+
+          <div class="mv15">
+            <div class="w45 inline-b">
+              <van-tag plain color="#DD9C56">被保</van-tag>
+            </div>
+            <span class="fs15 c-gray-dark">{{ item.insuredName }}</span>
+          </div>
+
+          <div class="mv10">
+            <span class="w45 inline-b">
+              <van-tag plain type="danger">主险</van-tag>
+            </span>
+            <span class="fs15 c-gray-dark">{{ item.riskName }}</span>
+          </div>
+
+          <van-row class="mb15">
+            <van-col span="12" class="fwb fs15">保额（元）</van-col>
+            <van-col span="12" class="text-right fwb" style="color: red">{{ item.amt | amtFormat }}</van-col>
+          </van-row>
+          <div class="pt15" style="border-top:1px solid #dadada">
+            <div>
+              <div class="w100 inline-b">
+                <van-tag plain color="#999999">生效日期</van-tag>
+              </div>
+              <span class="fs14 c-gray-dark">{{ item.cvaliDate }}</span>
+            </div>
+          </div>
+        </div>
+      </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-list> -->
+  </div>
+</template>
+<script>
+import { Tag, List, Row, Col } from 'vant'
+import { policyList } from '@/api/ebiz/preserve/preserve'
+export default {
+  components: {
+    [Tag.name]: Tag,
+    [Row.name]: Row,
+    [Col.name]: Col,
+    [List.name]: List
+  },
+  data() {
+    return {
+      entry: '', //入口
+      // policyList: [] //保单列表
+      customerInfo: JSON.parse(localStorage.getItem('preserve-customerInfo')), //客户详情
+      policyList: [
+        {
+          contNo: '11111111',
+          appntName: '张三',
+          insuredName: '李四',
+          riskName: '国富人寿八桂无忧',
+          amt: '130.000',
+          cvaliDate: '2020-01-19'
+        },
+        {
+          "grpContNo": "11222111",
+          "contNo": "11111111",
+          "proposalPrtNo": "641596",
+          "hangUpFlag": "2",
+          "appntName": "张三2",
+          "insuredName": "李四2",
+          "riskName": "国富人寿八桂无忧",
+          "amt": "130.00",
+          "cvaliDate": "2020-01-19"
+        }
+      ] //保单列表
+      /*
+      finishedText: '没有更多了',
+      finished: false,
+      error: false,
+      loading: false,
+      pageSize: 5, //每页数据条数
+      morePage: 1, // 当前页数
+      isSuccess: false
+      */
+    }
+  },
+  mounted() {
+    this.entry = this.$route.query.entry
+    //await this.getPolicyList({ customerNo: this.customerInfo.customerNo })
+    // this.getPolicyList({ customerNo: '' })
+  },
+  methods: {
+    //获取保单列表
+    async getPolicyList(data) {
+      policyList(data).then(res => {
+        if (res.result == '0') {
+          // this.policyList = res.content.policyListDTOList
+          this.policyList = res.content.contList
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+
+    //点击保单，跳转页面
+    toChange(detail) {
+      console.log(detail)
+      localStorage['preserve-policy'] = JSON.stringify(detail)
+      let url
+      switch (this.entry) {
+        case 'surrender': //退保
+          url = `surrenderInfo?entry=${this.entry}`
+          break
+        case 'beneficiary': //受益人变更
+          url = `beneficiaryInfo?entry=${this.entry}`
+          break
+        default:
+          break
+      }
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/preserve/${url}`
+        },
+        routerInfo: {
+          path: `/preserve/${url}`
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/ebiz/preserve/SubmitResult.vue b/src/views/ebiz/preserve/SubmitResult.vue
index 3773a13f3..99f278085 100644
--- a/src/views/ebiz/preserve/SubmitResult.vue
+++ b/src/views/ebiz/preserve/SubmitResult.vue
@@ -6,7 +6,7 @@
     </div>
     <p class="mt20 text-center">提交成功</p>
     <p class="mt20 fs12 gray text-center">如有疑问请拨打客服电话: 4008-008-008</p>
-    
+
     <div class="bg-white bottom-btn"><van-button type="danger" size="large" @click="nextStep" v-no-more-click="1000">返回</van-button></div>
   </div>
 </template>
@@ -24,7 +24,7 @@ export default {
     document.body.style.backgroundColor = '#fff'
   },
   methods: {
-    nextStep(){
+    nextStep() {
       // service
       this.$jump({
         flag: 'service'
diff --git a/src/views/ebiz/preserve/SurrenderConfirmation.vue b/src/views/ebiz/preserve/SurrenderConfirmation.vue
index 5627c94d6..e2bece42b 100644
--- a/src/views/ebiz/preserve/SurrenderConfirmation.vue
+++ b/src/views/ebiz/preserve/SurrenderConfirmation.vue
@@ -1 +1 @@
-<!--退保-保全代办确认页-->
\ No newline at end of file
+<!--退保-保全代办确认页-->
diff --git a/src/views/ebiz/preserve/SurrenderInfo.vue b/src/views/ebiz/preserve/SurrenderInfo.vue
index e680f7a0c..c185277aa 100644
--- a/src/views/ebiz/preserve/SurrenderInfo.vue
+++ b/src/views/ebiz/preserve/SurrenderInfo.vue
@@ -1 +1 @@
-<!--退保页-->
\ No newline at end of file
+<!--退保页-->
diff --git a/src/views/ebiz/preserve/js/methods.js b/src/views/ebiz/preserve/js/methods.js
new file mode 100644
index 000000000..da4406408
--- /dev/null
+++ b/src/views/ebiz/preserve/js/methods.js
@@ -0,0 +1,95 @@
+//点击弹出组件
+export function selectComp(that, index, type = '') {
+  that.currentPopupIndex = index
+  let title = ''
+  if (index == 1) {
+    ;[that.customerShowPicker, title] = [true, '客户列表']
+  } else if (index == 2) {
+    ;[that.occupationShowPicker, title] = [true, '职业类别']
+  } else if (index == 3) {
+    if (type == '1') {
+      //投保人
+      localStorage.scanFromInsured = 'true'
+    } else if (type == '2') {
+      //被保险人
+      localStorage.scanFromInsured = 'false'
+    }
+    ;[that.isScan, title] = [true, '身份证扫描']
+  }
+
+  setTimeout(() => {
+    that.$jump({
+      flag: 'navigation',
+      extra: {
+        title,
+        hiddenLeft: '1'
+      }
+    })
+    closeBtn(that)
+  }, 400)
+}
+
+// 关闭按钮的显示
+function closeBtn(that) {
+  that.$jump({
+    flag: 'webview_right_button',
+    extra: {
+      btns: [
+        {
+          img: that.$assetsUrl + 'images/del-close.png',
+          route: { flag: '', extra: {} }
+        }
+      ]
+    }
+  })
+}
+
+// 获取身份证扫描信息
+/**
+ *
+ * @param {*} that 上下文
+ * @param {*} data 扫描数据
+ * @param {*} type 1 投保人 2 被保险人
+ */
+export function getIdentityInfo(that, data, type) {
+  console.log(data)
+  // 正面
+  if (data.name && data.name != '待识别') {
+    that.userInfo.name = data.name
+    that.userInfo.idNo = data.idNo
+    that.userInfo.birthday = `${data.birthYear}-${data.birthMonth}-${data.birthDay}`
+    that.userInfo.sex = data.gender == '男' ? '0' : '1'
+  }
+  // 反面
+  if (data.startDate && data.startDate != '待识别') {
+    that.userInfo.certificateValidate = `${data.startDate.substr(0, 4)}-${data.startDate.substr(5, 2)}-${data.startDate.substr(8, 2)}`
+    //that.userInfo.certificateValidate = `${data.startDate.substr(0, 4)}-${data.startDate.substr(4, 2)}-${data.startDate.substr(6, 2)}`
+    // 是否为长期身份证
+    if (data.endDate != '长期') {
+      that.userInfo.certiexpiredate = `${data.endDate.substr(0, 4)}-${data.endDate.substr(5, 2)}-${data.endDate.substr(8, 2)}`
+      // that.userInfo.certiexpiredate = `${data.endDate.substr(0, 4)}-${data.endDate.substr(4, 2)}-${data.endDate.substr(6, 2)}`
+      that.effectiveDateTypeAble = true
+      that.idLimit = false
+      that.isRequired = true
+    } else {
+      // 勾选长期
+      that.userInfo.effectiveDateType = true
+      // 长期按钮不禁用
+      that.effectiveDateTypeAble = false
+      // 证件截止日期不需要校验
+      that.certiexpiredateRequired = false
+      //截止日期不可编辑
+      that.idLimit = true
+      that.isRequired = false
+    }
+  }
+  that.isScan = false
+  let title = type == '1' ? '投保人信息' : '被保险人信息'
+  that.$jump({
+    flag: 'navigation',
+    extra: {
+      title,
+      hiddenRight: '1'
+    }
+  })
+}
diff --git a/src/views/ebiz/preserve/js/verification.js b/src/views/ebiz/preserve/js/verification.js
new file mode 100644
index 000000000..b42c40b4b
--- /dev/null
+++ b/src/views/ebiz/preserve/js/verification.js
@@ -0,0 +1,52 @@
+import changeFifteenToEighteen from '@/assets/js/utils/changeFifteenToEighteen'
+import idNoCheck from '@/assets/js/utils/idNoCheck'
+import utilsAge from '@/assets/js/utils/age'
+
+//身份证带出出生日期,性别,年龄
+export function idToData(idNo) {
+  //非空
+  if (!idNo.trim()) {
+    return {
+      text: '证件号码不能为空'
+    }
+  }
+
+  // 证件号码规则校验
+  if (!idNoCheck.isIdno(idNo)) {
+    return {
+      text: '您填写的证件号码有误'
+    }
+  }
+
+  //如果是15位身份证号先转为18位
+  if (idNo.length == 15) {
+    idNo = changeFifteenToEighteen(idNo)
+  }
+  let birthday = getBirthById(idNo)
+  let age = utilsAge.getAge(birthday, new Date())
+  let sex = getSexById(idNo)
+  return {
+    birthday,
+    age,
+    sex
+  }
+}
+
+function getBirthById(idNo) {
+  // 获取生日
+  var year = idNo.substr(6, 4)
+  var month = idNo.substr(10, 2)
+  var day = idNo.substr(12, 2)
+  return year + '-' + month + '-' + day
+}
+
+function getSexById(idNo) {
+  // 获取性别
+  if (idNo.charAt(16) >= '0' && idNo.charAt(16) <= '9') {
+    if (parseInt(idNo.charAt(16)) % 2 == 0) {
+      return '1'
+    } else {
+      return '0'
+    }
+  }
+}