罗广辉
2026-06-18 44dd9c4eb8a2489c63a5eb53fd4254bbb3510e95
src/subPackages/userDetail/password/index.vue
@@ -6,25 +6,32 @@
            <div class="orderRow">
               <!-- type="password" :password-icon="passwordIcon" -->
               <div class="rowTitle">原始密码</div>
               <u-input input-align="right" v-model="passwordForm.oldPassword"   placeholder="请输入"
                  class="input-item" />
               <input type="password" v-model="passwordForm.oldPassword" placeholder="请输入" class="input-item" />
            </div>
            <div class="orderRow">
               <div class="rowTitle">新密码</div>
               <u-input input-align="right" v-model="passwordForm.newPassword" placeholder="请输入"
                  class="input-item" />
               <input type="password" v-model="passwordForm.newPassword" placeholder="请输入" class="input-item" />
            </div>
            <div class="orderRow">
               <div class="rowTitle">确认密码</div>
               <u-input input-align="right" v-model="passwordForm.newPassword1"  placeholder="请输入"
                  class="input-item" />
               <input type="password" v-model="passwordForm.newPassword1" placeholder="请输入" class="input-item" />
            </div>
         </div>
      </view>
      <view class="btngroup">
         <u-button color="#AEAEAE" class="custom-style" shape="circle" @click="reset">重置</u-button>
         <u-button color="#1D6FE9" class="custom-style" shape="circle" @click="submit">提交</u-button>
         <u-button
            :color="submitLoading ? '#AEAEAE' : '#1D6FE9'"
            class="custom-style"
            shape="circle"
            text="提交"
            :loading="submitLoading"
            loading-text="提交中"
            loading-mode="circle"
            :loading-size="13"
            @click="submit"
         />
      </view>
   </view>
</template>
@@ -39,48 +46,43 @@
      updateInfo,
      updatePassword
   } from '@/api/user/index.js';
 const passwordIcon={
      show: 'fas fa-eye',     // 显示密码时的图标
      hide: 'fas fa-eye-slash' // 隐藏密码时的图标
    }
   const passwordIcon = {
      show: 'fas fa-eye', // 显示密码时的图标
      hide: 'fas fa-eye-slash' // 隐藏密码时的图标
   }
   const userStore = useUserStore();
   const passwordForm = ref({
      oldPassword: '',
      newPassword: '',
      newPassword1: '',
   });
   const submitLoading = ref(false);
   // 校验密码不能包含中文
   const validatePasswordNoChinese = (password) => {
     const chineseRegex = /[\u4e00-\u9fa5]/;
     if (chineseRegex.test(password)) {
      const chineseRegex = /[\u4e00-\u9fa5]/;
      if (chineseRegex.test(password)) {
      uni.showToast({
         title: '密码不能包含中文字符',
         icon: 'none',
         duration: 2000
      });
       return false;
     }
     return true;
         uni.showToast({
            title: '密码不能包含中文字符',
            icon: 'none',
            duration: 2000
         });
         return false;
      }
      return true;
   };
   // 校验密码复杂度(长度≥6位,包含字母和数字)
   const validatePasswordStrength = (password) => {
     if (password.length < 6) {
      if (password.length < 6) {
      uni.showToast({
         title: '密码长度不能少于6位',
         icon: 'none',
         duration: 2000
      });
       return false;
     }
     // const hasLetter = /[a-zA-Z]/.test(password);
     // const hasNumber = /\d/.test(password);
     // if (!hasLetter || !hasNumber) {
     //   ElMessage.error('密码需同时包含字母和数字');
     //   return false;
     // }
     return true;
         uni.showToast({
            title: '密码长度不能少于6位',
            icon: 'none',
            duration: 2000
         });
         return false;
      }
      return true;
   };
   const clearForm = () => {
      passwordForm.value = {
@@ -93,41 +95,43 @@
      clearForm();
   };
   const submit = () => {
// 原始密码校验
    if (!passwordForm.value.oldPassword) {
      if (submitLoading.value) return;
      // 原始密码校验
      if (!passwordForm.value.oldPassword) {
     uni.showToast({
        title: '请输入原始密码',
        icon: 'none',
        duration: 2000
     });
      return;
    }
     // 中文校验
    if (!validatePasswordNoChinese(passwordForm.value.newPassword)) return;
    // 新密码校验
    if (!passwordForm.value.newPassword) {
         uni.showToast({
            title: '请输入原始密码',
            icon: 'none',
            duration: 2000
         });
         return;
      }
      // 中文校验
      if (!validatePasswordNoChinese(passwordForm.value.newPassword)) return;
      // 新密码校验
      if (!passwordForm.value.newPassword) {
     uni.showToast({
        title: '请输入新密码',
        icon: 'none',
        duration: 2000
     });
      return;
    }
    // 确认密码校验
    if (passwordForm.value.newPassword !== passwordForm.value.newPassword1) {
         uni.showToast({
            title: '请输入新密码',
            icon: 'none',
            duration: 2000
         });
         return;
      }
      // 确认密码校验
      if (passwordForm.value.newPassword !== passwordForm.value.newPassword1) {
     uni.showToast({
        title: '两次输入的新密码不一致',
        icon: 'none',
        duration: 2000
     });
      return;
    }
         uni.showToast({
            title: '两次输入的新密码不一致',
            icon: 'none',
            duration: 2000
         });
         return;
      }
    // 复杂度校验
    if (!validatePasswordStrength(passwordForm.value.newPassword)) return;
      // 复杂度校验
      if (!validatePasswordStrength(passwordForm.value.newPassword)) return;
      submitLoading.value = true;
      updatePassword(md5(passwordForm.value.oldPassword),
         md5(passwordForm.value.newPassword),
         md5(passwordForm.value.newPassword1)).then(res => {
@@ -135,13 +139,17 @@
            uni.showToast({
               title: '修改信息成功',
               icon: 'none',
               duration: 2000
               duration: 1500
            });
            clearForm();
            userStore.setUserInfo(null)
            uni.reLaunch({
               url: '/pages/login/index'
            })
            uni.removeStorageSync('rememberedUser');
            setTimeout(() => {
               uni.reLaunch({
                  url: '/pages/login/index'
               })
            }, 1500);
            return
         } else {
            uni.showToast({
@@ -150,7 +158,10 @@
               duration: 2000
            });
         }
         submitLoading.value = false;
      }).catch(() => {
         submitLoading.value = false;
      });
   };
