guoyu/fronted_uniapp/pages/register/register.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)
                
                // 调用注册接口（后端注册接口格式）
                // 注意：注册接口不需要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>