质检页面

819527061@qq.com

2024-08-08 983619ef25f84e095bcbf6f4996b0cb58210c73b

 pages/register/register.vue

@@ -24,8 +24,29 @@
                     @change="radioChange"></u-radio>
               </u-radio-group>
            </u-form-item>
            <u-form-item labelWidth="20%"
               label="多身份证"
               borderBottom
               ref="roleRef"
               required
               v-if="radiovalue1 == '司机'">
               <u-radio-group v-model="radiovalue2"
                  placement="row"
                  @change="groupChange"
                  size="30"
                  shape="circle"
                  iconSize="20">
                  <u-radio labelSize="14px"
                     size="20px"
                     v-for="(item, index) in radiolist3"
                     :key="index"
                     :label="item.name"
                     :name="item.value"
                     @change="radioChange2"></u-radio>
               </u-radio-group>
            </u-form-item>
            <u-form-item prop="name"
               label="姓名"
               :label="radiovalue1 == '司机'?'姓名':'承运商名称'"
               labelWidth="20%"
               borderBottom
               required>
@@ -33,21 +54,52 @@
                  placeholder="请输入内容"
                  clearable></u--input>
            </u-form-item>
            <view style="margin:0 30vw" v-if="radiovalue2 == 1"> 
               <u-button text="增加"
                     type="primary"
                     @click="addData"
                     ></u-button>
            </view>
               <uni-table
                border 
                  id="table-box"
                  emptyText="暂无更多数据" v-if="radiovalue2 == 1">
                  <uni-tr>
                     <uni-th align="center" >身份证号</uni-th>
                     <uni-th align="center">操作</uni-th>			
                  </uni-tr>
                  <uni-tr v-for="(subItem, index) in tablist" :key="index">
                     <uni-td align="center">
                        <u--input
                           placeholder="请输入身份证号"
                           v-model="subItem.idCard"
                           ></u--input>
                        </uni-td>
                  <uni-td align="right">
                  <view>
                     <u-button text="删除"
                           type="primary"
                           @click="delData(index)"></u-button>
                  </view></uni-td>
               </uni-tr>
               </uni-table>
            <u-form-item prop="idCard"
               label="身份证"
               labelWidth="20%"
               borderBottom
               required>
               required
               v-if="radiovalue2 == 0">
               <u--input v-model="registerFormModel.idCard"
                  placeholder="请输入内容"
                  clearable></u--input>
            </u-form-item>
            <u-form-item prop="cardImg1"
               label="身份证正面"
               :label="radiovalue1 == '司机'?'身份证正面':'身份证或营业执照照片'"
               labelWidth="20%"
               borderBottom
               required
               @click="beforeRead">
               @click="beforeRead"
               v-if="radiovalue2 == 0">
               <u-upload :fileList="fileList5"
                  deletable
                  @afterRead="afterRead"
@@ -61,11 +113,12 @@
               </u-upload>
            </u-form-item>
            <u-form-item prop="cardImg2"
               label="身份证反面"
               :label="radiovalue1 == '司机'?'身份证反面':'身份证或营业执照照片'"
               labelWidth="20%"
               borderBottom
               required
               @click="beforeRead">
               @click="beforeRead"
               v-if="radiovalue2 == 0">
               <u-upload :fileList="fileList6"
                  deletable
                  @afterRead="afterRead"
@@ -81,8 +134,9 @@
            <u-form-item prop="expirationTimeIdcard"
               label="身份证过期时间"
               labelWidth="20%"
               borderBottom>
               <uni-datetime-picker v-model="registerFormModel.expirationTimeIdcard" type="datetime" :start="minDate" />
               borderBottom
               v-if="radiovalue2 == 0">
               <uni-datetime-picker v-model="registerFormModel.expirationTimeIdcard" type="date" :start="minDate" />
            </u-form-item>
            <u-form-item prop="phone"
               label="手机号"
