jp-education-student/pages/parents/login/login.vue

<template>
	<view>
		<u-navbar title="" back-icon-size="24"></u-navbar>
		<view class="title">
			手机号注册/登录
		</view>
		<view class="welcome">
			欢迎来到青少年宫启航教培管家
		</view>

		<!-- 登录框-->
		<view class="login-box">
			<view class="tel">
				<view class="icon">
					<img src="../../../assets/img/riFill-cellphone-fill@1x.png" alt="">
				</view>
				<u-line color="red" direction="col" length="40rpx" margin="auto 0" />
				<view class="tips">
					<u-input v-model="form.telephone" type="number" placeholder="请填写手机号码" />
				</view>
			</view>
			<view class="hint">
				未注册的手机号验证后将自动注册
			</view>
			<view class="pwd">
				<view class="icon">
					<img src="../../../assets/img/riFill-lock-password-fill@1x.png" alt="">
				</view>
				<u-line color="red" direction="col" length="40rpx" margin="auto 0" />
				<view class="tips">
					<view class="input">
						<u-input type="number" v-model="form.verifyCode" placeholder="请输入验证码" />
					</view>
					<view class="verification-code" :style="isCodeTipsColor ? 'color: #999999;' : ''" @click="getCode">{{codeTips}}</view>
					<u-verification-code :seconds="sendMsgSecond" ref="uCode" @change="codeChange" @end="end" @start="start" change-text="已发送(Xs)">
					</u-verification-code>
				</view>
			</view>
		</view>
<!-- 		<view class="tip">
			短信升级可能无法收到验证码，恢复可能需要3-5天！
		</view> -->
		<view class="agreement">
			<label class="radio">
				<radio value="" @click="radioClick" /><text class="text">我已阅读并同意
					<text style="color: rgba(13, 186, 199, 1);">《起航教培管家用户协议》</text></text>
			</label>
		</view>
		<!-- 按钮 -->
		<button class="login-btn" @click="signIn">登  录</button>
		
	</view>
</template>

<script>
	import * as loginApi from '@/apis/login.js'
	import {
		checkPhone
	} from '@/apis/utils'
	
	export default {
		data() {
			return {
				form: {
					telephone: '',
					openId: '',
					verifyCode: '',
					userType: 1
				},
				isSendMsgIng: false,
				isCodeTipsColor: false,
				sendMsgSecond: 60,
				codeTips: '',
				agreementValue: false,
				personInfo: null
			}
		},
		onLoad() {
			this.findByOpenId();
		},
		methods: {
			findByOpenId() {
			
				var openId = this.carhelp.getOpenId()
				if (openId == "") {
					//("--------findByOpenId----------")
					setTimeout(() => {
						this.findByOpenId()
					}, 1000)
					return
				}
				uni.request({
					method: 'get',
					url: process.car.BASE_URL + "/mobile/regUser/findByOpenId",
					data: {
						openId: openId,
						userType: '1'
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'X-Requested-With': 'XMLHttpRequest',
					}
				}).then((response) => {
					let [error, res] = response;
			
					if (res.data.code == 200 && res.data.result) {
						var token = res ? res.data.data.token : '';
						this.carhelp.setPersonInfo(res.data.data.regUser);
						this.carhelp.setToken(token);
			
						this.carhelp.setPersonInfoPlus(res.data.data);
						
						uni.redirectTo({
							url: '/pages/parents/homePage/homePage'
						})
					} else {
						this.carhelp.logoff()
					}
				}).catch(error => {
			
				})
			},
			codeChange(text) {
				this.codeTips = text;
			},
			start() {
				if (!this.isSendMsgIng) {
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					loginApi.getVerifyCode(this.form.telephone).then((response) => {
						uni.hideLoading();
						this.carhelp.set("getvcodetime", new Date().getTime());
			
						if (!"") {
							//倒计时
							uni.showToast({
								title: "发送成功"
							})
						} else {
							uni.showToast({
								title: "您的验证码已经发送[5分钟有效]，请勿重复点击"
							})
						}
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}
			},
			//倒计时
			end() {
				this.sendMsgSecond = 60;
				this.isSendMsgIng = false;
				this.isCodeTipsColor = false;
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {} else {
					uni.showToast({
						title: '倒计时结束后再发送',
						icon: "none"
					})
					return
				}
			
				var checkPhoneResult = checkPhone(this.form.telephone);
			
				if (checkPhoneResult !== true) {
					uni.showToast({
						title: checkPhoneResult,
					})
					return;
				}
				this.$refs.uCode.start();
				this.isCodeTipsColor = true;
			},
			radioClick() {
				this.agreementValue = true;
			},
			signIn() {
				var checkPhoneResult = checkPhone(this.form.telephone);
				if(!this.form.telephone) {
					uni.showToast({
						title: checkPhoneResult,
						icon: "none"
					})
					return;
				}
				if(!this.form.verifyCode) {
					uni.showToast({
						title: "请输入验证码",
						icon: "none"
					})
					return
				}
				if(!this.agreementValue) {
					uni.showToast({
						title: "请勾选协议",
						icon: "none"
					})
					return
				}
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				this.form.openId= this.carhelp.getOpenId();
				
				loginApi.validateCode(this.form).then((response) => {
					uni.hideLoading();
					var token = response ? response.data.token : '';
					this.carhelp.setToken(token);
					this.carhelp.setPersonInfo(response.data.regUser);
					uni.redirectTo({
						url: '/pages/parents/homePage/homePage'
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	

	.title {
		margin-top: 24px;
		color: rgba(16, 16, 16, 1);
		font-size: 24px;
		text-align: center;
	}

	.welcome {

		margin-top: 8rpx;
		color: rgba(119, 119, 119, 1);
		text-align: center;
	}

	// 登录框
	.login-box {
		margin-top: 84rpx;

		.tel,
		.pwd {
			display: flex;
			padding-left: 20rpx;
			width: 74.4%;
			height: 80rpx;
			line-height: 80rpx;
			color: rgba(183, 172, 172, 1);
			margin: auto;
			margin-bottom: 16rpx;
			border: 1px solid rgba(230, 230, 230, 1);
			border-radius: 50px;

			.icon {
				width: 14%;
				text-align: center;

				img {
					vertical-align: middle;
				}
			}

			.tips {
				text-indent: 16rpx;
				padding-right: 16rpx;
				// width: 85%;
				display: flex;
				justify-content: space-between;

				::v-deepuni-input {
					height: 40px !important;
					line-height: 40px !important;
				}

				.input {
					width: 60%;
				}
			}

			// 验证码
			.verification-code {
				color: rgba(13, 186, 199, 1);
				line-height: 40px;
			}
		}

		.hint {
			text-align: center;
			color: rgba(153, 153, 153, 1);
			font-size: 12px;
			margin-bottom: 42px;
		}
	}

	.agreement {
		margin-top: 84rpx;
		text-align: center;

		::v-deep.uni-radio-input {
			width: 32rpx;
			height: 32rpx;
		}

		.text {
			line-height: 20px;
			color: #999999;
		}
	}

	.login-btn {
		width: 74.4%;
		background-color: rgba(13, 186, 199, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 16px;
		border-radius: 50px;
		margin-top: 26rpx;
	}
	
	.tip{
		color: red;
		text-align: center;
	}
</style>