ylrz_scrm_uniapp/pages/auth/register.vue

<template>
	<view style="padding-top: 40rpx;">
		<veiw class="log">
			<view class="form-items">
				<u-icon name="account" color="#666" size="24" ></u-icon>
				<input
				      type="number" 
				      v-model="phone" 
					  style="flex: 1;margin-left: 16rpx;"
				      placeholder="请输入手机"
				      maxlength="11"/>
			</view>
			<view class="form-items">
				<u-icon name="lock" color="#666" size="24" ></u-icon>
				<input
				      type="password" 
				      v-model="password" 
					  style="flex: 1;margin-left: 16rpx;"
				      placeholder="密码(6-15个字符)"
				      maxlength="15"/>
			</view>
			<view class="form-items">
				<u-icon name="lock" color="#666" size="24" ></u-icon>
				<input
				      type="password" 
				      v-model="subpassword" 
					  style="flex: 1;margin-left: 16rpx;"
				      placeholder="确认密码"
				      maxlength="15"/>
			</view>
			<view class="submitlog" @click="submit()">注册</view>
		</veiw>
		<view class="tips">
			 <checkbox  :checked="isAgreement" @click="handleAgreement()" color='#fff' 
			 activeBackgroundColor='#018C39 ' borderColor='#EDEEEF' activeBorderColor='#EDEEEF'/>
			 <view  @click="handleAgreement()">您同意并接受</view>
			<view class="btn"  @click="openH5('/h5/userAgreement')">《用户协议》</view>
			<view class="btn" @click="openH5('/h5/privacyPolicy')">《隐私保护》</view>
		</view>
	</view>
</template>

<script>
	import {register} from '@/api/user.js'
	export default {
		data() {
			return {
				phone:'',
				password:'',
				subpassword:'',
				isAgreement:''
			}
		},
		methods: {
			handleAgreement(){
				this.isAgreement=!this.isAgreement;
			},
			openH5(url){
				var requestPath = uni.getStorageSync('requestPath');
				uni.setStorageSync('url',requestPath+url);
				uni.navigateTo({
					url: '../home/h5'
				})
			},
			 // 校验手机号
			validatePhone() {
			  return /^1[3-9]\d{9}$/.test(this.phone);
			},
			// 校验密码
			validatePassword() {
			  return /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/.test(this.password);
			},
			submit(){
				if (!this.phone) {
					uni.showToast({ title: '请输入手机号', icon: 'none' });
					return;
				  }
				if (!this.validatePhone()) {
					uni.showToast({ title: '手机号格式错误', icon: 'none' });
					return;
				  }
				  if (!this.password) {
				  	uni.showToast({ title: '请输入密码', icon: 'none' });
				  return;
				  }
				if (!this.validatePassword()) {
					uni.showToast({ title: '密码格式错误', icon: 'none' });
				return;
				}
				if (!this.subpassword) {
					uni.showToast({ title: '请输入确认密码', icon: 'none' });
					return;
					}
				if (this.password!==this.subpassword) {
					uni.showToast({ title: '两次输入密码不一致', icon: 'none' });
					return;
					}
				if(!this.isAgreement){
					uni.showToast({
						icon:'none',
						title: "请先同意协议后再登录",
					});
					return false;
				}
				const data={
					phone:this.phone,
					password:this.password
				}
				register(data).then(res=>{
					console.log(res)
					if(res.code==200){
						uni.showToast({ title: '登录成功', icon: 'none' });
						uni.navigateBack({
							delta:1
						})
						console.log(res)
					}else{
						uni.showToast({ title: res.msg, icon: 'none' });
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.log{
	background: #fff ;
	width: calc(100% - 20rpx);
	margin: 10rpx ;
	padding: 20rpx 0;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	.form-items{
		background: #fff ;
		display: flex;
		align-items: center;
		padding: 28rpx 0;
		margin: 0 20rpx;
		border-bottom: #eee solid 2rpx;
	}
}
.submitlog{
	background: linear-gradient(135deg, #38e663  0%, #018C39 100%);
	border-radius: 80rpx;
	color: #fff;
	margin: 0 auto;
	width: 80%;
	padding: 20rpx 0;
	text-align: center;
	margin-top: 40rpx;
}
.tips{
	margin-top: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	color: #000;
	.btn{
		color: #018C39;
	}
}
/deep/ .uni-checkbox-input {
	border-radius: 50% !important;
}
</style>