吉安感知网项目-前端
chenyao
2026-01-09 ebd0ec4f51288042b6fc5bf714b1febbb63cfacc
uniapps/work-app/src/subPackages/userDetail/password/index.vue
@@ -4,23 +4,32 @@
      <view class="detailBox">
         <div class="detailCon">
            <div class="orderRow">
               <div class="rowTitle">原始密码</div>
               <input type="password" v-model="passwordForm.oldPassword" placeholder="请输入" class="input-item" />
               <div class="rowTitle">账号</div>
               <input type="text" v-model="passwordForm.username" placeholder="请输入账号" class="input-item" />
            </div>
            <div class="orderRow">
               <div class="rowTitle">新密码</div>
               <input type="password" v-model="passwordForm.newPassword" placeholder="请输入" class="input-item" />
               <div class="rowTitle">密码</div>
               <input type="password" v-model="passwordForm.password" placeholder="请输入" class="input-item" />
            </div>
            <div class="orderRow">
               <div class="rowTitle">确认密码</div>
               <input type="password" v-model="passwordForm.newPassword1" placeholder="请输入" class="input-item" />
               <input type="password" v-model="passwordForm.password2" placeholder="请输入" class="input-item" />
            </div>
            <div class="orderRow">
               <div class="rowTitle">验证码</div>
               <div class="code-container">
                  <input type="text" v-model="passwordForm.code" placeholder="请输入验证码" class="input-item code-input" />
                  <u-button :disabled="countDown > 0" @click="sendVerificationCode" class="send-code-btn">
                     {{ countDown > 0 ? `${countDown}s后重发` : '发送验证码' }}
                  </u-button>
               </div>
            </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="#AEAEAE" class="custom-style"  @click="reset">重置</u-button>
         <u-button color="#1D6FE9" class="custom-style"  @click="submit">提交</u-button>
      </view>
   </view>
</template>
@@ -30,21 +39,25 @@
      useUserStore
   } from "@/store/index.js";
   import md5 from "js-md5";
   import {
      getUserInfo,
      updateInfo,
      updatePassword
   } from '@/api/user/index.js';
   import { getUserInfo,
   updateInfo,
   updatePassword,
   sendResetCode,
   resetPassword
} 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 passwordForm = ref({
   username: '',
   password: '',
   password2: '',
   code: ''
});
const countDown = ref(0);
let timer = null;
   // 校验密码不能包含中文
   const validatePasswordNoChinese = (password) => {
      const chineseRegex = /[\u4e00-\u9fa5]/;
@@ -80,30 +93,82 @@
   };
   const clearForm = () => {
      passwordForm.value = {
         oldPassword: '',
         newPassword: '',
         newPassword1: '',
         username: '',
         password: '',
         password2: '',
         code: ''
      };
      countDown.value = 0;
      if (timer) {
         clearInterval(timer);
         timer = null;
      }
   };
   const reset = () => {
      clearForm();
   };
   const submit = () => {
      // 原始密码校验
      if (!passwordForm.value.oldPassword) {
   // 发送验证码
   const sendVerificationCode = () => {
      const { username } = passwordForm.value;
      if (!username) {
         uni.showToast({
            title: '请输入原始密码',
            title: '请先输入账号',
            icon: 'none',
            duration: 2000
         });
         return;
      }
      // 中文校验
      if (!validatePasswordNoChinese(passwordForm.value.newPassword)) return;
      // 新密码校验
      if (!passwordForm.value.newPassword) {
      // 这里假设账号就是手机号,实际项目中可能需要验证格式
      sendResetCode(username).then(res => {
         if (res.data.code === 200) {
            uni.showToast({
               title: '验证码发送成功',
               icon: 'success',
               duration: 2000
            });
            // 开始倒计时
            countDown.value = 60;
            timer = setInterval(() => {
               countDown.value--;
               if (countDown.value <= 0) {
                  clearInterval(timer);
                  timer = null;
               }
            }, 1000);
         } else {
            uni.showToast({
               title: res.data.msg || '验证码发送失败',
               icon: 'none',
               duration: 2000
            });
         }
      }).catch(err => {
         uni.showToast({
            title: '网络错误,请稍后重试',
            icon: 'none',
            duration: 2000
         });
      });
   };
   const reset = () => {
      clearForm();
   };
   const submit = () => {
      const { username, password, password2, code } = passwordForm.value;
      // 账号校验
      if (!username) {
         uni.showToast({
            title: '请输入账号',
            icon: 'none',
            duration: 2000
         });
         return;
      }
      // 新密码校验
      if (!password) {
         uni.showToast({
            title: '请输入新密码',
            icon: 'none',
@@ -111,9 +176,12 @@
         });
         return;
      }
      // 确认密码校验
      if (passwordForm.value.newPassword !== passwordForm.value.newPassword1) {
      // 中文校验
      if (!validatePasswordNoChinese(password)) return;
      // 确认密码校验
      if (password !== password2) {
         uni.showToast({
            title: '两次输入的新密码不一致',
            icon: 'none',
@@ -122,34 +190,56 @@
         return;
      }
      // 验证码校验
      if (!code) {
         uni.showToast({
            title: '请输入验证码',
            icon: 'none',
            duration: 2000
         });
         return;
      }
      // 复杂度校验
      if (!validatePasswordStrength(passwordForm.value.newPassword)) return;
      updatePassword(md5(passwordForm.value.oldPassword),
         md5(passwordForm.value.newPassword),
         md5(passwordForm.value.newPassword1)).then(res => {
      if (!validatePasswordStrength(password)) return;
      // 调用重置密码接口
      const resetData = {
         username,
         // password: md5(password),
         // confirmPassword: md5(password2),
      password: password,
      password2: password2,
         code
      };
    console.log('canshu',resetData)
      resetPassword(resetData).then(res => {
         if (res.data.code === 200) {
            uni.showToast({
               title: '修改信息成功',
               title: '密码修改成功',
               icon: 'none',
               duration: 2000
            });
            clearForm();
            userStore.setUserInfo(null)
            userStore.setUserInfo(null);
            uni.removeStorageSync('rememberedUser');
            uni.reLaunch({
               url: '/pages/login/index'
            })
            });
         } else {
            uni.showToast({
               title: res.msg,
               title: res.data.msg || '密码修改失败',
               icon: 'none',
               duration: 2000
            });
         }
      }).catch(err => {
         uni.showToast({
            title: '网络错误,请稍后重试',
            icon: 'none',
            duration: 2000
         });
      });
   };
   onShow(async () => {
      clearForm();
@@ -215,6 +305,36 @@
         input.input-item::placeholder {
            font-size: 30rpx;
         }
         .code-container {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            width: 100%;
         }
         .code-input {
            flex: 1;
            max-width: 400rpx;
            margin-right: 20rpx;
         }
         .send-code-btn {
            width: 200rpx;
            height: 70rpx;
            line-height: 70rpx;
            font-size: 26rpx;
            background: #f5f5f5;
            color: #666;
            border-radius: 8rpx;
            text-align: center;
            border: none;
         }
         .send-code-btn:disabled {
            background: #e0e0e0;
            color: #999;
         }
      }
   }
@@ -230,10 +350,13 @@
   .custom-style {
      width: 276rpx;
      height: 76rpx;
      height: 100rpx;
        font-family: "Source Han Sans CN";
      font-weight: 400;
      font-size: 36rpx;
   }
   :deep(.u-button.data-v-461e713c){
      width: 276rpx !important;
      height: 76rpx !important;
      height: 100rpx !important;
   }
</style>