vist_go_uniApp/packageUser/pages/register/index.vue

<template>
	<view class="register-page">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 返回按钮 -->
		<view class="nav-back" @click="goBack">
			<text class="back-icon">&#xe685;</text>
		</view>
		
		<!-- 页面标题 -->
		<view class="header">
			<text class="title">注册账号</text>
		</view>
		
		<!-- 注册表单 -->
		<view class="form-section">
			<view class="form-item">
				<input type="text" v-model="form.phone" placeholder="请输入手机号" />
			</view>
			<view class="form-item code-item">
				<input type="text" v-model="form.code" placeholder="请输入验证码" />
				<button class="code-btn" :disabled="counting" @tap="getCode">
					{{counting ? `${counter}s后重新获取` : '获取验证码'}}
				</button>
			</view>
			<view class="form-item">
				<input type="password" v-model="form.password" placeholder="请设置密码" />
			</view>
			
			<button class="submit-btn" @tap="handleSubmit">注册</button>
			
			<view class="agreement">
				<checkbox :checked="isAgree" @tap="toggleAgreement"></checkbox>
				<text class="agreement-text">
					注册即代表您已同意
					<text class="link" @tap="goToPrivacy">《隐私政策》</text>
					和
					<text class="link" @tap="goToService">《服务协议》</text>
				</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				phone: '',
				code: '',
				password: ''
			},
			isAgree: false,
			counting: false,
			counter: 60
		}
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		// 获取验证码
		getCode() {
			if (!this.form.phone) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return;
			}
			
			// 开始倒计时
			this.counting = true;
			this.counter = 60;
			const timer = setInterval(() => {
				this.counter--;
				if (this.counter <= 0) {
					clearInterval(timer);
					this.counting = false;
				}
			}, 1000);
			
			// TODO: 调用发送验证码接口
			uni.showToast({
				title: '验证码已发送',
				icon: 'success'
			});
		},
		
		// 切换协议同意状态
		toggleAgreement() {
			this.isAgree = !this.isAgree;
		},
		
		// 提交注册
		handleSubmit() {
			if (!this.isAgree) {
				uni.showToast({
					title: '请先同意用户协议和隐私政策',
					icon: 'none'
				});
				return;
			}
			
			if (!this.form.phone || !this.form.code || !this.form.password) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				});
				return;
			}
			
			// TODO: 调用注册接口
			uni.showLoading({
				title: '注册中...'
			});
			
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
					title: '注册成功',
					icon: 'success'
				});
				
				// 注册成功后跳转到登录页
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/user/login'
					});
				}, 1500);
			}, 1000);
		},
		
		// 跳转到隐私政策
		goToPrivacy() {
			uni.navigateTo({
				url: '/packageUser/pages/article/detail?type=privacy'
			});
		},
		
		// 跳转到服务协议
		goToService() {
			uni.navigateTo({
				url: '/packageUser/pages/article/detail?type=service'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.register-page {
	min-height: 100vh;
	background: #fff;
	padding-bottom: env(safe-area-inset-bottom);
}

.status-bar {
	height: var(--status-bar-height);
	width: 100%;
}

.nav-back {
	position: fixed;
	left: 30rpx;
	top: calc(var(--status-bar-height) + 20rpx);
	z-index: 100;
	
	.back-icon {
		font-family: "iconfont";
		font-size: 40rpx;
		color: #333;
	}
}

.header {
	padding: 60rpx 40rpx;
	
	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
	}
}

.form-section {
	padding: 0 40rpx;
	
	.form-item {
		border-bottom: 1px solid #eee;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		
		input {
			font-size: 32rpx;
			color: #333;
		}
	}
	
	.code-item {
		display: flex;
		align-items: center;
		
		input {
			flex: 1;
		}
		
		.code-btn {
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 24rpx;
			color: #fff;
			background: #D93025;
			border-radius: 30rpx;
			margin-left: 20rpx;
			
			&[disabled] {
				background: #ccc;
			}
		}
	}
	
	.submit-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: #D93025;
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
		margin-top: 60rpx;
	}
	
	.agreement {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
		
		checkbox {
			transform: scale(0.7);
		}
		
		.agreement-text {
			font-size: 24rpx;
			color: #666;
			margin-left: 8rpx;
			
			.link {
				color: #D93025;
			}
		}
	}
}
</style>