ebiz-h5/src/views/ebiz/agentEenter/AgentEenterBasicInfor.vue

<template>
  <div class="insured-info-container pb50 ">
    <!-- 基本信息 -->
    <van-cell-group>
      <RsTop :active="['1']"></RsTop>
      <p style="border-bottom: 1px solid #ebedf0" class=" fs15 fwb pl10 pv12">基本信息</p>
      <van-field v-model="userInfo.name" label="姓名" name="姓名" placeholder="请输入" v-validate="'required|name'" maxlength="6" required clearable />
      <select-radio :radios="sexRadio" label="性别" name="性别" v-validate="'required'" required :value.sync="userInfo.sex"></select-radio>
      <FieldDatePicter
        v-validate="'required'"
        label="出生日期"
        name="出生日期"
        :value.sync="userInfo.birthday"
        type="date"
        :flag="true"
        @confirm="onDateConfirm($event, '2')"
        ref="birthday"
        :maxDate="maxDate"
        required
      ></FieldDatePicter>
      <van-field
        :value="userInfo.nativePlace | idToText('rsnativePlace')"
        label="籍贯"
        name="籍贯"
        v-validate="'required'"
        readonly
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('14')"
        required
      />
      <van-field
        :value="userInfo.ethnic | idToText('nationType')"
        label="民族"
        name="民族"
        v-validate="'required'"
        readonly
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('1')"
        required
      />
      <!-- <van-field :value="census" label="户籍" name="户籍" v-validate="'required'" right-icon="arrow" placeholder="请选择" @click="censusShow = true" /> -->
      <!-- <van-field v-model="userInfo.homeProvince" label="户口所在地" name="户口所在地" v-validate="'required'" placeholder="请输入" /> -->
      <van-field
        :value="userInfo.rgtAddress | idToText('rsnativePlace')"
        label="户口所在地"
        name="户口所在地"
        v-validate="'required'"
        readonly
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('10')"
        maxlength="20"
        required
      />
      <!-- <van-field v-model="userInfo.title" label="职称" name="职称" v-validate="'required'" placeholder="请输入" required /> -->
      <van-field v-model="userInfo.title" label="职称" name="职称" placeholder="请输入" />
      <!-- <van-field
        :value="userInfo.health | idToText('rshealthCondition')"
        label="健康状况"
        name="健康状况"
        v-validate="'required'"
        readonly
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('3')"
      /> -->
      <van-field
        :value="userInfo.marriage | idToText('rsmarriage')"
        label="婚姻状况"
        name="婚姻状况"
        v-validate="'required'"
        readonly
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('4')"
        required
      />
      <van-field
        :value="userInfo.political | idToText('rspoliticsStatus')"
        label="政治面貌"
        name="政治面貌"
        v-validate="'required'"
        readonly
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('5')"
        required
      />
      <van-field
        :value="userInfo.degree | idToText('rsdegree')"
        label="学历"
        name="学历"
        v-validate="'required'"
        readonly
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('6')"
        required
      />
      <van-field v-model="userInfo.school" label="毕业院校" name="毕业院校" placeholder="请输入" v-validate="'required'" clearable required />
      <van-field
        v-model="userInfo.discipline"
        label="所学专业"
        name="所学专业"
        placeholder="请输入"
        v-validate="Number(userInfo.degree) <= 4 || Number(userInfo.degree) == 10 || Number(userInfo.degree) == 11 ? 'required' : ''"
        clearable
      />
      <!-- <van-field v-model="userInfo.discipline" label="所学专业" name="所学专业" placeholder="请输入" v-validate="'required'" required clearable /> -->
      <van-field v-model="userInfo.mobile" label="手机" name="手机" required readonly />
      <van-field :value="userInfo.idType | idToText('idType')" v-validate="'required'" label="证件类型" name="证件类型" required readonly />
      <!-- <van-field v-model="userInfo.idNo" v-validate="'required|idNo'" maxlength="18" label="证件号码" name="证件号码" placeholder="请输入" clearable> -->
      <van-field v-model="userInfo.idNo" label="证件号码" readonly>
        <!-- <van-button v-if="userInfo.idType == 1" slot="button" size="small" type="danger" round @click="selectClick('3')">证件扫描</van-button> -->
      </van-field>
      <van-field v-model="userInfo.address" label="联系地址" name="联系地址" placeholder="请输入" v-validate="'required'" required clearable />
      <!-- <van-field v-model="userInfo.zip" label="邮政编码" name="邮政编码" placeholder="请输入" v-validate="'required|zipCode'" required clearable /> -->
      <van-field v-model="userInfo.zip" label="邮政编码" name="邮政编码" placeholder="请输入" clearable />
      <van-field :value="userInfo.bankName" label="开户银行" name="开户银行" v-validate="'required'" required readonly />
      <!-- @click="focus"
        right-icon="arrow"
        data-vv-name="开户银行" -->

      <!-- <van-field v-model="userInfo.bankName" label="开户银行" name="开户银行" placeholder="请输入" v-validate="'required'" /> -->
      <!-- <van-field v-model="bank" label="开户银行" placeholder="请选择" required @click="focus" v-validate="'required'" data-vv-name="开户银行" /> -->

      <van-field v-model="userInfo.bankAddress" label="开户地" name="开户地" placeholder="请输入" v-validate="'required'" required clearable />
      <van-field v-model="userInfo.accountName" label="开户姓名" name="开户姓名" placeholder="请输入" v-validate="'required'" required clearable />
      <van-field
        v-model="userInfo.bankCode"
        maxlength="19"
        label="银行卡号"
        name="银行卡号"
        placeholder="请输入"
        required
        clearable
        v-validate="'required|bankCard'"
      >
        <van-button slot="button" size="small" type="danger" round @click="cardScanning('0')">银行卡扫描</van-button>
      </van-field>
      <van-field
        v-model="userInfo.perationPeriod"
        type="digit"
        label="从业年限"
        name="从业年限"
        placeholder="请输入整数"
        v-validate="'onlyInteger'"
        required
        clearable
      />
      <van-field v-model="userInfo.oldCompany" label="原工作单位" name="原工作单位" placeholder="请输入" required v-validate="'required'" clearable />
      <van-field
        :value="userInfo.oldOccupation | idToText('oldOccupation')"
        label="原职业"
        name="原职业"
        v-validate="'required'"
        readonly
        required
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('11')"
      />
      <van-field
        :value="userInfo.sameTrade | idToText('rshealthCondition')"
        label="是否同业"
        name="是否同业"
        v-validate="'required'"
        readonly
        required
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('3')"
      />
      <van-field
        :value="userInfo.nationality | idToText('rsnativeplace')"
        label="国籍/地区"
        name="国籍/地区"
        v-validate="'required'"
        readonly
        required
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('12')"
      />
      <van-field
        :value="userInfo.foreigners | idToText('rshealthCondition')"
        label="是否境外人员"
        name="是否境外人员"
        v-validate="'required'"
        readonly
        required
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('15')"
      />
      <van-field
        :value="userInfo.applGrade | idToText('applGrade')"
        right-icon="arrow"
        placeholder="请选择"
        @click="toSelect('13')"
        label="职级"
        name="职级"
        readonly
        required
        v-validate="'required'"
      />
    </van-cell-group>
    <van-cell-group class="" :border="false">
      <p style=" border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 mt10 pv12">推荐人信息</p>
      <van-field class="referrerW" v-model="ebiz_referrer.referCode" label="推荐人编号" name="推荐人编号" readonly />
      <van-field class="referrerW" v-model="ebiz_referrer.referName" label="推荐人姓名" name="推荐人姓名" readonly />
      <van-field class="referrerW" v-model="ebiz_referrer.teamManger" label="营业组主管代码" name="营业组主管代码" readonly />
      <van-field class="referrerW" v-model="ebiz_referrer.teamMangerName" label="营业组主管姓名" name="营业组主管姓名" readonly />
      <van-field class="referrerW" v-model="ebiz_referrer.officeManger" label="营业部经理代码" name="营业部经理代码" readonly />
      <van-field class="referrerW" v-model="ebiz_referrer.officeMangerName" label="营业部经理姓名" name="营业部经理姓名" readonly />
      <van-field class="referrerW" v-model="ebiz_referrer.areaManger" label=" 营业区经理代码" name=" 营业区经理代码" readonly />
      <van-field class="referrerW" v-model="ebiz_referrer.areaMangerName" label="营业区经理姓名" name="营业区经理姓名" readonly />
    </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="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="censusShow = false" />
    </van-popup>
    <!--身份证扫描 -->
    <van-popup v-model="isScan" position="bottom">
      <IdentityCardScan @getScanInfo="getIdentityInfo"></IdentityCardScan>
    </van-popup>
    <!--身份证扫描 -->
    <van-popup v-model="isScan" style="height:100vh" position="bottom">
      <BankCardScan :scanShow="isScan" @getScanInfo="getBankCardInfo" :clear="isClear"></BankCardScan>
    </van-popup>
    <!-- 开户银行选择 -->
    <van-popup v-model="show" position="bottom" style="height:400px">
      <van-list>
        <van-cell v-for="item in bankList" :key="item.code" :title="item.bankName" class="text-center" @click="clickList(item.bankName, item.code)" />
      </van-list>
    </van-popup>
  </div>
