ebiz-h5/src/views/ebiz/proposal/Appnt.vue

<template>
  <div class="pt10">
    <van-cell-group class="proposal-appnt">
      <customer-picker
        class="border-bottom"
        @nameChange="nameChange"
        @on-choose="chooseCustomer"
        v-validate="'required'"
        :required="true"
        name="投保人"
        label="姓名"
        @on-click="selectClick('1')"
        :parentShowPicker.sync="customerShowPicker"
        :value.sync="appntDTO.name"
      ></customer-picker>

      <select-radio class="border-bottom" :radios="sexRadio" label="性别" :value.sync="appntDTO.sex"></select-radio>
      <FieldDatePicter
        @confirm="dateConfirm"
        v-validate="'required'"
        required
        label="出生日期"
        name="出生日期"
        :value.sync="appntDTO.birthday"
        :maxDate="maxDate"
        type="date"
        :flag="true"
      ></FieldDatePicter>
      <occupation-picker
        class="border-bottom"
        :value.sync="appntDTO.occupationCode"
        :chooseName.sync="appntDTO.occupationName"
        :lifeGrade.sync="appntDTO.lifeGrade"
        :healthGrade.sync="appntDTO.healthGrade"
        :parentShowPicker.sync="occupationShowPicker"
        @on-choose="chooseOccupation"
        @on-click="selectClick('2')"
        required
        clearable
        label="职业"
        name="职业"
        v-validate="'required'"
        placeholder="投保人职业"
      />
      <div class="border-bottom">
        <van-field :border="false" v-model="appntDTO.age" clearable label="年龄" v-validate="'appntAge'" placeholder="投保人年龄" />
      </div>
      <van-field :border="false" v-model="appntDTO.mobile" clearable label="手机号码" name="手机号码" placeholder="投保人手机号码" v-validate="'mobile'" />
      <van-button type="danger" @click="nextStep" class="bottom-btn fs16">下一步</van-button>
    </van-cell-group>
  </div>
</template>
<script>
import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
import SelectRadio from '@/components/ebiz/SelectRadio'
import OccupationPicker from '@/components/ebiz/occipation/OccupationPicker'
import CustomerPicker from '@/components/ebiz/customer/CustomerPicker'
import { CellGroup, Field } from 'vant'
import { saveProposal } from '@/api/ebiz/proposal/proposal.js'
import getAge from '@/assets/js/utils/age.js'
import beforeDate from '@/assets/js/utils/getBeforeDate.js'

export default {
  data() {
    return {
      sexRadio: [
        {
          label: '男',
          value: '0'
        },
        {
          label: '女',
          value: '1'
        }
      ],
      maxDate: beforeDate.getBeforeYear(16),
      appntDTO: {
        name: '',
        age: '',
        sex: '0',
        birthday: '',
        occupationCode: '',
        occupationName: '',
        mobile: '',
        lifeGrade: '',
        healthGrade: ''
      },
      customerShowPicker: false,
      occupationShowPicker: false,
      currentPopupIndex: ''
    }
  },
  components: {
    [SelectRadio.name]: SelectRadio,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [FieldDatePicter.name]: FieldDatePicter,
    [OccupationPicker.name]: OccupationPicker,
    [CustomerPicker.name]: CustomerPicker
  },
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    init() {
      // 筛选按钮的点击事件
      window.appCallBack = this.appCallBack
    },
    selectClick(index) {
      this.currentPopupIndex = index
      let title = ''
      if (index == 1) {
        ;[this.customerShowPicker, title] = [true, '客户列表']
      } else if (index == 2) {
        ;[this.occupationShowPicker, title] = [true, '职业类别']
      }

      setTimeout(() => {
        this.$jump({
          flag: 'navigation',
          extra: {
            title,
            hiddenLeft: '1'
          }
        })
        this.closeBtn()
      }, 400)
    },
    closeBtn() {
      // 筛选按钮的显示
      this.$jump({
        flag: 'webview_right_button',
        extra: {
          btns: [
            {
              img: this.$assetsUrl + 'images/del-close.png',
              route: { flag: '', extra: {} }
            }
          ]
        }
      })
    },
    appCallBack() {
      // 筛选按钮的点击事件
      this.$jump({
        flag: 'navigation',
        extra: {
          title: '投保人信息',
          hiddenRight: '1'
        }
      })
      if (this.currentPopupIndex == 1) {
        this.customerShowPicker = false
      } else if (this.currentPopupIndex == 2) {
        this.occupationShowPicker = false
      }
    },
    chooseOccupation() {
      this.$jump({
        flag: 'navigation',
        extra: {
          title: '投保人信息',
          hiddenRight: '1'
        }
      })
      this.occupationShowPicker = false
    },
    nameChange(data) {
      this.appntDTO.name = data
    },
    dateConfirm(data) {
      let age = getAge.getAge(data, new Date())

      this.appntDTO.age = age
    },
    //从客户列表选择客户
    chooseCustomer(data) {
      this.customerShowPicker = false
      this.$jump({
        flag: 'navigation',
        extra: {
          title: '投保人信息',
          hiddenRight: '1'
        }
      })
      let { customerName, customerSex, birthday, customerPhone, age, occupationName, occupationCode, lifeGrade, healthGrade } = data
      this.appntDTO = {
        mobile: customerPhone,
        birthday,
        sex: String(customerSex),
        name: customerName,
        occupationName,
        age: age ? age : '',
        occupationCode,
        lifeGrade,
        healthGrade
      }
    },

    nextStep() {
      this.appntDTO.age = String(this.appntDTO.age)
      this.$validator.validate().then(valid => {
        if (true === valid) {
          //进行投保人年龄校验（大于16周岁）
          let params = {
            orderDTO: {
              appntDTO: this.appntDTO,
              orderInfoDTO: {
                orderStatus: '00'
              }
            }
          }
          saveProposal(params).then(res => {
            if (res.result == '0') {
              localStorage.orderNo = res.content.orderNo
              this.$jump({
                flag: 'h5',
                extra: {
                  url: location.origin + '/#/proposal/chooseInsuredPerson',
                  needRefresh: '1'
                },
                routerInfo: {
                  path: '/proposal/chooseInsuredPerson'
                }
              })
            } else {
              this.$toast(res.resultMessage)
            }
          })
        } else {
          this.$toast(this.$validator.errors.all()[0])
        }
      })
    }
  }
}
</script>

<style lang="scss">
.proposal-appnt {
  .van-cell:not(:last-child)::after {
    display: none;
  }
  .border-bottom::after {
    position: absolute;
    z-index: 99;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0;
    left: 4.26667vw;
    border-bottom: 1px solid #dadada;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
  .customer {
    .van-cell:not(:last-child)::after {
      position: absolute;
      z-index: 99;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 0;
      left: 4.26667vw;
      border-bottom: 1px solid #dadada;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
}
</style>