rtliveCompany/pages/auth/registerUser.vue

<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN -->
		<image class="bg" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/bg_login.png" mode="widthFix">
		</image>
		<view class="force-login-wrap">
			<view :style="{ height: menuButtonInfo.height, marginTop: menuButtonInfo.top }" class="backImg">
				<image @tap="goBack()" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/back_white.png">
				</image>
			</view>
			<view class="top-title">
				<view class="title-text">欢迎注册<text class="blue">文依学术</text></view>
				<view class="login-notice">填写信息完成注册</view>
			</view>
			<view class="force-login__content">
				<view class="input-form">
					<view class="input-item">
						<input class="input-field" type="text" v-model="formData.userName" placeholder="请输入用户账号（登录名）" />
					</view>
					<view class="input-item">
						<input class="input-field" type="text" v-model="formData.nickName" placeholder="请输入用户名称" />
					</view>
					<view class="input-item">
						<input class="input-field" type="number" v-model="formData.phonenumber" placeholder="请输入手机号" maxlength="11" />
					</view>
					<view class="input-item code-input-item">
						<input class="input-field code-input" type="number" v-model="verifyCode" placeholder="请输入验证码" maxlength="6" />
						<view class="get-code-btn" @click="getVerifyCode">
							{{ codeText }}
						</view>
					</view>
					<view class="input-item">
						<view class="mima">
							<input class="input-field" type="text" :password="showPassword" v-model="formData.password" placeholder="请输入密码" />
							<view class="pwd-toggle" @click="closePwd">
								<image
									:src="showPassword ? 'https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_invisible.png' : 'https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_visible.png'"
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="input-item">
						<view class="mima">
							<input class="input-field" type="text" :password="showConfirmPassword" v-model="formData.confirmPassword" placeholder="请再次输入密码" />
							<view class="pwd-toggle" @click="closeConfirmPwd">
								<image
									:src="showConfirmPassword ? 'https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_invisible.png' : 'https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_visible.png'"
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="tips-group">
					<view class="tips-item" @click="toLogin">已有账号？立即登录</view>
				</view>
				<view class="login-btn-wrap">
					<button class="login-btn" @click="handleRegister">注册</button>
				</view>

				<view class="tips">
					<checkbox :checked="isAgreement" @click="handleAgreement()" />
					<view class="tips-text" @click="handleAgreement()">已阅读并接受</view>
					<view class="btn" @click.stop="navTo('/pages_user/userAgreement')">《用户注册协议》</view>
					<view class="btn" @click.stop="navTo('/pages_user/privacyPolicy')">《隐私保护政策》</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import { sendSmsCode, smsRegister } from '@/api/user'
	export default {
		data() {
			return {
				formData: {
					userName: '',
					nickName: '',
					phonenumber: '',
					password: '',
					confirmPassword: ''
				},
				verifyCode: '',
				isAgreement: false,
				menuButtonInfo: {},
				codeText: '获取验证码',
				countdown: 0,
				countdownTimer: null,
				showPassword: true,
				showConfirmPassword: true
			}
		},
		onLoad(option) {
			this.getMenuButtonInfo()
		},
		onUnload() {
			// 清除倒计时
			if (this.countdownTimer) {
				clearInterval(this.countdownTimer);
				this.countdownTimer = null;
			}
		},
		methods: {
			navTo(path) {
				uni.navigateTo({
					url: path
				})
			},
			closePwd() {
				this.showPassword = !this.showPassword
			},
			closeConfirmPwd() {
				this.showConfirmPassword = !this.showConfirmPassword
			},
			// 获取胶囊按钮布局参数
			getMenuButtonInfo() {
				const menuBtn = uni.getMenuButtonBoundingClientRect();
				if (menuBtn) {
					this.menuButtonInfo = {
						top: menuBtn.top + 'px',
						height: menuBtn.height + 'px',
						centerY: (menuBtn.top + menuBtn.height / 2) + 'px',
						right: menuBtn.right + 'px'
					};
				}
			},
			// 返回
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 跳转到登录页
			toLogin() {
				uni.navigateTo({
					url: '/pages/auth/login'
				})
			},
			// 获取验证码
			getVerifyCode() {
				if (this.countdown > 0) {
					return;
				}
				if (!this.formData.phonenumber) {
					uni.showToast({
						icon: 'none',
						title: "请输入手机号",
					});
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(this.formData.phonenumber)) {
					uni.showToast({
						icon: 'none',
						title: "请输入正确的手机号",
					});
					return;
				}
				// 调用发送验证码API
				uni.showLoading({
					title: "发送中..."
				});
				let params = {
					phone: this.formData.phonenumber,
					type: '2',
				}
				sendSmsCode(params)
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: "验证码已发送",
							});
							// 开始倒计时
							this.countdown = 60;
							this.countdownTimer = setInterval(() => {
								this.countdown--;
								this.codeText = this.countdown + '秒重新获取';
								if (this.countdown <= 0) {
									clearInterval(this.countdownTimer);
									this.countdownTimer = null;
									this.codeText = '获取验证码';
								}
							}, 1000);
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg || "发送验证码失败",
							});
						}
					})
					.catch(err => {
						uni.hideLoading();
					});
			},
			// 注册
			handleRegister() {
				if (!this.isAgreement) {
					uni.showToast({
						icon: 'none',
						title: "请先同意协议后再注册",
					});
					return;
				}

				if (!this.formData.userName) {
					uni.showToast({
						icon: 'none',
						title: "请输入用户账号",
					});
					return;
				}

				if (!this.formData.nickName) {
					uni.showToast({
						icon: 'none',
						title: "请输入用户名称",
					});
					return;
				}

				if (!this.formData.phonenumber) {
					uni.showToast({
						icon: 'none',
						title: "请输入手机号",
					});
					return;
				}

				if (!/^1[3-9]\d{9}$/.test(this.formData.phonenumber)) {
					uni.showToast({
						icon: 'none',
						title: "请输入正确的手机号",
					});
					return;
				}

				if (!this.verifyCode) {
					uni.showToast({
						icon: 'none',
						title: "请输入验证码",
					});
					return;
				}

				if (!this.formData.password) {
					uni.showToast({
						icon: 'none',
						title: "请输入密码",
					});
					return;
				}

				if (this.formData.password !== this.formData.confirmPassword) {
					uni.showToast({
						icon: 'none',
						title: "两次输入的密码不一致",
					});
					return;
				}

				this.register();
			},
			// 注册
			register() {
				uni.showLoading({
					title: "注册中..."
				});
				// 调用注册接口
				const data = {
					userId: '', // 新用户userId为空
					userName: this.formData.userName,
					code: this.verifyCode,
					nickName: this.formData.nickName,
					phonenumber: this.formData.phonenumber,
					password: this.formData.password,
					confirmPassword: this.formData.confirmPassword
				};
				smsRegister(data)
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: "注册成功",
							});
							uni.setStorageSync('AppToken', res.data.token);
							uni.setStorageSync('userInfo', res.data.user);
							
							if (!res.data.user.roles) {
								console.log("跳转注册")
								uni.navigateTo({
									url: '/pages/auth/register'
								})
							} else {
								console.log("没跳转注册")
								uni.$emit('refreshLogin');
								uni.navigateBack({
									delta: 1
								});
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					})
					.catch(err => {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: "网络错误，请稍后重试",
						});
					});
			},
			handleAgreement() {
				this.isAgreement = !this.isAgreement;
			}
		}
	}
