zheng_xie_ui/pages/login.vue

<template>
  <view class="regbox pregbox flexdc" v-if="loginflag" style="padding-top: 60rpx;">
	  <image :src="headimg" class="headimg flex0"></image>
	   
	  <view class="flex1" style="position: relative;">
		  <!-- #ifdef APP-PLUS -->
		  <!-- <image :src="ldicon" class="mzimg flex0"></image>
			<view class="mb24 mt50">
				<view class="f25 c16 fw5 mb30 txc">133****0756</view>
				<view class="rbtn">本机号码一键登录</view>
			</view> -->
		  <!-- #endif -->
		  <!-- #ifdef MP-WEIXIN -->
		   <!-- #endif -->
		  <view class="tab flexcc">
			  <block v-for="(ite,idx) in tablist" :key="idx">
				  <view   class="tabtit" :class="tabidx==ite.val?'act':''" @click="getTab(ite.val)">
				  {{ite.tit}}</view> 
			  </block>
			 
		  </view>
		  <!-- 手机号登录 -->
		  <view class="login-form-content">
		  	<block v-if="tabidx==1">
				<view class="input-item">
					<view class="login_tit">账号</view>
					<view class="login_box">
						<view class="login_boxl" v-if="tabidx==2">+86</view>
						 <input  v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
					</view>
				</view>
		  		<view class="input-item" >
					<view class="flexcj">
						<view class="login_tit">密码</view>
						<view class="login_jz" @click="jzflag=!jzflag">
							<image :src="pcicon" v-if="jzflag"></image>
							<image :src="pnicon" v-else></image>
							<view>记住密码</view>
						</view>
					</view>
		  			
		  			 <view class="login_box">
		  				 <input v-if="checkeye" v-model="loginForm.password" type="text"  class="input" placeholder="请输入密码" maxlength="20" />
		  				 <input v-else v-model="loginForm.password" type="password"  class="input" placeholder="请输入密码" maxlength="20" />
						 <view class="line flex0"></view>
						 <view class="login_txt" @click="getForget"><text>忘记密码</text></view>
		  			 </view>
		  		</view>
		  		<view class="input-item flex align-center" style="width: 60%;margin: 0px;margin-bottom: 24rpx;" v-if="captchaEnabled">
		  		  <input v-model="tucode" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
		  		  <view class="login-code"> 
		  		    <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
		  		  </view  >
		  		</view>
				<button v-if="captchaEnabled"  type="primary" class=" rbtn mb24 mt50" :class="tucode&&loginForm.username&&loginForm.password?'btn2':'btn'"  @click="getLogin">登录</button>
				<button v-else type="primary" class=" rbtn mb24 mt50" :class="loginForm.username&&loginForm.password?'btn2':'btn'"   @click="getLogin">登录</button>
				
		  	</block>
			<block v-if="tabidx==2">
				<view class="input-item">
					<view class="login_tit">手机号</view>
					<view class="login_box">
						<view class="login_boxl" v-if="tabidx==2">+86</view>
						 <input  v-model="loginForm.username" class="input" type="text" placeholder="请输入手机号" maxlength="30" />
					</view>
				</view>
				<view  class="input-item" style="margin-bottom: 24rpx;" >
					<view class="login_tit">验证码</view>
					 <view style="display: flex;align-items: center;">
						 <input v-model="duancode" type="code" class="input" placeholder="请输入短信验证码" maxlength="20" />
						 <view v-if="timefalg" class="codes">重新发送{{time}}s</view>
						 <view v-else class="codess" @click="getsendCode">发送验证码</view>
					 </view>
				</view>
				<button v-if="tabidx==2" type="primary" class=" rbtn mb24 mt50" :class="loginForm.username&&duancode?'btn2':'btn'"   @click="getLogin">登录</button>
				
			</block>
		   </view>
		  <!-- 微信登录 -->
		 <!-- <block v-if="tabidx==1">
			  <button  type="primary" class="rbtn mb24 mt50" open-type="getUserInfo" @getuserinfo="getuserinfo" >
			  	<text class="btn-txt">快捷登录</text>
			  </button>
		  </block> -->
		  
		  
		  <!-- 账号密码登录 -->
			<view class="lread" @click="checkflag=!checkflag">
				<view class="lreadl">
					<image :src="checkimg" v-if="checkflag"></image>
					<image :src="ncheckimg" v-else></image>
				</view>
				<view class="tit">登录即代表您已阅读并同意<text @click.stop="handlePrivacy">用户协议</text>及<text @click.stop="handlePrivacy">隐私政策</text></view>
			</view>
			 <!-- <view class="bbcode">版本号：ZXY_YY_1.3</view> -->
	  </view>
	 
	    
	  <!-- <view class="rtxt mt26" @click="getregister">还没账号？去申请注册</view> -->
	  <phone-btn :type="typeflag" @getPhoneNumber='getPhoneNumber' @getClose="getClose"></phone-btn>
  </view>
