罗广辉
2026-06-18 44dd9c4eb8a2489c63a5eb53fd4254bbb3510e95
src/subPackages/userDetail/password/index.vue
@@ -2,26 +2,36 @@
<template>
   <view class="container">
      <view class="detailBox">
         <div class="orderRow">
            <div class="rowTitle">原始密码</div>
            <u-input input-align="right" v-model="passwordForm.oldPassword" type="password" placeholder="请输入"
               class="input-item" />
         </div>
         <div class="orderRow">
            <div class="rowTitle">新密码</div>
            <u-input input-align="right" v-model="passwordForm.newPassword" type="password" placeholder="请输入"
               class="input-item" />
         <div class="detailCon">
            <div class="orderRow">
               <!-- type="password" :password-icon="passwordIcon" -->
               <div class="rowTitle">原始密码</div>
               <input type="password" v-model="passwordForm.oldPassword" placeholder="请输入" class="input-item" />
            </div>
            <div class="orderRow">
               <div class="rowTitle">新密码</div>
               <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" type="password" placeholder="请输入"
               class="input-item" />
            </div>
            <div class="orderRow">
               <div class="rowTitle">确认密码</div>
               <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>
@@ -36,13 +46,44 @@
      updateInfo,
      updatePassword
   } from '@/api/user/index.js';
   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)) {
         uni.showToast({
            title: '密码不能包含中文字符',
            icon: 'none',
            duration: 2000
         });
         return false;
      }
      return true;
   };
   // 校验密码复杂度(长度≥6位,包含字母和数字)
   const validatePasswordStrength = (password) => {
      if (password.length < 6) {
         uni.showToast({
            title: '密码长度不能少于6位',
            icon: 'none',
            duration: 2000
         });
         return false;
      }
      return true;
   };
   const clearForm = () => {
      passwordForm.value = {
         oldPassword: '',
@@ -54,7 +95,43 @@
      clearForm();
   };
   const submit = () => {
      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 (passwordForm.value.newPassword !== passwordForm.value.newPassword1) {
         uni.showToast({
            title: '两次输入的新密码不一致',
            icon: 'none',
            duration: 2000
         });
         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 => {
@@ -62,13 +139,17 @@
            uni.showToast({
               title: '修改信息成功',
               icon: 'none',
               duration: 2000
               duration: 1500
            });
            clearForm();
            userStore.setUserInfo(null)
            uni.redirectTo({
               url: '/pages/login/index'
            })
            uni.removeStorageSync('rememberedUser');
            setTimeout(() => {
               uni.reLaunch({
                  url: '/pages/login/index'
               })
            }, 1500);
            return
         } else {
            uni.showToast({
@@ -77,7 +158,10 @@
               duration: 2000
            });
         }
         submitLoading.value = false;
      }).catch(() => {
         submitLoading.value = false;
      });
   };
@@ -88,61 +172,62 @@
<style lang="scss" scoped>
   .container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: url('/src/static/images/user/allBg.svg') no-repeat center center;
      background-size: cover;
      background-attachment: fixed;
   }
   .detailBox {
      margin-top: 20px;
      width: 351px;
      margin-top: 40rpx;
      width: 702rpx;
      min-height: 163px;
      min-height: 326rpx;
      background: #FFFFFF;
      border-radius: 6px;
      border-radius: 12rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      .detailCon {
         padding: 0 24rpx;
      }
      .orderRow {
         display: flex;
         justify-content: space-between;
         align-items: center;
         height: 48px;
         border-bottom: 1px solid #f5f5f5;
         height: 96rpx;
         border-bottom: 2rpx solid #f5f5f5;
         color: #7b7b7b;
         padding: 0 12px;
         .rowTitle {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 15px;
            font-size: 30rpx;
            color: #222324;
            white-space: nowrap;
         }
         ::v-deep .u-input {
         input.input-item {
            text-align: right;
            border: none !important;
            background: transparent !important;
         }
         ::v-deep .u-input__input {
            border: none !important;
            box-shadow: none !important;
            background: transparent !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;
         }
      }
   }
@@ -150,15 +235,19 @@
   .btngroup {
      display: flex;
      position: absolute;
      bottom:75px;
      bottom: 150rpx;
   }
   .u-button:first-child {
      margin-right: 15px;
   :deep(.u-button:first-child) {
      margin-right: 30rpx !important;
   }
   .custom-style {
      width: 138px;
      height: 38px;
      width: 276rpx;
      height: 76rpx;
   }
</style>
   :deep(.u-button){
      width: 276rpx !important;
      height: 76rpx !important;
   }
</style>