BiKing_H5/pages/register.vue

<template>
	<view class="register-box">
		<view class="register-logo">
			<image class="logo-icon" src="../static/img/img_22.png" mode=""></image>
			<image class="logo-name" src="../static/img/img_23.png" mode=""></image>
		</view>
		<view class="register-from">
			<view class="from-lable">
				<text @click.stop="setRegisterType(1)"
					:class="['lable-title' , registerType === 1 ? 'active-lable-title' : '']">手机注册</text>
				<text @click.stop="setRegisterType(2)"
					:class="['lable-title' , registerType === 2 ? 'active-lable-title' : '']">邮箱注册</text>
			</view>
			<view class="from-val">
				<view class="from-item" v-show="registerType === 1">
					<view class="area">
						<text class="area-val">{{ from.areaCode ? `+${from.areaCode}` : '国家地区'}}</text>
						<image class="select-area" src="../static/img/img_26.png" mode="aspectFit"></image>
					</view>
					<input v-model="from.user_string" class="item-input" type="number"
						placeholder-class="placeholder-class" placeholder="请输入手机号">
				</view>
				<view class="from-item" v-show="registerType === 2">
					<input v-model="from.user_string" class="item-input" type="text"
						placeholder-class="placeholder-class" placeholder="请输入邮箱号">
				</view>
				<view class="from-item">
					<input class="item-input" v-model="from.code" type="number"
						placeholder-class="placeholder-class" placeholder="验证码">
					<text class="item-code" @click.stop="getCode()">{{ CodeText }}</text>
				</view>
				<view class="from-item">
					<input class="item-input" v-model="from.password" :type="showPass ? 'text' : 'password'"
						placeholder-class="placeholder-class" placeholder="请输入密码">
					<view class="pass-icon-box" @click.stop="showPass = !showPass">
						<image v-show="!showPass" class="pass-icon" src="../static/img/img_25.png" mode="aspectFit">
						</image>
						<image v-show="showPass" class="pass-icon" src="../static/img/img_24.png" mode="aspectFit">
						</image>
					</view>
				</view>
				<view class="from-item">
					<input class="item-input" v-model="from.extension_code" type="number"
						placeholder-class="placeholder-class" placeholder="邀请码">
				</view>

				<view class="from-agreement" @click.stop="readAgreement = !readAgreement">
					<view class="agreement-status">
						<image v-show="readAgreement" class="read-agreement" src="../static/img/img_28.png"
							mode="aspectFit">
						</image>
					</view>
					我已阅读并同意<text class="agreement-name" @click.stop="readAgreementContent()">《服务与隐私条款》</text>
				</view>


				<view class="from-submit" @click.stop="submitRegister">注册</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		Api_setRegister,
		Api_getEmailCode,
		Api_getSmsSend
	} from "@/api/index.js"
	import {
		validPassword,
		validPositiveIntegerZero
	} from "@/utils/validate.js"
	export default {
		name: 'register',
		data() {
			return {
				showPass: false,
				readAgreement: false,
				registerType: 1, //  1： 手机注册  2 ： 邮箱注册
				CodeText: '获取验证码',
				from: {
					user_string: '',
					password: '',
					areaCode: 86,
					code: '',
					extension_code: ''
				},

				timeInterval: null
			};
		},
		onLoad(opt) {
			this.from.extension_code = opt?.extension_code || ''
		},
		methods: {
			// 校验
			verifyVal(type, val) {
				let status = true,
					msg = ''
				switch (type) {
					case 'phone':
						status = validPositiveIntegerZero(val);
						msg = '手机号码格式错误';
						break;
					case 'email':
						status = val ? true : false;
						msg = '请输入邮箱号'
						break;
					case 'code':
						status = val ? true : false;
						msg = '请输入验证码';
						break;
					case 'password':
						status = validPassword(val);
						msg = '密码须同时包含数字,大小写字母,且大于8位'
						break;
					case 'extension_code':
						status = val ? true : false;
						msg = '请填写验证码'
						break;



				}
				if (!status) {
					console.log('msg = ', msg)
					uni.showToast({
						title: msg,
						icon: 'none'
					})
				}
				return status
			},

			readAgreementContent() {
				uni.navigateTo({
					url: '/pages/agreement'
				})
			},
			setRegisterType(type) {
				this.from.user_string = '';
				this.registerType = type;
			},

			// validPassword

			getCode() {
				if (this.CodeText !== '获取验证码') {
					return false
				}
				if (this.registerType === 1) {
					if (!this.verifyVal('phone', this.from.user_string) || this.from.user_string.length !== 11) {

						return false
					}
				} else {
					if (!this.verifyVal('email', this.from.user_string)) {

						return false
					}
				}
				let Api_ = '',
					obj = {};
				obj.user_string = this.from.user_string;
				switch (this.registerType) {
					case 1:
						// 手机号 - 获取验证码
						Api_ = Api_getSmsSend;
						obj.area_code = this.from.areaCode;
						break;
					case 2:
						// 邮箱 - 获取验证码
						Api_ = Api_getEmailCode;
						break;
					default:
						break;


				}
				if (Api_) {
					Api_(obj).then(res => {

					}).catch(err => {

					})
					let num = 60
					this.timeInterval = setInterval(() => {
						num--;
						if (num <= 0) {
							clearInterval(this.timeInterval);
							this.CodeText = '重新发送';
							return false
						};
						this.CodeText = `${num}秒后重新发送`;
						123456
					}, 1000)
				}


			},
			submitRegister() {
				if (this.readAgreement) {
					if (this.registerType === 1) {
						if (!this.verifyVal('phone', this.from.user_string) || this.from.user_string.length !== 11) {
							return false
						}
					} else {
						if (!this.verifyVal('email', this.from.user_string)) {
							return false
						}
					}
					if (!this.verifyVal('code', this.from.code)) {
						return false
					}
					if (!this.verifyVal('password', this.from.password)) {
						return false
					}
					if (!this.verifyVal('extension_code', this.from.extension_code)) {
						return false
					}
					const obj = {
						user_string: this.from.user_string,
						password: this.from.password,
						re_password: this.from.password,
						extension_code: this.from.extension_code,
						code: this.from.code,
						type: this.registerType === 1 ? 'mogile' : '	email'
					};
					uni.showLoading()
					Api_setRegister(obj).then(res => {
						uni.showToast({
							title: '注册成功',
							icon: 'none'
						})
					}).catch(err => {

					}).finally(() => {
						uni.hideLoading()
					})
				} else {
					uni.showToast({
						title: '请先阅读协议',
						icon: 'none'
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.register-box {
		width: 100%;
		min-height: 100vh;
		background-color: #0D9780;
		padding: 126rpx 37rpx 165rpx;

		.register-logo {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.logo-icon {
				width: 87rpx;
				height: 85rpx;
			}

			.logo-name {
				margin-left: 8rpx;
				width: 127rpx;
				height: 50rpx;
			}
		}

		.register-from {
			width: 100%;
			background-color: #fff;
			border-radius: 20rpx;
			padding-bottom: 63rpx;
			margin-top: 46rpx;
			 
			.from-lable {
				width: 100%;
				display: flex;
				align-items: stretch;

				.lable-title {
					flex: 1;
					flex-shrink: 0;
					height: 114rpx;
					line-height: 114rpx;
					text-align: center;
					font-size: 34rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #1a1a1a;
					letter-spacing: 0.68rpx;
					border-bottom: 1rpx solid #e6e6e6;
				}

				.active-lable-title {
					color: #20b482;
					border-bottom: 2rpx solid #20b482;
				}
			}

			.from-val {
				width: 100%;
				padding: 0 43rpx;

				.from-item {
					width: 100%;
					height: 115rpx;
					border-bottom: 1rpx solid #e6e6e6;
					padding-top: 25rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					// <view class="area">
					// 	<text class="area-val">国家地区</text>
					// 	<image class="select-area" src="../static/img/img_26.png" mode="aspectFit"></image>
					// </view>
					.area {
						min-width: 160rpx;

						.area-val {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							color: #b3b3b3;
							letter-spacing: 0.56rpx;
						}

						.select-area {
							width: 20rpx;
							height: 20rpx;
						}
					}

					.item-input {
						flex-shrink: 0;
						font-size: 28rpx;
						flex: 1;
						height: 100%;
						border: none;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						color: #666666;
						letter-spacing: 0.56rpx;
					}

					.placeholder-class {

						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						color: #b3b3b3;
						letter-spacing: 0.56rpx;
					}

					.item-code {

						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						color: #1cac7b;
						line-height: 38rpx;
						letter-spacing: 0.56rpx;
					}

					.pass-icon-box {
						width: 88rpx;
						height: 88rpx;
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.pass-icon {
							width: 42rpx;
							height: 42rpx;
						}
					}

				}

				// .<view class="from-agreement">
				// 	<view class="agreement-status">

				// 	</view>
				// 	我已阅读并同意<text class="agreement-name">《服务与隐私条款》</text>
				// </view>\
				.from-agreement {
					width: 100%;
					padding: 52rpx 0;
					display: flex;
					align-items: center;

					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #666666;

					.agreement-status {
						width: 29rpx;
						height: 29rpx;
						border: 1px solid #3b6afd;
						margin-right: 15rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.read-agreement {
							width: 19rpx;
							height: 14rpx;
						}
					}

					.agreement-name {
						color: #3b6afd;
					}
				}

				.from-submit {
					width: 100%;
					height: 90rpx;
					text-align: center;
					line-height: 90rpx;
					background: #00b99a;
					border-radius: 10rpx;

					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #ffffff;
					letter-spacing: 0.64rpx;
				}
			}
		}
	}
</style>