支持邮件直接跳转

src/App.vue

@@ -55,13 +55,13 @@ onMounted(() => {
   const rules = ['/editor/','/team_editor/','/manager_template/','/create_template/']
   window.onbeforeunload = function(event) {
     const currentUrl = window.location.pathname;
+    console.log(currentUrl)
     const shouldShowWarning = rules.some(rule => currentUrl.includes(rule));
-    console.log(shouldShowWarning)
     if (shouldShowWarning) {
       event.preventDefault();
-      const confirmationMessage = "你确定要离开这个页面吗？离开前注意检查是否已经保存";
-      event.returnValue = confirmationMessage;
-      return confirmationMessage;
+      // const confirmationMessage = "你确定要离开这个页面吗？离开前注意检查是否已经保存";
+      // event.returnValue = confirmationMessage;
+      return false;
     }
     return null;
   }

src/router/router.ts

@@ -60,6 +60,13 @@ const routes: RouteRecordRaw[] = [
       title:'忘记密码 Travel Design'
     }
   },
+  {
+    path: '/newpass/:code(\\d+)/:token',
+    component: () => import('@/views/Auth/Forgot.vue'),
+    meta:{
+      title:'忘记密码 Travel Design'
+    }
+  },
   {
     path: '/notfound',
     component: () => import('@/views/ErrorNotFound.vue'),

src/views/Auth/Forgot.vue

@@ -6,7 +6,7 @@
             <img src="https://imgfile.oytour.com/static/pptdefault1.png" style="height: 25px;width: auto;">
         </div>
         <div class="col column items-center flex-center full-width">
-            <div class="text-center  full-width" v-if="!resetToken">
+            <div class="text-center  full-width" v-if="!resetToken && !validateFaild">
                 <div class="text-weight-bold text-dark" style="font-size: 23px;">忘记密码？</div>
                 <div class="text-info q-mt-md q-mb-xl" style="font-size: 14px; font-weight: 500;">输入你的注册邮箱，重置你的密码。</div>
                 <el-input v-model="email" placeholder="邮箱" size="large" clearable class="pingfangr full-width" :readonly="isSend" style="height:50px !important;">
@@ -25,7 +25,7 @@
                 <el-button type="primary" size="large" class="q-mt-lg ppt-button" :disabled="!mailRegex.test(email)"  @click="sendVerifyCode" :loading="sending" v-if="!isSend">发送验证码</el-button>
                 <el-button type="primary" size="large" class="q-mt-lg ppt-button" :disabled="code.length!=6" :loading="sending" v-if="isSend && !sending" @click="verifyHandler">提交验证码</el-button>
             </div>
-            <div class="full-width" v-if="resetToken">
+            <div class="full-width" v-if="resetToken && !validateFaild">
                 <div class="text-weight-bold text-dark" style="font-size: 16px;">重新设置你的密码</div>
                 <div class="text-weight-bold text-dark q-mt-md" style="font-size: 24px;">{{ resetToken.mail }}</div>
                 <div class="text-info q-mt-md q-mb-xl" style="font-size: 14px; font-weight: 500;">我们建议你的密码包含大写+小写+数字+特殊字符进行组合</div>
@@ -35,6 +35,13 @@
                     <el-button type="primary" size="large" class="q-mt-lg ppt-button"  @click="resetPassword" :loading="loading">确认密码</el-button>
                 </div>
             </div>
+            <div class="full-width" v-if="validateFaild">
+                <div class="text-weight-bold text-dark" style="font-size: 16px;">你的请求未通过验证</div>
+                <div class="text-info q-mt-md q-mb-xl" style="font-size: 14px; font-weight: 500;">我们无法通过你的请求，可能是由于你的链接已经失效，点击下方按钮重新发起申请。</div>
+                <div>
+                    <el-button type="primary" size="large" class="q-mt-lg ppt-button"  @click="refereHandler">重新申请修改密码</el-button>
+                </div>
+            </div>
         </div>
         <div>
             <el-button link icon="Back" size="large" class="ppt-button text-weight-bolder" @click="forwardHandler('/login')"> 返回登录</el-button>
@@ -50,7 +57,7 @@
 <script lang="ts" setup>
 import { ApiResult } from "@/configs/axios";
 import UserServices from "@/services/UserService";
-import { ElMessage } from "element-plus";
+import { ElLoading, ElMessage } from "element-plus";
 import { reactive, ref } from "vue";
 import VerifyCode from "@/views/components/element/Verify/VerifyCode.vue";
 import { useRouter } from "vue-router";
@@ -63,6 +70,7 @@ const isSend = ref(false)
 const isCountdown = ref(false)
 const countValue = ref<number>(0)
 const resetToken = ref<any>()
+const validateFaild = ref(false)
 const resetModel = reactive({
     newPassword:'',
     confirmPassword:''
@@ -95,6 +103,8 @@ const verifyHandler = async ()=>{
   }
   loading.value=false
 }
+
+
 const resetPassword = async()=>{
     if(resetModel.newPassword.length<6||resetModel.newPassword.length>20){
         ElMessage.error({message:'新密码长度应为6-20位'})
@@ -121,6 +131,22 @@ const resetPassword = async()=>{
 const forwardHandler=(path:string)=>{
     router.push({path})
 }
+const checkQuickValidate = async ()=>{
+    const params = router.currentRoute.value.params
+    if(router.currentRoute.value.fullPath.includes('/newpass/') && params.code && params.token) {
+        const validLoading = ElLoading.service({text:'正在加载中...',lock:true})
+        const response = await UserServices.VerifyResetPassCodeAsync('',params.code.toString(),params.token.toString())
+        if(response.data.resultCode == ApiResult.SUCCESS){
+            resetToken.value = response.data.data
+            ElMessage.success({message:'验证成功，请重新设置你的密码'})
+        } else validateFaild.value=true
+        validLoading.close()
+    }
+}
+const refereHandler = ()=>{
+    location.href='/forgot'
+}
+checkQuickValidate()
 </script>
 
 <style>