<template>
|
<div class="register-form">
|
<!-- Logo -->
|
<el-image :src="logo" :width="100" :height="100" />
|
<h1>用户注册</h1>
|
<p class="desc">创建您的账户，开始使用我们的服务</p>
|
|
<!-- 表单 -->
|
<el-form
|
:model="formData"
|
:rules="formRules"
|
ref="formRef"
|
@submit.prevent="onSubmit"
|
label-width="auto"
|
class="form-container"
|
>
|
<!-- 用户名 -->
|
<el-form-item label="用户姓名*" prop="username">
|
<el-input
|
v-model="formData.username"
|
placeholder="请输入您的姓名"
|
/>
|
</el-form-item>
|
|
<!-- 手机号 -->
|
<el-form-item label="手机号*" prop="phone">
|
<el-input
|
v-model="formData.phone"
|
placeholder="请输入您的手机号"
|
/>
|
</el-form-item>
|
|
<!-- 验证码 -->
|
<el-form-item label="手机验证码*" prop="code">
|
<el-input
|
v-model="formData.code"
|
placeholder="请输入验证码"
|
class="code-input"
|
>
|
<template #append>
|
<el-button
|
type="primary"
|
@click="sendCode"
|
:disabled="isSendingCode"
|
>
|
{{ sendButtonText }}
|
</el-button>
|
</template>
|
</el-input>
|
</el-form-item>
|
|
<!-- 邮箱 -->
|
<el-form-item label="邮箱地址*" prop="email">
|
<el-input
|
v-model="formData.email"
|
type="email"
|
placeholder="请输入您的邮箱地址"
|
/>
|
</el-form-item>
|
|
<!-- 密码 -->
|
<el-form-item label="密码*" prop="password">
|
<el-input
|
v-model="formData.password"
|
type="password"
|
placeholder="请输入您的密码"
|
/>
|
</el-form-item>
|
|
<!-- 确认密码 -->
|
<el-form-item label="确认密码*" prop="confirmPassword">
|
<el-input
|
v-model="formData.confirmPassword"
|
type="password"
|
placeholder="请确认您的密码"
|
/>
|
</el-form-item>
|
|
<!-- 提交按钮 -->
|
<div class="submit-btn">
|
<el-button
|
round
|
type="primary"
|
native-type="submit"
|
:loading="submitLoading"
|
style="width: 100%"
|
>
|
立即注册
|
</el-button>
|
</div>
|
</el-form>
|
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive } from 'vue';
|
import { useRouter } from 'vue-router';
|
import { ElMessage, ElLoading } from 'element-plus';
|
import logo from '/@/assets/logo.png';
|
|
// API 导入（保持不变）
|
import { sendValidateCode, registerForNutrition } from "/@/api/register";
|
|
const router = useRouter();
|
|
// 表单数据
|
const formData = reactive({
|
username: '',
|
phone: '',
|
code: '',
|
email: '',
|
password: '',
|
confirmPassword: ''
|
});
|
|
// 表单引用（用于校验）
|
const formRef = ref(null);
|
|
// 提交加载状态
|
const submitLoading = ref(false);
|
|
// 验证码发送状态
|
const isSendingCode = ref(false);
|
const sendButtonText = ref('发送验证码');
|
let countdownTimer = null;
|
const countdown = ref(60);
|
|
// 手机号格式校验
|
const isValidPhone = (phone) => /^1[3456789]\d{9}$/.test(phone);
|
|
// 发送验证码
|
const sendCode = () => {
|
if (!formData.phone) {
|
ElMessage.error('请先填写手机号');
|
return;
|
}
|
|
if (!isValidPhone(formData.phone)) {
|
ElMessage.error('请输入正确的手机号码');
|
return;
|
}
|
|
// 模拟请求发送验证码
|
console.log('发送验证码至：', formData.phone);
|
sendValidateCode('mobileNo=' + formData.phone)
|
.then(() => {
|
ElMessage.success('验证码已发送');
|
// 启动倒计时
|
isSendingCode.value = true;
|
countdown.value = 60;
|
sendButtonText.value = `${countdown.value}秒后重发`;
|
|
countdownTimer = setInterval(() => {
|
countdown.value--;
|
sendButtonText.value = `${countdown.value}秒后重发`;
|
if (countdown.value <= 0) {
|
clearInterval(countdownTimer);
|
isSendingCode.value = false;
|
sendButtonText.value = '重新发送';
|
}
|
}, 1000);
|
})
|
.catch(() => {
|
ElMessage.error('验证码发送失败');
|
});
|
};
|
|
// 自定义密码确认校验
|
const validatePass = (rule, value, callback) => {
|
if (value !== formData.password) {
|
callback(new Error('两次输入密码不一致'));
|
} else {
|
callback();
|
}
|
};
|
|
// 表单规则
|
const formRules = {
|
username: [
|
{ required: true, message: '请填写用户名', trigger: 'blur' }
|
],
|
phone: [
|
{ required: true, message: '请填写手机号', trigger: 'blur' },
|
{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
],
|
code: [
|
{ required: true, message: '请填写验证码', trigger: 'blur' }
|
],
|
email: [
|
{ pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, 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' }
|
]
|
};
|
|
// 表单提交
|
const onSubmit = () => {
|
formRef.value.validate(async (valid) => {
|
if (!valid) return;
|
|
const submitData = {
|
手机验证码: formData.code,
|
用户姓名: formData.username,
|
手机号: formData.phone,
|
密码: formData.confirmPassword,
|
Email: formData.email
|
};
|
|
console.log('提交数据:', submitData);
|
|
const loading = ElLoading.service({
|
lock: true,
|
text: '注册中...',
|
background: 'rgba(0, 0, 0, 0.7)'
|
});
|
|
try {
|
const res = await registerForNutrition(submitData);
|
if (res.code === 400) {
|
ElMessage.error(res.message);
|
} else if (res.code === 200) {
|
ElMessage.success('注册成功！');
|
router.push('/registerSuu');
|
}
|
} catch (err) {
|
ElMessage.error('注册失败，请稍后重试');
|
} finally {
|
loading.close();
|
}
|
});
|
};
|
</script>
|
|
<style scoped>
|
.register-form {
|
text-align: center;
|
max-width: 400px;
|
margin: 0 auto;
|
padding: 20px;
|
padding-top: 40px;
|
}
|
|
h1 {
|
font-size: 20px;
|
margin-bottom: 10px;
|
}
|
|
.desc {
|
color: #666;
|
font-size: 14px;
|
margin-bottom: 20px;
|
}
|
|
.form-container {
|
margin-top: 20px;
|
}
|
|
.code-input :deep(.el-input-group__append) {
|
padding: 0;
|
}
|
|
.submit-btn {
|
margin: 24px 0;
|
}
|
</style>
|
