JiangxiMiniProgram/pages/userCenter/login/loginByPhone.vue

<template>
	<view class="main">
		<view class="u-back-top">
			<view class="backBox">
				<u-icon name="arrow-left" color="#333" size="28"></u-icon>
			</view>
		</view>
		<view class="title">短信验证码登录</view>
		<view class="form">
			<view class="form-item">
				<view class="prefix">
					<view class="jia">+</view>
					<view class="num">86</view>
					<view class="" style="margin: 0 32rpx 0 12rpx;">
						<u-icon name="arrow-down" color="#333" size="16" ></u-icon>
					</view>
				</view>
				<view class="inputBox my">
					<u--input placeholder="请输入手机号" border="none" clearable type="number" maxlength="11" v-model="FormData.phone"></u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="inputBox my">
					<u--input placeholder="请输入验证码" border="none" clearable  style="height: 100%;" :clearable="false" v-model="FormData.code"></u--input>
				</view>
				<view class="code" @tap='goSms' :class="{active: isPhone&&!codeOn}">{{codeText}}</view>
			</view>
			<view class="loginBtn" :class="{active: btnHighlight}" @click="submitFn">登  录</view>
			<view class="radioWrap">
				<u-checkbox-group >
					<u-checkbox v-model="isCheck" shape="circle" label="已阅读并同意" :labelSize="12" ></u-checkbox>
				</u-checkbox-group>
				<view class="privacyText">
					<text>《用户协议》</text>和 <text>《隐私协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getLoginCode } from '@/config/api.js'
	export default {
		data() {
			return {
				isCheck: false,
				codeText: '获取验证码',
				FormData: {},
				codeOn: false
			}
		},
		onLoad() {
			
		},
		computed: {
			isPhone() {
				return uni.$u.test.mobile(this.FormData.phone)
			},
			btnHighlight() {
				return this.isPhone&&uni.$u.test.code(this.FormData.code, 4)
			}
		},
		methods: {
			// 是否选择协议
			groupChangeEnvnt(e) {
				this.isCheck = e.value
				console.log('是否选择协议', this.isCheck)
			},
			// 发送短信验证码
			async goSms() {
				const {
					FormData
				} = this
				if (!FormData.phone) return this.$u.toast('请输入手机号');
				if (!this.isPhone) return this.$u.toast('手机号格式有误');
				if (this.codeOn) return
				const data = await getLoginCode({
					codeType: 1,
					phone: FormData.phone,
				})
				console.log(data)
				// 获取验证码
				var time = 60;
				var timer = setInterval(() => {
					time--;
					this.codeText = time + "秒后重新发送"
					this.codeOn = true;
					if (time == 0) {
						clearInterval(timer);
						this.codeText = "获取验证码";
						this.codeOn = false;
					}
				}, 1000);
			},
			submitFn() {
				uni.switchTab({
					url: '/pages/tabbar/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.main {
		width: 100%;
		min-height: 100vh;
		background: url('../../../static/images/userCenter/loginTopBg.png') no-repeat;
		background-size: 100% 360rpx;
	  .u-back-top {
		  padding: 32rpx 0 0 0;
	    .backBox {
			padding: 24rpx;
	    }
	  }
	
	  .title {
			font-size: 48rpx;
			color: #333;
			padding: 92rpx 0;
			text-align: center;
			font-weight: 600;
	  }
	
	  .form {
		  padding: 0 46rpx;
	    .form-item {
			height: 112rpx;
			background: #F4F7FF;
			border-radius: 16rpx;
			width: 100%;
			line-height: 112rpx;
			display: flex;
			margin-bottom: 40rpx;
			padding: 0 40rpx;
	      .prefix {
			  display: flex;
			  align-items: center;
			  font-size: 32rpx;
			  color: #333;
			  font-weight: 600;
	      }
	
	      .inputBox {
			  flex: 1;
	      }
		  .code {
		  	color: #BBBBBB;
			margin-left: 30rpx;
		  	&.active {
		  		color: $themC
		  	}
		  }
	    }
	
	    .loginBtn {
			width: 100%;
			height: 112rpx;
			background: rgba(25,137,250,0.3);
			border-radius: 16rpx;
			text-align: center;
			line-height: 112rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
			margin-top: 100rpx;
			&.active {
				background: rgba(25,137,250,1);
			}
	    }
	
	    .radioWrap {
			display: flex;
			align-items: center;
			margin-top: 40rpx;
	      .privacyText {
			  font-size: 24rpx;
			  color: #888E94;
	        text {
				color: $themC;
	        }
	      }
	    }
	  }
	}
</style>