flying-monkey/pages/login/login.vue

<template>
	<view>
		<view style="overflow: hidden;position: relative;" :style="{height: windowHeight + 'px'}">
			<image class="login-img" src="/static/public/icon-login.png" mode="widthFix"></image>
			<view class="login-box fon28">
				<!-- 手机号 -->
				<view class="login-input-box">
					<view style="width: 30rpx;">
						<image style="width: 30rpx;height: 28rpx;" src="/static/public/icon-people.png" mode=""></image>
					</view>
					<input class="width100" type="number" @blur="inputBlurEv(0)" @focus="inputFocusEv(0)" @input="inputFocusEv(0)" v-model="login_phone" maxlength="11" placeholder="请输入手机号" placeholder-class="col9" />
					<!-- 清除按钮 -->
					<view class="clear-box" v-show="ifPhone" @tap="clearInput(0)" style="right: 20rpx;"><view class="clear-close"><span></span><span></span></view></view>
				</view>
				<!-- 验证码 -->
				<view class="login-input-box" v-show="login_type=='mobile'">
					<view style="width: 30rpx;">
						<image style="width: 22rpx;height: 26rpx;" src="/static/public/icon-password.png" mode=""></image>
					</view>
					<input class="width100" type="number" v-model="login_code" maxlength="6" @blur="inputBlurEv(1)" @focus="inputFocusEv(1)" @input="inputFocusEv(1)" placeholder="请输入验证码" placeholder-class="col9" />
					<view class="login-code-btn" @tap="getCode">{{codeText}}</view>
					<!-- 清除按钮 -->
					<view class="clear-box" v-show="ifCode" @tap="clearInput(1)" style="right: 260rpx;"><view class="clear-close"><span></span><span></span></view></view>
				</view>
				<!-- 密码登录 -->
				<view class="login-input-box" v-show="login_type!='mobile'">
					<view style="width: 30rpx;">
						<image style="width: 22rpx;height: 26rpx;" src="/static/public/icon-password.png" mode=""></image>
					</view>
					<input class="width100" type="text" password v-model="login_password" @blur="inputBlurEv(3)" @focus="inputFocusEv(3)" @input="inputFocusEv(3)" placeholder="请输入密码" placeholder-class="col9" />
					<view class="clear-box" v-show="ifPassword" @tap="clearInput(3)" style="right: 20rpx;"><view class="clear-close"><span></span><span></span></view></view>
				</view>
				<!-- 单位名称 -->
				<view class="login-input-box">
					<view style="width: 30rpx;">
						<image style="width: 26rpx;height: 26rpx;" src="/static/public/icon-unit.png" mode=""></image>
					</view>
					<input class="width100" type="text" v-model="login_unitName" @blur="inputBlurEv(2)" @focus="inputFocusEv(2)" @input="inputFocusEv(2)" placeholder="请输入单位名称" placeholder-class="col9" />
					<!-- 清除按钮 -->
					<view class="clear-box" v-show="ifunitName" @tap="clearInput(2)" style="right: 20rpx;"><view class="clear-close"><span></span><span></span></view></view>
				</view>
				<!-- 登入 -->
				<view class="login-btn fon32" @tap="submitEv">登录</view>
				<!-- 使用账号密码登录、忘记密码 -->
				<view class="fon24 disjbac mar-s20">
					<view @tap="switchType">使用{{login_type_text}}登录</view>
					<view class="col9" @tap="goForget">忘记密码?</view>
				</view>
				<!-- 注册工程师 -->
				<view @tap="goRegister" class="login-btn fon24 mar-s70" style="background-color: #f0f0f0;color: #333333;">注册工程师</view>
			</view>
		</view>
	</view>