</template>
<script>
import { Field, CellGroup, Checkbox, Popup, Picker, Area, RadioGroup, Radio, List, Cell } from 'vant'
import SelectRadio from '@/components/ebiz/SelectRadio'
import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
import OccupationPicker from '@/components/ebiz/occipation/OccupationPicker'
import CustomerPicker from '@/components/ebiz/customer/CustomerPicker'
import BankCardScan from '@/components/ebiz/sale/BankCardScan'
import areaList from '@/assets/js/utils/area'
import DataDictionary from '@/assets/js/utils/data-dictionary'
import IdentityCardScan from '@/components/ebiz/sale/IdentityCardScan'
import beforeDate from '@/assets/js/utils/getBeforeDate.js'
import { getBankList } from '@/api/ebiz/sale/sale'
import RsTop from '@/components/ebiz/agentEenter/RsTop'
import { saveOrUpdateInfo, agentAll } from '@/api/ebiz/agentEenter/agentEenter.js'
import { idToData } from '@/views/ebiz/customer/js/verification'
import {
  selectComp,
  appCallBack,
  chooseOccupation,
  toSelect,
  onConfirm,
  onDateConfirm,
  chooseCustomer,
  sureArea,
  getIdentityInfo,
  getCode,
  effectiveDataTypeChange
} from './js/methods'