</script>

<style lang="scss">
	.container {
		flex: 1;
		padding: 0 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		position: relative;

		.bg {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.backImg {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			margin-left: 32rpx;
		}
	}

	.force-login-wrap {
		width: 100%;
		height: 100vh;
		position: relative;

		.top-title {
			padding: 0 32rpx;
			text-align: left;
			margin-top: 20rpx;

			.title-text {
				font-weight: 600;
				font-size: 48rpx;
				color: #333333;
				margin-bottom: 20rpx;

				.blue {
					color: #157CF8;
				}
			}

			.login-notice {
				font-weight: 400;
				font-size: 32rpx;
				color: #666666;
				line-height: 40rpx;
			}
		}

		.force-login__content {
			margin-top: 54rpx;
			padding: 0 32rpx;
			position: relative;

			.input-form {
				margin-bottom: 60rpx;

				.input-item {
					background: #FFFFFF;
					border-radius: 16rpx;
					padding: 30rpx 40rpx;
					margin-bottom: 48rpx;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

					&::last-child {
						margin-bottom: 0
					}

					.input-field {
						width: 100%;
						font-size: 30rpx;
						font-family: PingFang SC;
						color: #333333;

						&::placeholder {
							color: #CCCCCC;
						}
					}

					.mima {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.pwd-toggle {
							width: 88rpx;

							display: flex;
							align-items: center;
							justify-content: center;
						}

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}

					&.code-input-item {
						display: flex;
						align-items: center;

						.code-input {
							flex: 1;
						}

						.get-code-btn {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #157CF8;
							padding-left: 20rpx;
							white-space: nowrap;
						}
					}
				}
			}

			.tips-group {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-weight: 400;
				font-size: 24rpx;
				color: #388BFF;
				line-height: 40rpx;
				margin: -40rpx 0 24rpx;
			}

			.login-btn-wrap {
				margin-bottom: 40rpx;
				margin-top: 140rpx;

				.login-btn {
					width: 100%;
					height: 88rpx;
					background: rgba(56, 139, 255, 1);
					border-radius: 44rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					border: none;
					display: flex;
					align-items: center;
					justify-content: center;

					&::after {
						border: none;
					}
				}
			}
		}
	}

	.tips {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #666666;
		flex-wrap: nowrap;
		padding: 0 60rpx;

		checkbox {
			margin-right: 10rpx;
			flex-shrink: 0;
			transform: scale(0.8);
		}

		.tips-text {
			margin-right: 4rpx;
			white-space: nowrap;
		}

		.btn {
			color: #157CF8;
			margin: 0 2rpx;
			white-space: nowrap;
		}
	}
</style>