feat:修改细节

yangan

2024-07-12 72f2abafea3ce8c91d9b689821a4508bdc0f7d9f

 pages/register/register.vue

@@ -5,7 +5,7 @@
            :model="registerFormModel"
            ref="regesterFormRef"
            :labelStyle="labelStyle">
            <u-form-item labelWidth="30%"
            <u-form-item labelWidth="160"
               label="选择身份"
               borderBottom
               ref="roleRef"
@@ -26,11 +26,32 @@
                     @change="radioChange"></u-radio>
               </u-radio-group>
            </u-form-item>
        <u-form-item
            v-if="radiovalue1 == '司机'"
            labelWidth="200"
                     label="是否有车辆"
                     borderBottom
                     required>
          <u-radio-group v-model="isHaveCar"
                         placement="row"
                         size="30"
                         shape="circle"
                         iconSize="20">
            <u-radio labelSize="14px"
                     size="20px"
                     :customStyle="{ marginBottom: '8px' }"
                     v-for="(item, index) in isHaveCarList"
                     :key="index"
                     :label="item.label"
                     :name="item.value"
                     @change="radioChange"></u-radio>
          </u-radio-group>
        </u-form-item>
            <u-form-item prop="name"
               label="姓名"
               labelWidth="20%"
               borderBottom
               required>
                label="姓名"
           labelWidth="160"
                borderBottom
                required>
               <u--input v-model="registerFormModel.name"
                  placeholder="请输入内容"
                  fontSize='40'
@@ -38,7 +59,7 @@
            </u-form-item>
            <u-form-item prop="idCard"
               label="身份证"
               labelWidth="20%"
               labelWidth="160"
               borderBottom
               required>
               <u--input v-model="registerFormModel.idCard"
@@ -48,7 +69,7 @@
            </u-form-item>
            <u-form-item prop="phone"
               label="手机号"
               labelWidth="20%"
               labelWidth="160"
               borderBottom
               required>
               <u--input v-model="registerFormModel.phone"
@@ -58,7 +79,7 @@
            </u-form-item>
            <u-form-item prop="password"
               label="密码"
               labelWidth="20%"
               labelWidth="160"
               borderBottom
               required>
               <u--input v-model="registerFormModel.password"
@@ -67,9 +88,24 @@
                  password
                  clearable></u--input>
            </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="30%"
               labelWidth="160"
               borderBottom
               required>
               <u--input v-model="registerFormModel.confirmPassword"
@@ -81,19 +117,19 @@
            </u-form-item>
            <u-form-item prop="carNo"
               label="车牌号"
               labelWidth="20%"
               labelWidth="160"
               borderBottom
               v-if="radiovalue1 == '司机'"
               v-if="radiovalue1 == '司机' && isHaveCar == '1'"
               required>
               <u--input v-model="registerFormModel.carNo"
                  placeholder="请输入内容"
                  fontSize='40'
                  clearable></u--input>
            </u-form-item>
            <u-form-item labelWidth="30%"
            <u-form-item labelWidth="160"
               label="车牌颜色"
               borderBottom
               v-if="radiovalue1 == '司机'"
               v-if="radiovalue1 == '司机'  && isHaveCar == '1'"
               required
               prop="vehicleColour">
               <u-radio-group v-model="registerFormModel.vehicleColour"
@@ -112,9 +148,9 @@
            </u-form-item>
            <u-form-item prop="carImg"
               label="车辆照片"
               labelWidth="20%"
               labelWidth="160"
               borderBottom
               v-if="radiovalue1 == '司机'"
               v-if="radiovalue1 == '司机'  && isHaveCar == '1'"
               required
               @click="beforeRead">
               <u-upload :fileList="fileList1"
@@ -129,30 +165,34 @@
                  :previewFullImage="true">
               </u-upload>
            </u-form-item>
            <u-form-item prop="bodyofcarJpg"
               label="车头车尾车身照片"
               labelWidth="20%"
               borderBottom
               v-if="radiovalue1 == '司机'"
               required
               @click="beforeRead">
               <u-upload :fileList="fileList3"
                  deletable
                  @afterRead="afterRead"
                  @delete="deletePic"
                  name="3"
                  multiple
                  :maxCount="3"
                  width="250"
                  height="150"
                  :previewFullImage="true">
               </u-upload>
            </u-form-item>
        <div class="column-box">
          <u-form-item
              prop="bodyofcarJpg"
              label="车头、车尾、车身照片"
              labelWidth="auto"
              borderBottom
              v-if="radiovalue1 == '司机'  && isHaveCar == '1'"
              required
              @click="beforeRead">
            <u-upload :fileList="fileList3"
                      deletable
                      @afterRead="afterRead"
                      @delete="deletePic"
                      name="3"
                      multiple
                      :maxCount="3"
                      width="250"
                      height="150"
                      :previewFullImage="true">
            </u-upload>
          </u-form-item>
        </div>

            <u-form-item prop="drivingImg"
               label="行驶证"
               labelWidth="20%"
               labelWidth="160"
               borderBottom
               v-if="radiovalue1 == '司机'"
               v-if="radiovalue1 == '司机'  && isHaveCar == '1'"
               required
               @click="beforeRead">
               <u-upload :fileList="fileList2"
