integrated_traffic_uniapp/pages/login/register/index.vue

<template>
	<view>
		<cu-custom bgColor="bg-gradual-blueness" :isBack="true" :backUrl="backUrl">
			<block slot="backText">返回</block>
			<block slot="content">从业人员注册</block>
		</cu-custom>
    <view class="top-fixed">
      <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
        <view class="flex text-center">
          <view class="cu-item flex-sub" :disabled="isFirst && index > 0" :class="index === TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect" :data-id="index">
            {{tabNav[index]}}
          </view>
        </view>
      </scroll-view>
      <view class="line"></view>
    </view>

    <block v-if="TabCur==0">
      <scroll-view class="dy-scroll-nobg"  scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
        <Account ref="account" :formData="form" @confirm="goToNext($event,1)"></Account>
      </scroll-view>
    </block>

    <block v-if="TabCur==1">
      <scroll-view class="dy-scroll-nobg"  scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
        <base-info ref="baseInfo" :formData="form" @confirm="goToNext($event,2)"></base-info>
      </scroll-view>
    </block>

    <block v-if="TabCur==2">
      <scroll-view class="dy-scroll-nobg"  scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
        <Certificate ref="certificate" :formData="form" :fileData="fileData" @confirm="goToNext($event,3)"></Certificate>
      </scroll-view>
    </block>

    <block v-if="TabCur==3">
      <scroll-view class="dy-scroll-nobg"  scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
        <apply ref="apply" :formData="form" :buttonloading="buttonloading" @confirm="submitRegister($event)"></apply>
      </scroll-view>
    </block>
	</view>
</template>

