333 lines
9.6 KiB
Vue
333 lines
9.6 KiB
Vue
<template>
|
||
<view class="register-container">
|
||
<view class="register-header">
|
||
<text class="title">用户注册</text>
|
||
<text class="subtitle">请填写注册信息</text>
|
||
</view>
|
||
|
||
<view class="register-form">
|
||
<u-form :model="form" ref="formRef" :rules="rules">
|
||
<u-form-item prop="username">
|
||
<u-input
|
||
v-model="form.username"
|
||
placeholder="请输入用户名"
|
||
prefixIcon="account"
|
||
:clearable="true"
|
||
/>
|
||
</u-form-item>
|
||
|
||
<u-form-item prop="password">
|
||
<u-input
|
||
v-model="form.password"
|
||
type="password"
|
||
placeholder="请输入密码（至少6位）"
|
||
prefixIcon="lock"
|
||
:clearable="true"
|
||
/>
|
||
</u-form-item>
|
||
|
||
<u-form-item prop="confirmPassword">
|
||
<u-input
|
||
v-model="form.confirmPassword"
|
||
type="password"
|
||
placeholder="请确认密码"
|
||
prefixIcon="lock"
|
||
:clearable="true"
|
||
/>
|
||
</u-form-item>
|
||
|
||
<u-form-item prop="realName">
|
||
<u-input
|
||
v-model="form.realName"
|
||
placeholder="请输入真实姓名"
|
||
prefixIcon="account"
|
||
:clearable="true"
|
||
/>
|
||
</u-form-item>
|
||
|
||
<u-form-item prop="phonenumber">
|
||
<u-input
|
||
v-model="form.phonenumber"
|
||
placeholder="请输入手机号码（可选）"
|
||
prefixIcon="phone"
|
||
:clearable="true"
|
||
/>
|
||
</u-form-item>
|
||
|
||
</u-form>
|
||
|
||
<u-button
|
||
type="primary"
|
||
:loading="loading"
|
||
@click="handleRegister"
|
||
class="register-btn"
|
||
>
|
||
注册
|
||
</u-button>
|
||
|
||
<view class="login-link">
|
||
<text @click="goToLogin">已有账号？去登录</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '@/utils/request.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {
|
||
username: '',
|
||
password: '',
|
||
confirmPassword: '',
|
||
realName: '',
|
||
phonenumber: ''
|
||
},
|
||
rules: {
|
||
username: [
|
||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||
{ min: 3, max: 20, message: '用户名长度为3-20个字符', trigger: 'blur' }
|
||
],
|
||
password: [
|
||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||
{ min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
|
||
],
|
||
confirmPassword: [
|
||
{ required: true, message: '请确认密码', trigger: 'blur' },
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
if (value !== this.form.password) {
|
||
callback(new Error('两次输入的密码不一致'))
|
||
} else {
|
||
callback()
|
||
}
|
||
},
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
realName: [
|
||
{ required: true, message: '请输入真实姓名', trigger: 'blur' }
|
||
]
|
||
},
|
||
loading: false
|
||
}
|
||
},
|
||
methods: {
|
||
async handleRegister() {
|
||
// 表单验证
|
||
try {
|
||
await this.$refs.formRef.validate()
|
||
} catch (e) {
|
||
return
|
||
}
|
||
|
||
this.loading = true
|
||
|
||
try {
|
||
// 准备注册数据
|
||
const registerData = {
|
||
username: this.form.username,
|
||
password: this.form.password,
|
||
nickName: this.form.realName,
|
||
phonenumber: this.form.phonenumber || '',
|
||
userType: 'student' // 固定为学员
|
||
}
|
||
|
||
console.log('准备注册，数据:', registerData)
|
||
|
||
// 调用注册接口（RuoYi注册接口格式）
|
||
// 注意：注册接口不需要token，需要特殊处理请求头
|
||
const response = await request.post('/register', registerData, {
|
||
loading: false, // 使用自定义loading
|
||
headers: {
|
||
isToken: false // 注册接口不需要token
|
||
}
|
||
})
|
||
|
||
console.log('注册响应:', response)
|
||
|
||
if (response.code === 200) {
|
||
uni.showToast({
|
||
title: '注册成功，等待管理员审核',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
|
||
// 跳转到登录页
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: '/pages/login/login'
|
||
})
|
||
}, 2000)
|
||
} else {
|
||
throw new Error(response.msg || '注册失败')
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('注册失败:', error)
|
||
uni.showToast({
|
||
title: error.message || error.msg || '注册失败',
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
|
||
goToLogin() {
|
||
uni.navigateTo({
|
||
url: '/pages/login/login'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.register-container {
|
||
min-height: 100vh;
|
||
background: linear-gradient(135deg, rgb(55 140 224) 0%, rgb(45 120 200) 100%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 40rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
/* 平板适配 */
|
||
@media (min-width: 768px) {
|
||
padding: 60rpx;
|
||
}
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="70" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
|
||
opacity: 0.3;
|
||
}
|
||
}
|
||
|
||
.register-header {
|
||
text-align: center;
|
||
margin-bottom: 80rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
|
||
@media (min-width: 768px) {
|
||
margin-bottom: 100rpx;
|
||
}
|
||
|
||
.title {
|
||
display: block;
|
||
font-size: 56rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
margin-bottom: 24rpx;
|
||
letter-spacing: 2rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 72rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
}
|
||
|
||
.subtitle {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.register-form {
|
||
width: 100%;
|
||
max-width: 640rpx;
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
padding: 60rpx 50rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||
position: relative;
|
||
z-index: 1;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
|
||
/* 平板适配 */
|
||
@media (min-width: 768px) {
|
||
max-width: 800rpx;
|
||
padding: 80rpx 80rpx;
|
||
border-radius: 32rpx;
|
||
max-height: 85vh;
|
||
}
|
||
|
||
::v-deep .u-form-item {
|
||
margin-bottom: 32rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
margin-bottom: 40rpx;
|
||
}
|
||
}
|
||
|
||
::v-deep .u-input {
|
||
background: #f5f7fa;
|
||
border-radius: 12rpx;
|
||
padding: 24rpx 20rpx;
|
||
font-size: 28rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
padding: 32rpx 28rpx;
|
||
font-size: 32rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.register-btn {
|
||
margin-top: 50rpx;
|
||
height: 96rpx;
|
||
border-radius: 48rpx;
|
||
background: linear-gradient(135deg, rgb(55 140 224) 0%, rgb(45 120 200) 100%);
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
box-shadow: 0 4rpx 16rpx rgba(55, 140, 224, 0.3);
|
||
|
||
@media (min-width: 768px) {
|
||
margin-top: 60rpx;
|
||
height: 112rpx;
|
||
font-size: 36rpx;
|
||
border-radius: 56rpx;
|
||
}
|
||
}
|
||
|
||
.login-link {
|
||
margin-top: 50rpx;
|
||
text-align: center;
|
||
|
||
@media (min-width: 768px) {
|
||
margin-top: 60rpx;
|
||
}
|
||
|
||
text {
|
||
color: rgb(55 140 224);
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|