null/pages/login/register.vue

<template>
	<view class="page">
		<view class="p-header flex-col align-center justify-center">
			<image src="/static/login_logo.png" mode="widthFix" class="img"></image>
			<!-- <image src="/static/home_logo.png" mode="widthFix" class="ic"></image> -->
		</view>
		
		<view class="p-form">
			<view class="c-item align-center">
				<image src="/static/log_tel.png" mode="widthFix" class="i-ic"></image>
				<view class="i-inpt">
					<input type="number" class="inpt" placeholder="请输入手机号" v-model="mobile"/>
				</view>
			</view>
			
			<view class="c-item align-center">
				<image src="/static/log_yan.png" mode="widthFix" class="i-ic"></image>
				<view class="i-inpt">
					<input type="number" class="inpt" placeholder="请输入验证码" v-model="code"/>
				</view>
				<view class="code-wrap" @tap="chgeCode">
					<phoneCode ref="codeRef" :mobile="mobile" event="register" />
				</view>
			</view>
			
			<view class="c-item align-center">
				<image src="/static/log_mima.png" mode="widthFix" class="i-ic"></image>
				<view class="i-inpt">
					<input type="password" class="inpt" placeholder="请输入密码" v-model="password"/>
				</view>
			</view>
			<view class="c-item align-center last-c-item">
				<image src="/static/log_mima.png" mode="widthFix" class="i-ic"></image>
				<view class="i-inpt">
					<input type="password" class="inpt" placeholder="请再次确认密码" v-model="repassword"/>
				</view>
			</view>
			<!-- 
			<view class="c-item align-center last-c-item">
				<image src="/static/log_yao.png" mode="widthFix" class="i-ic"></image>
				<view class="i-inpt">
					<input type="text" class="inpt" placeholder="请输入邀请码(选填)" v-model="invite_no"/>
				</view>
			</view>
			 -->
		</view>
		<submit-btn @submit="submit" ref="submitRef">
			<template v-slot:btns="{isSubmitted}">
				<view class="p-btn" :class="{'disabled':isSubmitted}">
					立即注册
				</view>
			</template>
		</submit-btn>
		<!-- <view class="p-login" @tap="navTo('/pages/login/login')">已注册，去登录</view> -->
	</view>
</template>

<script>
	import phoneCode from './components/phoneCode.vue'
	export default {
		components:{
			phoneCode,
		},
		data() {
			return {
				// isAgree:true,
				mobile:'',
				code:'',
				password:'',
				repassword:'',
				invite_no:'',
			};
		},
		onLoad(opt) {
			// this.openid = this.$Route.query.openid;
			// this.accessToken = this.$Route.query.accessToken;
			if(opt.code){
				this.invite_no = opt.code;
			}
		},
		methods:{
			chgeCode(){
				this.$refs.codeRef.getCode();
			},
			async submit(){
				// console.log('submit---');
				// return;
				// if(! this.isAgree){
				// 	this.$tools.msg('您尚未同意协议')
				// 	return;
				// }else 
				if(! this.$tools.match(this.mobile,'mobile')){
					return;
				}else if(!this.$tools.match(this.code,'code') ){
					return;
				}else if(!this.$tools.match(this.password,'pwd') ){
					return;
				}else if(!this.repassword){
					this.$tools.msg('请输入确认密码')
					return;
				}else if( this.repassword !== this.password){
					this.$tools.msg('两次密码不一致')
					return;
				}
				
				let sendData={
					mobile:this.mobile,
					code:this.code,
					password: this.password,
					repassword: this.repassword,
					invite_no: this.invite_no,
				}
				let res=await this.$request('user.register',sendData);
				// let userInfo = res.data.userinfo || {};
				// localStorage.setItem('token',userInfo.token)
				this.$tools.msg(res.msg);
				this.$refs.submitRef.chgeStatus();
				setTimeout(()=>{
					this.navTo('/pages/login/login')
				},800)
			},
		},
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.page{
		// min-height: 100vh;
		width: 100%;
		// padding-bottom: 100rpx;
	}
	.p-header{
		width: 750rpx;
		// height: 470rpx;
		height: 400rpx;
		position: relative;
		.img{
			// width: 160rpx;
			// height: 160rpx;
			width: 300rpx;
			height: 300rpx;
		}
		// .ic{
		// 	margin-top: 16rpx;
		// 	width: 112rpx;
		// 	height: 38rpx;	
		// }
	}
	.p-form{
		width: 630rpx;
		margin: 0 auto;
		.c-pwd{
			height: 63rpx;
			line-height: 63rpx;
			width: 100%;
			text-align: right;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.c-item{
			width: 100%;
			height: 84rpx;
			background-color: #F1F1F1;
			padding: 0 26rpx;
			margin-bottom: 30rpx;
			border-radius: 8rpx;
		}
		.i-ic{
			width: 30rpx;
			height: 30rpx;
			margin-right: 17rpx;
		}
		.i-inpt{
			flex:1;
			.inpt{
				width: 100%;
				height: 84rpx;
				line-height: 84rpx;
				color:#333;
				font-size: 30rpx;
			}
			.code-inpt{
				flex:1;
				margin-right: 20rpx;
				height: 103rpx;
				line-height: 103rpx;
				color:#333;
				font-size: 26rpx;
			}
			.phone-code{
				width: 200rpx;
				height: 60rpx;
				background: #0D91FF;
				box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(13, 145, 255, 0.28);
				border-radius: 30rpx;
				line-height: 60rpx;
				text-align: center;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
		// .i-code{
		// 	width: 180rpx;
		// 	height: 70rpx;
		// }
	
	}
	.last-c-item{
		margin-bottom: 80rpx !important;
	}
	.p-btn{
		margin: 0 auto;
		width: 630rpx;
		height: 84rpx;
		border-radius: 8rpx;
		line-height: 84rpx;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		background-color: $base-color;
		color: #fff;
		border-radius: 40rpx;
		&.disabled{
			background-color: #eee;
			box-shadow: none;
			border: none;
		}
	}
	.p-login{
		color:$base-color;
		font-size: 28rpx;
	    height: 80rpx;
		line-height: 80rpx;
		text-align: right;
		width: 630rpx;
		margin:16rpx auto 0;
		font-weight: bold;
		padding-right: 10rpx;
	}
    .p-reg{
		margin-top: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: center;
		width: 100%;
		.stxt{
			color: #999999;
		}
		.mtxt{
			color: #333;
		}
	}
	.p-tips{
		position: absolute;
		z-index: 2;
		bottom: 30rpx;
		left: 0;
		width: 100%;
		.ic{
			width: 30rpx;
			height: 30rpx;
			margin-right: 22rpx;
		}
		.txt{
			color:#999999;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}
		.link{
			color:#333333;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}
	}
</style>