jiangximiniprogramSchool/pages/userCenter/login/login.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">
			<image src="@/static/images/userCenter/loginTitle.png" mode=""></image>
		</view>
		<view class="form">
			<view class="form-item">
				<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.password"></u--input>
				</view>
			</view>
			<view class="forgetTps" @click="$u.toast('请联系管理员重置密码！')">忘记密码</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&&this.FormData.password
			}
		},
		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() {
				let val = ''
				if(this.FormData.phone=='18267103167') {
					val = '实操教练'
				}else if(this.FormData.phone=='18267103168') {
					val = '校长'
				}else if (this.FormData.phone=='18267103169'){
					val = '考场模拟教练'
				}else {
					val = '模拟器老师'
				}
				this.$store.commit('upDateIdentity', val)
				uni.reLaunch({
					url: '/pages/tabbar/statistics/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 {
			width: 658rpx;
			height: 94rpx;
			margin: 130rpx auto 114rpx auto;
	  }
	
	  .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
		  	}
		  }
	    }
		.forgetTps {
			font-size: 28rpx;
			color: $themC;
			margin-top: -20rpx;
			text-align: right;
		}
	    .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>