</template>

<script>
	import * as base64 from "base-64"
	import {getweChatLogin,getInfo,getweChatOpenid,getCodeImg,getCode,sendSmsOnly} from "@/api/login.js"
	import {getUserProfile} from "@/api/system/user.js"
	import { getToken } from '@/utils/auth'
	import phoneBtn from "@/components/toptab/phonebtn.vue"
  export default {
	  components:{
		  phoneBtn
	  },
	data(){
		return{
			headimg:require('@/static/logo.png'),
			ldicon:require('@/static/images/mine/ldicon.png'),
			checkimg:require('@/static/images/mine/lcicon.png'),
			ncheckimg:require('@/static/images/mine/lnicon.png'),
			rimg:require('@/static/images/mine/rimg.png'),
			pcicon:require('@/static/images/mine/pcicon.png'),
			pnicon:require('@/static/images/mine/pnicon.png'),
			checkflag:false,
			typeflag: false,
			loginflag:false,
			captchaEnabled: false,
			duancode:'',//短信验证码
			checkeye:false,
			tucode:'',
			codeUrl:'',
			time:'',
			timefalg:'',
			tabidx:1,
			tablist:[{tit:'账号登录',val:1},{tit:'验证码登录',val:2},],
			loginForm: {
				username: "",
				code: "",
				password:'',
				type:1,//1：账号密码 2：短信验证码
			},
			voList:[],
			voindex:0,
			jzflag:false
		}
	},
	
	methods:{
		getTab(idx){
			this.tabidx=idx;
			this.loginForm.type=idx;
		},

		// 获取图形验证码
		getCode() {
		  getCodeImg().then(res => {
		    this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
		    if (this.captchaEnabled) {
		      this.codeUrl = 'data:image/gif;base64,' + res.img
		      this.loginForm.uuid = res.uuid
		    }
		  })
		},
		getForget(){
			this.$tab.navigateTo(`/pages/mine/pwd/forgetpwd`)
		},
		 getregister(){
			 this.$tab.navigateTo(`/mine/pages/login/register`)
			 // this.$tab.navigateTo(`/mine/pages/mine/applyregister`)
			 // this.$tab.navigateTo(`/mine/pages/mine/auth`)
		 },
		 getLogin(){
			 if(this.tabidx==1){
				if(!this.loginForm.username||!this.loginForm.password||(!this.tucode&& this.captchaEnabled)){
					 return
				} 
				this.loginForm.code=this.tucode;
			 }else{
				let regphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				// 座机号
				if (this.loginForm.username && !regphone.test(this.loginForm.username)) {
					this.$toast("请输入正确的手机号")
					return
				}
				if(!this.loginForm.username||!this.duancode){
					 return
				}
				this.loginForm.code=this.duancode;
			 }
			 this.pwdLogin()
			
			
			 // if(!this.checkflag){
			 // 	this.$toast("请同意用户协议")
			 // 	return
			 // }
			
		 },
		 // 密码登录
		 async pwdLogin() {
		 	var that=this;
		   this.$store.dispatch('Login', this.loginForm).then((res) => {
			   // 判断是否记住密码
			   if(this.tabidx==1){
				   if(that.jzflag){
				   	var newObj={
				   		username:that.loginForm.username,
				   		password:base64.encode(that.loginForm.password),
				   					captchaEnabled:that.captchaEnabled,
				   	}	
				   	uni.setStorageSync('account', JSON.parse(JSON.stringify(newObj)))
				   }else{
				   	uni.removeStorageSync('account')
				   } 
			   }
			  
		     this.$modal.closeLoading()
		 		  this.$toast('登录成功')
		 		  setTimeout(function(){
		 			  that.loginSuccess()
		 		  },1500)
		     
		   }).catch((error) => {
		    setTimeout(function(){
		 		if (that.captchaEnabled&&that.tabidx==2) {
		 			that.getCode()
				}
		 	},1000)
		   })
		 },
		 // 获取短信验证码
		 getsendCode(){
		 	var that=this;
		 	if (!this.loginForm.username ) {
		 		that.$toast("请输入手机号")
		 		return
		 	}
		 	let regphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
		 	// 座机号
		 	let reg1=/^(0\d{2,3})-?(\d{7,8})$/
		 	if (this.loginForm.username && !regphone.test(this.loginForm.username)) {
		 		that.$toast("请输入正确的手机号")
		 		return
		 	}
		 	var params={
		 		'username':this.loginForm.username
		 	}
		 		// getSMS();
		 		// return
		 	sendSmsOnly(params).then(res=>{
		 		if (res.code == 200) {
		 			// 发送验证码
		 			that.$toast("发送成功")
		 			that.time=60;
		 			that.timefalg=true;
		 			that.setTimein()
		 		} else {
		 			that.$toast(res.msg)
		 		}
		 	})
		 },
		 // 验证码倒计时
		 setTimein(){
		 	var that=this;
		 	clearInterval(that.timer)
		 	that.timer=setInterval(()=>{
		 		if(that.time<=1){
		 			that.timefalg=false;
		 			that.time=60;
		 			clearInterval(that.timer)
		 		}
		 		that.time=that.time-1;
		 	},1000)
		 },
		 handlePrivacy(){
			this.$tab.navigateTo(`/pages/agreement`)  
		 },
		 getClose() {
		 	this.typeflag = false
		 },
		 btns() {
		 	
		 },
		 getPhoneNumber(data){
			 var that=this;
			 var params=data
			 that.$store.dispatch('Login', params).then(() => {
			   that.$modal.closeLoading()
			 	that.$toast('登录成功')
				that.typeflag=false;
			   that.loginSuccess(data)
			 }).catch(() => {
			   // if (this.captchaEnabled) {
			   //   this.getCode()
			   // }
			 })
		 },
		 // 登录成功后，处理函数
		 loginSuccess(result) {
		   // 设置用户信息
		   var that=this;
		   this.$store.dispatch('GetInfo').then(res => {
			   this.$tab.reLaunch('/pages/index/index') 
			   // 判断有几个角色 进入选择页面
			   // var roles=that.$store.state.user.roles;
			   // var userroles=that.$store.state.user.userroles;
			   // if(roles.length>0){
				  //  // 默认选择学校 老师 家长
				  //  var a,b,c,type;
				  //  if(roles.includes('school')){
						// type='school'
				  //  }else if(roles.includes('teacher')){
					 //   type='teacher'
				  //  }else if(roles.includes('parents')){
					 //   type='parents'
				  //  }else{
					 //  that.$tab.reLaunch('/pages/index/index')
					 //   return
				  //  }
				  // Object.keys(userroles).some((key) => {
				  // 	if (userroles[key].roleKey == ('' + type)) {
				  // 		that.$store.dispatch('checkRole', userroles[key]).then(() => {
				  // 		  that.$tab.reLaunch('/pages/index/index') 
				  // 		}).catch(() => {
				  		 
				  // 		})
				  // 		return true;
				  // 	}
				  // })
			   // }else{
				  // this.$tab.reLaunch('/pages/index/index') 
			   // }
		   })
		 },
		 
		 async getuserinfo(e) {
			 // if(!this.checkflag){
				//  this.$toast("请同意用户协议")
				//  return
			 // }
			 // 判断是不是有学校
		 	const {iv,encryptedData} = e.detail
		 	const {nickName, avatarUrl, ...userInfo} = e.detail.userInfo
			// console.log(e.detail)
		 	try{
				uni.login({
                    provider: 'weixin',
                    success: (res) => {
                        // 获取用户信息
						if(res.code){
							this.avatarUrl = avatarUrl
							this.nickName = nickName
							this.code = res.code
							this.userInfo =e.detail.userInfo
							uni.setStorageSync('userInfo', e.detail.userInfo)
							uni.setStorageSync('lcheckflag',true)
							this.typeflag=true;
						}
                    }
                })
		 	} catch(e){
		 		//TODO handle the exception
		 	}
		 },
	},
	
	onLoad: function() {
		this.getCode()
		if (getToken()) {
			this.$tab.reLaunch('/pages/index/index') 
			// 判断有什么角色
		} else {
			this.loginflag=true;
			// this.getCode()
			if(uni.getStorageSync('lcheckflag')){
				this.checkflag=true
			}else{
				this.checkflag=false
			}
		  if(uni.getStorageSync('account')){
		  	var newObj=JSON.parse(JSON.stringify(uni.getStorageSync('account')))
		  	this.loginForm.username=newObj.username;
		  	this.loginForm.password=base64.decode(newObj.password);
		  	this.jzflag=true;
		  }
		  
		}	
    },
  }
