feat: 登录界面demo

src/router/index.ts

@@ -12,6 +12,11 @@ const router = createRouter({
       name: 'login',
       component: () => import('../views/LoginPage/LoginPage.vue')
     },
+    {
+      path: '/register',
+      name: 'register', 
+      component: () => import('../views/LoginPage/component/Register.vue')
+    },
     {
       path: '/course',
       name: 'course',

src/views/LoginPage/component/Login.vue

@@ -50,6 +50,7 @@
         <el-form-item>
           <el-button class="login-button" @click="handleLogin">用户登录</el-button>
         </el-form-item>
+        <!-- TODO：注册按钮未实现 -->
         <div class="sign" @click="onClickSign">去注册？</div>
       </el-form>
     </div>
@@ -109,7 +110,7 @@
     ],
   });
 
-  // TODO：获取验证码方法未实现
+  // 这个功能实现了吗？ 
   const getCode = () => {
     start();
     props.onCode?.();
@@ -138,9 +139,9 @@
       console.log("登陆失败", _err)
     })
   };
-
+// TODO：注册按钮未实现 UserController.java
   const onClickSign = () => {
-    // router.push('/sign');
+    router.push('/register');
     console.log("注册")
   };
 

src/views/LoginPage/component/Register.vue

@@ -0,0 +1,83 @@
+<!-- 注册页面 -->
+    <!-- 姓名 密码 重复密码 南大官邮 验证码 南大学号 角色（选择卡） -->
+     <!-- TODO:验证码 美化 后端提交  -->
+    <template>
+        <form @submit.prevent="register">
+          <div>
+                <label for="role">账号属性:</label>
+                <select id="role" v-model="formData.role">
+                    <option value="student">学生</option>
+                    <option value="teacher">教师</option>
+                </select>
+          </div>
+          <div>
+            <label for="name">姓名:</label>
+            <input type="text" id="name" v-model="formData.name" required />
+          </div>
+          <div>
+            <label for="password">密码:</label>
+            <input type="password" id="password" v-model="formData.password" required />
+          </div>
+          <div>
+            <label for="confirmPassword">重复密码:</label>
+            <input type="password" id="confirmPassword" v-model="formData.confirmPassword" required />
+            <span v-if="!isPasswordMatch" style="color: red;">两次密码不匹配</span>
+          </div>
+          <div>
+            <label for="email">南大官邮（必填）:</label>
+            <input type="email" id="email" v-model="formData.email" required placeholder="xxx@smail.nju.edu.cn" pattern="[^@]+@smail.nju.edu.cn" title="邮箱格式应为xxx@smail.nju.edu.cn" />
+            <small>格式：xxx@smail.nju.edu.cn</small>
+          </div>
+          <!-- TODO: 验证码功能暂时未实现 UserController.java-->
+          <div>
+            <label for="captcha">验证码:</label>
+            <input type="text" id="captcha" v-model="formData.captcha" required />
+          </div>
+          <div>
+            <label for="studentId">南大学号/工号:</label>
+            <input type="text" id="studentId" v-model="formData.studentId" required />
+          </div>
+
+          <button type="submit" :disabled="!isPasswordMatch">注册</button>
+        </form>
+    </template>
+
+<script>
+import { ref, computed, reactive, defineProps } from 'vue';
+
+
+export default {
+  name: 'RegistrationForm',
+  setup() {
+    const formData = ref({
+      name: '',
+      password: '',
+      officialEmail: '',
+      verifyCode: '',
+      officialNumber: '',
+      role: ''
+    });
+
+    // 计算属性来检查密码是否匹配
+    const isPasswordMatch = computed(() => {
+      return formData.value.password === formData.value.confirmPassword;
+    });
+
+    const register = () => {
+      if (!isPasswordMatch.value) {
+        alert("两次输入的密码不匹配，请重新输入！");
+        return; // 阻止表单提交
+      }
+      //TODO: 在这里添加发送请求到后端的逻辑
+      console.log('注册信息：', formData.value);
+      // 你可以使用 axios 发送请求到你的后端API
+    };
+
+    return {
+      formData,
+      isPasswordMatch,
+      register
+    };
+  }
+};
+</script>