新增手机号验证,身份证验证,修复bug,优化选择逻辑

subpkg/newPersonnel/newPersonnel.vue

@@ -34,49 +34,53 @@
         </u-form-item> -->
         <view class="title">地区信息</view>
         <u-form-item label="省" required prop="province" @click="changeCity('province')" borderBottom>
-          <u--input :value="formDataText.province" placeholder="请选择省"></u--input>
+          <u--input :value="formDataText.province" disabled disabledColor="#fff" placeholder="请选择省"></u--input>
           <u-icon slot="right" name="arrow-right"></u-icon>
         </u-form-item>
         <u-form-item label="市" required prop="city" @click="changeCity('city')" borderBottom>
-          <u--input :value="formDataText.city" placeholder="请选择市"></u--input>
+          <u--input :value="formDataText.city" disabled disabledColor="#fff" placeholder="请选择市"></u--input>
           <u-icon slot="right" name="arrow-right"></u-icon>
         </u-form-item>
         <u-form-item label="区县" required prop="area" @click="changeCity('area')" borderBottom>
-          <u--input :value="formDataText.area" placeholder="请选择区县"></u--input>
+          <u--input :value="formDataText.area" disabled disabledColor="#fff" placeholder="请选择区县"></u--input>
           <u-icon slot="right" name="arrow-right"></u-icon>
         </u-form-item>
         <u-form-item label="镇" required prop="street" @click="changeCity('street')" borderBottom>
-          <u--input :value="formDataText.street" placeholder="请选择镇"></u--input>
+          <u--input :value="formDataText.street" disabled disabledColor="#fff" placeholder="请选择镇"></u--input>
           <u-icon slot="right" name="arrow-right"></u-icon>
         </u-form-item>
         <u-form-item label="村" required prop="village" @click="changeCity('village')" borderBottom>
-          <u--input :value="formDataText.village" placeholder="请选择村"></u--input>
+          <u--input :value="formDataText.village" disabled disabledColor="#fff" placeholder="请选择村"></u--input>
           <u-icon slot="right" name="arrow-right"></u-icon>
         </u-form-item>
         <u-form-item label="小队" required prop="brigade" @click="changeCity('brigade')" borderBottom>
-          <u--input :value="formDataText.brigade" placeholder="请选择小队"></u--input>
+          <u--input :value="formDataText.brigade" disabled disabledColor="#fff" placeholder="请选择小队"></u--input>
           <u-icon slot="right" name="arrow-right"></u-icon>
         </u-form-item>
         <view class="title">资质信息</view>
-        <u-form-item label="身份证正面" required labelPosition="top" labelWidth="200rpx" prop="qualification.id_card" borderBottom>
+        <u-form-item label="身份证正面" required labelPosition="top" labelWidth="200rpx" prop="qualification.id_card"
+          borderBottom>
           <u-upload :fileList="formData.qualification.id_card?[{url:formData.qualification.id_card}]:[]"
             @afterRead="afterRead" @delete="formData.qualification.id_card=''" name="id_card" :maxCount="1"
             width="638rpx" height="300rpx" style="margin-top: 10rpx;">
           </u-upload>
         </u-form-item>
-        <u-form-item label="身份证反面" required labelPosition="top" labelWidth="200rpx" prop="qualification.id_card_b" borderBottom>
+        <u-form-item label="身份证反面" required labelPosition="top" labelWidth="200rpx" prop="qualification.id_card_b"
+          borderBottom>
           <u-upload :fileList="formData.qualification.id_card_b?[{url:formData.qualification.id_card_b}]:[]"
             @afterRead="afterRead" @delete="formData.qualification.id_card_b=''" name="id_card_b" :maxCount="1"
             width="638rpx" height="300rpx" style="margin-top: 10rpx;">
           </u-upload>
         </u-form-item>
-        <u-form-item label="驾驶证正面" required labelPosition="top" labelWidth="200rpx" prop="qualification.car_card" borderBottom>
+        <u-form-item label="驾驶证正面" required labelPosition="top" labelWidth="200rpx" prop="qualification.car_card"
+          borderBottom>
           <u-upload :fileList="formData.qualification.car_card?[{url:formData.qualification.car_card}]:[]"
             @afterRead="afterRead" @delete="formData.qualification.car_card=''" name="car_card" :maxCount="1"
             width="638rpx" height="300rpx" style="margin-top: 10rpx;">
           </u-upload>
         </u-form-item>
-        <u-form-item label="驾驶证反面" required labelPosition="top" labelWidth="200rpx" prop="qualification.car_card_b" borderBottom>
+        <u-form-item label="驾驶证反面" required labelPosition="top" labelWidth="200rpx" prop="qualification.car_card_b"
+          borderBottom>
           <u-upload :fileList="formData.qualification.car_card_b?[{url:formData.qualification.car_card_b}]:[]"
             @afterRead="afterRead" @delete="formData.qualification.car_card_b=''" name="car_card_b" :maxCount="1"
             width="638rpx" height="300rpx" style="margin-top: 10rpx;">
