优化代码

src/api/account.js

@@ -150,3 +150,11 @@ export function queryPkDetail(data) {
 export function logout(data) {
     return postAxios({ url: 'user/logout',data})
 }
+//忘记密码
+export function forgetPassword(data) {
+    return postAxios({ url: 'user/forgetMail', data })
+}
+//重设密码
+export function resetPassword(data) {
+    return postAxios({ url: 'user/resetPassword', data })
+}

src/router/index.js

@@ -2,6 +2,9 @@ import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router
 import HomeView from '../views/HomeView.vue'
 import emailRegistration from '../views/emailRegistration.vue'
 import ActivateEmail from '../views/ActivateEmail.vue'
+import activationSuccessful from '../views/activationSuccessful.vue'
+import forgetPassword from '../views/forgetPassword.vue'
+import resetPassword from '../views/resetPassword.vue'
 import { setStorage , getStorage } from '@/utils/storage.js';
 const routes = [
   {
@@ -19,6 +22,22 @@ const routes = [
     name: 'ActivateEmail',
     component: ActivateEmail
   },
+  {
+    path: '/activationSuccessful',
+    name: 'activationSuccessful',
+    component: activationSuccessful
+  },
+  {
+    path: '/forgetPassword',
+    name: 'forgetPassword',
+    component: forgetPassword
+  },
+  {
+    path: '/resetPassword',
+    name: 'resetPassword',
+    component: resetPassword
+  },
+
   {
     path: '/nav',
     name: 'nav',

src/views/HomeView.vue

@@ -53,9 +53,15 @@
       </div>
     </div>
     <div class="register" v-if="!refSwitch">
+    <div class="register-content">
       <div class="register-text">还没有账号？</div>
       <div class="register-btn" @click="register">注册</div>
     </div>
+    <div class="register-content">
+      <div class="register-text">已有账号？</div>
+      <div class="register-btn" @click="forgetPassword">忘记密码？</div>
+    </div>
+    </div>
   </div>
 </template>
 
@@ -144,7 +150,9 @@ function fuSWitch() {
 function register() {
   router.push("/emailRegistration");
 }
-
+function forgetPassword() {
+  router.push("/forgetPassword");
+}
 // 获取二维码
 function fetchQrcode() {
   getVxQrcode().then((res) => {
@@ -226,7 +234,7 @@ onUnmounted(() => {
   width: 627px;
   height: 40px;
   display: flex;
-  justify-content: flex-end;
+  justify-content:space-between;
 }
 .register-text {
   font-size: 18px;
@@ -234,6 +242,9 @@ onUnmounted(() => {
   font-weight: bold;
   margin-right: 10px;
 }
+.register-content{
+  display: flex;
+}
 .register-btn {
   font-size: 18px;
   color: #5fdbde;

src/views/activationSuccessful.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="email-registration">
+    <!-- 完成注册 -->
+    <div class="form">
+        <div class="title">
+            验证成功
+        </div>
+      </div>
+    </div>
+</template>
+<script setup>
+
+</script>
+
+<style scoped>
+.email-registration {
+  padding: 0;
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+  background-image: url(../assets/bg.png);
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.form {
+  margin-top: 30px;
+  width: 80%;
+  height: 80%;
+  background-image: linear-gradient(180deg, #dbf0f1, #ffffff);
+  border-radius: 10px;
+  border: 1px solid #4fcacd;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.title {
+  font-size: 100px;
+  color: #03aba8;
+  font-weight: bold;
+}
+</style>

src/views/emailRegistration.vue

@@ -38,9 +38,13 @@
       <div class="Hint">
           已向您的{{Email}}邮箱发送了一封验证邮件，请点击邮件中的链接完成注册。
       </div>
-      <div class="ResendEmail" @click="ResendEmail">
+      <div 
-        重发邮件
+          class="ResendEmail" 
-      </div>
+          @click="ResendEmail"
+          :style="isCounting ? 'background-image: linear-gradient(0deg, #cccccc, #dddddd); cursor: not-allowed;' : ''"
+        >
+          {{ isCounting ? `${countdown}秒后重发` : '重发邮件' }}
+        </div>
     </div>
   </div>
 </template>
@@ -67,6 +71,23 @@ const ConfirmPassword = ref("");// 确认密码
 const token = tokenStore()
 const user = UserStore()
 const userNamebtn = ref(false)
+const countdown = ref(0); // 倒计时秒数
+const isCounting = ref(false); // 是否正在倒计时
+let timer = null; // 定时器
+
+function startCountdown() {
+  countdown.value = 60;
+  isCounting.value = true;
+  timer = setInterval(() => {
+    countdown.value--;
+    if (countdown.value <= 0) {
+      clearInterval(timer);
+      isCounting.value = false;
+    }
+  }, 1000);
+}
+
+
 // 用户名失去焦点
 function userNameBlur() {
   if (userName.value.length < 6 || userName.value.length > 16 || userName.value == '' || userName.value == null) {
@@ -121,6 +142,7 @@ function nextStep() {
     check(res.id);
     token.setToken(res.token);
     setStorage('token', res.token)
+    startCountdown();
   }).catch(err => {});
 }
 
@@ -146,6 +168,7 @@ function pollstop() {
 function ResendEmail() {
   resendEmail({mailAddress: Email.value,type:1}).then(res => {
     ElMessage.success('邮件已重新发送');
+    startCountdown();
   }).catch(err => {});
 }
 //返回登录页

src/views/forgetPassword.vue

@@ -0,0 +1,334 @@
+<template>
+  <div class="email-registration">
+    <div class="stepBar">
+      <el-steps
+        style="background-color: #f5f5f500"
+        :active="active"
+        finish-status="success"
+        simple
+      >
+        <el-step title="账号信息" />
+        <el-step title="邮箱验证" />
+      </el-steps>
+    </div>
+    <!-- 账号信息 -->
+    <div class="form" v-if="active === 0">
+      <div class="title">找回密码</div>
+      <div class="Email">
+        <el-input
+          type="text"
+          size="large"
+          class="input-item"
+          v-model="Email"
+          placeholder="请输入需要找回密码的邮箱"
+          @keydown.enter.native="nextStep"
+        />
+      </div>
+      <div class="btn">
+        <div class="Return" @click="Return">返回</div>
+        <div class="nextStep" @click="nextStep">下一步</div>
+      </div>
+    </div>
+    <!-- 完成注册 -->
+    <div class="form" v-if="active === 1">
+      <div class="title">邮箱验证</div>
+      <div class="Hint">
+        已向您的{{ Email }}邮箱发送了一封验证邮件，请点击邮件中的链接完成找回。
+      </div>
+      <div class="ResendEmailbtn">
+        <div class="Return" @click="previousStep">上一步</div>
+        <div 
+          class="ResendEmail" 
+          @click="nextStep(1)"
+          :style="isCounting ? 'background-image: linear-gradient(0deg, #cccccc, #dddddd); cursor: not-allowed;' : ''"
+        >
+          {{ isCounting ? `${countdown}秒后重发` : '重发邮件' }}
+        </div>
+        <div class="Return" @click="Return">返回登录</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {forgetPassword} from "@/api/account"; // 导入登录接口
+import {
+  ref, // 响应式基础
+  watch, // 侦听器
+  onMounted, // 组件挂载完成后执行
+  onUpdated, // 组件更新后执行
+  onUnmounted, // 组件销毁前执行
+} from "vue";
+import { ElMessage } from "element-plus";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const active = ref(0); // 当前步骤
+const Email = ref(""); // 邮箱
+const countdown = ref(0); // 倒计时秒数
+const isCounting = ref(false); // 是否正在倒计时
+let timer = null; // 定时器
+
+function startCountdown() {
+  countdown.value = 60;
+  isCounting.value = true;
+  timer = setInterval(() => {
+    countdown.value--;
+    if (countdown.value <= 0) {
+      clearInterval(timer);
+      isCounting.value = false;
+    }
+  }, 1000);
+}
+
+//下一步
+function nextStep(type) {
+  if (isCounting.value) return;
+  
+  // 邮箱验证
+  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  if (!emailRegex.test(Email.value)) {
+    ElMessage.error("请输入有效的邮箱地址");
+    return;
+  }
+  
+  forgetPassword({
+    mailAddress: Email.value,
+  }).then((res) => {
+      startCountdown();
+      if (type === 1) {
+        
+      }else{
+        active.value = active.value + 1;
+      }
+
+      ElMessage.success("邮件发送成功");
+  }).catch((err) => {
+    ElMessage.error("邮件发送失败");
+  });
+}
+
+function previousStep() {
+    active.value = active.value - 1;
+}
+
+
+//返回登录页
+function Return() {
+  router.push("/");
+}
+// watch(refname, async (newQuestion, oldQuestion) => {
+//   // 变化后执行
+// });
+onMounted(() => {
+  // 组件挂载完成后执行
+});
+onUpdated(() => {
+  // 组件更新后执行
+});
+onUnmounted(() => {
+  if (timer) clearInterval(timer);
+});
+</script>
+
+<style scoped>
+.email-registration {
+  padding: 0;
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+  background-image: url(../assets/bg.png);
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.stepBar {
+  width: 900px;
+}
+.form {
+  margin-top: 30px;
+  width: 900px;
+  height: 600px;
+  background-image: linear-gradient(180deg, #dbf0f1, #ffffff);
+  border-radius: 10px;
+  border: 1px solid #4fcacd;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.title {
+  font-size: 30px;
+  color: #4fcacd;
+  margin-top: 70px;
+  text-align: center;
+  font-weight: bold;
+}
+.Hint {
+  width: 900px;
+  height: 400px;
+  color: #4fcacd;
+  font-size: 20px;
+  text-align: center;
+  line-height: 500px;
+  margin-top: -50px;
+}
+.ResendEmailbtn{
+    width: 100%;
+    margin-top: 50px;
+    display: flex;
+    justify-content:space-around;
+    align-items: center;
+}
+.ResendEmail {
+  width: 200px;
+  height: 40px;
+  background-image: linear-gradient(0deg, #4fcacd, #5fdbde);
+  border-radius: 10px;
+  color: #ffffff;
+  font-size: 16px;
+  text-align: center;
+  line-height: 40px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.ResendEmail:hover {
+  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
+  transform: scale(1.08);
+  opacity: 0.8;
+}
+.Email {
+  margin-top: 150px;
+  width: 90%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.Password {
+  margin-top: 30px;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.ConfirmPassword {
+  margin-top: 30px;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.password-tip {
+  font-size: 12px;
+  color: #8c939d;
+  margin-top: 10px;
+}
+.btn {
+  width: 70%;
+  margin-top: 150px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.Return {
+  width: 200px;
+  height: 40px;
+  background-image: linear-gradient(0deg, #4fcacd, #5fdbde);
+  border-radius: 10px;
+  color: #ffffff;
+  font-size: 16px;
+  text-align: center;
+  line-height: 40px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.Return:hover {
+  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
+  transform: scale(1.08);
+  opacity: 0.8;
+}
+.nextStep {
+  width: 200px;
+  height: 40px;
+  background-image: linear-gradient(0deg, #4fcacd, #5fdbde);
+  border-radius: 10px;
+  color: #ffffff;
+  font-size: 16px;
+  text-align: center;
+  line-height: 40px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.nextStep:hover {
+  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
+  transform: scale(1.08);
+  opacity: 0.8;
+}
+.avatar {
+  width: 90%;
+  margin-top: 30px;
+  height: 178px;
+}
+.input {
+  width: 90%;
+  margin-top: 100px;
+  height: 50px;
+}
+.input-item {
+  border: none;
+  width: 80%;
+  height: 100%;
+  background-color: #ffffff00;
+  border-bottom: 1px solid #4fcacd;
+}
+:deep(.el-input__wrapper) {
+  box-shadow: none !important;
+  background-color: transparent !important;
+}
+:deep(.el-input__wrapper.is-focus) {
+  box-shadow: none !important;
+}
+.avatar-uploader {
+  width: 178px;
+  height: 178px;
+  border: 3px solid #4fcacd;
+  border-radius: 10px;
+}
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+.avatar-tip {
+  width: 178px;
+  text-align: center;
+  font-size: 12px;
+  color: #8c939d;
+}
+</style>

src/views/resetPassword.vue

@@ -0,0 +1,300 @@
+<template>
+  <div class="email-registration">
+    <!-- 账号信息 -->
+    <div class="form" v-if="active === 0">
+      <div class="title">重设密码</div>
+      <div class="Password">
+        <el-input
+          type="Password"
+          size="large"
+          class="input-item"
+          v-model="Password"
+          show-password
+          placeholder="请输入新密码"
+        />
+        <text class="password-tip">您的密码必须包含大小字母和数字，长度在6-16位之间</text>
+      </div>
+      <div class="ConfirmPassword">
+        <el-input
+          type="Password"
+          size="large"
+          class="input-item"
+          v-model="ConfirmPassword"
+          show-password
+          placeholder="请再次输入新密码"
+        />
+      </div>
+      <div class="btn">
+        <div class="nextStep" @click="nextStep">确认</div>
+      </div>
+    </div>
+    <!-- 完成注册 -->
+    <div class="forms" v-if="active === 1">
+        <div class="title">重设密码成功</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from "vue-router";
+import { ref, watch, onMounted, onUpdated, onUnmounted } from "vue";
+import { resetPassword } from "@/api/account";
+const active = ref(0);// 当前步骤
+const route = useRoute();
+const token = ref("");
+const Password = ref("");// 密码
+const ConfirmPassword = ref("");// 确认密码
+import { ElMessage } from "element-plus";
+
+//确认
+function nextStep() {
+  // 密码验证
+  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,16}$/;
+  if (!passwordRegex.test(Password.value)) {
+    ElMessage.error('密码必须包含大小写字母和数字，长度6-16位');
+    return;
+  }
+  // 确认密码验证
+  if (Password.value !== ConfirmPassword.value) {
+    ElMessage.error('两次输入的密码不一致');
+    return;
+  }
+  resetPassword({
+    token: token.value,
+    password: Password.value,
+    confirmPassword: ConfirmPassword.value
+  }).then(() => {
+    active.value = active.value + 1;
+  })
+}
+
+onMounted(() => {
+  token.value = route.params.token;
+});
+
+onUpdated(() => {
+  // 组件更新后执行
+});
+
+onUnmounted(() => {
+  // 组件销毁前执行
+});
+</script>
+
+
+<style scoped>
+.email-registration {
+  padding: 0;
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+  background-image: url(../assets/bg.png);
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+.stepBar {
+  width: 80%;
+}
+.form {
+  margin-top: 30px;
+  width: 80%;
+  height: 80%;
+  background-image: linear-gradient(180deg, #dbf0f1, #ffffff);
+  border-radius: 10px;
+  border: 1px solid #4fcacd;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.forms{
+    margin-top: 30px;
+  width: 900px;
+  height: 600px;
+  background-image: linear-gradient(180deg, #dbf0f1, #ffffff);
+  border-radius: 10px;
+  border: 1px solid #4fcacd;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.title{
+  font-size: 70px;
+  color: #4fcacd;
+  margin-top: 70px;
+  text-align: center;
+  font-weight: bold;
+}
+.Hint{
+  width: 900px;
+  height: 400px;
+  color:#4fcacd;
+  font-size: 20px;
+  text-align: center;
+  line-height: 500px;
+  margin-top: -50px;
+}
+.ResendEmail{
+  width: 200px;
+  height: 40px;
+  background-image: linear-gradient(0deg, #4fcacd, #5fdbde);
+  border-radius: 10px;
+  color: #ffffff;
+  font-size: 16px;
+  text-align: center;
+  line-height: 40px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 50px;
+}
+.ResendEmail:hover{
+  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
+    transform: scale(1.08);
+    opacity: 0.8;
+}
+.Email{
+  margin-top: 30px;
+  width: 90%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.Password{
+  margin-top: 30px;
+  width: 90%;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.ConfirmPassword{
+  margin-top: 50px;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.password-tip{
+  font-size: 40px;
+  color: #8c939d;
+  margin-top: 10px;
+}
+.btn{
+  width: 70%;
+  margin-top: 70px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.Return{
+  width: 200px;
+  height: 40px;
+  background-image: linear-gradient(0deg, #4fcacd, #5fdbde);
+  border-radius: 10px;
+  color: #ffffff;
+  font-size: 16px;
+  text-align: center;
+  line-height: 40px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.Return:hover{
+    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
+    transform: scale(1.08);
+    opacity: 0.8;
+}
+.nextStep{
+  width: 100%;
+  height: 100px;
+  background-image: linear-gradient(0deg, #4fcacd, #5fdbde);
+  border-radius: 10px;
+  color: #ffffff;
+  font-size: 50px;
+  text-align: center;
+  line-height: 100px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.nextStep:hover{
+    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
+    transform: scale(1.08);
+    opacity: 0.8;
+}
+.avatar {
+  width: 90%;
+  margin-top: 30px;
+  height: 178px;
+}
+.input {
+  width: 90%;
+  margin-top: 100px;
+  height: 200px;
+}
+.input-item {
+  border: none;
+  width: 80%;
+  height: 100px;
+  background-color: #ffffff00;
+  border-bottom: 1px solid #4fcacd;
+  font-size: 40px;
+}
+:deep(.el-input__wrapper) {
+    height: 50px;
+  box-shadow: none !important;
+  background-color: transparent !important;
+}
+:deep(.el-input__icon) {
+    width: 50px;
+    height: 50px;
+}
+:deep(.el-input__wrapper.is-focus) {
+  box-shadow: none !important;
+}
+.avatar-uploader {
+  width: 178px;
+  height: 178px;
+  border: 3px solid #4fcacd;
+  border-radius: 10px;
+}
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+.avatar-tip {
+  width: 178px;
+  text-align: center;
+  font-size: 12px;
+  color: #8c939d;
+}
+</style>
+