4D_uniapp_service/pages/account/register.vue

<template>
	<view class="content">
		<uni-nav-bar :fixed="true" shadow left-icon="left" title="技师注册" :statusBar="true" @clickLeft="handleToBack" />
		<view class="logo_wrap">
			<image src="/static/logo.png" class="logo" />
		</view>
		<view class="form_row">
			<view class="form_input_wrap">
				<image src="/static/login/phone.png" class="form_input_prefix" mode="aspectFill" />
				<input class="form_input" placeholder="请输入手机号" v-model="loginData.mobile" />
			</view>
		</view>

		<view class="form_row">
			<view class="form_input_wrap">
				<image src="/static/login/verify.png" class="form_input_prefix" mode="aspectFill" />
				<input class="form_input" type="number" :maxlength="6" placeholder="请输入验证码" v-model="loginData.code" style="width: 330upx" />
				<view
					style="width: 160upx; font-size: 28upx; font-weight: 400; color: #07d69e; display: flex; justify-content: flex-end; align-items: center"
					@tap="getVerificationCode"
				>
					{{ countdown > 0 ? countdown : '获取验证码' }}
				</view>
			</view>
		</view>

		<view class="form_row">
			<view class="form_input_wrap">
				<image src="/static/login/password.png" class="form_input_prefix" mode="aspectFill" />
				<input class="form_input" placeholder="请输入密码" :password="isPassword" v-model="loginData.password" />
				<image src="/static/login/hidden.png" class="form_input_suffix" mode="aspectFill" @click="onChangePassword" v-if="isPassword" />
				<image src="/static/login/show.png" class="form_input_suffix" mode="aspectFill" @click="onChangePassword" v-else />
			</view>
		</view>

		<view class="form_row">
			<view class="form_input_wrap">
				<image src="/static/login/invite.png" class="form_input_prefix" mode="aspectFill" />
				<input class="form_input" type="number" :maxlength="10" placeholder="请输入邀请码（可不填）" v-model="loginData.referral" />
			</view>
		</view>

		<view class="form_row">
			<view class="form_link" @tap="handleToForgot">忘记密码</view>
			<view class="form_link" @tap="handleToLogin">登录</view>
		</view>

		<view style="height: 100px"></view>

		<view class="agreement">
			<image src="/static/common/radio_selected.png" class="agreement_radio" @tap="handleAgreement" v-if="isAgreement"></image>
			<image src="/static/common/radio_unselect.png" class="agreement_radio" @tap="handleAgreement" v-else></image>
			<text @tap="handleAgreement">已阅读并同意</text>
			<text class="link_text" @tap="handleToServiceHtml">《用户协议》</text>
			和
			<text class="link_text" @tap="handleToPravicyHtml">《隐私政策》</text>
		</view>

		<button type="primary" class="form_submit_btn" :loading="loading" @click="handleRegister">注册</button>

		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="取消" confirmText="已阅读并同意" title="服务协议及隐私保护" @confirm="dialogConfirm" @close="dialogClose">
				<view>
					为了保障您的合法权益，请阅读本平台以下协议
					<text style="color: #07d69e" @tap="handleToServiceHtml">《用户协议》</text>
					、
					<text style="color: #07d69e" @tap="handleToPravicyHtml">《隐私政策》</text>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '/common/request.js';

const statusBarHeight = ref();
const countdown = ref(0);

const loading = ref(false);
const loginData = reactive({
	mobile: '',
	password: '',
	code: '',
	referral: '',
	type: 2 // 客户
});

const isPassword = ref(true);
const isAgreement = ref(false);
const alertDialog = ref();

onLoad((option) => {
	loginData.referral = option?.invite || '';
	statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
	const _countdownTime = uni.getStorageSync('countdownVerificationCode');
	if (_countdownTime) {
		const _countdown = 60 - parseInt((new Date() - _countdownTime) / 1000);
		if (_countdown > 0) countdown.value = _countdown;
	}
});

onShow((option) => {});

const handleToBack = () => {
	const canNavBack = getCurrentPages();
	if (canNavBack && canNavBack.length > 1) uni.navigateBack();
	else history.back();
};

const showToast = (title) => {
	uni.showToast({ title, duration: 2000, icon: 'none' });
};
const verifyFormData = () => {
	let message = '';
	if (loginData.mobile == '') message = '请填写手机号';
	else if (loginData.password == '') message = '请填写密码';
	else if (loginData.code == '') message = '请填写验证码';
	return message;
};

const onChangePassword = () => {
	isPassword.value = !isPassword.value;
};

const handleToLogin = () => {
	uni.redirectTo({
		url: '/pages/account/login'
	});
};

const handleToForgot = () => {
	uni.redirectTo({
		url: '/pages/account/forgot'
	});
};

//跳转到用户协议
const handleToServiceHtml = () => {
	uni.navigateTo({
		url: '/pages/account/help?id=24'
	});
};
//跳转到隐私政策
const handleToPravicyHtml = () => {
	uni.navigateTo({
		url: '/pages/account/help?id=23'
	});
};

const handleAgreement = () => {
	isAgreement.value = !isAgreement.value;
};

const dialogConfirm = () => {
	isAgreement.value = true;
	handleRegister();
};
const dialogClose = () => {};
const dialogToggle = () => {
	alertDialog.value.open();
};

