ebiz-h5/src/components/ebiz/customer/formBlock.vue

<template>
  <div>
    <van-cell-group>
      <!-- 基本信息 -->
      <select-radio
        :radios="sexRadio"
        label="性别"
        :value.sync="userInfo.customerSex"
        :required="false"
      ></select-radio>
      <van-field
        :value="userInfo.nativeplace | idToText('nativeplace')"
        readonly
        label="国家/地区"
        name="国家/地区"
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('1')"
      />
      <van-field
        :value="census"
        readonly
        label="户籍"
        name="户籍"
        right-icon="arrow"
        placeholder="请选择"
        @click="censusShow = true"
      />
      <FieldDatePicter
        label="出生日期"
        :value.sync="userInfo.birthday"
        type="date"
        :flag="true"
        @confirm="onDateConfirm($event, '0')"
        ref="birthday"
      ></FieldDatePicter>
      <van-field
        :value="userInfo.idType | idToText('idType')"
        readonly
        label="证件类型"
        name="证件类型"
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('2')"
      />
      <van-field
        v-model="userInfo.customerIdNumber"
        v-validate="'idNoTemp'"
        label="证件号码"
        name="证件号码"
        placeholder="请输入"
      ></van-field>
      <FieldDatePicter
        label="证件起始日期"
        name="证件起始日期"
        :value.sync="userInfo.certificateValidate"
        type="date"
        :flag="true"
        ref="certificateValidate"
        @confirm="onDateConfirm($event, '1')"
      ></FieldDatePicter>
      <FieldDatePicter
        label="证件截止日期"
        name="证件截止日期"
        :value.sync="userInfo.certiexpiredate"
        type="date"
        :flag="true"
        ref="certiexpiredate"
        @confirm="onDateConfirm($event, '2')"
      ></FieldDatePicter>
      <div class="van-hairline--bottom fs14 p10 clearfix">
        <van-checkbox
          v-model="userInfo.effectiveDateType"
          class="fr"
          :disabled="effectiveDateTypeAble"
          @change="isEnd"
        >长期</van-checkbox>
      </div>
      <van-field
        v-model="userInfo.email"
        label="电子邮箱"
        name="电子邮箱"
        v-validate="'email'"
        placeholder="请输入"
        clearable
        maxlength="50"
      />
      <van-field
        v-model="userInfo.stature"
        label="身高（cm）"
        placeholder="请输入"
        clearable
        v-validate="'onlyInteger'"
        maxlength="3"
        type="number"
      />
      <van-field
        v-model="userInfo.weight"
        label=" 体重（kg）"
        placeholder="请输入"
        clearable
        v-validate="'onlyInteger'"
        maxlength="3"
        type="number"
      />
      <van-field
        :value="userInfo.customerType | idToText('customerType')"
        readonly
        label="客户类型"
        name="客户类型"
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('7')"
      />
      <van-field
        :value="userInfo.customerSource | idToText('customerSource')"
        readonly
        label="客户来源"
        name="客户来源"
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('8')"
      />
    </van-cell-group>

    <!-- 工作信息 -->
    <van-cell-group class="mt5">
      <p class="title pl10 pv5">工作信息</p>
      <van-field
        :value="userInfo.degree | idToText('degree')"
        readonly
        label="文化程度"
        name="文化程度"
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('3')"
      />
      <select-radio
        :radios="medicalRadio"
        label="有无社保"
        :value.sync="userInfo.socialSecurity"
        :required="false"
      ></select-radio>
      <van-field
        :value="userInfo.taxIdentity | idToText('taxIdentity')"
        readonly
        label="税收居民身份"
        name="税收居民身份"
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('5')"
      />
      <occupation-picker
        :value.sync="userInfo.occupationCode"
        :chooseName.sync="userInfo.occupationName"
        :lifeGrade.sync="userInfo.lifeGrade"
        :healthGrade.sync="userInfo.healthGrade"
        clearable
        label="职业类别"
        name="职业类别"
        placeholder="请选择"
        :parentShowPicker.sync="occupationShowPicker"
        @on-click="selectClick"
        @on-choose="chooseOccupation"
      />
      <van-field
        v-model="userInfo.averageYearlyIncome"
        type="number"
        label="平均年收入（万元）"
        name="平均年收入"
        v-validate="'onlyInteger'"
        placeholder="请输入"
        clearable
        maxlength="5"
      />
      <van-field
        v-model="userInfo.liabilitiesMoney"
        type="number"
        label="负债金额（万元）"
        name="负债金额"
        v-validate="'onlyInteger'"
        placeholder="请输入"
        clearable
        maxlength="5"
      />
      <van-field
        v-model="userInfo.workUnits"
        label="工作单位"
        placeholder="请输入工作单位"
        clearable
        maxlength="50"
      />
      <van-field
        :value="userInfo.workCondition | idToText('workCondition')"
        readonly
        label="在职情况"
        name="在职情况"
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('9')"
      />
      <van-field
        v-model="areaName"
        readonly
        label="单位地址"
        name="单位地址"
        right-icon="arrow"
        placeholder="请选择"
        @click="areaShow = true"
      />
      <van-field
        v-model="userInfo.companyAddress"
        label
        name="详细地址"
        placeholder="请输入详细地址"
        maxlength="30"
      />
      <van-field
        v-model="userInfo.companyZip"
        type="number"
        label="邮编"
        placeholder="请输入"
        clearable
        maxlength="6"
        v-validate="'zipCode'"
      />
      <van-field
        v-model="userInfo.companyPhone"
        label="单位电话"
        name="单位电话"
        placeholder="请输入"
        clearable
        maxlength="13"
      />
    </van-cell-group>

    <!-- 家庭信息 -->
    <van-cell-group class="mt5">
      <p class="title pl10 pv5">家庭信息</p>
      <van-field
        :value="userInfo.marriage | idToText('marriage')"
        readonly
        label="婚姻状况"
        name="婚姻状况"
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('6')"
      />
      <van-field
        v-model="userInfo.familyAnnualIncome"
        type="number"
        label="家庭年收入（万元）"
        name="家庭年收入"
        v-validate="'onlyInteger'"
        placeholder="请输入"
        clearable
      />
      <van-field
        v-model="homeName"
        readonly
        label="家庭地址"
        name="家庭地址"
        right-icon="arrow"
        placeholder="请选择"
        @click="homeShow = true"
      />
      <van-field v-model="userInfo.homeAddress" label name="详细地址" placeholder="请输入详细地址" />
      <van-field
        v-model="userInfo.homeZip"
        type="number"
        label="邮编"
        placeholder="请输入"
        clearable
        maxlength="6"
        v-validate="'zipCode'"
      />
      <van-field
        v-model="userInfo.homePhone"
        label="家庭电话"
        name="家庭电话"
        placeholder="请输入"
        clearable
        maxlength="13"
      />
    </van-cell-group>

    <!-- 字段选择 -->
    <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="110101"
        @confirm="sureArea($event, '1')"
        @cancel="areaShow = false"
      />
    </van-popup>
    <!-- 家庭地址选择 -->
    <van-popup v-model="homeShow" position="bottom">
      <van-area
        :area-list="areaList"
        value="110101"
        @confirm="sureArea($event, '2')"
        @cancel="homeShow = false"
      />
    </van-popup>
    <!-- 户籍选择 -->
    <van-popup v-model="censusShow" position="bottom">
      <van-area
        :area-list="areaList"
        value="110101"
        :columns-num="2"
        @confirm="sureArea($event, '3')"
        @cancel="areaShow = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { Field, CellGroup, Cell, Popup, Picker, Checkbox, Area } from 'vant'
