ebiz-h5/src/views/ebiz/preserve/bc/BeneficiaryConfirmation.vue

<!--受益人变更页面-->
<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 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('edorRelationToAppnt') }}</span>
            </p>
            <p class="mt10">
              <span class="c-gray-dark">受益份额</span>
              <span class="ml35">{{ item.bnfLot | toPercent }}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
    <van-dialog v-model="show" title="提示" show-cancel-button @confirm="authConfirm(authCode)" @cancel="clearTimer">
      <p class="p10 fs14">向此手机发送验证码确认用户身份</p>
      <p class="p10 fs14" style="border-bottom: 1px solid #ebedf0;">{{ customerInfo.customerMobile | 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="show = true">提交申请</van-button>
  </div>
</template>

<script>
import { Field, CellGroup, RadioGroup, Radio, Icon, Dialog } from 'vant'
import { getAuthCode } from '@/api/ebiz/sale/sale'
import { queryConfirmDetail, changeEdor } from '@/api/ebiz/preserve/preserve'
import filters from '@/views/ebiz/preserve/filters'

export default {
  name: 'BeneficiaryConfirmation',
  components: {
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Icon.name]: Icon,
    [Dialog.name]: Dialog
  },
  data() {
    // let feachData = {
    //   surrenderDTOList: [
    //     {
    //       surrenderId: '',
    //       edorapplyNo: '',
    //       surrenderType: '2',
    //       bnfDTOs: []
    //     }
    //   ]
    // }
    return {
      show: false, // 获取短信验证码
      codeDisabled: false, // 获取验证码按钮是否禁用
      timeId: null, // 计时器ID
      countDown: 60, // 倒计时
      authCode: '', // 验证码
      // feachData: feachData,
      type: '',
      sessionId: '',

      policy: JSON.parse(localStorage['preserve-policy']),
      customerInfo: JSON.parse(localStorage['preserve-customerInfo']),
      insuredName: '', //被保险人
      beneficiaries: [] // 指定受益人列表
    }
  },
  created() {
    // 获取保单列表存储的数据
    this.insuredName = this.policy.insuredName
  },
  async mounted() {
    await this.init()
    this.beneficiaries = this.beneficiaries.filter(v => {
      return v.isNewInfo == '0' && v.isLegal == '0'
    })
    this.type = this.beneficiaries.length > '0' ? '2' : '1'
  },
  methods: {
    //详情
    detail(index) {
      // edit=0
      let path = '/preserve/BC/BeneficiaryInfoDetail?edit=' + index
      this.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + '/#' + path
        },
        routerInfo: {
          path: path
        }
      })
    },
    init() {
      return new Promise((resolve, reject) => {
        queryConfirmDetail({
          surrenderId: this.customerInfo.surrenderId,
          edorType: 'BC'
        }).then(
          res => {
            if (res.result == 0) {
              console.log('res========', res)
              this.beneficiaries = res.content.content
              resolve()
            } else {
              reject(this.$toast(res.resultMessage))
            }
          },
          error => {
            reject(this.$toast(error))
          }
        )
      })
    },
    // 获取短信验证码
    getAuthCode() {
      this.codeDisabled = true
      //倒计时
      this.timeId = setInterval(() => {
        this.countDown--
        if (this.countDown <= 0) {
          window.clearInterval(this.timeId)
          this.codeDisabled = false
          this.countDown = 60
        }
      }, 1000)
      getAuthCode({
        operateType: 'appntInfoEntry',
        type: 'H5',
        operateCode: this.customerInfo.customerMobile,
        system: 'agentApp',
        operateCodeType: '0'
      }).then(res => {
        console.log(res)
        if (res.result == 0) {
          this.sessionId = res.sessionId
        } else {
          this.$toast(res.resultMessage)
        }
      })
    },
    // 验证码确认事件
    async authConfirm() {
      //清理计时器
      this.clearTimer()
      this.submit()
    },
    // 清理计时器
    clearTimer() {
      window.clearInterval(this.timeId)
      this.timeId = null
      this.countDown = 60
      this.codeDisabled = false
    },
    //确认变更
    submit() {
      let data = {
        platformType: 'APP',
        edorType: 'BC',
        operateType: '04',
        surrenderId: this.customerInfo.surrenderId,
        edorApplyNo: this.customerInfo.edorApplyNo,
        checkCodeDTO: {
          smsId: this.sessionId,
          code: this.authCode
        }
      }
      changeEdor(data).then(res => {
        if (res.result == 0) {
          if (localStorage['fromAddBC']) {
            localStorage.removeItem('fromAddBC')
          }
          this.$jump({
            flag: 'h5',
            extra: {
              url: location.origin + `/#/preserve/common/submitResult`
            },
            routerInfo: {
              path: `/preserve/common/submitResult`
            }
          })
        } else {
          this.$toast(res.resultMessage)
          this.authCode = ''
        }
      })
    }
  },
  filters: {
    toPercent: filters.toPercent,
    idToText: filters.idToText,
    mask: filters.mask
  }
}
</script>
<style lang="scss" scoped>
/deep/.van-dialog {
  border-radius: 10px;
}
/deep/.van-dialog__confirm.van-button--default {
  background: #e9332e;
  color: #fff !important;
  border-radius: 0 0 10px 0;
}
/deep/.van-button--default.van-dialog__cancel {
  border: 1px solid #e9332e;
  color: #e9332e;
  border-right: 0;
  border-radius: 0 0 0 10px;
}
.beneficiary-container {
  .add-btn {
    width: 80%;
    margin: 20px auto;
    border: 1px dashed #999;
  }
  .beneficiary-list {
    margin-bottom: 65px;
  }
  .item {
    background-color: #f5f5f5;
  }
}
</style>