feat:通行证

wk

2024-09-14 0bd15917637362c104eb157d5163f65bf9503780

 pages/login/resetPassword/resetPassword.vue

@@ -5,31 +5,88 @@
         :rules="rules"
         ref="uForm"
         label-width="80px">
      <template v-if="isShowPassword">
        <u-form-item
            prop="originalPassword"
            label="原密码"
            required
            borderBottom>
          <u-input v-if='inputType==="password"'
                   v-model="modelForm.originalPassword"
                   border="surround"
                   placeholder="密码应由8-16位数字、字母、符号组成。"
                   :type='inputType' />
          <u-input v-else
                   v-model="modelForm.originalPassword"
                   border="surround"
                   placeholder="密码应由8-16位数字、字母、符号组成。"
                   :type='inputType' />
        </u-form-item>
      </template>
         <u-form-item prop="password"
            label="密码"
            label="新密码"
            required
            borderBottom>
            <u--input v-model="modelForm.password"
            <u-input v-if='inputType==="password"'
               v-model="modelForm.password"
               border="surround"
               placeholder="请输入密码"
               type='password'></u--input>
               placeholder="请输入密码(仅支持数字字母下划线)"
               :type='inputType' />
            <u-input v-else
               v-model="modelForm.password"
               border="surround"
               placeholder="请输入密码(仅支持数字字母下划线)"
               :type='inputType' />
         </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="secondPassword"
            label="二次确认"
            label="确认密码"
            required
            borderBottom>
            <u--input v-model="modelForm.secondPassword"
            <u-input v-if='inputType==="password"'
               v-model="modelForm.secondPassword"
               border="surround"
               placeholder="请再次输入密码"
               type='password'></u--input>
               placeholder="请再次输入密码(仅支持数字字母下划线)"
               type='password' />
            <u-input v-else
               v-model="modelForm.secondPassword"
               border="surround"
               placeholder="请再次输入密码(仅支持数字字母下划线)"
               type='text' />
         </u-form-item>
         <u-form-item>
            <view class="process-button">
               <u-button type="primary"
                  text="确定"
                  :loading="processLoading"
                  @click.stop="process"></u-button>
                  @click="process"></u-button>
            </view>
         </u-form-item>
         <u-form-item prop="checkboxValue">
            <u-checkbox-group v-model="checkboxValue"
               @change="checkChange">
               <u-checkbox label="显示密码"
                  name="显示"
                  iconSize="32"
                  label-size="32"
                  size="40"
                  shape="circle">
               </u-checkbox>
            </u-checkbox-group>
         </u-form-item>
      </u-form>
   </view>
@@ -38,45 +95,172 @@
<script>
   export default {
      data() {
      const validatePass = (rule, value, callback) => {
        if (this.modelForm.password !== "") {
          if (value !== this.modelForm.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 {
        level:[],
        isShowPassword: true,
            userInfo: {},
            checkboxValue: [],
            inputType: 'password',
            isFocus: false,
            modelForm: {
               password: '',
               secondPassword: ''
          originalPassword:'',  //原始密码
          password: '',  //新密码
          secondPassword: '',  //二次确认密码
          username:'',
          userId:''
            },
            processLoading: false,
            rules: {
               password: {
                  type: 'string',
                  required: true,
                  message: '请填写密码',
                  trigger: ['blur', 'change']
               },
               secondPassword: {
                  type: 'string',
                  required: true,
                  message: '请填写二次密码',
                  trigger: ['blur', 'change']
               }
          originalPassword: [{
            type: 'string',
            required: this.isShowPassword,
            message: '请填写密码',
            trigger: ['blur', 'change']
          }],
               password: [{
            required: true,
            validator: checkPassword,
            trigger: 'change'
          }],
               secondPassword: [{
            required: true,
            validator: validatePass,
            trigger: "blur"
          }]
            }
         }
      },
      computed: {
         roleType() {
            return uni.getStorageSync('roleType')
         },
      userId() {
        if(uni.getStorageSync('userId')) {
          this.modelForm.userId = uni.getStorageSync('userId')
        }
        return uni.getStorageSync('userId')
      }
      },
      onLoad(params) {
         this.userInfo = JSON.parse(params.userInfo)
         // if (this.roleType === 3) {
         //    this.userInfo = JSON.parse(params.userInfo)
         // } else {
         //    this.getUserInfo(params.phone, params.idCard)
         // }
      if(params.userInfo) {
        this.modelForm.username = JSON.parse(params.userInfo).username
        this.modelForm.userId = JSON.parse(params.userInfo).userId.toString()   //userId
        if(JSON.parse(params.userInfo).isShowPassword) {
          this.isShowPassword = false
        }else {
          this.isShowPassword = true
        }
      }else {
        this.modelForm.username = uni.getStorageSync('userInfo').username
        this.modelForm.userId = uni.getStorageSync('userInfo').userId.toString()
        this.isShowPassword = true
      }
      },
      onReady() {
         this.$refs.uForm.setRules(this.rules)
      },
      methods: {
         getUserInfo(phone, idCard) {
            this.$reqGet('phoneAndCard', { phone, idCard }).then(res => {
               if (res.code === 0) {
                  this.userInfo = res.data
               } else {
                  uni.$u.toast('加载失败')
               }
            })

         },
         checkChange(name) {
            this.inputType = name.length === 0 ? 'password' : ''
            this.isFocus = true
         },
         process() {
            if (this.modelForm.password !== this.modelForm.secondPassword) return uni.$u.toast('密码不一致,请检查')
            this.userInfo.password = this.modelForm.secondPassword;
            this.processLoading = true;
            this.$refs.uForm.validate().then(res => {
               this.$reqAllJson('appUpdateById', this
                  .userInfo, { method: 'PUT', 'Content-type': 'application/json' }).then(res => {
                  this.processLoading = false;
          this.processLoading = true;
               this.$reqAllJson('appUpdateById', this.modelForm, { method: 'PUT', 'Content-type': 'application/json' }).then(res => {

                  if (res.code === 0) {
              this.processLoading = false;
                     this.$u.toast('修改成功,即将回到首页')
                     setTimeout(() => {
                        uni.reLaunch({
@@ -88,8 +272,10 @@
                  }
               })
            }).catch(errors => {
               uni.$u.toast('校验失败')
            })
               // uni.$u.toast('校验失败')
            }).finally(() => {
          this.processLoading = false;
        })
         }
      }
   }
@@ -102,7 +288,48 @@
      margin: vww(10) auto;

      .process-button {
         margin-top: vww(20);
      width: 30%;
         margin: vww(20) auto;
      min-width: 200rpx;
      }
    .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>
</style>