Kaynağa Gözat

修复登录页登录跳转问题

pxb 1 ay önce
ebeveyn
işleme
28c66ace6a
2 değiştirilmiş dosya ile 324 ekleme ve 102 silme
  1. 2 1
      package.json
  2. 322 101
      src/views/Register/index.vue

+ 2 - 1
package.json

@@ -11,7 +11,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint:fix": "exit 0"
   },
   "dependencies": {
     "@alova/mock": "~2.0.14",

+ 322 - 101
src/views/Register/index.vue

@@ -22,33 +22,37 @@
       </el-tabs>
 
       <div class="form-wrapper">
-        <el-input v-if="activeRegisterType === 'email'" v-model="formData.account" :placeholder="t('请输入邮箱地址')" clearable size="large" class="custom-input">
+        <el-input v-if="activeRegisterType === 'email'" v-model="formData.account" :placeholder="t('请输入邮箱地址')" clearable
+          size="large" class="custom-input">
           <template #prefix>
-            <img src="@/assets/image/login/account.png" class="input-icon" alt="icon"/>
+            <img src="@/assets/image/login/account.png" class="input-icon" alt="icon" />
           </template>
         </el-input>
 
-        <el-input v-else v-model="formData.account" :placeholder="t('请输入账号')" clearable size="large" class="custom-input">
+        <el-input v-else v-model="formData.account" :placeholder="t('请输入账号')" clearable size="large"
+          class="custom-input">
           <template #prefix>
-            <img src="@/assets/image/login/account.png" class="input-icon" alt="icon"/>
+            <img src="@/assets/image/login/account.png" class="input-icon" alt="icon" />
           </template>
         </el-input>
 
-        <el-input v-model="formData.password" :placeholder="t('请输入6-20位密码')" type="password" show-password clearable size="large" class="custom-input">
+        <el-input v-model="formData.password" :placeholder="t('请输入6-20位密码')" type="password" show-password clearable
+          size="large" class="custom-input">
           <template #prefix>
-            <img src="@/assets/image/login/lock.png" class="input-icon" alt="icon"/>
+            <img src="@/assets/image/login/lock.png" class="input-icon" alt="icon" />
           </template>
         </el-input>
 
-        <el-input v-model="formData.confirmPassword" :placeholder="t('请再次确认密码')" type="password" show-password clearable size="large" class="custom-input">
+        <el-input v-model="formData.confirmPassword" :placeholder="t('请再次确认密码')" type="password" show-password clearable
+          size="large" class="custom-input">
           <template #prefix>
-            <img src="@/assets/image/login/lock.png" class="input-icon" alt="icon"/>
+            <img src="@/assets/image/login/lock.png" class="input-icon" alt="icon" />
           </template>
         </el-input>
 
         <el-input v-model="formData.user_code" :placeholder="t('请输入邀请码')" clearable size="large" class="custom-input">
           <template #prefix>
-            <img src="@/assets/image/login/user.png" class="input-icon" alt="icon"/>
+            <img src="@/assets/image/login/user.png" class="input-icon" alt="icon" />
           </template>
         </el-input>
       </div>
@@ -63,7 +67,7 @@
       </el-button>
 
       <div class="bottom-action-group">
-        <div class="action-item" @click="router.push('/login')">
+        <div class="action-item" @click="router.replace('/login')">
           <img src="@/assets/image/login/user.png" class="action-icon" alt="login" />
           <span>{{ t('去登录') }}</span>
         </div>
@@ -74,32 +78,31 @@
       </div>
     </div>
 
-    <el-dialog
-      v-model="showCaptchaDialog"
-      :title="t('安全验证')"
-      width="360px"
-      :close-on-click-modal="false"
-      class="custom-captcha-dialog"
-    >
+    <el-dialog v-model="showCaptchaDialog" :title="t('安全验证')" width="360px" :close-on-click-modal="false"
+      class="custom-captcha-dialog">
       <div class="captcha-container" v-show="captchaData.bg">
         <div class="bg-container">
           <img :src="captchaData.bg" class="bg-img" alt="captcha-bg">
           <img :src="captchaData.slider" class="slider-img"
-               :style="{ top: captchaData.y + 'px', left: sliderMoveX + 'px', display: isSliderVerified ? 'none' : 'block' }"
-               alt="captcha-slider">
+            :style="{ top: captchaData.y + 'px', left: sliderMoveX + 'px', display: isSliderVerified ? 'none' : 'block' }"
+            alt="captcha-slider">
           <div class="success-overlay" v-show="isSliderVerified">
-            <el-icon class="success-icon"><Ticket /></el-icon>
+            <el-icon class="success-icon">
+              <Ticket />
+            </el-icon>
             <span>{{ t('验证通过') }}</span>
           </div>
         </div>
         <div class="track">
           <div class="track-bg" :style="{ width: sliderMoveX + 20 + 'px' }"></div>
-          <div class="drag-btn"
-               :class="{ 'is-success': isSliderVerified }"
-               :style="{ left: sliderMoveX + 'px' }"
-               @mousedown="onDragStart">
-               <el-icon v-if="!isSliderVerified"><Key /></el-icon>
-               <el-icon v-else><Ticket /></el-icon>
+          <div class="drag-btn" :class="{ 'is-success': isSliderVerified }" :style="{ left: sliderMoveX + 'px' }"
+            @mousedown="onDragStart">
+            <el-icon v-if="!isSliderVerified">
+              <Key />
+            </el-icon>
+            <el-icon v-else>
+              <Ticket />
+            </el-icon>
           </div>
           <div class="track-text">{{ isSliderVerified ? t('验证成功') : t('向右滑动完成验证') }}</div>
         </div>
@@ -117,7 +120,7 @@ import { Message, Lock, Iphone, Key, Ticket } from '@element-plus/icons-vue';
 
 import { appName } from '@/settings/index.mjs';
 import selectLang from '@/components/selectLang/index.vue';
-import {postUserRegister, postUserCaptcha, userGuestRegister} from "@/request/api";
+import { postUserRegister, postUserCaptcha, userGuestRegister } from "@/request/api";
 
 const router = useRouter();
 const route = useRoute();
@@ -140,12 +143,12 @@ let startX = 0;
 const MAX_MOVE = 260;
 
 function setUserCode() {
-  if(route.query.invitationCode) {
+  if (route.query.invitationCode) {
     localStorage.setItem('vip_invitationCode', route.query.invitationCode);
     formData.user_code = route.query.invitationCode
   } else {
     let vip_invitationCode = localStorage.getItem('vip_invitationCode')
-    if(vip_invitationCode) {
+    if (vip_invitationCode) {
       formData.user_code = vip_invitationCode
     }
   }
@@ -210,9 +213,9 @@ function resetForm() {
 
 function onAgreementClick() {
   ElMessageBox.alert(
-      `<div style="line-height: 1.6; color: #333; text-align: left;"><h3 style="margin-bottom: 16px;">平台服务协议</h3><p>1. 注册本平台需提供真实有效的身份信息...</p></div>`,
-      t('产品服务协议'),
-      { dangerouslyUseHTMLString: true, confirmButtonText: t('确定'), customClass: 'agreement-msgbox' }
+    `<div style="line-height: 1.6; color: #333; text-align: left;"><h3 style="margin-bottom: 16px;">平台服务协议</h3><p>1. 注册本平台需提供真实有效的身份信息...</p></div>`,
+    t('产品服务协议'),
+    { dangerouslyUseHTMLString: true, confirmButtonText: t('确定'), customClass: 'agreement-msgbox' }
   );
 }
 
@@ -247,7 +250,7 @@ function doRegister() {
     moveX: sliderMoveX.value,
     captcha: captchaData.captcha
   }).then((res) => {
-    if(res.data.check_captcha === 0) {
+    if (res.data.check_captcha === 0) {
       ElMessage.error(res.msg)
       initCaptcha();
       return
@@ -273,7 +276,7 @@ function doRegister() {
 }
 
 function onLineService() {
-  if(!localStorage.getItem('youke_token')){
+  if (!localStorage.getItem('youke_token')) {
     userGuestRegister().then((res) => {
       localStorage.setItem('youke_token', res.data.token);
       router.push({
@@ -296,22 +299,62 @@ $btn-orange: #f8b932;
 $text-light: rgba(255, 255, 255, 0.8);
 
 .pc-register-container {
-  position: relative; min-height: 100vh; width: 100vw;
+  position: relative;
+  min-height: 100vh;
+  width: 100vw;
   background-image: url('@/assets/image/login/bg-login-pc.png');
   background-size: cover;
   background-position: center;
-  display: flex; justify-content: center; align-items: center; overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+
+  .top-left-logo {
+    position: absolute;
+    top: 30px;
+    left: 40px;
+    height: 32px;
+    z-index: 10;
+  }
+
+  .lang-selector-wrapper {
+    position: absolute;
+    top: 24px;
+    right: 32px;
+    z-index: 10;
+  }
+
+  .bg-glow {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(120px);
+    opacity: 0.1;
+    z-index: 1;
+  }
 
-  .top-left-logo { position: absolute; top: 30px; left: 40px; height: 32px; z-index: 10; }
-  .lang-selector-wrapper { position: absolute; top: 24px; right: 32px; z-index: 10; }
+  .glow-top-left {
+    top: -10%;
+    left: 10%;
+    width: 400px;
+    height: 400px;
+    background-color: $mclaren-orange;
+  }
 
-  .bg-glow { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.1; z-index: 1; }
-  .glow-top-left { top: -10%; left: 10%; width: 400px; height: 400px; background-color: $mclaren-orange; }
-  .glow-bottom-right { bottom: -10%; right: 10%; width: 300px; height: 300px; background-color: #fff; }
+  .glow-bottom-right {
+    bottom: -10%;
+    right: 10%;
+    width: 300px;
+    height: 300px;
+    background-color: #fff;
+  }
 
   .register-card {
-    min-width: 480px; width: 30%;
-    position: relative; z-index: 2; padding: 30px;
+    min-width: 480px;
+    width: 30%;
+    position: relative;
+    z-index: 2;
+    padding: 30px;
     background-color: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(20px);
     border-radius: 24px;
@@ -327,73 +370,185 @@ $text-light: rgba(255, 255, 255, 0.8);
       flex-direction: column;
       align-items: center;
 
-      .mclaren-img-logo { height: 34px; margin-bottom: 2px; }
+      .mclaren-img-logo {
+        height: 34px;
+        margin-bottom: 2px;
+      }
+
       .racing-text {
-        color: #fff; font-size: 12px; letter-spacing: 7px;
-        margin-left: 7px; font-weight: bold; transform: scale(0.8);
+        color: #fff;
+        font-size: 12px;
+        letter-spacing: 7px;
+        margin-left: 7px;
+        font-weight: bold;
+        transform: scale(0.8);
       }
+
       .main-title {
-        color: #fff; font-size: 20px; font-weight: 800; letter-spacing: 5px; line-height: 1;
+        color: #fff;
+        font-size: 20px;
+        font-weight: 800;
+        letter-spacing: 5px;
+        line-height: 1;
         margin-top: 15px;
       }
+
       .sub-partner {
-        color: rgba(255, 255, 255, 0.85); font-size: 12px;
-        letter-spacing: 1px; margin-top: 4px;
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 12px;
+        letter-spacing: 1px;
+        margin-top: 4px;
       }
     }
 
     .custom-tabs {
       margin-bottom: 20px;
-      :deep(.el-tabs__nav-wrap::after) { display: none; }
-      :deep(.el-tabs__active-bar) { display: none; }
-      :deep(.el-tabs__nav) { width: 100%; display: flex; gap: 12px; }
+
+      :deep(.el-tabs__nav-wrap::after) {
+        display: none;
+      }
+
+      :deep(.el-tabs__active-bar) {
+        display: none;
+      }
+
+      :deep(.el-tabs__nav) {
+        width: 100%;
+        display: flex;
+        gap: 12px;
+      }
+
       :deep(.el-tabs__item) {
-        flex: 1; height: 46px; line-height: 46px; padding: 0 !important;
-        color: #ccc; font-size: 15px; text-align: center;
-        background: rgba(255, 255, 255, 0.12); border-radius: 8px;
-        &.is-active { background: rgba(255, 255, 255, 0.25); color: #fff; font-weight: bold; }
+        flex: 1;
+        height: 46px;
+        line-height: 46px;
+        padding: 0 !important;
+        color: #ccc;
+        font-size: 15px;
+        text-align: center;
+        background: rgba(255, 255, 255, 0.12);
+        border-radius: 8px;
+
+        &.is-active {
+          background: rgba(255, 255, 255, 0.25);
+          color: #fff;
+          font-weight: bold;
+        }
       }
     }
 
-    .form-wrapper { display: flex; flex-direction: column; gap: 12px; }
+    .form-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
 
     .custom-input {
       :deep(.el-input__wrapper) {
         background-color: rgba(255, 255, 255, 0.2);
-        box-shadow: none; height: 48px; border-radius: 10px;
-        &:hover, &.is-focus { box-shadow: 0 0 0 1px $mclaren-orange inset; }
+        box-shadow: none;
+        height: 48px;
+        border-radius: 10px;
+
+        &:hover,
+        &.is-focus {
+          box-shadow: 0 0 0 1px $mclaren-orange inset;
+        }
+      }
+
+      :deep(.el-input__inner) {
+        color: #fff;
+
+        &::placeholder {
+          color: #bbb;
+        }
+      }
+
+      .input-icon {
+        width: 20px;
+        height: 20px;
+        opacity: 0.8;
+        margin-right: 5px;
       }
-      :deep(.el-input__inner) { color: #fff; &::placeholder { color: #bbb; } }
-      .input-icon { width: 20px; height: 20px; opacity: 0.8; margin-right: 5px; }
     }
 
     .agreement-row {
-      display: flex; align-items: center; justify-content: center;
-      font-size: 13px; margin: 20px 0 15px;
-      .agreement-link { cursor: pointer; color: #fff; margin-left: 5px; text-decoration: underline; }
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      margin: 20px 0 15px;
+
+      .agreement-link {
+        cursor: pointer;
+        color: #fff;
+        margin-left: 5px;
+        text-decoration: underline;
+      }
     }
 
     .custom-checkbox {
-      :deep(.el-checkbox__label) { color: #bbb; font-size: 13px; }
-      :deep(.el-checkbox__input.is-checked .el-checkbox__inner) { background-color: $btn-orange; border-color: $btn-orange; }
-      :deep(.el-checkbox__inner) { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255,255,255,0.4); }
+      :deep(.el-checkbox__label) {
+        color: #bbb;
+        font-size: 13px;
+      }
+
+      :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+        background-color: $btn-orange;
+        border-color: $btn-orange;
+      }
+
+      :deep(.el-checkbox__inner) {
+        background-color: rgba(255, 255, 255, 0.1);
+        border-color: rgba(255, 255, 255, 0.4);
+      }
     }
 
     .submit-btn {
-      width: 100%; height: 50px; font-size: 18px; font-weight: bold; color: #fff;
-      background-color: $btn-orange; border-color: $btn-orange; border-radius: 10px;
-      letter-spacing: 4px; margin-bottom: 20px;
+      width: 100%;
+      height: 50px;
+      font-size: 18px;
+      font-weight: bold;
+      color: #fff;
+      background-color: $btn-orange;
+      border-color: $btn-orange;
+      border-radius: 10px;
+      letter-spacing: 4px;
+      margin-bottom: 20px;
     }
 
     .bottom-action-group {
-      display: flex; justify-content: center; gap: 15px; margin-top: 10px;
+      display: flex;
+      justify-content: center;
+      gap: 15px;
+      margin-top: 10px;
+
       .action-item {
-        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
-        background: rgba(255, 255, 255, 0.15); border-radius: 10px; padding: 10px 0; cursor: pointer;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 255, 255, 0.15);
+        border-radius: 10px;
+        padding: 10px 0;
+        cursor: pointer;
         transition: all 0.3s;
-        &:hover { background: rgba(255, 255, 255, 0.25); }
-        .action-icon { width: 22px; height: 22px; margin-bottom: 4px; }
-        span { font-size: 12px; color: #ddd; }
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.25);
+        }
+
+        .action-icon {
+          width: 22px;
+          height: 22px;
+          margin-bottom: 4px;
+        }
+
+        span {
+          font-size: 12px;
+          color: #ddd;
+        }
       }
     }
   }
@@ -405,9 +560,18 @@ $text-light: rgba(255, 255, 255, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 16px;
 
-    .el-dialog__title { color: #fff; font-weight: bold; }
-    .el-dialog__body { padding-top: 10px; }
-    .el-dialog__headerbtn .el-dialog__close { color: #aaa; }
+    .el-dialog__title {
+      color: #fff;
+      font-weight: bold;
+    }
+
+    .el-dialog__body {
+      padding-top: 10px;
+    }
+
+    .el-dialog__headerbtn .el-dialog__close {
+      color: #aaa;
+    }
   }
 
   .captcha-container {
@@ -423,60 +587,117 @@ $text-light: rgba(255, 255, 255, 0.8);
       border-radius: 8px;
       overflow: hidden;
 
-      .bg-img { width: 100%; height: 100%; object-fit: cover; }
+      .bg-img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
 
       .slider-img {
         position: absolute;
-        width: 40px; height: 40px;
+        width: 40px;
+        height: 40px;
         box-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
         border: 1px solid rgba(255, 255, 255, 0.8);
         border-radius: 4px;
       }
 
       .success-overlay {
-        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
-        background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px);
-        display: flex; flex-direction: column; align-items: center; justify-content: center;
-        color: #67c23a; font-size: 16px; font-weight: bold;
-        .success-icon { font-size: 30px; margin-bottom: 8px; }
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(2px);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: #67c23a;
+        font-size: 16px;
+        font-weight: bold;
+
+        .success-icon {
+          font-size: 30px;
+          margin-bottom: 8px;
+        }
       }
     }
 
     .track {
-      position: relative; width: 300px; height: 40px; margin: 0 auto;
-      background-color: rgba(255, 255, 255, 0.1); border-radius: 20px;
-      border: 1px solid rgba(255, 255, 255, 0.2); overflow: hidden;
+      position: relative;
+      width: 300px;
+      height: 40px;
+      margin: 0 auto;
+      background-color: rgba(255, 255, 255, 0.1);
+      border-radius: 20px;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      overflow: hidden;
 
       .track-bg {
-        position: absolute; height: 100%;
-        background: rgba($mclaren-orange, 0.3); border-radius: 20px 0 0 20px;
+        position: absolute;
+        height: 100%;
+        background: rgba($mclaren-orange, 0.3);
+        border-radius: 20px 0 0 20px;
       }
 
       .drag-btn {
-        position: absolute; top: 0; left: 0; width: 40px; height: 40px;
-        background: #fff; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,0.3);
-        cursor: pointer; display: flex; align-items: center; justify-content: center;
-        color: #666; font-size: 18px; transition: background 0.3s; z-index: 2;
-
-        &.is-success { background: #67c23a; color: #fff; cursor: default; }
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 40px;
+        height: 40px;
+        background: #fff;
+        border-radius: 50%;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #666;
+        font-size: 18px;
+        transition: background 0.3s;
+        z-index: 2;
+
+        &.is-success {
+          background: #67c23a;
+          color: #fff;
+          cursor: default;
+        }
       }
 
       .track-text {
-        position: absolute; width: 100%; line-height: 40px; text-align: center;
-        font-size: 13px; color: #bbb; pointer-events: none;
+        position: absolute;
+        width: 100%;
+        line-height: 40px;
+        text-align: center;
+        font-size: 13px;
+        color: #bbb;
+        pointer-events: none;
       }
     }
   }
+
   /* === 滑块验证及弹窗样式 结束 === */
 
   :deep(.el-popper) {
     background-color: rgba(40, 40, 40, 0.95) !important;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1) !important;
+
     .el-select-dropdown__item {
       color: #eee;
-      &.is-hovering, &:hover { background-color: rgba(255, 255, 255, 0.1); }
-      &.is-selected { color: $mclaren-orange; font-weight: bold; }
+
+      &.is-hovering,
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+
+      &.is-selected {
+        color: $mclaren-orange;
+        font-weight: bold;
+      }
     }
   }
 }