feat: 修改密码

src/api/types/user.ts

@@ -4,7 +4,7 @@ export interface LoginData {
 }
 
 export interface UpdatePwdData {
-  id: number;
-  oldPassword: string;
+  // id: number;
+  // oldPassword: string;
   password: string;
 }

src/api/user.ts

@@ -8,7 +8,7 @@ export function login(data: LoginData): Promise<UserState> {
 }
 // 修改密码
 export function updatePwd(datas: UpdatePwdData): Promise<UserState> {
-  return axios.post('/api/admin/sys/user/update_password', datas);
+  return axios.post('/api/user/password/modify', {}, { params: datas });
 }
 // 退出登录
 export function userLogout() {

src/layout/default-layout.vue

@@ -5,16 +5,16 @@
         <h1 class="home-title">预约报名系统</h1>
       </div>
       <div class="home-action">
-        <div class="home-action-item">
+        <!-- <div class="home-action-item">
           <svg-icon name="icon-user" fill="#BFBFBF" />
           <span :title="userStore.name">{{ userStore.name }}</span>
-        </div>
-        <!-- <a-tooltip content="修改密码" position="br">
+        </div> -->
+        <a-tooltip content="修改密码" position="br">
           <div class="home-action-item cursor" @click="toResetPwd">
             <svg-icon name="icon-user" fill="#BFBFBF" />
             <span :title="userStore.name">{{ userStore.name }}</span>
           </div>
-        </a-tooltip> -->
+        </a-tooltip>
         <a-tooltip content="退出登录" position="br">
           <div class="home-action-item cursor" @click="toLogout">
             <svg-icon name="icon-logout" />
@@ -80,11 +80,7 @@
   </div>
 
   <!-- ResetPwd -->
-  <ResetPwd
-    ref="ResetPwdRef"
-    :user-info="userInfo"
-    @modified="resetPwdModified"
-  />
+  <ResetPwd ref="fesetPwdRef" @modified="resetPwdModified" />
 </template>
 
 <script lang="ts" setup>
@@ -106,12 +102,7 @@
   const router = useRouter();
 
   const curRouteName = ref('');
-  const userInfo = ref({
-    pwdCount: 0,
-    mobileNumber: 1,
-    userId: userStore.id,
-  });
-  // const ResetPwdRef = ref();
+  const fesetPwdRef = ref();
 
   function initData() {
     curRouteName.value = route.name as string;
@@ -122,12 +113,14 @@
     router.push({ name: val });
   }
 
-  // function toResetPwd() {
-  //   ResetPwdRef.value?.open();
-  // }
+  function toResetPwd() {
+    fesetPwdRef.value?.open();
+  }
 
   function resetPwdModified() {
-    userStore.logout();
+    setTimeout(() => {
+      userStore.logout();
+    }, 1000);
   }
 
   async function toLogout() {

src/store/modules/user/index.ts

@@ -15,6 +15,7 @@ const useUserStore = defineStore('user', {
     openId: null,
     sessionId: '',
     token: '',
+    firstLogin: false,
   }),
 
   getters: {

src/store/modules/user/types.ts

@@ -11,4 +11,5 @@ export interface UserState {
   openId: number | null;
   sessionId: string;
   token: string;
+  firstLogin: boolean;
 }

src/utils/formRules.ts

@@ -11,8 +11,8 @@ export const username: FieldRule[] = [
 export const password: FieldRule[] = [
   {
     required: true,
-    match: /^[a-zA-Z0-9_]{6,20}$/,
-    message: '密码只能由数字、字母和下划线组成，长度6-20个字符',
+    match: /^[a-zA-Z0-9]{6,12}$/,
+    message: '密码必须是大小写字母或者数字，长度6-12位',
   },
 ];
 

src/views/login/login/ResetPwd.vue

@@ -5,16 +5,18 @@
     title="修改密码"
     :mask-closable="false"
     :esc-to-close="false"
+    :closable="false"
+    @before-open="modalBeforeOpen"
   >
     <a-form ref="formRef" :model="formData" :rules="rules">
-      <a-form-item field="oldPassword" label="旧密码" auto-label-width>
+      <!-- <a-form-item field="oldPassword" label="旧密码" auto-label-width>
         <a-input-password
           v-model.trim="formData.oldPassword"
           placeholder="请输入旧密码"
           allow-clear
         >
         </a-input-password>
-      </a-form-item>
+      </a-form-item> -->
       <a-form-item field="password" label="新密码">
         <a-input-password
           v-model.trim="formData.password"
@@ -34,7 +36,7 @@
     </a-form>
 
     <template #footer>
-      <a-button @click="close">取消</a-button>
+      <a-button @click="cancel">取消</a-button>
       <a-button type="primary" :disabled="loading" @click="confirm"
         >确认</a-button
       >
@@ -43,14 +45,13 @@
 </template>
 
 <script setup lang="ts">
-  import { reactive, ref } from 'vue';
+  import { reactive, ref, nextTick } from 'vue';
   import type { FormInstance, FieldRule } from '@arco-design/web-vue/es/form';
-  import { password, strictPassword } from '@/utils/formRules';
+  import { password } from '@/utils/formRules';
   import useLoading from '@/hooks/loading';
   import { updatePwd } from '@/api/user';
   import { Message } from '@arco-design/web-vue';
-  import { getBase64 } from '@/utils/crypto';
-  import { useUserStore } from '@/store';
+  // import { getBase64 } from '@/utils/crypto';
   import useModal from '@/hooks/modal';
 
   defineOptions({
@@ -61,11 +62,10 @@
   const { visible, open, close } = useModal();
   defineExpose({ open, close });
 
-  const emit = defineEmits(['modified']);
+  const emit = defineEmits(['modified', 'cancel']);
 
-  const userStore = useUserStore();
   const defaultFormData = {
-    oldPassword: '',
+    // oldPassword: '',
     password: '',
     rePassword: '',
   };
@@ -73,30 +73,20 @@
 
   const formRef = ref<FormInstance>();
   const formData = reactive<FormDataType>({ ...defaultFormData });
-  const passwordRule: FieldRule[] = [
-    ...strictPassword,
-    {
-      validator: (value, callback) => {
-        if (value === userStore.account) {
-          return callback('禁止使用用户账户号作为密码');
-        }
-        return callback();
-      },
-    },
-  ];
+  const passwordRule: FieldRule[] = [...password];
   const rules: Record<keyof FormDataType, FieldRule[]> = {
-    oldPassword: password,
+    // oldPassword: password,
     password: [
       ...passwordRule,
-      {
-        validator: (value, callback) => {
-          if (value === formData.oldPassword) {
-            callback('新旧密码不可以相同');
-          } else {
-            callback();
-          }
-        },
-      },
+      // {
+      //   validator: (value, callback) => {
+      //     if (value === formData.oldPassword) {
+      //       callback('新旧密码不可以相同');
+      //     } else {
+      //       callback();
+      //     }
+      //   },
+      // },
     ],
     rePassword: [
       ...passwordRule,
@@ -120,15 +110,29 @@
 
     setLoading(true);
     const datas = {
-      id: userStore.id as number,
-      oldPassword: getBase64(formData.oldPassword),
-      password: getBase64(formData.password),
+      // oldPassword: formData.oldPassword,
+      password: formData.password,
     };
-    const res = await updatePwd(datas).catch(() => false);
+    let res = true;
+    await updatePwd(datas).catch(() => {
+      res = false;
+    });
     setLoading(false);
     if (!res) return;
     Message.success('修改成功！');
     emit('modified', datas);
     close();
   }
+
+  function cancel() {
+    emit('cancel');
+    close();
+  }
+
+  function modalBeforeOpen() {
+    formRef.value?.resetFields();
+    nextTick(() => {
+      formRef.value?.clearValidate();
+    });
+  }
 </script>

src/views/login/login/index.vue

@@ -57,6 +57,13 @@
       </div>
     </div>
   </div>
+
+  <!-- ResetPwd -->
+  <ResetPwd
+    ref="resetPwdRef"
+    @modified="resetPwdSuccess"
+    @cancel="resetCancel"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -68,12 +75,15 @@
   import { useAppStore, useUserStore } from '@/store';
   import { DEFAULT_ROUTE_NAME } from '@/router/constants';
 
+  import ResetPwd from './ResetPwd.vue';
+
   const router = useRouter();
   const appStore = useAppStore();
   const userStore = useUserStore();
   userStore.resetInfo();
   appStore.resetInfo();
 
+  const resetPwdRef = ref();
   const formRef = ref<FormInstance>();
   const formData = reactive({
     account: '',
@@ -94,6 +104,16 @@
     ],
   };
 
+  function resetPwdSuccess() {
+    router.push({
+      name: DEFAULT_ROUTE_NAME,
+    });
+  }
+
+  function resetCancel() {
+    userStore.resetInfo();
+  }
+
   /* submit */
   const { loading, setLoading } = useLoading();
   async function submit() {
@@ -106,6 +126,13 @@
     if (!data) return;
 
     userStore.setInfo(data);
+
+    // 首次登录强制修改密码
+    if (data.firstLogin) {
+      resetPwdRef.value?.open();
+      return;
+    }
+
     router.push({
       name: DEFAULT_ROUTE_NAME,
     });