export default {
  name: 'insuredInfo',
  components: {
    [SelectRadio.name]: SelectRadio,
    [FieldDatePicter.name]: FieldDatePicter,
    [OccupationPicker.name]: OccupationPicker,
    [CustomerPicker.name]: CustomerPicker,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Checkbox.name]: Checkbox,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Area.name]: Area,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [IdentityCardScan.name]: IdentityCardScan,
    [RsTop.name]: RsTop,
    BankCardScan,
    [List.name]: List,
    [Cell.name]: Cell
  },
  data() {
    return {
      isScan: false, //是否显示证件扫描组件
      //是否清空
      isClear: false,
      // 银行列表弹框
      show: false,
      // 银行卡列表
      bankList: [],
      sexRadio: [
        {
          label: '男',
          value: '0'
        },
        {
          label: '女',
          value: '1'
        }
      ],
      medicalRadio: [
        {
          label: '有',
          value: '0'
        },
        {
          label: '无',
          value: '1'
        }
      ],
      maxDate: beforeDate.getBeforeYear(16),
      codeDisabled: false, //获取验证码按钮是否禁用
      countDown: 60, //倒计时
      certiexpiredateRequired: true, //证件截止日期是否需要校验
      popupShow: false,
      areaShow: false, //省级联动
      homeShow: false,
      censusShow: false, //户籍联动
      pickerType: undefined,
      columns: [],
      valueKey: 'text',
      census: '', //户籍
      // areaName: '', //单位地址
      // homeName: '', //家庭地址
      companyDefault: false, //设置公司地址为默认地址
      homeDefault: false, //设置家庭地址为默认地址
      setDefaultAddress: false, //设为联系地址
      sessionId: '', //后台返回的 id
      effectiveDateTypeAble: false, //长期按钮是否禁用
      userInfo: {
        name: '', //姓名
        sex: '0', //性别
        age: '', // 年龄
        birthday: '', // 手机
        mobile: '', //移动电话
        nativePlace: '', //籍贯
        ethnic: '', //民族
        // homeProvince: '', //家庭省
        health: '', //健康状况
        marriage: '', //婚姻状况
        political: '', //政治面貌
        degree: '', //学历
        school: '', // 学校
        discipline: '', // 专业
        // homePhone: '', //家庭电话
        idType: '1', //证件类型
        idNo: '', //证件号码
        dateStart: '', //证件起始日期
        dateEnd: '', //证件到期时间
        email: '', //电子邮箱
        zip: '', //邮编
        address: '', //现住址
        bankProvince: '', // 开户省
        bankCity: '', // 开户市
        bankName: '工商银行', // 开户银行
        // 银行卡号
        bankCode: '',
        rgtAddress: '', //户口所在地
        title: '', //职称
        accountName: '', //开户姓名
        perationPeriod: '', //从业年限
        oldCompany: '', //原工作单位
        oldOccupation: '', //原职业
        sameTrade: '', //是否同业
        nationality: 'CHN', //国籍/地区
        foreigners: '', //是否境外人员
        applGrade: '' //职级
      },
      areaList: areaList,
      currentPopupIndex: '',
      customerShowPicker: false,
      occupationShowPicker: false,
      timeId: null,
      ebiz_referrer: {
        referCode: '--',
        referName: '--',
        teamCode: '--',
        teamName: '--',
        officeCode: '--',
        officeName: '--',
        areaCode: '--',
        areaName: '--'
      }
    }
  },
  mounted() {
    // 筛选按钮的点击事件
    // window.appCallBack = this.appCallBack
    window.appCallBack = this.appCallBack
    this.agentAll()
    // // 获取银行卡
    // this.getBankList()
  },
  methods: {
    //获取推荐人信息
    agentAll() {
      let data = {
        // userModel: { mobile: 13000000000 } //线上去掉
      }
      let that = this
      that.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '加载中……'
      })
      agentAll(data).then(res => {
        if (res.result == '0') {
          that.$toast.clear()
          this.userInfo = res.content.ebizEnterCustomerDto
          this.ebiz_referrer = res.content.ebizReferrerDto
          if (this.userInfo.idType == '1') {
            this.effectiveDateTypeAble = idToData(this.userInfo.idNo).age < 45
            this.userInfo.birthday = idToData(this.userInfo.idNo).birthday
            this.userInfo.age = idToData(this.userInfo.idNo).age
            this.userInfo.sex = idToData(this.userInfo.idNo).sex
          }
          this.userInfo.bankName = '工商银行'
          this.userInfo.nationality = 'CHN'
        }
      })
    },
    // 获取银行卡列表
    getBankList() {
      let self = this
      let data = {
        operateType: 'enter_bank_type'
      }
      getBankList(data).then(res => {
        if (res.result == '0') {
          console.log('银行卡列表', res.content)
          self.bankList = res.content
        } else {
          this.$toast(res.resultMessage)
        }
      })
    },
    // 选择银行卡
    clickList(item, bankCode) {
      console.log('英航卡', item, bankCode)
      let that = this
      // that.userInfo.bankName = item
      // // that.userInfo.bankCode = bankCode
      // that.show = false
    },
    // 获取银行列表的focus
    focus() {
      let that = this
      that.show = true
    },
    //监听名字变化
    nameChange(name) {
      this.userInfo.name = name
    },
    selectClick(index) {
      selectComp(this, index, '1')
    },

    chooseOccupation() {
      chooseOccupation(this, '1')
    },
    //弹框选择
    toSelect(pickerType, valueKey) {
      console.log(pickerType)
      toSelect(this, pickerType, valueKey, '1')
    },
    //确认选择字段
    onConfirm(value) {
      onConfirm(this, value, '1')
    },
    //证件起始截止日期
    onDateConfirm(val, type) {
      onDateConfirm(this, val, type)
    },
    //选择客户
    chooseCustomer(data) {
      chooseCustomer(this, data, '1')
    },
    // 点击下一步
    nextStep() {
      this.$validator.validate().then(valid => {
        if (valid == true) {
          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 (this.userInfo.name != this.userInfo.accountName) {
            return this.$toast('姓名与开户名要一致')
          }
          if (this.userInfo.bankName == '工商银行') {
            this.userInfo.bankName = '102'
          }
          if (Number(this.userInfo.degree) >= 6 && Number(this.userInfo.degree) <= 14 && Number(this.userInfo.degree) != 12) {
            return this.$toast('学历不符合入司条件')
          }
          console.log('this.userInfo.bankName', this.userInfo.bankName)
          let data = {
            entryType: 'CUSTOMER_BASE',
            // userModel: { mobile: 13000000000 }, //线上去掉
            ebizEnterCustomerDto: this.userInfo
          }
          this.$toast.loading({
            duration: 0, // 持续展示 toast
            forbidClick: true, // 禁用背景点击
            loadingType: 'spinner',
            message: '加载中……'
          })
          saveOrUpdateInfo(data).then(res => {
            if (res.result == '0') {
              this.$toast.clear()
              localStorage.agentSex = this.userInfo.sex
              this.$jump({
                flag: 'h5',
                extra: {
                  url: location.origin + `/#/agentEenter/AgentEnterGuarantor`
                },
                routerInfo: {
                  path: `/agentEenter/AgentEnterGuarantor`
                }
              })
            } else {
              this.$toast(res.resultMessage)
            }
          })
        } else {
          this.$toast(this.errors.all()[0])
        }
      })
    },
    //区域选择
    sureArea(area, type) {
      sureArea(this, area, type)
    },
    //设为联系地址
    setAddress(val) {
      //上面是0下面是1
      if (this.homeDefault) {
        this.userInfo.addressStatus = 1
      }
      if (this.companyDefault) {
        this.userInfo.addressStatus = 0
      }
    },
    //获取验证码
    getCode() {
      getCode(this, '1')
    },
    //证件扫描
    // goScan() {
    //   this.isScan = true
    // },
    //长期状态改变时
    effectiveDataTypeChange(val) {
      if (val) {
        this.userInfo.dateEnd = '9999-01-01'
      } else {
        this.userInfo.dateEnd = ''
      }
      effectiveDataTypeChange(this, val)
    },
    //获取身份证扫描信息
    getIdentityInfo(data) {
      getIdentityInfo(this, data, '1')
    },
    // 银行卡扫描
    cardScanning(cardScanningType) {
      window.localStorage.setItem('cardScanningType', cardScanningType)
      document.body.style.backgroundColor = '#F5F5F5'
      let title = ''
      this.isclear = false
      ;[this.isScan, 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'
        }
      })
      this.isScan = false
    },
    //获取银行卡扫描信息
    getBankCardInfo(data) {
      this.userInfo.bankCode = data.name

      this.$jump({
        flag: 'navigation',
        extra: {
          title: '入司基本信息',
          hiddenRight: '1'
        }
      })
      this.isScan = false
    }
    // //验证宅电
    // HomeMobile(value) {
    //   let res = /^((0\d{2,3}-\d{7,8})|(1\d{10}))$/.test(value)
    //   if (value != '' && !res) {
    //     this.userInfo.homePhone = ''
    //     return this.$toast('宅电输入有误')
    //   }
    // }
  },
  beforeDestroy() {
    //清理计时器
    window.clearInterval(this.timeId)
    this.timeId = null
    this.countDown = 60
    this.codeDisabled = false
  }
}
</script>
<style lang="scss" scoped>
.insured-info-container {
  /deep/.van-checkbox {
    margin-left: auto;
  }
  /deep/.van-radio {
    margin-left: auto;
  }
  .referrerW {
    /deep/.van-cell__title {
      width: 120px;
    }
  }
}
/deep/ .van-field__label {
  display: flex;
  align-items: center;
}
</style>