358 lines
9.3 KiB
Vue
358 lines
9.3 KiB
Vue
<template>
|
||
<div class="login-form">
|
||
<div>注册</div>
|
||
<form class="login-form-container" @submit.prevent="handleRegister">
|
||
<div class="input-container">
|
||
<label for="username">QQ号</label>
|
||
<input type="text" id="username" v-model="username" placeholder="请输入QQ号" @blur="validateUsername"
|
||
:class="{ 'error': usernameError }" />
|
||
<span class="error-message" v-if="usernameError">{{ usernameError }}</span>
|
||
</div>
|
||
<div class="input-container">
|
||
<label for="password">密码</label>
|
||
<input type="password" id="password" v-model="password" placeholder="请输入密码" @blur="validatePassword"
|
||
:class="{ 'error': passwordError }" />
|
||
<span class="error-message" v-if="passwordError">{{ passwordError }}</span>
|
||
</div>
|
||
<div class="input-container">
|
||
<label for="confirmPassword">再次输入密码</label>
|
||
<input type="password" id="confirmPassword" v-model="confirmPassword" placeholder="请输入密码"
|
||
@blur="validateConfirmPassword" :class="{ 'error': confirmPasswordError }" />
|
||
<span class="error-message" v-if="confirmPasswordError">{{ confirmPasswordError }}</span>
|
||
</div>
|
||
<div class="input-container">
|
||
<!-- 人机验证 -->
|
||
<div id="VAPTCHAContainer" style="width: 100%; height: 36px;">
|
||
<div class="VAPTCHA-init-main">
|
||
<div class="VAPTCHA-init-loading">
|
||
<a href="/" target="_blank">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px"
|
||
height="60px" viewBox="0 0 24 30"
|
||
style="enable-background: new 0 0 50 50; width: 14px; height: 14px; vertical-align: middle"
|
||
xml:space="preserve">
|
||
<rect x="0" y="9.22656" width="4" height="12.5469" fill="#CCCCCC">
|
||
<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s"
|
||
repeatCount="indefinite"></animate>
|
||
<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s"
|
||
repeatCount="indefinite"></animate>
|
||
</rect>
|
||
<rect x="10" y="5.22656" width="4" height="20.5469" fill="#CCCCCC">
|
||
<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s"
|
||
repeatCount="indefinite"></animate>
|
||
<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s"
|
||
repeatCount="indefinite"></animate>
|
||
</rect>
|
||
<rect x="20" y="8.77344" width="4" height="13.4531" fill="#CCCCCC">
|
||
<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s"
|
||
repeatCount="indefinite"></animate>
|
||
<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s"
|
||
repeatCount="indefinite"></animate>
|
||
</rect>
|
||
</svg>
|
||
</a>
|
||
<span class="VAPTCHA-text">Vaptcha Initializing...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="login-button">
|
||
<button type="submit" :disabled="!isFormValid">注册</button>
|
||
</div>
|
||
<div class="register-link">
|
||
<a @click.prevent="$emit('login')">返回登陆</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, computed } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { userRegister } from "@/api/login.js";
|
||
|
||
const router = useRouter()
|
||
const VAPTCHAObj = ref(null)
|
||
const username = ref('')
|
||
const password = ref('')
|
||
const confirmPassword = ref('')
|
||
|
||
// 定义 emit
|
||
const emit = defineEmits(['login'])
|
||
|
||
// 错误信息
|
||
const usernameError = ref('')
|
||
const passwordError = ref('')
|
||
const confirmPasswordError = ref('')
|
||
|
||
|
||
|
||
// 表单验证规则
|
||
const validateUsername = () => {
|
||
if (!username.value) {
|
||
usernameError.value = '请输入QQ号码'
|
||
return false
|
||
}
|
||
// 只允许纯数字
|
||
if (!/^\d+$/.test(username.value)) {
|
||
usernameError.value = 'QQ号只能包含数字'
|
||
return false
|
||
}
|
||
usernameError.value = ''
|
||
return true
|
||
}
|
||
|
||
const validatePassword = () => {
|
||
if (!password.value) {
|
||
passwordError.value = '请输入密码'
|
||
return false
|
||
}
|
||
if (password.value.length < 6) {
|
||
passwordError.value = '密码长度不能小于6个字符'
|
||
return false
|
||
}
|
||
passwordError.value = ''
|
||
return true
|
||
}
|
||
|
||
const validateConfirmPassword = () => {
|
||
if (!confirmPassword.value) {
|
||
confirmPasswordError.value = '请再次输入密码'
|
||
return false
|
||
}
|
||
if (confirmPassword.value !== password.value) {
|
||
confirmPasswordError.value = '两次输入的密码不一致'
|
||
return false
|
||
}
|
||
confirmPasswordError.value = ''
|
||
return true
|
||
}
|
||
const isVaptchaVerified = ref(false)
|
||
// 计算表单是否有效
|
||
const isFormValid = computed(() => {
|
||
return !usernameError.value &&
|
||
!passwordError.value &&
|
||
!confirmPasswordError.value &&
|
||
username.value &&
|
||
password.value &&
|
||
confirmPassword.value &&
|
||
VAPTCHAObj.value && // 确保人机验证已初始化
|
||
isVaptchaVerified.value // 确保人机验证已通过
|
||
})
|
||
|
||
|
||
|
||
// 添加人机验证状态
|
||
onMounted(() => {
|
||
window.vaptcha({
|
||
vid: '6828264bdc0ff12924d9bfe3',
|
||
mode: 'click',
|
||
scene: 2,
|
||
container: '#VAPTCHAContainer',
|
||
area: 'auto'
|
||
}).then(function (obj) {
|
||
VAPTCHAObj.value = obj
|
||
obj.render()
|
||
|
||
// 监听验证成功事件
|
||
obj.listen('pass', function () {
|
||
isVaptchaVerified.value = true
|
||
console.log('验证通过')
|
||
})
|
||
|
||
// 监听验证失败事件
|
||
obj.listen('fail', function () {
|
||
isVaptchaVerified.value = false
|
||
console.log('验证失败')
|
||
})
|
||
|
||
// 监听关闭事件
|
||
obj.listen('close', function () {
|
||
isVaptchaVerified.value = false
|
||
console.log('验证关闭')
|
||
})
|
||
})
|
||
})
|
||
|
||
const handleRegister = async () => {
|
||
// 验证表单
|
||
if (!validateUsername() || !validatePassword() || !validateConfirmPassword()) {
|
||
return
|
||
}
|
||
// 验证人机验证
|
||
if (!isVaptchaVerified.value || !VAPTCHAObj.value) {
|
||
alert('请完成人机验证')
|
||
return
|
||
}
|
||
|
||
// 获取验证token
|
||
const serverToken = await VAPTCHAObj.value.getServerToken()
|
||
console.log('获取到的 serverToken:', serverToken)
|
||
|
||
if (!serverToken || !serverToken.token || !serverToken.server) {
|
||
alert('获取验证token失败，请重新验证')
|
||
return
|
||
}
|
||
|
||
// 构造注册请求参数
|
||
const registerData = {
|
||
qq_code: username.value,
|
||
password: password.value,
|
||
server: serverToken.server,
|
||
token: serverToken.token
|
||
}
|
||
console.log('注册请求参数:', registerData)
|
||
|
||
// 发送注册请求
|
||
await userRegister(
|
||
registerData.qq_code,
|
||
registerData.password,
|
||
registerData.server,
|
||
registerData.token
|
||
)
|
||
alert('注册成功')
|
||
// 切换到登录模块
|
||
emit('login')
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.login-form {
|
||
width: 340px;
|
||
margin: 0 auto;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 16px;
|
||
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.10);
|
||
padding: 36px 32px 28px 32px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.login-form>div:first-child {
|
||
font-size: 26px;
|
||
font-weight: bold;
|
||
color: #222;
|
||
margin-bottom: 28px;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.login-form-container {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 18px;
|
||
}
|
||
|
||
.input-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.input-container label {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.input-container input {
|
||
height: 40px;
|
||
border: 1px solid #d0d7de;
|
||
border-radius: 6px;
|
||
padding: 0 12px;
|
||
font-size: 15px;
|
||
background: #f7fbfd;
|
||
transition: border 0.2s;
|
||
}
|
||
|
||
.input-container input:focus {
|
||
border: 1.5px solid #409eff;
|
||
outline: none;
|
||
background: #fff;
|
||
}
|
||
|
||
.input-container input.error {
|
||
border-color: #f56c6c;
|
||
}
|
||
|
||
.error-message {
|
||
color: #f56c6c;
|
||
font-size: 12px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.login-button {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.login-button button {
|
||
width: 100%;
|
||
height: 42px;
|
||
background: linear-gradient(90deg, #409eff 0%, #6dd5fa 100%);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.10);
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.login-button button:hover:not(:disabled) {
|
||
background: linear-gradient(90deg, #66b1ff 0%, #6dd5fa 100%);
|
||
}
|
||
|
||
.login-button button:disabled {
|
||
background: #a0cfff;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.register-link {
|
||
margin-top: 12px;
|
||
text-align: right;
|
||
}
|
||
|
||
.register-link a {
|
||
color: #409eff;
|
||
font-size: 14px;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.register-link a:hover {
|
||
color: #1a73e8;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* VAPTCHA 相关样式 */
|
||
.VAPTCHA-init-main {
|
||
display: table;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #f7fbfd;
|
||
border-radius: 6px;
|
||
border: 1px solid #d0d7de;
|
||
}
|
||
|
||
.VAPTCHA-init-loading {
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
}
|
||
|
||
.VAPTCHA-init-loading>a {
|
||
display: inline-block;
|
||
width: 18px;
|
||
height: 18px;
|
||
border: none;
|
||
}
|
||
|
||
.VAPTCHA-init-loading .VAPTCHA-text {
|
||
font-family: sans-serif;
|
||
font-size: 12px;
|
||
color: #666;
|
||
vertical-align: middle;
|
||
}
|
||
</style> |