Przeglądaj źródła

调整注册根据登录标志切换背景图并且加入调回登录功能

liyanbo 2 miesięcy temu
rodzic
commit
c367c8b4a2

+ 1 - 1
src/views/AiCourseLogin.vue

@@ -81,7 +81,7 @@
         </el-form>
         <!-- 多选框 -->
         <div class="check-box">
-          <router-link to="/register-login" class="register-link">没有账号?立即注册</router-link>
+          <router-link :to="{path: '/register-login', query: {bgImage: 'aiCourseBG', loginType: 'aiCourseLogin'}}" class="register-link">没有账号?立即注册</router-link>
           <el-checkbox
               v-model="loginData.loginForm.rememberMe"
               label="记住我"

+ 1 - 1
src/views/BlocklyLogin.vue

@@ -82,7 +82,7 @@
         </el-form>
         <!-- 多选框 -->
         <div class="check-box">
-          <router-link to="/register-login" class="register-link">没有账号?立即注册</router-link>
+          <router-link :to="{path: '/register-login', query: {bgImage: 'blocklyBG', loginType: 'blocklyLogin'}}" class="register-link">没有账号?立即注册</router-link>
           <el-checkbox
               v-model="loginData.loginForm.rememberMe"
               label="记住我"

+ 1 - 1
src/views/Login.vue

@@ -82,7 +82,7 @@
         </el-form>
         <!-- 多选框 -->
         <div class="check-box">
-          <router-link to="/register-login" class="register-link">没有账号?立即注册</router-link>
+          <router-link :to="{path: '/register-login', query: {bgImage: 'homeBG', loginType: 'login'}}" class="register-link">没有账号?立即注册</router-link>
           <el-checkbox
               v-model="loginData.loginForm.rememberMe"
               label="记住我"

+ 58 - 10
src/views/RegisterLogin.vue

@@ -1,11 +1,11 @@
 <template>
-  <!-- 网页版登录页面 -->
+  <!-- 注册输入框 -->
   <div class="login-content">
-    <!-- 登录输入框 -->
+    <!-- 注册输入框 -->
     <div class="login-wrapper">
       <!-- 左侧图片背景盒子 -->
       <div class="login-left">
-        <img :src="homeBG" alt="背景图片" class="bg-image">
+        <img :src="registerBG" alt="背景图片" class="bg-image">
       </div>
       <!-- 右侧输入框盒子 -->
       <div class="login-right">
@@ -18,7 +18,7 @@
             label-width="0px"
             class="input-item"
           >
-            <!-- 手机号登录 -->
+            <!-- 手机号注册 -->
             <el-form-item prop="phone">
               <el-input 
                 v-model="loginForm.phone" 
@@ -50,9 +50,10 @@
               <el-input v-model="loginForm.inviteCode" :prefix-icon="Key" placeholder="请输入邀请码" />
             </el-form-item>
 
-            <!-- 登录按钮 -->
+            <!-- 注册按钮 -->
             <el-form-item>
               <div class="login-btn-container">
+                <el-button @click="goBackToLogin" link class="register-link">已有账号,去登录</el-button>
                 <el-button @click="handleRegister" class="login-btn" type="primary">注册</el-button>
               </div>
             </el-form-item>
@@ -65,19 +66,56 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { Lock, Iphone, Key } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
+import { useRouter } from 'vue-router';
 import homeBG from "@/assets/images/homeBG.png";
+import blocklyBG from "@/assets/images/blocklyBG.png";
+import aiCourseBG from "@/assets/images/aiCourseBG.png";
 import { registerSignUp } from '@/api/login/login.js';
 import { getTenantId } from '@/utils/loginUtils.js';
 
 // 获取环境变量
 const appTitle = ref("注册账号");
 
+const router = useRouter();
+
 const loginFormRef = ref(null);
 
-// 登录表单数据
+// 获取查询参数
+const bgImageType = computed(() => router.currentRoute.value.query.bgImage || 'homeBG');
+const loginTypePage = computed(() => router.currentRoute.value.query.loginType || 'login');
+
+// 动态选择背景图
+const registerBG = computed(() => {
+  switch(bgImageType.value) {
+    case 'blocklyBG':
+      return blocklyBG;
+    case 'aiCourseBG':
+      return aiCourseBG;
+    default:
+      return homeBG;
+  }
+});
+
+// 返回登录页
+const goBackToLogin = () => {
+  let loginPath = '/';
+  switch(loginTypePage.value) {
+    case 'blocklyLogin':
+      loginPath = '/blockly-login';
+      break;
+    case 'aiCourseLogin':
+      loginPath = '/ai-login';
+      break;
+    default:
+      loginPath = '/';
+  }
+  router.replace(loginPath);
+};
+
+// 注册表单数据
 const loginForm = ref({
   phone: "", // 手机号
   password: "", // 密码
@@ -130,12 +168,11 @@ const handleRegister = async () => {
       username: loginForm.value.phone,
       nickname: loginForm.value.phone,
       password: loginForm.value.password,
-      inviteCode: 'RTGx3rarJo', // 写死的邀请码
+      inviteCode: loginForm.value.inviteCode,
       rememberMe: loginForm.value.rememberMe
     };
     // 调用注册接口
     const res = await registerSignUp({ 'Tenant-Id': tenantId },registerData);
-    console.log('registerSignUp response:', res);
     // 注册成功处理
     if (res && res.code === 200) {
       ElMessage.success('注册成功,请登录');
@@ -251,6 +288,17 @@ const handleRegister = async () => {
   display: flex;
   justify-content: flex-end;
 }
+.register-link {
+  color: black;
+  font-size: rpx(6);
+  text-decoration: none;
+  position: absolute;
+  left: rpx(8);
+  bottom: rpx(10);
+}
+.register-link:hover {
+  text-decoration: underline;
+}
 .login-btn {
   width: rpx(70); /* 缩小宽度 */
   height: rpx(25);
@@ -407,4 +455,4 @@ const handleRegister = async () => {
     font-size: rpx(10) !important;
   }
 }
-</style>
+</style>