null/pages/login/mobileLogin.vue

<template>
	<view class="page">
		<view class="p-header flex-col align-center justify-center">
			<image src="/static/log_logo.png" mode="widthFix" class="img"></image>
			<text class="txt">盲go小程序</text>
			<!-- <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 last-c-item">
				<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="mobilelogin" />
				</view>
			</view>
			<!-- 
			<view class="c-pwd last-c-item" @tap="navTo('/pages/login/forget')">
				忘记密码?
			</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/register')">
			<text class="stxt">还没有账号，请点击</text>
			<text class="mtxt">注册</text>
		</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;
				}
				let sendData={
					mobile:this.mobile,
					code:this.code,
					user_type: 1,
				}
				let res=await this.$request('login.mobilelogin',sendData);
				let userInfo = res.data.userinfo || {};
				uni.setStorageSync("token",userInfo.token);
				this.$tools.msg(res.msg);
				this.$refs.submitRef.chgeStatus();
				setTimeout(()=>{
					this.goBack(2)
				},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: 180rpx;
			height: 180rpx;
			// border-radius: 180rpx;
			// background-color: $base-color;
		}
		.txt{
			margin-top: 33rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #92B99C;
		}
	}
	.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: 100rpx !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: 8rpx;
		&.disabled{
			background-color: #eee;
			box-shadow: none;
			border: none;
		}
	}
	.p-login{
		font-size: 28rpx;
	    height: 80rpx;
		line-height: 80rpx;
		text-align: right;
		width: 630rpx;
		margin:16rpx auto 0;
		font-weight: bold;
		padding-right: 10rpx;
		.stxt{
			color: #999999;
		}
		.mtxt{
			color: $base-color;
			padding: 0 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>