@@ -102,8 +156,22 @@
                  placeholder="请输入内容"
                  password
                  clearable></u--input>
               <span> 密码应由8-16位数字、字母、符号组成。请不要使用容易被猜到的密码</span>
            </u-form-item>
        <view class="intensity">
          <view class="psdText">密码强度</view>
          <view
              class="line"
              :class="[level.includes('low') ? 'low' : '']"></view>
          <view
              class="line"
              :class="[level.includes('middle') ? 'middle' : '']"></view>
          <view
              class="line"
              :class="[level.includes('high') ? 'high' : '']"></view>
          <div class="warningtext">
            密码应由8-16位数字、字母、符号组成。请不要使用容易被猜到的密码
          </div>
        </view>
            <u-form-item prop="confirmPassword"
               label="确认密码"
               labelWidth="20%"
@@ -129,6 +197,7 @@
               label="车辆类型"
               borderBottom
               ref="roleRef"
               prop='carType'
               v-if="radiovalue1 == '司机'">
               <niceui-data-select-input v-model="registerFormModel.carType"
                  :localdata="radiolist2"
@@ -180,7 +249,7 @@
               labelWidth="20%"
               borderBottom
               v-if="radiovalue1 == '司机'">
               <uni-datetime-picker v-model="registerFormModel.expirationTimeDriving" type="datetime"  :start="minDate" />
               <uni-datetime-picker v-model="registerFormModel.expirationTimeDriving" type="date"  :start="minDate" />
            </u-form-item>
            <u-form-item prop="driverImg"
               label="驾驶证"
@@ -206,7 +275,7 @@
               labelWidth="20%"
               borderBottom
               v-if="radiovalue1 == '司机'">
               <uni-datetime-picker v-model="registerFormModel.expirationTimeDriver" type="datetime"  :start="minDate" />
               <uni-datetime-picker v-model="registerFormModel.expirationTimeDriver" type="date"  :start="minDate" />
            </u-form-item>
            <u-form-item prop="tradeQualificationImg"
               label="从业资格证"
@@ -234,7 +303,7 @@
               labelWidth="20%"
               borderBottom
               v-if="radiovalue1 == '司机'">
               <uni-datetime-picker v-model="registerFormModel.expirationTimeTradequalification" type="datetime"  :start="minDate" />
               <uni-datetime-picker v-model="registerFormModel.expirationTimeTradequalification" type="date"  :start="minDate" />
            </u-form-item>
            <u-form-item labelWidth="20%"
               v-if="radiovalue1 == '司机'"
