351 lines
8.2 KiB
Vue
351 lines
8.2 KiB
Vue
|
<template>
|
|||
|
|
<div class="register-container">
|
|||
|
|
<div class="background">
|
|||
|
|
<div class="shape"></div>
|
|||
|
|
<div class="shape"></div>
|
|||
|
|
</div>
|
|||
|
|
<el-card class="register-card" :body-style="{ padding: '30px' }">
|
|||
|
|
<div class="register-header">
|
|||
|
|
<div class="logo">
|
|||
|
|
<el-icon :size="40" color="#409EFF"><Platform /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<h2>智慧养老平台</h2>
|
|||
|
|
<p class="subtitle">创建新账号</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-form
|
|||
|
|
ref="registerFormRef"
|
|||
|
|
:model="registerForm"
|
|||
|
|
:rules="rules"
|
|||
|
|
label-position="top"
|
|||
|
|
class="animated-form"
|
|||
|
|
>
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="姓名" prop="username">
|
|||
|
|
<el-input
|
|||
|
|
v-model="registerForm.username"
|
|||
|
|
class="custom-input"
|
|||
|
|
>
|
|||
|
|
<template #prefix>
|
|||
|
|
<div class="input-icon">
|
|||
|
|
<el-icon><User /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="手机号" prop="phone">
|
|||
|
|
<el-input
|
|||
|
|
v-model="registerForm.phone"
|
|||
|
|
class="custom-input"
|
|||
|
|
>
|
|||
|
|
<template #prefix>
|
|||
|
|
<div class="input-icon">
|
|||
|
|
<el-icon><Phone /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-form-item label="密码" prop="password">
|
|||
|
|
<el-input
|
|||
|
|
v-model="registerForm.password"
|
|||
|
|
type="password"
|
|||
|
|
show-password
|
|||
|
|
class="custom-input"
|
|||
|
|
>
|
|||
|
|
<template #prefix>
|
|||
|
|
<div class="input-icon">
|
|||
|
|
<el-icon><Lock /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="确认密码" prop="confirmPassword">
|
|||
|
|
<el-input
|
|||
|
|
v-model="registerForm.confirmPassword"
|
|||
|
|
type="password"
|
|||
|
|
show-password
|
|||
|
|
class="custom-input"
|
|||
|
|
>
|
|||
|
|
<template #prefix>
|
|||
|
|
<div class="input-icon">
|
|||
|
|
<el-icon><Lock /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="验证码" prop="verifyCode">
|
|||
|
|
<div class="verify-code-input">
|
|||
|
|
<el-input
|
|||
|
|
v-model="registerForm.verifyCode"
|
|||
|
|
class="custom-input"
|
|||
|
|
>
|
|||
|
|
<template #prefix>
|
|||
|
|
<div class="input-icon">
|
|||
|
|
<el-icon><Message /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-input>
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
:disabled="cooldown > 0"
|
|||
|
|
@click="sendVerifyCode"
|
|||
|
|
>
|
|||
|
|
{{ cooldown > 0 ? `${cooldown}s` : '获取验证码' }}
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
class="register-button"
|
|||
|
|
:loading="loading"
|
|||
|
|
@click="handleRegister"
|
|||
|
|
>
|
|||
|
|
<span class="button-text">注 册</span>
|
|||
|
|
<el-icon class="button-icon"><Right /></el-icon>
|
|||
|
|
</el-button>
|
|||
|
|
|
|||
|
|
<div class="login-link">
|
|||
|
|
已有账号？
|
|||
|
|
<router-link to="/login" class="login-btn">立即登录</router-link>
|
|||
|
|
</div>
|
|||
|
|
</el-form>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, reactive } from 'vue'
|
|||
|
|
import { useRouter } from 'vue-router'
|
|||
|
|
import { User, Lock, Phone, Message, Platform, Right } from '@element-plus/icons-vue'
|
|||
|
|
import type { FormInstance } from 'element-plus'
|
|||
|
|
import { ElMessage } from 'element-plus'
|
|||
|
|
|
|||
|
|
const router = useRouter()
|
|||
|
|
const registerFormRef = ref<FormInstance>()
|
|||
|
|
const loading = ref(false)
|
|||
|
|
|
|||
|
|
const registerForm = reactive({
|
|||
|
|
username: '',
|
|||
|
|
phone: '',
|
|||
|
|
password: '',
|
|||
|
|
confirmPassword: '',
|
|||
|
|
verifyCode: ''
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const validatePass = (rule: any, value: string, callback: any) => {
|
|||
|
|
if (value === '') {
|
|||
|
|
callback(new Error('请再次输入密码'))
|
|||
|
|
} else if (value !== registerForm.password) {
|
|||
|
|
callback(new Error('两次输入密码不一致!'))
|
|||
|
|
} else {
|
|||
|
|
callback()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const rules = {
|
|||
|
|
username: [
|
|||
|
|
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
|||
|
|
{ min: 3, message: '用户名长度不能小于3个字符', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
phone: [
|
|||
|
|
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
|||
|
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
password: [
|
|||
|
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
|||
|
|
{ min: 6, message: '密码长度不能小于6个字符', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
confirmPassword: [
|
|||
|
|
{ required: true, message: '请再次输入密码', trigger: 'blur' },
|
|||
|
|
{ validator: validatePass, trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
verifyCode: [
|
|||
|
|
{ required: true, message: '请输入验证码', trigger: 'blur' }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleRegister = async () => {
|
|||
|
|
if (!registerFormRef.value) return
|
|||
|
|
|
|||
|
|
await registerFormRef.value.validate(async (valid) => {
|
|||
|
|
if (valid) {
|
|||
|
|
loading.value = true
|
|||
|
|
try {
|
|||
|
|
// 这里添加实的注册逻辑
|
|||
|
|
// const response = await register(registerForm)
|
|||
|
|
|
|||
|
|
// 模拟注册成功
|
|||
|
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
|||
|
|
|
|||
|
|
ElMessage.success('注册成功')
|
|||
|
|
router.push('/login')
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('注册失败，请稍后重试')
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加验证码相关逻辑
|
|||
|
|
const cooldown = ref(0)
|
|||
|
|
const startCooldown = () => {
|
|||
|
|
cooldown.value = 60
|
|||
|
|
const timer = setInterval(() => {
|
|||
|
|
cooldown.value--
|
|||
|
|
if (cooldown.value <= 0) {
|
|||
|
|
clearInterval(timer)
|
|||
|
|
}
|
|||
|
|
}, 1000)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const sendVerifyCode = () => {
|
|||
|
|
if (cooldown.value > 0) return
|
|||
|
|
// 这里添加发送验证码的逻辑
|
|||
|
|
ElMessage.success('验证码已发送')
|
|||
|
|
startCooldown()
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.register-container {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
background: linear-gradient(45deg, #1a1a1a, #434343);
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.background {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shape {
|
|||
|
|
position: absolute;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
|
|||
|
|
animation: float 6s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shape:nth-child(1) {
|
|||
|
|
width: 500px;
|
|||
|
|
height: 500px;
|
|||
|
|
top: -250px;
|
|||
|
|
right: -100px;
|
|||
|
|
background: linear-gradient(45deg, #4481eb, #04befe);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shape:nth-child(2) {
|
|||
|
|
width: 400px;
|
|||
|
|
height: 400px;
|
|||
|
|
bottom: -200px;
|
|||
|
|
left: -100px;
|
|||
|
|
background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
|
|||
|
|
animation-delay: -3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes float {
|
|||
|
|
0% {
|
|||
|
|
transform: translateY(0) rotate(0deg);
|
|||
|
|
}
|
|||
|
|
50% {
|
|||
|
|
transform: translateY(-20px) rotate(5deg);
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
transform: translateY(0) rotate(0deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.register-card {
|
|||
|
|
width: 500px;
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
background: rgba(255, 255, 255, 0.9);
|
|||
|
|
border-radius: 20px;
|
|||
|
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
transition: transform 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.register-card:hover {
|
|||
|
|
transform: translateY(-5px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.register-header {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.subtitle {
|
|||
|
|
color: #606266;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-input {
|
|||
|
|
height: 50px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-input :deep(.el-input__wrapper) {
|
|||
|
|
padding-left: 45px;
|
|||
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 15px;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
color: #909399;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.verify-code-input {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.verify-code-input .el-button {
|
|||
|
|
width: 120px;
|
|||
|
|
height: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.register-button {
|
|||
|
|
width: 100%;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-link {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-link a {
|
|||
|
|
color: #409EFF;
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-link a:hover {
|
|||
|
|
color: #66b1ff;
|
|||
|
|
}
|
|||
|
|
</style>
|