feat: 修改密码

src/components/common/CommonHeader.vue

@@ -47,6 +47,7 @@ import { useAppStore } from '@/stores/app.ts';
 import { computed } from 'vue';
 import { useJump } from '@/composable/useJump.ts';
 import { RouteName } from '@/router/router.ts';
+import { useRoute } from 'vue-router';
 
 const props = withDefaults(
   defineProps<{
@@ -58,6 +59,7 @@ const props = withDefaults(
 
 const appStore = useAppStore();
 const { router } = useJump();
+const route = useRoute();
 
 const userInfo = computed(() => {
   return appStore.userInfo;
@@ -77,7 +79,9 @@ const handleLogin = () => {
 };
 
 const toUserCenter = () => {
-  router.push(RouteName.userCenter);
+  if (!(route.name as string).includes(RouteName.userCenter)) {
+    router.push(RouteName.userCenter);
+  }
 };
 
 const handleMenuChange = () => {};

src/components/login/LoginView.vue

@@ -273,8 +273,7 @@ const login = async () => {
   if (success) {
     console.log(data);
     if (saveLogin.value.length) {
-      let date: any = new Date(Date.now() + 1000 * 60 * 60 * 24 * 7);
-      date = date.toUTCString();
+      const date: any = new Date(Date.now() + 1000 * 60 * 60 * 24 * 7);
       cookie.set('token', data.token, { expires: date });
       appStore.changeToken(data.token);
     }

src/types/api.ts

@@ -41,4 +41,6 @@ export enum RequestUrl {
   myParkIndustrialDetail = '/lyy/api/sysAuth/detailPark',
   /** 用户信息 */
   userInfo = '/user/user/detail',
+  /** 修改密码 */
+  changePassword = '/user/user/update',
 }

src/types/enum.ts

@@ -51,3 +51,13 @@ export enum DetailType {
   /** 载体 */
   carrier = 'carrier',
 }
+
+/**
+ * 发送验证码类型
+ */
+export enum SendMessageType {
+  register = 1,
+  login = 2,
+  resetPassword = 3,
+  changePassword = 4,
+}

src/views/user/ChangePassword.vue

 <!-- 用户中心-修改密码 -->
 <template>
-  <div>修改密码</div>
+  <div class="change-password h-full bg-white pl-10 pt-10">
+    <ElForm
+      ref="formRef"
+      hide-required-asterisk
+      :model="formData"
+      :rules="rule"
+      label-width="72px"
+      class="font-yahei"
+    >
+      <ElFormItem prop="phone" label="手机号" class="h-10">
+        <ElInput
+          v-model="formData.phone"
+          class="!w-[280px] rounded-sm text-sm leading-6 text-[#1A1A1A]"
+          placeholder="请输入手机号"
+        />
+      </ElFormItem>
+      <ElFormItem prop="code" label="验证码">
+        <ElInput
+          v-model="formData.code"
+          class="mr-3 !w-[280px] rounded-sm text-sm leading-6 text-[#1A1A1A]"
+          placeholder="请输入验证码"
+        />
+        <div
+          v-if="!codeCountdown"
+          class="cursor-pointer text-sm leading-6 text-[#4D4D4D]"
+          @click="handleCode"
+        >
+          获取验证码
+        </div>
+        <ElCountdown
+          v-else
+          class="text-[#4D4D4D]"
+          format="ss"
+          :value="codeCountdown"
+          :value-style="{
+            fontSize: '14px',
+            lineHeight: '24px',
+            color: '#4d4d4d',
+          }"
+          @finish="handleFinish"
+        >
+          <template #suffix>
+            <span class="text-sm leading-6 text-[#4D4D4D]">s</span>
+          </template>
+        </ElCountdown>
+      </ElFormItem>
+      <ElFormItem prop="password" label="新密码">
+        <ElInput
+          v-model="formData.password"
+          class="!w-[280px] rounded-sm text-sm leading-6 text-[#1A1A1A]"
+          placeholder="请输入新密码"
+          :maxlength="20"
+          :type="passwordShow ? 'text' : 'password'"
+        />
+        <div class="ml-3 h-6 w-6 cursor-pointer" @click="passwordShow = !passwordShow">
+          <img v-if="passwordShow" src="@/assets/images/password_show.png" />
+          <img v-else class="-" src="@/assets/images/password_hide.png" />
+        </div>
+      </ElFormItem>
+      <ElFormItem prop="confirmPassword" label="再次确认">
+        <ElInput
+          v-model="formData.confirmPassword"
+          class="!w-[280px] rounded-sm text-sm leading-6 text-[#1A1A1A]"
+          placeholder="请输入新密码"
+          :maxlength="20"
+          :type="confirmPasswordShow ? 'text' : 'password'"
+        />
+        <div
+          class="ml-3 h-6 w-6 cursor-pointer"
+          @click="confirmPasswordShow = !confirmPasswordShow"
+        >
+          <img v-if="confirmPasswordShow" src="@/assets/images/password_show.png" />
+          <img v-else class="-" src="@/assets/images/password_hide.png" />
+        </div>
+      </ElFormItem>
+    </ElForm>
+    <div>
+      <div
+        class="ml-[70px] mt-10 flex h-[30px] w-[60px] cursor-pointer items-center rounded-sm bg-[#C0322B] px-4 text-sm font-medium leading-[22px] text-white"
+        @click="handleSubmit"
+      >
+        修改
+      </div>
+    </div>
+  </div>
 </template>
+
+<script setup lang="ts">
+import { useRequest } from '@/composable/useRequest.ts';
+import type { FormInstance } from 'element-plus/lib';
+import { RequestUrl } from '@/types/api.ts';
+import { ref } from 'vue';
+import { useMessage } from '@/composable/useMessage.ts';
+import { SendMessageType } from '@/types/enum.ts';
+
+export interface ChangePasswordData {
+  /** 验证码 */
+  code: string;
+  password: string;
+  phone: string;
+  confirmPassword: string;
+}
+
+const { request: changePassword } = useRequest(RequestUrl.changePassword, {
+  method: 'POST',
+  baseURL: import.meta.env.VITE_BASE_USER_URL,
+});
+
+const { request: sendMessage } = useRequest(RequestUrl.sendMessage, {
+  method: 'POST',
+  baseURL: import.meta.env.VITE_BASE_USER_URL,
+});
+
+const { message } = useMessage();
+
+const formData = ref<ChangePasswordData>({
+  phone: '',
+  code: '',
+  password: '',
+  confirmPassword: '',
+});
+
+const passwordShow = ref(false);
+const confirmPasswordShow = ref(false);
+
+/** 验证码倒计时 */
+const codeCountdown = ref(0);
+
+/** 倒计时时长 */
+const DURATION = 60;
+
+const formRef = ref<FormInstance>();
+
+const validatePassword = (rule: any, value: any, cb: any) => {
+  const { password, confirmPassword } = formData.value;
+  if (password !== confirmPassword) {
+    cb('两次输入密码不一致');
+  } else {
+    cb();
+  }
+};
+const rule = ref({
+  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+  confirmPassword: [
+    { required: true, message: '请输入确认密码', trigger: 'blur' },
+    { validator: validatePassword, trigger: 'blur' },
+  ],
+});
+
+const handleChangePassword = async () => {
+  try {
+    const { code, password, phone } = formData.value;
+    const params = {
+      code,
+      password,
+      phone,
+    };
+    const { msg, success } = await changePassword(params);
+    if (success) {
+      message.success('修改成功');
+      setTimeout(() => {
+        window.location.reload();
+      }, 500);
+    } else {
+      message.error(msg || '修改失败');
+    }
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+const handleSubmit = () => {
+  if (formRef.value) {
+    formRef.value.validate((valid) => {
+      if (valid) {
+        handleChangePassword();
+        return true;
+      } else {
+        return false;
+      }
+    });
+  }
+};
+const handleCode = () => {
+  if (formRef.value) {
+    formRef.value.validateField('phone', (valid) => {
+      if (valid) {
+        const { phone } = formData.value;
+        sendMessage({ phone, type: SendMessageType.changePassword }).then(() => {
+          codeCountdown.value = Date.now() + DURATION * 1000;
+        });
+
+        return true;
+      } else {
+        return false;
+      }
+    });
+  }
+};
+/**
+ * 倒计时结束
+ */
+const handleFinish = () => {
+  codeCountdown.value = 0;
+};
+</script>
+
+<style lang="scss">
+.change-password {
+  .el-input__wrapper {
+    box-shadow: none;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    &:hover {
+      box-shadow: none;
+    }
+  }
+  .el-input__wrapper.is-focus {
+    box-shadow: none;
+  }
+}
+</style>

src/views/user/UserCenter.vue

@@ -13,7 +13,7 @@
                 <CommonImage class="h-[50px] w-[50px]" :src="null" />
               </div>
               <div class="mt-[7px] text-xs font-medium leading-[22px] text-[#1A1A1A]">
-                130XXXX8888
+                {{ userInfo?.phone }}
               </div>
             </div>
           </div>
@@ -49,9 +49,15 @@ import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { RouteName } from '@/router/router.ts';
 import { useJump } from '@/composable/useJump.ts';
+import { useAppStore } from '@/stores/app.ts';
 
 const route = useRoute();
 const { router } = useJump();
+const appStore = useAppStore();
+
+const userInfo = computed(() => {
+  return appStore.userInfo;
+});
 
 /** 是否为我的园区 */
 const isMyPark = computed(() => {