@@ -148,107 +152,102 @@
         },
         rules: {
           account: {
-            type: 'string',
             required: true,
-            message: '不能为空',
-            trigger: ['blur']
+            pattern: /^(1[3456789]\d{9})$/,
+            message: '请输入正确的手机号码',
+            trigger: ['change', 'blur']
           },
           id_card: {
-            type: 'string',
             required: true,
-            message: '不能为空',
-            trigger: ['blur']
+            pattern: /^\d{17}[\dX]$|^\d{15}[\dX]$/,
+            message: '请输入正确的身份证号',
+            trigger: ['change', 'blur']
           },
           sex: {
-            type: 'string',
+            type: 'number',
             max: 1,
             required: true,
             message: '请选择男或女',
-            trigger: ['blur','change']
+            trigger: ['blur', 'change']
           },
           avatar: {
             type: 'string',
             required: true,
-            message: '不能为空',
-            trigger: ['blur']
+            message: '头像不能为空',
+            trigger: ['change', 'blur']
           },
           name: {
             type: 'string',
             required: true,
-            message: '不能为空',
-            trigger: ['blur']
+            message: '姓名不能为空',
+            trigger: ['change', 'blur']
           },
           province: {
-            type: 'string',
             required: true,
             message: '不能为空',
-            trigger: ['blur']
+            trigger: ['change', 'blur']
           },
           city: {
-            type: 'string',
             required: true,
             message: '不能为空',
-            trigger: ['blur']
+            trigger: ['change', 'blur']
           },
           area: {
-            type: 'string',
             required: true,
             message: '不能为空',
-            trigger: ['blur']
+            trigger: ['change', 'blur']
           },
           street: {
-            type: 'string',
             required: true,
             message: '不能为空',
-            trigger: ['blur']
+            trigger: ['change', 'blur']
           },
           village: {
-            type: 'string',
             required: true,
             message: '不能为空',
-            trigger: ['blur']
+            trigger: ['change', 'blur']
           },
           brigade: {
-            type: 'string',
+            type: 'any',
             required: true,
             message: '不能为空',
-            trigger: ['blur']
+            trigger: ['change', 'blur']
           },
           'qualification.id_card': {
             type: 'string',
             required: true,
             message: '不能为空',
-            trigger: ['blur']
+            trigger: ['change', 'blur']
           },
           'qualification.id_card_b': {
             type: 'string',
             required: true,
             message: '不能为空',
-            trigger: ['blur']
+            trigger: ['change', 'blur']
           },
           'qualification.car_card': {
             type: 'string',
             required: true,
             message: '不能为空',
-            trigger: ['blur']
+            trigger: ['change', 'blur']
           },
           'qualification.car_card_b': {
             type: 'string',
             required: true,
             message: '不能为空',
-            trigger: ['blur']
+            trigger: ['change', 'blur']
           },
           'qualification.bank_account': {
             type: 'string',
             required: true,
             message: '不能为空',
-            trigger: ['blur']
+            trigger: ['change', 'blur']
           },
           'qualification.bank_account_b': {
             type: 'string',
             required: true,
             message: '不能为空',
-            trigger: ['blur']
+            trigger: ['change', 'blur']
           },
         },
         provinceList: [],
@@ -263,6 +262,10 @@
     onLoad() {
       this.initProvinceAndCity()
     },
+    onReady() {
+      //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
+      this.$refs.uForm.setRules(this.rules)
+    },
     onShow() {},
     methods: {
       async initProvinceAndCity() {
@@ -294,6 +297,7 @@
       },
       // 选择城市
       changeCity(type) {
+        if (this[type + 'List'].length == 0) return Toast('请先选择上一级地区');
         this.changeType = type;
         this.showProvince = true;
       },
@@ -304,13 +308,14 @@
       // 选中城市
       confirm(e) {
         if (this.changeType == 'brigade') {
-          this.formData[this.changeType] = e.value[0].id;
-          this.formDataText[this.changeType] = e.value[0].brigade_name;
+          this.formData.brigade = e.value[0].id;
+          this.formDataText.brigade = e.value[0].brigade_name;
           this.showProvince = false;
-          return;
+          return ;
         }
         this.formData[this.changeType] = e.value[0][this.changeType + '_code'];
         this.formDataText[this.changeType] = e.value[0][this.changeType + '_name'];
+        // 加载下一级城市信息
         switch (this.changeType) {
           case 'province':
             this.loadCity(this.formData['province']);
@@ -328,6 +333,24 @@
             this.loadBrigade(this.formData['village']);
             break;
         }
+        // 清空之前所选信息
+        switch (this.changeType) {
+          case 'province':
+            this.formData.city = '';
+            this.formDataText.city = ''
+          case 'city':
+            this.formData.area = '';
+            this.formDataText.area = ''
+          case 'area':
+            this.formData.street = '';
+            this.formDataText.street = ''
+          case 'street':
+            this.formData.village = '';
+            this.formDataText.village = ''
+          case 'village':
+            this.formData.brigade = '';
+            this.formDataText.brigade = ''
+        }
         this.showProvince = false;
       },
       loadCity(code) {
@@ -390,9 +413,16 @@
       // 创建账号
       addAcountNum() {
         this.$refs.uForm.validate().then(async (e) => {
-          console.log(e);
-          // let res = await loginAdd(this.formData);
-          // Toast('添加成功')
+          if(e){
+            let res = await loginAdd(this.formData);
+            uni.showToast({
+              icon:"none",
+              title:"添加成功",
+              success: () => {
+                uni.navigateBack()
+              }
+            })
+          }
         })
 
       },
@@ -454,11 +484,16 @@
       }
     }
 
-    .card_img {
-      width: 600rpx;
-      height: 300rpx;
-      background-color: #efefef;
-      border-radius: 14rpx;
+    .btn{
+      margin-top: 32rpx;
+      // margin-bottom: 40rpx;
+      width: 100%;
+      height: 84rpx;
+      background: $theme-oa-color;
+      border-radius: 42rpx 42rpx 42rpx 42rpx;
+      color: #fff;
+      line-height: 80rpx;
+      text-align: center;
     }
   }
 </style>