@@ -168,7 +208,7 @@
               </u-upload>
            </u-form-item>
            <u-form-item label="推荐人账号"
               labelWidth="30%"
               labelWidth="200"
               borderBottom>
               <u--input v-model="registerFormModel.tuiJianMa"
                  placeholder="请输入内容"
@@ -187,7 +227,8 @@
      </view>
      <view class="registerBtn"><u-button text="注册"
            type="primary"
            @click="registerClick"></u-button></view>
            @click="registerClick"
        :loading="registerClickloading"></u-button></view>
      <!-- 图片预览弹出框 -->
      <!-- <view class="previewImage-container">
         <u-popup :show="previewImageShow" mode="center" @close="previewImageClose" @open="previewImageOpen">
@@ -226,7 +267,84 @@
         }
      },
      data() {
      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 {
        isHaveCar:'1', //是否有车辆
        level:[],  //密码强度数组
            labelStyle: {
               fontSize: '36rpx'
            },
@@ -292,24 +410,18 @@
               ],
               password: [{
                     required: true,
                     message: '请设置初始密码',
                     message: '请设置密码',
                     trigger: ['blur', 'change']
                  },
                  {
                     min: 6,
                     max: 12,
                     message: '长度在6-12个字符之间'
                  }
            {
              validator: checkPassword,
              trigger: 'change'
            }
               ],
               confirmPassword: [{
                     required: true,
                     message: '请设置初始密码',
              validator: validatePass,
                     trigger: ['blur', 'change']
                  },
                  {
                     min: 6,
                     max: 12,
                     message: '长度在6-12个字符之间'
                  }
               ],
               carNo: [{
@@ -363,6 +475,13 @@
                  disabled: false
               }
            ],
        isHaveCarList: [{
          value: '1',
          label: '是',
        },{
          value: '2',
          label: '否'
        }],
            radiovalue1: '货代',
            radiolist2: [{
                  name: '黄色',
@@ -383,7 +502,8 @@
            title: '提示',
            content: '当前填入信息，切换角色后，即清除，是否切换？',
            wxcode: '',
            openid: ''
            openid: '',
        registerClickloading: false,
         };
      },
      watch: {
@@ -412,38 +532,44 @@
      methods: {
         ...mapMutations(['changeisUploadimg']),
         registerClick() {
            if (this.registerFormModel.password == this.registerFormModel.confirmPassword) {
               this.$refs.regesterFormRef
                  .validate()
                  .then(res => {
                     console.log(this.registerFormModel);
                     this.registerFormModel.username = this.registerFormModel.phone;
                     apiRegister(this.registerFormModel)
                        .then(res => {
                           if (res.data.code == 0) {
                              uni.showToast({
                                 title: '注册成功,即将返回登录页',
                                 icon: 'none',
                                 duration: 1000
                              });
                              setTimeout(() => {
                                 uni.redirectTo({ url: '/pages/login/login' });
                              }, 1000);
                           } else {
                              this.$u.toast(res.data.msg ? res.data.msg : '添加失败');
                           }
                        })
                        .catch(err => {
                           console.log('错误', err);
                        });
                  })
                  .catch(err => {
                     console.log('err', err);
                     this.$u.toast('请规范输入内容');
                  });
            } else {
               this.$u.toast('两次密码不一致');
            }
        if(this.fileList3 && this.fileList3.length > 0) {  //车头车尾车身需要3张图片也可以一张也不传
          if(this.fileList3.length !== 3) {
            this.$u.toast('车头车尾车身需要3张图片');
            return
          }
        }
        this.$refs.regesterFormRef
            .validate()
            .then(res => {
              console.log(this.registerFormModel);
              this.registerClickloading = true;
              this.registerFormModel.username = this.registerFormModel.phone;
              apiRegister(this.registerFormModel)
                  .then(res => {
                    if (res.data.code == 0) {
                      this.registerClickloading = false;
                      uni.showToast({
                        title: '注册成功,即将返回登录页',
                        icon: 'none',
                        duration: 1000
                      });
                      setTimeout(() => {
                        uni.redirectTo({ url: '/pages/login/login' });
                      }, 1000);
                    } else {
                      this.$u.toast(res.data.msg ? res.data.msg : '添加失败');
                    }
                  })
                  .catch(err => {
                    console.log('错误', err);
                  });
            })
            .catch(err => {
              console.log('err', err);
              this.$u.toast('请规范输入内容');
            }).finally(() => {
              this.registerClickloading = false;
        });
         },
         // 单选框事件
         groupChange(e) {},
@@ -583,4 +709,53 @@
         }
      }
   }
</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;
    }
  }
  .column-box{
    ::v-deep{
      .u-form-item__body{
        flex-direction: column!important;
      }
      .u-form-item__body__right{
        margin-top: 20rpx;
      }
    }
  }
</style>