register page frame

src/App.vue

@@ -1,8 +1,8 @@
 <!-- App -->
 <script setup lang="ts">
 // 导入通知和提示组件
-import Alert from '@/components/KUNGalgameAlert/Alert.vue'
-import Info from '@/components/KUNGalgameAlert/Info.vue'
+import Alert from '@/components/alert/Alert.vue'
+import Info from '@/components/alert/Info.vue'
 
 import { onBeforeMount } from 'vue'
 // 导入设置面板 store

src/views/licence/Licence.vue

@@ -1,4 +1,6 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import BackToPrevious from '@/components/BackToPrevious.vue'
+</script>
 
 <template>
   <div class="root">
@@ -18,6 +20,7 @@
         <p>4. 因用户账号被盗等造成的损失，KUNGalgame 概不承担</p>
         <p>协议版本 2019/10/07</p>
       </div>
+      <BackToPrevious />
       <!-- 版权 -->
       <div class="copyright">
         <span>Copyright © 2023 KUNgalgame</span>

src/views/login/components/Register.vue

@@ -1,46 +1,135 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { ref, reactive } from 'vue'
+import { useKUNGalgamerStore } from '@/store/modules/kungalgamer'
+import { useRouter } from 'vue-router'
+// 使用全局通知
+import { useKUNGalgameMessageStore } from '@/store/modules/message'
 
-const loginForm = reactive({
+// 导入人机验证组件
+import Capture from '@/components/capture/Capture.vue'
+
+// 导入验证表单是否合法的函数
+import { isValidEmail, isValidName, isValidPassword } from '@/utils/validate'
+
+// 导入 i18n
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
+// 定义人机验证的标志
+const isShowValidate = ref(false)
+// 定义人机验证是否完成的标志
+const isCaptureComplete = ref(false)
+
+const router = useRouter()
+
+const info = useKUNGalgameMessageStore()
+
+const useStore = useKUNGalgamerStore()
+
+const registerForm = reactive({
   username: '',
   email: '',
   password: '',
   code: '',
 })
 
-const handleRegister = () => {}
+const handleVerify = (result: boolean) => {
+  if (result) {
+    // 处理人机校验完成后的逻辑
+    isShowValidate.value = false
+    info.info(t('AlertInfo.capture.success'))
+    isCaptureComplete.value = true
+  }
+}
+
+const isEmptyInput = () => {
+  // 如果输入的字段为空
+  if (!registerForm.username.trim()) {
+    // 提示用户输入的名字为空
+    info.info(t('AlertInfo.login.emptyUsername'))
+    return false
+  } else if (!registerForm.password.trim()) {
+    // 提示用户输入的密码为空
+    info.info(t('AlertInfo.login.emptyPassword'))
+    return false
+  } else {
+    return true
+  }
+}
+
+// 判断输入的用户名和密码字段是否合法
+const isValidInput = (): boolean => {
+  // 如果输入为空直接返回 false
+  if (!isEmptyInput()) {
+    return false
+  }
+  if (
+    isValidEmail(registerForm.username) ||
+    isValidName(registerForm.username)
+  ) {
+    // 输入的用户名正确时（为用户名或邮箱）
+    if (isValidPassword(registerForm.password)) {
+      return true
+    } else {
+      // 如果密码非法的话返回非法密码
+      info.info(t('AlertInfo.login.invalidPassword'))
+      return false
+    }
+  } else {
+    // 输入的用户名或邮箱错误时的逻辑
+    info.info(t('AlertInfo.login.invalidUsername'))
+    return false
+  }
+}
+
+// 处理用户点击登陆时的逻辑
+const handleRegister = () => {
+  // 保证输入格式和人机验证通过才能发送登录请求
+  if (isValidInput()) {
+    // 未完成人机身份验证提示信息，直接返回
+    if (!isCaptureComplete.value) {
+      return
+    }
+    // 所有的验证都通过了再向后端发送请求
+    // TODO:在这里执行注册函数
+  }
+}
 </script>
 
 <template>
   <!-- 注册 -->
   <div class="register">
+    <Capture @validate="handleVerify" :isShowValidate="isShowValidate" />
     <form action="#" class="form" id="form2" @submit.prevent="handleRegister">
       <h2 class="title">注册</h2>
       <input
-        v-model="loginForm.username"
+        v-model="registerForm.username"
         type="text"
         placeholder="用户名"
         class="input"
       />
       <input
-        v-model="loginForm.email"
+        v-model="registerForm.email"
         type="email"
         placeholder="邮箱"
         class="input"
       />
       <input
-        v-model="loginForm.password"
+        v-model="registerForm.password"
         type="password"
         placeholder="密码"
         class="input"
       />
       <input
-        v-model="loginForm.code"
+        v-model="registerForm.code"
         type="text"
         placeholder="邮箱验证码"
         class="input"
       />
-      <button class="mail-confirm">发送验证码</button>
+      <!-- 发送时进行人机验证 -->
+      <button @click="isShowValidate = true" class="mail-confirm">
+        发送验证码
+      </button>
       <button class="btn" type="submit">注册</button>
       <span class="user-agreement"
         >点击注册表示您已经同意我们的<router-link to="/licence"
@@ -64,15 +153,15 @@ const handleRegister = () => {}
   position: absolute;
   padding: 5px;
   height: 30px;
-  bottom: 22%;
+  bottom: 23%;
   right: 15%;
   border: 1px solid var(--kungalgame-blue-1);
+  color: var(--kungalgame-font-color-2);
   background-color: var(--kungalgame-white);
   cursor: pointer;
 }
 .mail-confirm:hover {
-  background-color: var(--kungalgame-blue-4);
-  color: var(--kungalgame-white);
+  color: var(--kungalgame-blue-4);
 }
 
 /* 用户协议 */