</template>
<script>
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	export default {
		components:{
			containerSubgroupTwo
		},
		data() {
			return {
				windowHeight: uni.getSystemInfoSync().windowHeight,
				ifPhone:false,
				login_phone:'',//登录手机号
				ifCode:false,
				login_code:'',//登录验证码
				ifunitName:false,
				login_unitName:'',//登录单位名称
				ifPassword:false,
				login_password:'',//登录密码
				codeText:'获取验证码' ,// 获取验证码按钮文字
				flagCode:true ,// 允许点击获取验证码
				countDown:null,
				login_type:'mobile',// 登录方式默认手机验证码登录 account：账号密码登陆 
				login_type_text:'账号密码'
			};
		},
		onLoad() {
			
		},
		methods: {
			// 提交事件
			submitEv(){
				if(this.checkEmpty()){
					let params = {
						login_type: this.login_type, // 登陆手机类型： mobile：手机登陆、account：账号密码登陆  
						phone: this.login_type == 'mobile' ? this.login_phone : '', // 手机号码，login_type 为 mobile 时必填  
						password: this.login_password, // 密码，login_type 为 account 时必填  
						sms_code: this.login_code, // 短信验证码，login_type 为 mobile 时必填  
						username: this.login_type == 'account' ? this.login_phone : '', //账号，login_type 为 account 时必填  
						affiliation: this.login_unitName // 单位名称  
					}
					this.$requst.post('/universal/api.login/login',params).then(res=>{
						if(res.code==1) {
							this.$toolAll.tools.showToast('登录成功');
							// 缓存token和角色类型
							uni.setStorageSync('token',res.data.token);
							// 角色(1：业务员、2：客户、3：客服、4：工程师)  
							uni.setStorageSync('type_id',res.data.type_id);
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/tabbar/pagehome/pagehome'
								})
							},2000)
						} else { 
							this.$toolAll.tools.showToast(res.msg);
						}
					})
				}
			},
			// 获取验证码
			getCode(){
				if(this.$toolAll.tools.isPhone(this.login_phone)) {
					this.$toolAll.tools.showToast('请输入正确的手机号');
				} else {
					if(this.flagCode) {
						this.flagCode = false;
						let count = 60;
						this.codeText = `${count}S重新获取`
						this.countDown = setInterval(()=>{
							count--;
							count < 10 ? this.codeText = `0${count}S重新获取` : this.codeText = `${count}S重新获取`;
							if(count==0) {
								this.codeText = `重新获取`;
								clearInterval(this.countDown);
								this.flagCode = true;
							}
						},1000)
						// 调用获取短信事件
						this.getMessage(this.login_phone);
					}
				}
			},
			// 获取短信事件
			getMessage(phone){
				this.$requst.post('/universal/api.login/send_sms',{phone}).then(res=>{
					this.$toolAll.tools.showToast(res.msg);
					if(res.code==0) {
						this.codeText = '获取验证码';
						clearInterval(this.countDown);
					}
				})
			},
			// 检测是否某个输入框为空
			checkEmpty(){
				let ifEmpty = true;
				if(this.$toolAll.tools.isPhone(this.login_phone)) {
					this.$toolAll.tools.showToast('手机号格式不正确');
					ifEmpty = false;
					return;
				}
				if(this.login_type_text=='账号密码') {
					if(!this.login_code) {
						this.$toolAll.tools.showToast('请输入验证码');
						ifEmpty = false;
						return;
					}
				} else {
					if(!this.login_password) {
						this.$toolAll.tools.showToast('请输入密码');
						ifEmpty = false;
						return;
					}
				}
				
				if(!this.login_unitName) {
					this.$toolAll.tools.showToast('请输入单位名称');
					ifEmpty = false;
					return;
				}
				return ifEmpty;
			},
			// 输入框获取焦点
			inputFocusEv(index){
				switch (index){
					case 0:
					this.login_phone ? this.ifPhone = true : this.ifPhone = false;
						break;
					case 1:
					this.login_code ? this.ifCode = true : this.ifCode = false;
						break;
					case 2:
					this.login_unitName ? this.ifunitName = true : this.ifunitName = false;
						break;
					case 3:
					this.login_password ? this.ifPassword = true : this.ifPassword = false;
						break;
				}
			},
			// 输入框失去焦点
			inputBlurEv(index){
				switch (index){
					case 0:
					setTimeout(()=>{this.ifPhone = false;},100)
						break;
					case 1:
					setTimeout(()=>{this.ifCode = false;},100)
						break;
					case 2:
					setTimeout(()=>{this.ifunitName = false;},100)
						break;
					case 3:
					setTimeout(()=>{this.ifPassword = false;},100)
						break;
				}
			},
			// 清除手机号
			clearInput(index){
				switch (index){
					case 0:
					this.login_phone = '';
						break;
					case 1:
					this.login_code = '';
						break;
					case 2:
					this.login_unitName = '';
						break;
					case 3:
					this.login_password = '';
						break;
				}
			},
			// 切换登录方式
			switchType(){
				if(this.login_type_text=="账号密码") {
					this.login_type = 'account';
					this.login_type_text = '验证码';
					this.login_code = '';
				} else {
					this.login_type = 'mobile';
					this.login_type_text = '账号密码';
					this.login_password = '';
				}
			},
			// 前往注册页面
			goRegister(){
				uni.navigateTo({
					url:'/pages/register/register'
				})
			},
			// 前往找回密码页面
			goForget(){
				uni.navigateTo({
					url:'/pages/forget/forget'
				})
			}
		}
	}
</script>
<style>
	page{background-color: #FFFFFF;}
</style>