JiaZhiQianYan/pages/login/codeLogin/codeLogin.vue

<template>
	<view>
		<navBar leftText="登录" :hideNavBg="true" :backBlack="true"></navBar>
		<image class="logo" :style="'margin-top:'+contentTop+'px;'" src="/static/image/login/logo.png" mode="widthFix"></image>
		<view class="loginTitle">欢迎登录价值前沿平台</view>
		<view class="inputC mobile flex">
			<image class="icon" src="/static/icon/login/mobile.png" mode="widthFix"></image>
			<input class="flex1" type="number" v-model="mobile" placeholder="请输入手机号" placeholder-style="color: #aaa" maxlength="11"/>
		</view>
		<view class="inputC code flex">
			<image class="icon" src="/static/icon/login/code.png" mode="widthFix"></image>
			<input class="flex1" type="number" v-model="code" placeholder="请输入验证码" placeholder-style="color: #aaa"/>
			<view class="getCode" @click="clickGetCode()">{{getCode?(countdown>0?countdown+'s':'重新获取验证码'):'获取验证码'}}</view>
		</view>
		<view class="btn loginAtOnce" @click="clickLoginAtOnce()">立即登录</view>
		<view class="btn oneClickLogin" @click="clickOneClickLogin()">授权手机号一键登录</view>
		<view class="agreeProtocolC fixed flexCenter">
			<view class="agreeC" @click="clickAgree()">
				<image v-if="isAgree" class="icon" src="/static/icon/login/select_s.png" mode="widthFix"></image>
				<image v-else class="icon" src="/static/icon/login/select.png" mode="widthFix"></image>
			</view>
			阅读并同意我们的<text class="protocol">《用户服务协议》</text>和<text class="protocol">《隐私政策》</text>
		</view>
	</view>
</template>

<script>
	import { inject } from 'vue';
	import { loginByPhone, sendSMS } from '@/request/api';
	const app = getApp()
	
	export default {
		data() {
			return {
				contentTop:'',
				mobile:'',		//手机号
				code:'',		//验证码
				isAgree:false,
				countdown:0,	//验证码倒计时
				getCode:false,	//是否已经获取过验证码
				timer:null		//定时器
			}
		},
		onLoad() {
			this.contentTop = inject('navHeight')+230/750*inject('windowWidth')
		},
		methods: {
			/**
			 * 点击获取验证码
			 */
			clickGetCode()
			{
				let mobile = this.mobile
				if(!mobile)
				{
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				}
				if (!app.globalData.mobileReg.test(mobile)) {
					uni.showToast({
						title:'请输入正确格式的手机号',
						icon:'none'
					})
					return
				}
				if (this.isSubmiting) {
				    return
				}
				if (this.countdown>0) {
				    return
				}
				this.isSubmiting = true
				let param = {phone:this.mobile,isJson:1}
				let that = this
				sendSMS(param).then(res=>{
					// if(res.code==200)
					// {
						uni.showToast({
							title:res.message,
							icon:'none'
						})
						let time = 60
						this.timer = setInterval(() => {
							that.isSubmiting = false
							time -- 
							if (time==0) {
								clearInterval(that.timer)
							}
							// that.code = res.debug_code
							that.getCode = true
							that.countdown = time
						}, 1000);
					// }else 
					// {
					// 	this.isSubmiting = false
					// 	uni.showToast({
					// 		title:res.message,
					// 		icon:'none'
					// 	})
					// }
						
				}).catch(error=>{
					this.isSubmiting = false
				})
			},
			/**
			 * 点击立即登录
			 */
			clickLoginAtOnce()
			{
				if(!this.mobile)
				{
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				}
				if(!this.code)
				{
					uni.showToast({
						title:'请输入验证码',
						icon:'none'
					})
					return
				}
				if(!this.isAgree)
				{
					uni.showToast({
						title:'请阅读并同意我们的《用户服务协议》和《隐私政策》',
						icon:'none'
					})
					return
				}
				let param = {phone:this.mobile,code:this.code,isJson:1}
				loginByPhone(param).then(res=>{
					if(res.code==0)
					{
						uni.showToast({
							title:res.message,
						})
						uni.setStorageSync('token',res.token)
						setTimeout(function() {
							uni.switchTab({
								url:'/pages/index/index'
							})
						}, 1000);
					}else 
						uni.showToast({
							title:res.message,
							icon:'none'
						})
				}).catch(error=>{
					
				})
			},
			/**
			 * 点击一键登录
			 */
			clickOneClickLogin()
			{
				uni.navigateBack()
			},
			/**
			 * 点击同意
			 */
			clickAgree()
			{
				this.isAgree = !this.isAgree
			},
			/**
			 * 点击查看协议
			 */
			clickProtocol(type)
			{
				uni.navigateTo({
					url:'/pages/mine/web/web?type='+type
				})
			}
		}
	}
</script>

<style lang="less">
.logo 
{
	margin-left: calc((100% - 144rpx)/2);
	width: 144rpx;
	height: auto;
}
.loginTitle 
{
	margin: 40rpx 80rpx 0;
	font-size: 40rpx;
	font-weight: bold;
	text-align: center;
}
.inputC
{
	background-color: #f8f8f8;
	margin: 0 75rpx;
	height: 80rpx;
	border-radius: 10rpx;
	input 
	{
		font-size: 26rpx;
		font-weight: 500;
	}
}
.inputC.mobile 
{
	margin-top: 40rpx;
	padding-left: 29rpx;
	.icon 
	{
		margin-right: 13rpx;
		width: 26rpx;
		height: auto;
	}
}
.inputC.code 
{
	margin-top: 36rpx;
	padding-left: 27rpx;
	.icon 
	{
		margin-right: 10rpx;
		width: 26rpx;
		height: auto;
	}
	.getCode 
	{
		padding: 0 30rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #F97316;
	}
}
.btn 
{
	margin: 0 75rpx;
	line-height: 80rpx;
	border-radius: 20rpx;
	font-size: 26rpx;
	font-weight: 500;
	text-align: center;
}
.btn.loginAtOnce
{
	background-color: #F97316;
	margin-top: 60rpx;
	color: white;
}
.btn.oneClickLogin 
{
	background-color: #FFF1E8;
	margin-top: 28rpx;
	color: #F97316;
}
.agreeProtocolC
{
	left: 0;
	right: 0;
	bottom: calc(120rpx + env(safe-area-inset-bottom));
	font-size: 26rpx;
	font-weight: 500;
	.agreeC 
	{
		padding: 14rpx;
		.icon 
		{
			display: block;
			width: 28rpx;
			height: auto;
		}
	}
	.protocol 
	{
		color: #F97316;
	}
}
</style>