@@ -170,22 +181,24 @@
   .detailBox {
      margin-top: 40rpx;
   width: 702rpx;
      width: 702rpx;
      min-height: 326rpx;
      background: #FFFFFF;
      border-radius: 12rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.detailCon {
      .detailCon {
         padding: 0 24rpx;
      }
      .orderRow {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 96rpx;
      border-bottom: 2rpx solid #f5f5f5;
      color: #7b7b7b;
         display: flex;
         justify-content: space-between;
         align-items: center;
         height: 96rpx;
         border-bottom: 2rpx solid #f5f5f5;
         color: #7b7b7b;
         .rowTitle {
@@ -195,33 +208,46 @@
            color: #222324;
            white-space: nowrap;
         }
         ::v-deep .u-input {
            border: none !important;
            background: transparent !important;
         }
         ::v-deep .u-input__input {
         input.input-item {
            text-align: right;
            border: none !important;
            box-shadow: none !important;
            background: transparent !important;
            box-shadow: none !important;
            padding: 0 !important;
            margin: 0 !important;
            height: auto !important;
            outline: none;
            font-size: 30rpx;
            color: #222324;
            font-family: Source Han Sans CN, Source Han Sans CN;
         }
      :deep(.uni-input-placeholder) {
        color: #D5D5D5;
      }
         input.input-item::placeholder {
            font-size: 30rpx;
         }
      }
   }
.btngroup {
   .btngroup {
      display: flex;
      position: absolute;
      bottom:150rpx;
      bottom: 150rpx;
   }
   .u-button:first-child{
      margin-right: 30rpx;
   :deep(.u-button:first-child) {
      margin-right: 30rpx !important;
   }
   .custom-style {
      width: 276rpx;
      height: 76rpx;
   }
   :deep(.u-button){
      width: 276rpx !important;
      height: 76rpx !important;
   }
</style>