<script>
  import {
    basePath, validateIdCard, validateMobile
  } from '../../../common/tool.js';
  import Account from "./account.vue"
  import BaseInfo from "./baseInfo.vue"
  import Certificate from "./certificate.vue"
  import Apply from "./apply.vue"
  export default {
    components: {
      Account, BaseInfo, Certificate, Apply
    },
		data() {
			return {
        backUrl: 'returnLogin',
        isFirst: true,
        noClick: true,
        buttonloading: false,
        sTop:0,
        totalHeight:0,
        TabCur: 0,
        scrollLeft: 0,
        tabNav: ['注册信息', '基础信息', '资格证照', '入职申请'],
        fileData: {
          // 身份证正面
          idCardFront: [],
          // 身份证正面
          idCardBack: [],
          // 驾驶证
          driverLicense: [],
          // 道路运输从业人员从业资格证
          qualificationCertificate: [],
        },
        form: {
          USER_ID: '',
          // 姓名
          NAME: '',
          // 身份证号
          USER_ID_CARD: '',
          // 手机号码
          PHONE: '',
          // 生日
          DATE_OF_BIRTH: '',
          // 性别
          SEX: '',
          SEXNAME: '',

          //人员类型
          PERSONNEL_TYPE: '',
          PERSONNEL_TYPENAME: '',
          // 政治面貌
          POLITICAL_OUTLOOK: '',
          POLITICAL_OUTLOOKNAME: '',
          //文化程度
          DEGREE_OF_EDUCATION: '',
          DEGREE_OF_EDUCATIONNAME: '',
          //参加工作日期
          WORKING_DATE: '',
          // 身份证照片
          ID_CARD_FRONT: '',
          ID_CARD_BACK: '',
          // 身份证有效期
          ID_CARD_VALIDITY_START: '',
          ID_CARD_VALIDITY_END: '',
          // 身份证住址
          ID_CARD_ADDRESS: '',
          // 身份证签发机关
          ID_CARD_ORGAN: '',
          // 民族
          NATION: '',
          NATIONNAME: '',

          // 驾驶证照片
          DRIVER_LICENSE: '',
          // 驾驶证号
          DRIVER_LICENSE_NO: '',
          // 准驾车型
          DRIVING_MODEL: [],
          // 国籍
          DRIVING_NATIONALITY: '',
          // 初次领证日期
          DRIVER_LICENSE_ISSUE_DATE: '',
          // 驾驶证有效期（起始）
          DRIVER_LICENSE_VALIDITY_START: '',
          // 驾驶证有效期（截止）
          DRIVER_LICENSE_VALIDITY_END: '',
          // 驾驶证签发机关
          DRIVER_LICENSE_ORGAN: '',

          // 道路运输从业人员从业资格证照片
          QUALIFICATION_CERTIFICATE: '',
          // 道路运输从业人员从业资格证号
          QUALIFICATION_CERTIFICATE_NO: '',
          // 从业资格类别
          QUALIFICATION_CERTIFICATE_CATEGORY: [],
          // 道路运输从业人员从业资格证号
          QUALIFICATION_CERTIFICATE_NATIONALITY: '',
          // 初次领证日期
          QUALIFICATION_CERTIFICATE_ISSUE_DATE: '',
          // 从业资格证有效期（起始）
          QUALIFICATION_CERTIFICATE_VALIDITY_START: '',
          // 从业资格证有效期（截止）
          QUALIFICATION_CERTIFICATE_VALIDITY_END: '',
          // 道路运输从业人员从业资格证签发机关
          QUALIFICATION_CERTIFICATE_ORGAN: '',

          //申请入职企业
          APPLY_CORP: '',

          ROLE_ID: '',
          CARDNO: '',
          DEPARTMENT_ID: '',
          POST_ID: '',
          USERNAME: '',
          SORT: '',
          EMAIL: '',
          SHIFTDUTYONE: '',
          SHIFTDUTYTWO: '',
          periodStr: '',
          BZ: '',
          IS_SAFETY: 0,
          ISHEAD: '0',
          ISLEADER: '0',
          ISSTUDENT: 'true',
          DUTIES: '',
          TITLE: '',
          TYPE_OF_WORK: '',
          INCUMBENCY: '',
          faceFile: [],
          userCerFile: [],

          //入职日期
          ENTRY_DATE: '',

          //健康状况
          HEALTH: '',

          //主要工作经历
          WORK_EXPERIENCE: '',

          //入职前接受安全培训和考核以及取得安全培训有关的岗位证书等情况
          CERTIFICATES: '',

          //入职前受过何种有关安全生产的处罚以及是否受到刑事处罚
          PUNISH: '',
        }
			}
		},
    onReady() {
      let that=this;
      let CustomBar = this.CustomBar;
      uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
        success(res) { //成功回调函数
          let titleH=uni.createSelectorQuery().select(".top-fixed"); //想要获取高度的元素名（class/id）
          titleH.boundingClientRect(data=>{
            that._data.sTop=data.height  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
            that.totalHeight = data.height+CustomBar
          }).exec()
        }
      })
    },
		methods: {
      tabSelect(e) {
        if (this.isFirst) {
          uni.showToast({
            icon: 'none',
            title: '请先完成注册信息填写，然后点击下一步',
            duration: 2000
          });
          return false;
        } else {
          this.TabCur = e.currentTarget.dataset.id;
          this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
        }
      },
			//跳转事件
			goToNext(e, tabCur) {
        this.TabCur = tabCur
        this.isFirst = false
			},
      submitRegister() {
        if (this.validateData()) {
          uni.showLoading({
            title:"数据提交中..."
          });//加载中动画
          var _this = this

          const formData={}
          Object.keys(this.form).map(key => {
            formData[key]=this.form[key]
          })
          // 准驾车型
          formData.DRIVING_MODEL = formData.DRIVING_MODEL.join(",")
          // 从业资格类别
          formData.QUALIFICATION_CERTIFICATE_CATEGORY = formData.QUALIFICATION_CERTIFICATE_CATEGORY.join(",")

          var files = [];
          var img = {}
          img.name = 'file0'
          img.uri = this.fileData.idCardFront[0].filePath
          files.push(img)
          img = {}
          img.name = 'file1'
          img.uri = this.fileData.idCardBack[0].filePath
          files.push(img)
          img = {}
          img.name = 'file2'
          img.uri = this.fileData.driverLicense[0].filePath
          files.push(img)
          img = {}
          img.name = 'file3'
          img.uri = this.fileData.qualificationCertificate[0].filePath
          files.push(img)

          console.log(formData)
          uni.uploadFile({
            url: basePath+'app/user/setPractitionerRegister',
            files: files,
            formData:formData,
            success: (res) => {
              this.buttonloading = false
              uni.hideLoading();//结束加载中动画
              uni.showToast({
                icon:'none',
                title: '注册成功',
                duration: 2000
              });

              uni.navigateTo({
                url: '/pages/login/home',
              });
            },
            fail: (err) => {
              this.buttonloading = false
              uni.hideLoading();
              uni.showModal({
                content: err.errMsg,
                showCancel: false
              });
            }
          })
        }
      },
      validateData() {
        // 姓名
        if (!this.form.NAME) {
          uni.showToast({
            icon: 'none',
            title: '请输入人员姓名',
            duration: 2000
          });
          return false;
        }
        // 身份证号
        if (!this.form.USER_ID_CARD) {
          uni.showToast({
            icon: 'none',
            title: '请输入身份证号',
            duration: 2000
          });
          return false;
        }
        else if (!validateIdCard(this.form.USER_ID_CARD)) {
          uni.showToast({
            icon: 'none',
            title: '请输入有效的身份证号',
            duration: 2000
          });
          return false;
        }
        // 手机号码
        if (!this.form.PHONE) {
          uni.showToast({
            icon: 'none',
            title: '请输入手机号码',
            duration: 2000
          });
          return false;
        }
        else if (!validateMobile(this.form.PHONE)) {
          uni.showToast({
            icon: 'none',
            title: '请输入有效的手机号码',
            duration: 2000
          });
          return false;
        }
        // 人员类型
        if (!this.form.PERSONNEL_TYPE) {
          uni.showToast({
            icon: 'none',
            title: '请选择人员类型',
            duration: 2000
          });
          return false;
        }

        // 身份证
        if (this.fileData.idCardFront.length < 1) {
          uni.showToast({
            icon: 'none',
            title: '请上传身份证照片（正面）',
            duration: 2000
          });
          return false;
        }
        if (this.fileData.idCardBack.length < 1) {
          uni.showToast({
            icon: 'none',
            title: '请上传身份证照片（背面）',
            duration: 2000
          });
          return false;
        }
        if (!this.form.DATE_OF_BIRTH) {
          uni.showToast({
            icon: 'none',
            title: '请选择生日',
            duration: 2000
          });
          return false;
        }
        if (!this.form.NATION) {
          uni.showToast({
            icon: 'none',
            title: '请选择民族',
            duration: 2000
          });
          return false;
        }
        if (!this.form.SEX) {
          uni.showToast({
            icon: 'none',
            title: '请选择性别',
            duration: 2000
          });
          return false;
        }
        if (!this.form.ID_CARD_VALIDITY_START || !this.form.ID_CARD_VALIDITY_END) {
          uni.showToast({
            icon: 'none',
            title: '请选择身份证有效期时间',
            duration: 2000
          });
          return false;
        }
        if (!this.form.ID_CARD_ADDRESS) {
          uni.showToast({
            icon: 'none',
            title: '请输入住址信息',
            duration: 2000
          });
          return false;
        }
        if (!this.form.ID_CARD_ORGAN) {
          uni.showToast({
            icon: 'none',
            title: '请输入身份证的签发机关',
            duration: 2000
          });
          return false;
        }

        // 驾驶证
        if (this.fileData.driverLicense.length < 1) {
          uni.showToast({
            icon: 'none',
            title: '请上传驾驶证照片',
            duration: 2000
          });
          return false;
        }
        if (!this.form.DRIVER_LICENSE_NO) {
          uni.showToast({
            icon: 'none',
            title: '请输入驾驶证号',
            duration: 2000
          });
          return false;
        }
        if (this.form.DRIVING_MODEL.length < 1) {
          uni.showToast({
            icon: 'none',
            title: '请选择准驾车型',
            duration: 2000
          });
          return false;
        }
        if (!this.form.DRIVER_LICENSE_ISSUE_DATE) {
          uni.showToast({
            icon: 'none',
            title: '请选择初次领证日期',
            duration: 2000
          });
          return false;
        }
        if (!this.form.DRIVER_LICENSE_VALIDITY_START || !this.form.DRIVER_LICENSE_VALIDITY_END) {
          uni.showToast({
            icon: 'none',
            title: '请选择驾驶证有效期时间',
            duration: 2000
          });
          return false;
        }
        if (!this.form.DRIVER_LICENSE_ORGAN) {
          uni.showToast({
            icon: 'none',
            title: '请输入驾驶证的签发机关',
            duration: 2000
          });
          return false;
        }

        // 从业资格证证
        if (this.fileData.qualificationCertificate.length < 1) {
          uni.showToast({
            icon: 'none',
            title: '请上传从业资格证照片',
            duration: 2000
          });
          return false;
        }
        if (!this.form.QUALIFICATION_CERTIFICATE_NO) {
          uni.showToast({
            icon: 'none',
            title: '请输入从业资格证号',
            duration: 2000
          });
          return false;
        }
        if (this.form.QUALIFICATION_CERTIFICATE_CATEGORY.length < 1) {
          uni.showToast({
            icon: 'none',
            title: '请选择从业资格证类别',
            duration: 2000
          });
          return false;
        }
        if (!this.form.QUALIFICATION_CERTIFICATE_ISSUE_DATE) {
          uni.showToast({
            icon: 'none',
            title: '请选择初次领证日期',
            duration: 2000
          });
          return false;
        }
        if (!this.form.QUALIFICATION_CERTIFICATE_VALIDITY_START || !this.form.QUALIFICATION_CERTIFICATE_VALIDITY_END) {
          uni.showToast({
            icon: 'none',
            title: '请选择从业资格证有效期时间',
            duration: 2000
          });
          return false;
        }
        if (!this.form.QUALIFICATION_CERTIFICATE_ORGAN) {
          uni.showToast({
            icon: 'none',
            title: '请输入从业资格证的签发机关',
            duration: 2000
          });
          return false;
        }
        if (!this.form.APPLY_CORP) {
          uni.showToast({
            icon: 'none',
            title: '请选择入职企业',
            duration: 2000
          });
          return false;
        }
        return true;
      }
		}
	}
</script>

<style>
	page{
		background-color: #f3f2f2;
	}
  .prevent {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  .cu-form-title{
    padding: 20upx 0;
  }
  .cu-form-textarea{
    background-color: #ffffff;
    padding: 1upx 30upx 20upx;
    min-height: 100upx;
  }
  .cu-form-textarea textarea {
    height: 4.6em;
    width: 100%;
    line-height: 1.2em;
    flex: 1;
    font-size: 28upx;
    padding: 0;
  }
  .selected{
    display: flex;
    align-items: center;
    height: 100upx;
  }
  .selected .radio{
    transform:scale(0.8);
    margin-right: 10upx;
  }
  .group{
    display: flex;
    align-items: center;
  }
  .cu-form-group .title{
    font-size: 28upx;
    font-weight: bold;
  }
  .cu-bar .action:first-child {
    font-size: 28upx;
  }
  .cu-form-group .picker{
    color: #808080;
  }
  .picker-tree{
    color: #808080;
  }
</style>