</script>

<style lang="scss" scoped>
.headimg{width: 136rpx;height: 136rpx;margin:0 auto 36rpx;}
.mzimg{width: 100rpx;height: 44rpx;margin: 0 auto ;}
.rtxt{font-size: 32rpx;font-weight: 500;
color: $com-cd3;text-align: center;}
.bbcode{position: absolute;width: 100%;text-align: center;left: 0;bottom: -80rpx;font-size: 24rpx;color: #666666;}
.lread{
	display: flex;align-items: flex-start;justify-content: center;
	.lreadl{padding-top: 4rpx;
		image{width: 28rpx;height: 28rpx;margin-right: 14rpx;}
	}
	.tit{font-size: 26rpx;font-weight: 500;color: #666666;line-height: 40rpx;
	text{color:$com-cd3;text-decoration: underline;padding: 0 6rpx;}
}
}
.tab{
	.tabtit{font-size: 32rpx;font-weight: 500;color: #666666;padding: 0 24rpx;position: relative;
	&.act{color: $com-cd3;font-weight: bold;}
		&::before{content: '';position: absolute;left: 0;top: 50%;margin-top: -10rpx;width: 2rpx;height: 20rpx;background: #DADADA;}
		&:first-child::before{display: none;}
	}
	
}
.rbtn {
		&.btn{background: #9a9c9e;color: #ffffff;}
		&.btn2{background: $com-cd3;color: #ffffff;}
      }
.login-form-content {
      margin: 0 auto;
      width: 100%;
		
      .input-item {
        // margin-bottom:48rpx;
        border-bottom: 2rpx solid #CDCDCD;
		padding: 40rpx 0 0rpx;
        .icon {
          font-size: 40rpx;
          margin-left: 10px;
          color: #999;
        }
		.login_tit{
			font-size: 34rpx;
			font-weight: bold;
			color: #343434;margin-bottom: 10rpx;
		}
		.login_box{display: flex;align-items: center;
			.rimgs{width: 18rpx;height: 30rpx;flex: 0 0 auto;margin-left: 20rpx;}
		}
        .input {
          width: 100%;
          font-size: 34rpx;
		  height: 80rpx;
		  line-height: 80rpx;
        }

      }

      
      .login-code {
        height: 38px;
        float: right;
      
        .login-code-img {
          height: 38px;
          position: absolute;
          margin-left: 10px;
          width: 200rpx;
        }
      }
    }
// .image{width: 32rpx;height: 32rpx;margin-right: 14rpx;}
.input_ye image{width: 34rpx;height: 18rpx;}
.codess{font-size: 34rpx;color: $com-cd3;flex: 0 0 auto;min-width: 200rpx;text-align: center;border-left: 2rpx solid #CDCDCD;}
.codes{background: none;font-size: 28rpx;flex: 0 0 auto;width: 180rpx;text-align: center;border-left: 2rpx solid #CDCDCD;}
.login_box{display: flex;align-items: center;}
.login_boxl{width:130rpx;font-size: 34rpx;color: #343434;border-right: 2rpx solid #CDCDCD;margin-right: 4rpx;}
.login_txt{text-align: right;flex: 0 0 auto; padding:0 24rpx;
	text{font-size: 30rrpx;color:#666666;}
}
.line{width: 2rpx;height: 24rpx;background: #CDCDCD;margin: 0 10rpx;}
.login_jz{display: flex;align-items: center;justify-content: flex-end;flex: 0 0 auto;
	image{width: 30rpx;height: 30rpx;margin-right: 12rpx;}
	view{color: #666666;font-size: 28rpx;}
}
// app
</style>