const handleRegister = async () => {
	let message = verifyFormData();

	if (message) {
		showToast(message);
		return;
	}

	if (!isAgreement.value) {
		dialogToggle();
		return;
	}

	uni.showLoading();
	request({
		url: '/api/regPost',
		method: 'POST',
		data: { ...loginData },
		success: async (res) => {
			console.log('用户注册', res);
			uni.hideLoading();
			showToast(res.data?.msg || '注册成功');
			if (res.data.code == 1) {
				uni.setStorageSync('token', res.data?.data?.token);
				uni.setStorageSync('id', res.data?.data?.id);
				setTimeout(function () {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}, 2000);
			}
		},
		fail: () => {},
		complete: () => {}
	});
};

const getVerificationCode = () => {
	if (countdown.value) return;

	if (!loginData.mobile) {
		uni.showToast({
			title: '请输入手机号',
			duration: 2000,
			icon: 'none'
		});
		return;
	}

	countdown.value = 60;
	uni.setStorageSync({
		key: 'countdownVerificationCode',
		data: new Date()
	});

	let countdownTimer = setInterval(function () {
		if (countdown.value > 0) countdown.value -= 1;
		else {
			countdown.value = 0;
			uni.removeStorageSync('countdownVerificationCode');
			clearInterval(countdownTimer);
		}
	}, 1000);

	uni.showLoading({
		content: '加载中',
		mask: true
	});
	request({
		url: '/api/getVerificationCode',
		method: 'POST',
		data: {
			mobile: loginData.mobile,
			status: 2,
			type: 1
		},
		success: (res) => {
			uni.hideLoading();
			console.log('获取验证码', res);
			const message = res.data?.msg || '验证码已发送';
			uni.showToast({
				title: message,
				duration: 2000,
				icon: 'none'
			});
		},
		fail: () => {
			countdown.value = 0;
			uni.removeStorageSync('countdownVerificationCode');
			clearInterval(countdownTimer);
			uni.hideLoading();
		},
		complete: () => {}
	});
};

const handleWechartLogin = () => {
	uni.login({
		provider: 'weixin',
		success: function (loginRes) {
			console.log(loginRes.code);

			// 获取用户信息
			uni.getUserInfo({
				provider: 'weixin',
				success: function (infoRes) {
					console.log('用户昵称为：' + infoRes.userInfo.nickName);
					/*	uni.showToast({
																				title:JSON.stringify(infoRes),
																				duration: 5000,
																				icon: 'none'
																			});*/
					uni.showLoading({
						content: '加载中',
						mask: true
					});
					request({
						url: '/api/wxlogin/wxLogin',
						method: 'POST',
						data: {
							openid: infoRes.userInfo.openId,
							avatar: infoRes.userInfo.avatarUrl,
							type: 2,
							nickname: infoRes.userInfo.nickName
						},
						success: (res) => {
							console.log(res);

							if (res.data.code == 1) {
								if (res.data.data.token) {
									uni.setStorage({
										key: 'token',
										data: res.data.data.token,
										success: function () {}
									});
									uni.setStorage({
										key: 'id',
										data: res.data.data.id,
										success: function () {}
									});
									uni.$emit('sxdd', {
										msg: '页面更新'
									});
									//	uni.navigateBack();
									setTimeout(function () {
										uni.switchTab({
											url: '/pages/index/index'
										});
									}, 1000);
								} else {
									uni.navigateTo({
										url: '/pages/bangding/bangding?id=' + res.data.data.id
									});
								}
							} else {
								uni.showToast({
									title: res.data.msg,
									duration: 2000,
									icon: 'none'
								});
							}
						},
						fail: () => {},
						complete: () => {
							setTimeout(function () {
								uni.hideLoading();
							}, 2000);
						}
					});
				}
			});
		}
	});
};
</script>
<style lang="scss" scoped>
.content {
	width: 750upx;
	margin: 0 auto;
	background: #f9f9f9;
	position: relative;

	.logo_wrap {
		padding: 69upx 0;
		.logo {
			width: 160upx;
			height: 160upx;
			display: block;
			margin: 0 auto;
			border-radius: 40upx;
		}
	}
	.form_row {
		display: flex;
		justify-content: space-between;
		padding: 0 60upx;
		.form_input_wrap {
			width: 630upx;
			height: 80upx;
			background: #ffffff;
			border: 1upx solid #07d69e;
			border-radius: 40upx;
			margin: 0 auto 30upx;

			display: flex;
			padding: 18upx 35upx 22upx;

			.form_input_prefix {
				width: 40upx;
				height: 40upx;
			}
			.form_input {
				width: 430upx;
				height: 42upx;
				font-size: 28upx;
				font-weight: 400;
				color: #999999;
				line-height: 40upx;
				margin: 0 20upx;
			}

			.form_input_suffix {
				width: 40upx;
				height: 40upx;
			}
		}
		.form_link {
			font-size: 26upx;
			font-weight: 400;
			color: #07d69e;
			margin: 0 22upx;
		}
	}

	.form_submit_btn {
		width: 630upx;
		height: 80upx;
		background: linear-gradient(90deg, #37ecba 0%, #72afd3 100%);
		border-radius: 40upx;

		margin: 10upx auto;
		font-size: 32upx;
		font-weight: bold;
		color: #ffffff;
	}

	.agreement {
		font-size: 24upx;
		color: #666;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 62upx 0;
		.agreement_radio {
			width: 28upx;
			height: 28upx;
			margin: 0 10upx;
		}
		.link_text {
			color: #07d69e;
		}
	}
}

:deep(.uni-modal) {
	.uni-modal__bd {
		padding: 30upx;
	}
	.uni-modal__ft {
		.uni-modal__btn_primary {
			color: #07d69e !important;
		}
		.uni-modal__btn_default {
			color: #999 !important;
		}
	}
}
</style>