Mini_Program/pages/register/register.vue

<template>
	<view class="register-container">
		<!-- 应用Logo和名称 -->
		<view class="app-header">
			<view class="app-logo">
				<view class="logo-square">
					<view class="book-icon">
						<view class="book-left"></view>
						<view class="book-right"></view>
						<view class="book-line"></view>
					</view>
				</view>
			</view>
			<text class="app-title">云阅读</text>
			<text class="register-title">用户注册</text>
		</view>
		
		<!-- 注册表单 -->
		<view class="form-container">
			<view class="input-group">
				<input 
					class="input-field" 
					type="text" 
					placeholder="请输入用户名"
					v-model="formData.username"
					maxlength="20"
				/>
				<view class="input-line"></view>
			</view>
			
			<view class="input-group">
				<input 
					class="input-field" 
					type="text" 
					placeholder="请输入昵称（可选）"
					v-model="formData.nickname"
					maxlength="20"
				/>
				<view class="input-line"></view>
			</view>
			
			<view class="input-group">
				<input 
					class="input-field password-input" 
					:type="showPassword ? 'text' : 'password'"
					placeholder="请输入密码（6-20位）"
					v-model="formData.password"
					maxlength="20"
				/>
				<text 
					class="toggle-password-btn" 
					@click="togglePassword"
				>
					{{ showPassword ? '隐藏' : '显示' }}
				</text>
				<view class="input-line"></view>
			</view>
			
			<view class="input-group">
				<input 
					class="input-field password-input" 
					:type="showConfirmPassword ? 'text' : 'password'"
					placeholder="请确认密码"
					v-model="formData.confirmPassword"
					maxlength="20"
				/>
				<text 
					class="toggle-password-btn" 
					@click="toggleConfirmPassword"
				>
					{{ showConfirmPassword ? '隐藏' : '显示' }}
				</text>
				<view class="input-line"></view>
			</view>
			
			<view class="input-group">
				<input 
					class="input-field" 
					type="number" 
					placeholder="请输入手机号（可选）"
					v-model="formData.phone"
					maxlength="11"
				/>
				<view class="input-line"></view>
			</view>
			
			<view class="input-group">
				<input 
					class="input-field" 
					type="text" 
					placeholder="请输入邮箱（可选）"
					v-model="formData.email"
					maxlength="100"
				/>
				<view class="input-line"></view>
			</view>
			
			<button 
				class="register-btn" 
				@click="handleRegister"
				:disabled="!canRegister"
			>
				{{ isLoading ? '注册中...' : '注册' }}
			</button>
			
			<!-- 返回登录 -->
			<view class="login-link" @click="goToLogin">
				<text class="login-text">已有账号？立即登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { register } from '../../utils/api.js'
	
	export default {
		data() {
			return {
				formData: {
					username: '',
					nickname: '',
					password: '',
					confirmPassword: '',
					phone: '',
					email: ''
				},
				showPassword: false,
				showConfirmPassword: false,
				isLoading: false
			}
		},
		computed: {
			canRegister() {
				return this.formData.username.trim().length > 0 
					&& this.formData.password.length >= 6 
					&& this.formData.password === this.formData.confirmPassword
					&& !this.isLoading
			}
		},
		methods: {
			togglePassword() {
				this.showPassword = !this.showPassword
			},
			toggleConfirmPassword() {
				this.showConfirmPassword = !this.showConfirmPassword
			},
			validateForm() {
				// 验证用户名
				if (!this.formData.username || this.formData.username.trim().length === 0) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					})
					return false
				}
				
				// 验证密码
				if (!this.formData.password || this.formData.password.length < 6) {
					uni.showToast({
						title: '密码长度不能少于6位',
						icon: 'none'
					})
					return false
				}
				
				if (this.formData.password.length > 20) {
					uni.showToast({
						title: '密码长度不能超过20位',
						icon: 'none'
					})
					return false
				}
				
				// 验证确认密码
				if (this.formData.password !== this.formData.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					})
					return false
				}
				
				// 验证手机号（如果填写了）
				if (this.formData.phone && this.formData.phone.trim().length > 0) {
					const phoneReg = /^1[3-9]\d{9}$/
					if (!phoneReg.test(this.formData.phone.trim())) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						})
						return false
					}
				}
				
				// 验证邮箱（如果填写了）
				if (this.formData.email && this.formData.email.trim().length > 0) {
					const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
					if (!emailReg.test(this.formData.email.trim())) {
						uni.showToast({
							title: '请输入正确的邮箱地址',
							icon: 'none'
						})
						return false
					}
				}
				
				return true
			},
			handleRegister() {
				if (!this.validateForm()) {
					return
				}
				
				// 显示加载中
				this.isLoading = true
				uni.showLoading({
					title: '注册中...',
					mask: true
				})
				
				// 准备注册数据
				const registerData = {
					username: this.formData.username.trim(),
					password: this.formData.password,
					nickname: this.formData.nickname.trim() || this.formData.username.trim(),
					phone: this.formData.phone.trim() || null,
					email: this.formData.email.trim() || null
				}
				
				// 调用后端注册接口
				register(registerData)
					.then((res) => {
						uni.hideLoading()
						this.isLoading = false
						
						if (res.code === 200 && res.data) {
							uni.showToast({
								title: '注册成功',
								icon: 'success'
							})
							
							// 注册成功后，延迟跳转到登录页面，并传递用户名
							setTimeout(() => {
								uni.redirectTo({
									url: `/pages/login/login?username=${encodeURIComponent(registerData.username)}`
								})
							}, 1500)
						} else {
							uni.showToast({
								title: res.message || '注册失败',
								icon: 'none',
								duration: 2000
							})
						}
					})
					.catch((err) => {
						uni.hideLoading()
						this.isLoading = false
						
						console.error('注册失败:', err)
						uni.showToast({
							title: err.message || '注册失败，请检查网络连接',
							icon: 'none',
							duration: 2000
						})
					})
			},
			goToLogin() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.register-container {
		width: 100%;
		min-height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding-top: 30px;
		box-sizing: border-box;
		align-items: center;
		padding: 0 60rpx;
		box-sizing: border-box;
		position: relative;
		padding-bottom: 80rpx;
	}
	
	.app-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 60rpx;
		margin-bottom: 60rpx;
		flex-shrink: 0;
	}
	
	.app-logo {
		margin-bottom: 30rpx;
	}
	
	.logo-square {
		width: 120rpx;
		height: 120rpx;
		background-color: #4FC3F7;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.book-icon {
		position: relative;
		width: 80rpx;
		height: 60rpx;
	}
	
	.book-left,
	.book-right {
		position: absolute;
		width: 40rpx;
		height: 60rpx;
		background-color: #FFFFFF;
		border-radius: 3rpx 0 0 3rpx;
	}
	
	.book-right {
		right: 0;
		border-radius: 0 3rpx 3rpx 0;
	}
	
	.book-line {
		position: absolute;
		left: 40rpx;
		top: 8rpx;
		width: 2rpx;
		height: 44rpx;
		background-color: #4FC3F7;
	}
	
	.app-title {
		font-size: 40rpx;
		color: #333333;
		font-weight: 600;
		margin-bottom: 20rpx;
	}
	
	.register-title {
		font-size: 32rpx;
		color: #666666;
		font-weight: normal;
	}
	
	.form-container {
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	
	.input-group {
		position: relative;
		margin-bottom: 40rpx;
	}
	
	.input-field {
		width: 100%;
		height: 88rpx;
		font-size: 30rpx;
		padding: 0 20rpx;
		color: #333333;
	}
	
	.password-input {
		padding-right: 80rpx;
	}
	
	.toggle-password-btn {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 26rpx;
		color: #4FC3F7;
		z-index: 10;
		padding: 8rpx 12rpx;
	}
	
	.input-line {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 1rpx;
		background-color: #E0E0E0;
	}
	
	.register-btn {
		width: 100%;
		height: 96rpx;
		background-color: #E0E0E0;
		color: #999999;
		font-size: 34rpx;
		border-radius: 48rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		flex-shrink: 0;
	}
	
	.register-btn:not([disabled]) {
		background-color: #4FC3F7;
		color: #FFFFFF;
	}
	
	.register-btn[disabled] {
		background-color: #E0E0E0;
		color: #999999;
	}
	
	.login-link {
		margin-top: 40rpx;
		text-align: center;
	}
	
	.login-text {
		font-size: 28rpx;
		color: #4FC3F7;
	}
</style>