TSYWXT-CLOUD-APP/pages/login/login-register.vue

<template>
	<view class="wrap">
		<uni-nav-bar dark :fixed="true" backgroundColor="#3F9EFF" statusBar="false" left-icon="left" left-text="返回"
			@clickLeft="toBack">
			<view class="nav-title">
				<text>{{title}}</text>
			</view>
		</uni-nav-bar>
		<view class="container">
			<view class="view-flex-inline"
				style="padding-left: 50rpx;font-size: 1.2rem;margin-top: 50rpx;margin-bottom: 50rpx;">帐号密码注册</view>
			<view class="content">
				<view class="top">
					<view class="cell">
						<uni-easyinput v-model="username" placeholder="输入手机号"></uni-easyinput>
						<view v-if="showPhoneTips"
							style="padding-left: 2px;padding-top: 4px;color: orangered;font-size: 0.5rem;">手机号不符合要求
						</view>
					</view>
					<view class="cell">
						<uni-easyinput type="password" v-model="password" placeholder="输入登录密码"
							@focus="passwordInputFocus"></uni-easyinput>
						<view v-if="showPassowrdTips"
							style="padding-left: 2px;padding-top: 4px;color: orangered;font-size: 0.5rem;">
							密码只能包含字母、数字及特殊字符.@?!$#%*&</view>
					</view>
					<view class="cell">
						<uni-easyinput type="password" v-model="againPassword" placeholder="再次输入登录密码"></uni-easyinput>
						<view v-if="passowrdDifferentTips"
							style="padding-left: 2px;padding-top: 4px;color: orangered;font-size: 0.5rem;">
							两次输入的密码不一样，请重新输入</view>
					</view>
					<view class="view-flex-inline" style="padding-left: 50rpx;padding-right: 50rpx;margin-top: 40px;">
						<view>
							<checkbox-group @change="checkboxChange">
								<label>
									<checkbox value="0" color="#FF0000" style="transform:scale(0.7);" />
								</label>
							</checkbox-group>
						</view>
						<view class="agree">
							我已阅读并同意
							<text class="a" @click="userAgreement">《用户协议》</text>
							和
							<text class="a" @click="privacyPolicy">《隐私政策》</text>
						</view>
					</view>
					<view class="cell">
						<button class="submit" @click="submit">注册</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from '@/utils/md5.js'
	import uIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
	import {
		tenantId
	} from '@/common/setting.js'
	import {
		devUrl,
		prodUrl,
		contentType
	} from '@/common/setting'
	export default {
		components: {
			uIcons,
		},
		data() {
			return {
				title: '注册',
				// tenantId: '000000',
				username: '',
				password: '',
				againPassword: '',
				agreeCheck: false,
				showPassowrdTips: false,
				passowrdDifferentTips: false,
				showPhoneTips: false,
			};
		},
		onLoad() {
			console.log("register "+tenantId)
		},
		methods: {
			//返回上一页
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			checkboxChange: function(e) {
				var values = e.detail.value;
				if (values.includes("0")) {
					this.agreeCheck = true;
				} else {
					this.agreeCheck = false;
				}
			},
			submit() {
				var that = this;
				let validateCheck = true;
				this.showPhoneTips = false;
				if (this.username != null && this.username != '') {
					let reg2 = /^1[3456789]\d{9}$/;
					if (!reg2.test(this.username)) {
						this.showPhoneTips = true;
						validateCheck = false;
					}
				} else {
					this.showPhoneTips = true;
					validateCheck = false;
				}
				this.showPassowrdTips = false;
				if (this.password != null && this.password != '') {
					let reg = /[\a-\z\A-\Z0-9\.\@\?\!\$\#\%\*\&]/g;
					let pw = this.password;
					let value = pw.replace(reg, '');
					if (value != '') {
						this.showPassowrdTips = true;
						validateCheck = false;
					}
				} else {
					this.showPassowrdTips = true;
					validateCheck = false;
				}
				this.passowrdDifferentTips = false;
				if (this.againPassword != null && this.againPassword != '') {
					if (this.againPassword !== this.password) {
						this.passowrdDifferentTips = true;
						validateCheck = false;
					}
				} else {
					this.passowrdDifferentTips = true;
					validateCheck = false;
				}
				if (validateCheck) {
					if (this.agreeCheck) {
						this.$u.api.userReg(tenantId, this.username, md5(this.password)).then(data => {
							uni.showModal({
								content: '注册成功',
								showCancel: false,
								success(res) {
									if (res.confirm) {
										that.toBack();
									}
								}
							});
						}).catch(err => {
							console.log(err)
							this.$u.func.showToast({
								title: '注册失败' + err,
							})
						})
					} else {
						this.$u.func.showToast({
							title: '请认真阅读用户协议及隐私政策后勾选同意',
						})
					}
				}
			},
			passwordInputFocus(e) {
				console.log(JSON.stringify(e))
				this.showPassowrdTips = true;
			},
			userAgreement() {
				var url = '/pages/user/user-agreement';
				uni.navigateTo({
					url: url
				})
			},
			privacyPolicy() {
				var url = '/pages/user/privacy-policy';
				uni.navigateTo({
					url: url
				})
			},
		}
	};
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		overflow: hidden;

		.set-icon {
			vertical-align: middle;
			width: 41rpx;
			height: auto;
			margin-right: 35rpx;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		height: 90vh;
		width: 100%;

		.top {
			width: 100%;
		}

		.logo {
			display: block;
			width: 160rpx;
			height: auto;
			margin: 0 auto 40rpx;
		}

		.cell {
			width: 100%;
			padding: 0 50rpx;
			box-sizing: border-box;
			margin-top: 50rpx;
			margin-bottom: 50rpx;

			.name {
				font-size: 22rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #3e4a59;
				line-height: 30rpx;
				opacity: 0.72;
			}

			.input-box {
				padding: 30rpx 0;
				border-bottom: 2rpx solid #f6f6f6;
				display: flex;
				align-items: center;

				.code {
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #0d0d0d;
					line-height: 30rpx;

					text {
						color: #14b9c8;
					}
				}

				.ipt {
					flex: 1;
					// height: 24rpx;
					font-size: 24rpx;
					padding-left: 10rpx;
				}

				.hold {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #3e4a59;
					line-height: 30px;
					opacity: 0.45;
				}
			}
		}

		.agree {
			// margin: 27rpx 95rpx 0;
			font-size: 22rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: black;
			line-height: 34rpx;

			.a {
				color: royalblue
			}
		}

		.submit {
			margin-top: 40rpx;
			border: none;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			// font-size: 36rpx;
			// background: linear-gradient(to right, #, #3976f7);
			background-color: orangered;
			color: #ffffff;

			&::after {
				content: none;
			}

			&::before {
				content: none;
			}

			// &[disabled='true'] {
			// 	background: linear-gradient(to right, #48b1f8, #3976f7);
			// 	font-size: 36rpx;
			// 	font-family: Source Han Sans CN;
			// 	font-weight: 500;
			// 	color: #ffffff;
			// }
		}

		.tip {
			margin-top: 30rpx;
			text-align: center;
			font-size: 22rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #cacaca;
			line-height: 34rpx;
		}

		.change {
			margin-top: 20rpx;
			text-align: center;
			font-size: 22rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #14b9c8;
			line-height: 34rpx;
		}

		.tag {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 22rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #9f9f9f;
			line-height: 34rpx;

			&::before {
				content: '';
				display: block;
				width: 160rpx;
				height: 1px;
				background: #d8d8d8;
				opacity: 0.86;
			}

			&::after {
				content: '';
				display: block;
				width: 160rpx;
				height: 1px;
				background: #d8d8d8;
				opacity: 0.86;
			}
		}

		.chat-arr {
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.icon {
				width: 73rpx;
				height: 73rpx;
			}
		}
	}
</style>