<template>
|
<div class="register-form">
|
<van-image width="100" height="100" :src="logo" />
|
<h1>用户注册</h1>
|
<p class="desc">创建您的账户，开始使用我们的服务</p>
|
|
<van-form @submit="onSubmit">
|
<!-- 用户名 -->
|
<van-field
|
v-model="formData.username"
|
name="用户名"
|
label="用户姓名*"
|
placeholder="请输入您的姓名"
|
:rules="[{ required: true, message: '请填写用户名' }]"
|
/>
|
|
<!-- 手机号 -->
|
<van-field
|
v-model="formData.phone"
|
type="tel"
|
name="手机号"
|
label="手机号*"
|
placeholder="请输入您的手机号"
|
:rules="[
|
{ required: true, message: '请填写手机号' },
|
{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码'}
|
]"
|
/>
|
|
<!-- 验证码 -->
|
<van-field
|
v-model="formData.code"
|
center
|
clearable
|
name="验证码"
|
label="手机验证码*"
|
placeholder="请输入验证码"
|
:rules="[{ required: true, message: '请填写验证码' }]"
|
>
|
<template #button>
|
<van-button size="small" type="primary" @click="sendCode" :disabled="isSendingCode">{{ sendButtonText }}</van-button>
|
</template>
|
</van-field>
|
|
<!-- 邮箱地址 -->
|
<van-field
|
v-model="formData.email"
|
type="email"
|
name="邮箱地址"
|
label="邮箱地址*"
|
placeholder="请输入您的邮箱地址"
|
:rules="[
|
{ pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, message: '请输入正确的邮箱格式'}
|
]"
|
/>
|
|
<!-- 密码 -->
|
<van-field
|
v-model="formData.password"
|
type="password"
|
name="密码"
|
label="密码*"
|
placeholder="请输入您的密码"
|
:rules="[
|
{ required: true, message: '请填写密码' },
|
{ min: 6, message: '密码长度不能少于6位'}
|
]"
|
/>
|
|
<!-- 确认密码 -->
|
<van-field
|
v-model="formData.confirmPassword"
|
type="password"
|
name="确认密码"
|
label="确认密码*"
|
placeholder="请确认您的密码"
|
:rules="[
|
{ validator: validatePass, message: '两次输入密码不一致' },
|
{ required: true, message: '请确认密码' }
|
]"
|
/>
|
|
<!-- 提交按钮 -->
|
<div style="margin: 16px;">
|
<van-button round block type="primary" native-type="submit">立即注册</van-button>
|
</div>
|
</van-form>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue';
|
import { Toast } from 'vant';
|
import logo from '@/assets/logo.png'
|
import { useRouter } from 'vue-router';
|
import { sendValidateCode,registerForNutrition } from "@/utils/httpApi";
|
|
const router = useRouter();
|
const formData = ref({
|
username: '',
|
phone: '',
|
code: '',
|
email: '',
|
password: '',
|
confirmPassword: ''
|
});
|
const submitLoadion=ref(false)
|
const isSendingCode = ref(false);
|
const sendButtonText = ref('发送验证码');
|
let countdownTimer = null;
|
const countdown = ref(60);
|
|
// 自定义验证手机号格式
|
const isValidPhone = (phone) => {
|
const phoneReg = /^1[3456789]\d{9}$/;
|
return phoneReg.test(phone);
|
};
|
|
// 发送验证码
|
const sendCode = () => {
|
if (!formData.value.phone) {
|
Toast.fail('请先填写手机号');
|
return;
|
}
|
|
if (!isValidPhone(formData.value.phone)) {
|
Toast.fail('请输入正确的手机号码');
|
return;
|
}
|
|
// 开始发送验证码
|
isSendingCode.value = true;
|
// 模拟发送验证码请求
|
console.log('发送验证码至：', formData.value.phone);
|
sendValidateCode('mobileNo='+formData.value.phone).then(re=>{
|
Toast.success('验证码已发送');
|
// 启动倒计时
|
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);
|
}).finally(()=>{
|
|
})
|
|
};
|
|
// 验证两次输入的密码是否一致
|
const validatePass = (val) => val === formData.value.password;
|
|
// 表单提交
|
const onSubmit = (values) => {
|
console.log('submit', values);
|
const mono={
|
手机验证码:values.验证码,
|
用户姓名:values.用户名,
|
手机号:values.手机号,
|
密码:values.确认密码,
|
Email:values.邮箱地址
|
}
|
console.log(mono)
|
Toast.loading({
|
message: '加载中...',
|
forbidClick: true,
|
loadingType: 'spinner',
|
});
|
submitLoadion.value=true
|
registerForNutrition(mono).then(re=>{
|
console.log(re)
|
if(re.code===400){
|
Toast(re.message);
|
}else if(re.code===200){
|
// 跳转到注册成功页面
|
Toast.success('提交成功');
|
router.push('/register-success');
|
}
|
|
}).center((err)=>{
|
Toast('注册失败');
|
})
|
.finally(()=>{
|
submitLoadion.value=false
|
// router.push('/register-success');
|
})
|
|
// router.push('/register-success');
|
};
|
</script>
|
|
<style scoped>
|
.register-form {
|
text-align: center;
|
max-width: 400px;
|
margin: 0 auto;
|
padding: 20px;
|
padding-top: 40px;
|
}
|
|
.logo {
|
display: block;
|
margin: 0 auto 20px;
|
width: 100px;
|
}
|
|
h1 {
|
text-align: center;
|
font-size: 20px;
|
margin-bottom: 10px;
|
}
|
|
p {
|
text-align: center;
|
color: #666;
|
margin-bottom: 20px;
|
}
|
.desc {
|
font-size: 14px;
|
}
|
</style>
|