@@ -287,48 +356,84 @@
         }
      },
      data() {
         const checkPassword = (rule, value, callback) => {
               let passL = 8;
               if(!value) {   //不必填
                 return callback()
               }
               if(value && value.length < passL) {
                 return callback(`密码不能少于${passL}位`)
               }
               if(value && value.length > 16) {
                 return callback('密码不能大于16位')
               }
               //校验是数字
               const regex1 = /^\d+$/
               // 校验字母
               const regex2 = /^[A-Za-z]+$/
               // 校验符号
               const regex3 =
                 /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/
               if(regex1.test(value)) {
                 return callback('密码强度过低')
               }else if(regex2.test(value)) {
                 return callback('密码强度过低')
               }else if(regex3.test(value)) {
                 return callback('密码强度过低')
               }else if(/^[A-Za-z\d]+$/.test(value)) {
                 return callback('密码强度过低')
               }else if(
                 /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\d]+$/.test(
                   value
                 )
               ) {
                 return callback('密码强度过低')
               }else if(
                 /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(
                   value
                 )
               ) {
                 return callback('密码强度过低')
               } 
               return callback()
             }
      const validatePass = (rule, value, callback) => {
        if (this.registerFormModel.confirmPassword !== "") {
          if (value !== this.registerFormModel.password) {
            callback(new Error("两次输入密码不一致!"));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
      const checkPassword = (rule, value, callback) => {
        // let roles = this.$store.getters.roles;//当前用户角色id
        // let passL = 8;
        // if (roles.concat(1)){
        //   passL = 10
        // }
        let passL = 8;
        this.level = []
        if(!value) {
          return callback('密码不能为空')
        }
        if(value.length < passL) {
          return callback(`密码不能少于${passL}位`)
        }
        if(value.length > 16) {
          return callback('密码不能大于16位')
        }
        //校验是数字
        const regex1 = /^\d+$/
        // 校验字母
        const regex2 = /^[A-Za-z]+$/
        // 校验符号
        const regex3 =
            /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/;
        if(regex1.test(value)) {
          this.level.push('low')
          return callback('密码强度过低')
        }else if(regex2.test(value)) {
          this.level.push('low')
          return callback('密码强度过低')
        }else if(regex3.test(value)) {
          this.level.push('low')
          return callback('密码强度过低')
        }else if(/^[A-Za-z\d]+$/.test(value)) {
          this.level.push('low')
          this.level.push('middle')
          return callback('密码强度过低')
        }else if(
            /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\d]+$/.test(
                value
            )
        ) {
          this.level.push('low')
          this.level.push('middle')
          return callback('密码强度过低')
        }else if(
            /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(
                value
            )
        ) {
          this.level.push('low')
          this.level.push('middle')
          return callback('密码强度过低')
        } else if (
            /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z\d]+$/.test(
                value
            )
        ) {
          this.level.push('low')
          this.level.push('middle')
          this.level.push('high')
        }
        return callback()
      };
         return {
            tablist:[{idCard:""},{idCard:""}],
        level:[],  //密码强度数组
            minDate: this.getToday(),
            // 车牌号键盘控制
            carNumShow: false,
@@ -349,7 +454,7 @@
               tradeQualificationImg: '',
               driverImg: '',
               countryNumberCar: 2, //环保类型;国五 1，国六 2
               carType:0,
               carType:null,
            },
            fileList1: [],
            fileList2: [],
@@ -373,12 +478,22 @@
               expirationTimeTradequalification: {
                  required: false,
               },
               name: {
               name: [{
                  type: 'string',
                  required: true,
                  message: '请填写姓名',
                  trigger: ['blur', 'change']
               },
               },{
                     pattern: /^[\u4e00-\u9fa5]{1,6}$/, //限制长度最多为 6 位
                     message: '姓名只能是中文', 
                     trigger: ['blur', 'change']
                  }],
                  carType:[{
                     type: 'number',
                     required: true,
                     message: '请选择车辆类型',
                     trigger: ['blur', 'change']
                  }],
               idCard: [{
                     type: 'string',
                     required: true,
@@ -411,28 +526,19 @@
                  }
               ],
               password: [{
                     required: true,
                     message: '请设置初始密码',
                     trigger: ['blur', 'change']
                  },
                  {
                     min: 8,
                     max: 16,
                     message: '长度在8-16个字符之间'
                  },
                   {validator: checkPassword, trigger: 'change'}
               ],
            required: true,
            message: '请设置初始密码',
            trigger: ['blur', 'change']
          },
            {
              validator: checkPassword,
              trigger: 'change'
            }],
               confirmPassword: [{
                     required: true,
                     message: '请设置初始密码',
                     trigger: ['blur', 'change']
                  },
                  {
                     min: 6,
                     max: 12,
                     message: '长度在6-12个字符之间'
                  }
               ],
            required: true,
            validator: validatePass,
            trigger: "blur"
          }],
               carNo: [{
                     type: 'string',
                     required: true,
@@ -507,6 +613,17 @@
                  value:4
               }
            ],
            radiolist3: [{
                  name: '否',
                  disabled: false,
                  value:0
               },
               {
                  name: '是',
                  disabled: false,
                  value:1
               }
            ],
            countryNumberCarList: [{
                  name: 1,
                  label: '国五',
@@ -521,6 +638,7 @@
               }
            ],
            radiovalue1: '司机',
            radiovalue2:0,
            beforeChangeValue: '',
            // 更换角色弹框
            editRoleModelShow: false,
