feat:库管首页修改细节

yangan

2024-07-30 4e4842518007726677c1dd23dc57f3448e7b08b4

 pages/login/resetPassword/resetPassword.vue

@@ -5,8 +5,26 @@
         :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-if='inputType==="password"'
@@ -20,8 +38,23 @@
               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-if='inputType==="password"'
@@ -40,7 +73,7 @@
               <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">
@@ -62,71 +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: {
          originalPassword: [{
            type: 'string',
            required: this.isShowPassword,
            message: '请填写密码',
            trigger: ['blur', 'change']
          }],
               password: [{
                     type: 'string',
                     required: true,
                     message: '请填写密码',
                     trigger: ['blur', 'change']
                  },
                  {
                     min: 2,
                     max: 10,
                     message: '密码长度应不小于2位,不大于10位  ',
                     trigger: ['blur', 'change']
                  },
                  {
                     pattern: /^[a-zA-Z0-9_]+$/,
                     message: '请输入正确格式的密码',
                     trigger: ['blur', 'change']
                  }
               ],
            required: true,
            validator: checkPassword,
            trigger: 'change'
          }],
               secondPassword: [{
                     type: 'string',
                     required: true,
                     message: '请填写二次密码',
                     trigger: ['blur', 'change']
                  },
                  {
                     min: 2,
                     max: 10,
                     message: '密码长度应不小于2,不大于10',
                     trigger: ['blur', 'change']
                  }
               ]
            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({
@@ -138,8 +272,10 @@
                  }
               })
            }).catch(errors => {
               uni.$u.toast('校验失败')
            })
               // uni.$u.toast('校验失败')
            }).finally(() => {
          this.processLoading = false;
        })
         }
      }
   }
@@ -152,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>