integrated_traffic_uniapp/pages/basics/basic-info/components/account.vue

<template>
	<view>
<!--		<cu-custom bgColor="bg-gradual-blueness" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">从业人员注册</block>
		</cu-custom>-->
    <scroll-view scroll-y="false" >
		  <view class="form">
        <view class="cu-form-group">
          <view class="title is-required">身份证号</view>
          <input v-model="formData.USER_ID_CARD" disabled placeholder="请输入身份证号" maxlength="18" name="input" style="color:#cccccc" />
        </view>
        <view class="cu-form-group margin-top-xs">
          <view class="title is-required">姓名</view>
          <input v-model="formData.NAME" :disabled="forbidEdit" placeholder="请输入姓名" maxlength="50" name="input" :style="'color:' + colorValue + ';'" />
        </view>
        <view class="cu-form-group margin-top-xs">
          <view class="title is-required">手机</view>
          <input v-model="formData.PHONE" :disabled="forbidEdit" placeholder="请输入手机号码" maxlength="11" name="input" :style="'color:' + colorValue + ';'" />
        </view>
        <view v-if="forbidEdit && formData.CORPINFO_ID" class="cu-form-group margin-top-xs">
          <view class="title">服务单位</view>
          <input v-model="formData.CORP_NAME" :disabled="forbidEdit" placeholder="请输入服务单位" name="input" :style="'color:' + colorValue + ';'" />
        </view>
      </view>
      <view class="cu-bar btn-group" style="margin-top: 30upx;">
        <button v-if="!forbidEdit" class="cu-btn bg-blue margin-tb-sm lg" @click="$noMultipleClicks(confirmAccount)">下一步</button>
        <button v-if="forbidEdit && applyStatus !== '0'" class="cu-btn bg-blue margin-tb-sm lg" @click="goEdit">编辑</button>
<!--        <button class="cu-btn bg-green margin-tb-sm lg" @click="$noMultipleClicks(goback)">返回</button>-->
      </view>
    </scroll-view>
	</view>
</template>

<script>
import {
  validateIdCard,validateMobile
} from '../../../../common/tool.js';
	export default {
    name: "register_account",
    props: {
      applyStatus: {
        type: String,
        default: ''
      },
      forbidEdit: {
        type: Boolean,
        default: true
      },
      colorValue: {
        type: String,
        default: "#cccccc"
      },
      formData: {
        type: Object,
        default: function() {
          return {}
        }
      }
    },
		data() {
			return {
        noClick: true,
			}
		},
    mounted() {
    },
    methods: {
			//跳转事件
			confirmAccount(e) {
        if (this.validateData()) {
          const org_birthday = this.formData.USER_ID_CARD.substring(6, 14);
          const org_gender = this.formData.USER_ID_CARD.substring(16, 17);
          const birthday =
              org_birthday.substring(0, 4) +
              "-" +
              org_birthday.substring(4, 6) +
              "-" +
              org_birthday.substring(6, 8);
          const birthdays = new Date(birthday.replace(/-/g, "/"));
          const Month = birthdays.getMonth() + 1;
          let MonthDate;
          const DayDate = birthdays.getDate();
          let Day;
          if (Month < 10) MonthDate = "0" + Month;
          else MonthDate = Month;
          if (DayDate < 10) Day = "0" + DayDate;
          else Day = DayDate;
          this.formData.SEX = org_gender % 2 === 1 ? "1" : "0";
          this.formData.DATE_OF_BIRTH = birthdays.getFullYear() + "-" + MonthDate + "-" + Day;
          this.formData.DRIVER_LICENSE_NO = this.formData.USER_ID_CARD
          this.formData.QUALIFICATION_CERTIFICATE_NO = this.formData.USER_ID_CARD
          // uni.navigateTo({
          //   url: '/pages/login/register/baseInfo?'
          //       +'NAME='+encodeURIComponent(JSON.stringify(this.formData.NAME.replace('%','%25')))
          //       +'&USER_ID_CARD='+ encodeURIComponent(JSON.stringify(this.formData.USER_ID_CARD))
          //       +'&PHONE='+ encodeURIComponent(JSON.stringify(this.formData.PHONE))
          //       +'&DATE_OF_BIRTH='+ encodeURIComponent(JSON.stringify(this.formData.DATE_OF_BIRTH))
          //       +'&SEX='+ encodeURIComponent(JSON.stringify(this.formData.SEX))
          // });
          this.$emit("confirm", '');
        }
			},
      goEdit(){
        this.$emit("goEdit", false);
      },
      goback(){
        var pages = getCurrentPages();	// 获取当前页面栈
        var prePage = pages[pages.length - 2];	// 上二级页面
        prePage.$vm.initflag = true;    // A 页面 init方法 为true
        uni.navigateBack({delta: 1});
        uni.hideLoading();
      },
      validateData() {
        // 姓名
        if (!this.formData.NAME) {
          uni.showToast({
            icon: 'none',
            title: '请输入人员姓名',
            duration: 2000
          });
          return false;
        }
        // 身份证号
        if (!this.formData.USER_ID_CARD) {
          uni.showToast({
            icon: 'none',
            title: '请输入身份证号',
            duration: 2000
          });
          return false;
        }
        else if (!validateIdCard(this.formData.USER_ID_CARD)) {
          uni.showToast({
            icon: 'none',
            title: '请输入有效的身份证号',
            duration: 2000
          });
          return false;
        }
        // 手机号码
        if (!this.formData.PHONE) {
          uni.showToast({
            icon: 'none',
            title: '请输入手机号码',
            duration: 2000
          });
          return false;
        }
        else if (!validateMobile(this.formData.PHONE)) {
          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>