@@ -543,6 +661,7 @@
            }
            switch (newV) {
               case '货代':
                  this.radiovalue2 = 0;
                  this.registerFormModel.type = 2;
                  break;
               case '司机':
@@ -553,6 +672,9 @@
            }
            return;
         },
         radiovalue2(newV){
				
         }
      },
      methods: {
         ...mapMutations(['changeisUploadimg']),
@@ -561,74 +683,107 @@
           let year = now.getFullYear();
           let month = this.padStart(now.getMonth() + 1); // 月份是从0开始的
           let day = this.padStart(now.getDate());
           let hour = this.padStart(now.getHours());
           let minute = this.padStart(now.getMinutes());
           let second = this.padStart(now.getSeconds());
           console.log(`${year}-${month}-${day} ${hour}:${minute}:${second}`)
           return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
           return `${year}-${month}-${day}`;
         },
         padStart(value) {
           return value.toString().padStart(2, '0');
         },
         productcarTypeChange(e){
            console.log(this.registerFormModel.carType,this.radiolist2.find(v => v.value === e).value)
            this.registerFormModel.carType = this.radiolist2.find(v => v.value === e).value
         },
         registerClick() {
            if (this.registerFormModel.password == this.registerFormModel.confirmPassword) {
               if(this.registerFormModel.carType==3&&!this.registerFormModel.tradeQualificationImg||this.registerFormModel.carType==4&&!this.registerFormModel.tradeQualificationImg){
        if(this.registerFormModel.carType==3&&!this.registerFormModel.tradeQualificationImg||this.registerFormModel.carType==4&&!this.registerFormModel.tradeQualificationImg){
          uni.showToast({
            title: '请上传从业资格证！',
            icon: 'error',
            duration: 2000
          });
        }else{
          this.$refs.regesterFormRef
              .validate()
              .then(res => {
                this.registerClickloading = true;
                this.registerFormModel.username = this.registerFormModel.phone;
            if(this.radiovalue2 == 0){
               this.registerFormModel.idCardImg = this.registerFormModel.cardImg1+","+this.registerFormModel.cardImg2;
            }else{
               this.registerFormModel.expirationTimeIdcard=null
            }
                if(this.registerFormModel.expirationTimeDriver){
                  this.registerFormModel.expirationTimeDriver=this.registerFormModel.expirationTimeDriver.slice(0,16)
                }
                if(this.registerFormModel.expirationTimeDriving){
                  this.registerFormModel.expirationTimeDriving=this.registerFormModel.expirationTimeDriving.slice(0,16)
                }
                if(this.registerFormModel.expirationTimeIdcard){
                  this.registerFormModel.expirationTimeIdcard=this.registerFormModel.expirationTimeIdcard.slice(0,16)
                }
                if(this.registerFormModel.expirationTimeTradequalification){
                  this.registerFormModel.expirationTimeTradequalification=this.registerFormModel.expirationTimeTradequalification.slice(0,16)
                }
            let idcardtext=/^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
            let submit=true
            if(this.radiovalue2 == 1){
               const uniqueSampleTypeIds = new Set(this.tablist.map(item => item.idCard));
               const hasDuplicateSampleTypeId = this.tablist.length !== uniqueSampleTypeIds.size;
               this.tablist.map(item=>{
                  if(!item.idCard){
                     uni.showToast({
                        title: `请填写身份证！`,
                        icon: 'error',
                        duration: 2000
                     });
                     submit=false
                  }else if(!idcardtext.test(item.idCard)){
                     uni.showToast({
                        title: `请检验身份证！`,
                        icon: 'error',
                        duration: 2000
                     });
                     submit=false
                  }
               })
               if(hasDuplicateSampleTypeId){
                  uni.showToast({
                     title: '请上传从业资格证！',
                     title: `身份证不能重复！`,
                     icon: 'error',
                     duration: 2000
                  });
               }else{
               this.$refs.regesterFormRef
                  .validate()
                  .then(res => {
                     this.registerClickloading = true;
                     this.registerFormModel.username = this.registerFormModel.phone;
                     this.registerFormModel.idCardImg = this.registerFormModel.cardImg1+","+this.registerFormModel.cardImg2;
                     if(this.registerFormModel.expirationTimeDriver){
                        this.registerFormModel.expirationTimeDriver=this.registerFormModel.expirationTimeDriver.slice(0,16)
                     }
                     if(this.registerFormModel.expirationTimeDriving){
                        this.registerFormModel.expirationTimeDriving=this.registerFormModel.expirationTimeDriving.slice(0,16)
                     }
                     if(this.registerFormModel.expirationTimeIdcard){
                        this.registerFormModel.expirationTimeIdcard=this.registerFormModel.expirationTimeIdcard.slice(0,16)
                     }
                     if(this.registerFormModel.expirationTimeTradequalification){
                        this.registerFormModel.expirationTimeTradequalification=this.registerFormModel.expirationTimeTradequalification.slice(0,16)
                     }
                        this.$reqPost('registerDriver', this.registerFormModel, 'json')
                        .then(res => {
                           this.registerClickloading = false;
                           if (res.code == 0) {
                              uni.showToast({
                                 title: '注册成功,即将返回登录页',
                                 icon: 'none',
                                 duration: 1000
                              });
                              setTimeout(() => {
                                 uni.redirectTo({ url: '/pages/login/login' });
                              }, 1000);
                           } else {
                              this.$u.toast(res.msg ? res.msg : '添加失败');
                           }
                        })
                        .catch(err => {
                           console.log('错误', err);
                        });
                  })
                  .catch(err => {
                     console.log('err', err);
                     this.$u.toast('请规范输入内容');
                  });
                  }
            } else {
               this.$u.toast('两次密码不一致');
                  submit=false
               }
               if(submit){
                  this.registerFormModel.idCard=this.tablist.map(item=>{
                     return item.idCard
                  }).join(',')
               }
            }
            if(submit){
               this.$reqPost('registerDriver', this.registerFormModel, 'json')
                   .then(res => {
                     this.registerClickloading = false;
                     if (res.code == 0) {
                       uni.showToast({
                         title: '注册成功,即将返回登录页',
                         icon: 'none',
                         duration: 1000
                       });
                       setTimeout(() => {
                         uni.redirectTo({ url: '/pages/login/login' });
                       }, 1000);
                     } else {
                       this.$u.toast(res.msg ? res.msg : '添加失败');
                     }
                   })
                   .catch(err => {
                     console.log('错误', err);
                   });
            }
              })
              .catch(err => {
                console.log('err', err);
                this.$u.toast('请规范输入内容');
              });
        }
         },
         // 单选框事件
         groupChange(e) {},
@@ -642,6 +797,16 @@
            ) {
               this.$refs.regesterFormRef.clearValidate();
               this.beforeChangeValue = e;
            }
         },
         radioChange2(e) {
         },
         addData(){
            this.tablist.push({idCard:""})
         },
         delData(e){
            if(this.tablist.length>2){
               this.tablist.splice(e,1)
            }
         },
         jiaoYanPassword() {
@@ -776,4 +941,43 @@
         }
      }
   }
</style>
  .intensity {
    width: 100%;
    margin-top: 10rpx;
    .psdText {
      font-size: 14px;
      margin-right: 10px;
    }

    .line {
      display: inline-block;
      width: 70rpx;
      height: 8rpx;
      background: #d8d8d8;
      border-radius: 6rpx;
      margin-right: 16rpx;

      &.low {
        background: #f4664a;
      }

      &.middle {
        background: #ffb700;
      }

      &.high {
        background: #2cbb79;
      }
    }

    .level {
      margin: 0 32rpx 0 16rpx;
    }

    .warningtext {
      color: #5a5a5a;
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }
</style>