import SelectRadio from '@/components/ebiz/SelectRadio'
import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
import DataDictionary from '@/assets/js/utils/data-dictionary'
import OccupationPicker from '@/components/ebiz/occipation/OccupationPicker'
import areaList from '@/assets/js/utils/area'
import utilsAge from '@/assets/js/utils/age'
import getAreaName from '@/assets/js/utils/get-area-name'
import filter from '@/filters/index'
import { constants } from 'crypto'
import { userInfo } from 'os'

export default {
  name: 'formBlock',
  components: {
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Checkbox.name]: Checkbox,
    [FieldDatePicter.name]: FieldDatePicter,
    [OccupationPicker.name]: OccupationPicker,
    [SelectRadio.name]: SelectRadio,
    [Area.name]: Area
  },
  props: ['userInfo'],
  data() {
    return {
      popupShow: false,
      areaShow: false, //省级联动
      homeShow: false,
      censusShow: false, //户籍联动
      census: '',
      pickerType: undefined,
      columns: [],
      valueKey: 'text',
      nativeplace: '',
      idType: '',
      degree: '',
      socialSecurity: '',
      taxIdentity: '',
      areaName: '', //单位地址
      homeName: '', //家庭地址
      marriage: '',
      areaList: areaList,
      customerType: '',
      customerSource: '',
      age: '',
      effectiveDateTypeAble: false, //长期按钮是否禁用
      occupationShowPicker: false,
      sexRadio: [
        {
          label: '男',
          value: '0'
        },
        {
          label: '女',
          value: '1'
        }
      ],
      medicalRadio: [
        {
          label: '有',
          value: '0'
        },
        {
          label: '无',
          value: '1'
        }
      ]
    }
  },
  watch: {
    userInfo: {
      handler(newVal, oldVal) {
        // console.log("老数据",oldVal);
        //  console.log("新数据",newVal);
        // if(newVal.toString() != oldVal.toString()){
        this.userInfo = newVal
        if (this.userInfo.province) {
          this.censusInfo()
        }
        if (this.userInfo.companyProvince) {
          this.areaNameInfo()
        }
        if (this.userInfo.homeProvince) {
          this.homeNameInfo()
        }
        if (this.userInfo.certiexpiredate == '9999-01-01') {
          this.userInfo.effectiveDateType = true
        }
      },
      deep: true
    }
  },
  filters: {
    idToText: filter.idToText
  },
  mounted() {},
  methods: {
    selectClick() {
      let title = ''
      ;[this.occupationShowPicker, title] = [true, '职业类别']
    },
    chooseOccupation() {
      this.occupationShowPicker = false
    },
    // 表单校验
    validateForm() {
      return this.$validator.validateAll()
    },
    censusInfo() {
      let area = [{ code: this.userInfo.province }, { code: this.userInfo.city }]
      this.census = getAreaName(area)
    },
    areaNameInfo() {
      let area = [{ code: this.userInfo.companyProvince }, { code: this.userInfo.companyCity }, { code: this.userInfo.companyArea }]
      this.areaName = getAreaName(area)
    },
    homeNameInfo() {
      let area = [{ code: this.userInfo.homeProvince }, { code: this.userInfo.homeCity }, { code: this.userInfo.homeArea }]
      this.homeName = getAreaName(area)
    },
    //弹框选择
    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') {
        if(this.userInfo.birthday){
           let age = utilsAge.getAge(this.userInfo.birthday, new Date())
           console.log("年纪",age)
            if (age >= 3 && age < 16) {
              this.columns = DataDictionary.birthType
            } else if (age >= 3 && age >= 16) {
              this.columns = DataDictionary.insuredIdType
            } else {
              this.columns = DataDictionary.idType
            }
        }else{
           this.columns = DataDictionary.idType
        } 
      } else if (pickerType == '3') {
        this.columns = DataDictionary.degree
        // } else if (pickerType == '4') {
        //   this.columns = DataDictionary.socialSecurity
      } else if (pickerType == '5') {
        this.columns = DataDictionary.taxIdentity
      } else if (pickerType == '6') {
        this.columns = DataDictionary.marriage
      } else if (pickerType == '7') {
        this.columns = DataDictionary.customerType
      } else if (pickerType == '8') {
        this.columns = DataDictionary.customerSource
      } else if (pickerType == '9') {
        this.columns = DataDictionary.workCondition
      }
    },
    //确认选择字段
    onConfirm(value) {
      this.popupShow = false
      if (this.pickerType == '1') {
        ;[this.userInfo.nativeplace, this.nativeplace] = [value.id, value.text]
        this.valueKey = value.text
      } 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)
        }
        ;[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.customerType, this.customerType] = [value.id, value.text]
      } else if (this.pickerType == '8') {
        ;[this.userInfo.customerSource, this.customerSource] = [value.id, value.text]
      } else if (this.pickerType == '9') {
        ;[this.userInfo.workCondition, this.workCondition] = [value.id, value.text]
      }
    },
    //区域选择
    sureArea(area, type) {
      switch (type) {
        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 = getAreaName(area)
          ;[this.userInfo.homeProvince, this.userInfo.homeCity, this.userInfo.homeArea] = [area[0].code, area[1].code, area[2].code]
          this.homeShow = false
          break
        case '3': //户籍
          this.census = getAreaName(area)
          ;[this.userInfo.province, this.userInfo.city] = [area[0].code, area[1].code]
          this.censusShow = false
          break
      }
    },
    //证件起始截止日期
    onDateConfirm(val, type) {
      if (type == '0') {
        //出生日期
        if (Date.parse(val) > Date.parse(new Date())) {
          this.userInfo.birthday = ''
          this.$refs.birthday.date = ''
          return this.$toast('出生日期不晚于当日')
        }
        //长期判断
        let age = utilsAge.getAge(this.userInfo.birthday, new Date())
        if (this.userInfo.idType == '1') {
          this.effectiveDateTypeAble = !(age >= 45)
          if (age < 45) {
            this.userInfo.effectiveDateType = false
          }
        }
        //年龄大于等于3岁不能使用出生证明
        if (age >= 3) {
          if (this.userInfo.idType == '3') {
            this.userInfo.idType = ''
            this.$toast('请选择正确的证件类型')
          }
        }
        //年龄大于等于16岁不能使用户口本
        if (age >= 16) {
          if (this.userInfo.idType == '2') {
            this.userInfo.idType = ''
            this.$toast('请选择正确的证件类型')
          }
        }
      } else if (type == '1') {
        //证件起始日期
        //如果录入日期早于出生日期或晚于当前日期
        if (Date.parse(val) > Date.parse(new Date()) || Date.parse(val) < Date.parse(this.userInfo.birthday)) {
          this.userInfo.certificateValidate = ''
          this.$refs.certificateValidate.date = ''
          return this.$toast('证件起始日期填写错误')
        }
        // 计算年龄
        let certificateAge = utilsAge.getAge(val, new Date())
        let birthAge = utilsAge.getAge(this.userInfo.birthday, new Date())
        let age = birthAge - certificateAge
        // 长期按钮是否禁用
        this.effectiveDateTypeAble = age >= 16 && age <= 45
        // if(age < 45){
        //     this.userInfo.effectiveDateType = false
        // }
      } else {
        //证件截止日期
        //如果已经勾选了长期
        if (this.userInfo.effectiveDateType) {
          //清空数据并返回
          this.userInfo.certiexpiredate = ''
          this.$refs.certiexpiredate.date = ''
          return
        }
        //如果录入日期早于当前日期
        if (Date.parse(val) < Date.parse(new Date())) {
          this.userInfo.certiexpiredate = ''
          this.$refs.certiexpiredate.date = ''
          return this.$toast('您的证件已过期')
        }
      }
    },
    //长期状态改变时
    isEnd(val) {
      //勾选长期状态时,证件截止日期置空
      if (val) {
        this.userInfo.certiexpiredate = ''
        this.certiexpiredateRequired = false
        sessionStorage.setItem('isEnd', '9999-01-01')
      } else {
        this.certiexpiredateRequired = true
        sessionStorage.setItem('isEnd', '')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  font-weight: 600;
  border-bottom: 1px solid #ebedf0;
}
[class*='van-hairline']::after {
  border: none !important;
}
</style>