property/user_ui/mine/pages/tlogin.vue

<template>
  <view class="regbox" v-if="loginflag">
	  <!-- <image :src="headimg" class="headimg flex0"></image> -->
	  <image :src="lbg" class="navbg"></image>
	  <image :src="fbg" class="fbg"></image>
	  <view class="wymain">
		  <view class="head">
		  	<view class="htit">你好，</view>
		  	<view class="htit">欢迎登录智慧社区平台</view>
		  	<view class="htxt" @click="getregister">还没有账号？<text>立即注册</text></view>
		  </view>
		    <view class="flex1" style="position: relative;">
		  
		  	  <!-- <view class="tab flexcc">
		  		  <block v-for="(ite,idx) in tablist" :key="idx">
		  			  <view v-if="ite.val!=1"  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">+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">
		  					 <uni-easyinput :inputBorder="false" type="password" v-model="loginForm.password" placeholder="请输入密码" />
		  	  				<!-- <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" :class="tucode&&loginForm.username&&loginForm.password?'btn2':'btn'"  @click="getLogin">登录</button>
					<button v-else type="primary" class=" rbtn " :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">+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  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" 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="pnicon" 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>
	  <loading></loading>
	  <!-- <view class="rtxt " @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,sendSmsCode} from "@/api/login.js"
	import {getUserProfile} from "@/api/system/user.js"
	import { getToken } from '@/utils/auth'
	import phoneBtn from "@/components/toptab/phonebtn.vue"
	import config from '@/config'
  export default {
	  components:{
		  phoneBtn
	  },
	data(){
		return{
			lbg:require('@/static/images/mine/lbg.png'),
			fbg:require('@/static/images/mine/fbg.png'),
			headimg:require('@/static/logo.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:true,
			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:'',
				clientId:config.Clientid,
				clientKey:config.userType,
			},
			//sms
			voList:[],
			voindex:0,
			jzflag:false
		}
	},
	
	methods:{
		getTab(idx){
			this.tabidx=idx;
		},

		// 获取图形验证码
		getCode() {
		  getCodeImg().then(res => {
			  // 租户
			this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled
			if (this.captchaEnabled) {
			  this.codeUrl = 'data:image/gif;base64,' + res.data.img
			  this.loginForm.uuid = res.data.uuid
			}
			// 单个
			// 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(`/mine/pages/pwd/forgetpwd`)
		},
		 getregister(){
			 this.$tab.redirectTo(`/mine/pages/register`)
		 },
		 getLogin(){
			if(this.tabidx==1){
				if(!this.loginForm.username||!this.loginForm.password||(!this.tucode&& this.captchaEnabled)){
					return
				}
				this.loginForm.code=this.tucode;
				this.loginForm.grantType='password';
			}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.password='';
				this.loginForm.code=this.duancode;
				this.loginForm.grantType='sms';
				// this.loginForm.type=
			}
			 
			// 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(!regphone.test(this.loginForm.username)){
			// 	this.$toast('请输入正确的手机号')
			// 	return
			// }
			 // if(!this.checkflag){
			 // 	this.$toast("请同意用户协议")
			 // 	return
			 // }
			 console.log(this.loginForm)
			 this.pwdLogin()
		 },
		 // 密码登录
		 async pwdLogin() {
		 	var that=this;
			console.log(this.loginForm)
			// return
		   this.$store.dispatch('Login', this.loginForm).then((res) => {
			   // 判断是否记住密码
			  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==1) {
		 			that.getCode()
				}
		 	},1000)
		   })
		 },
		 handlePrivacy(){
			this.$tab.navigateTo(`/pages/agreement`)  
		 },
		 getClose() {
		 	this.typeflag = false
		 },
		 btns() {
		 	
		 },
		 // 获取短信验证码
		 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={
		 		phonenumber:this.loginForm.username,
				type:1,//1:登录 2：注册 3：修改密码
		 	}
		 	sendSmsCode(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)
		 },
		 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') 
		   })
		 },
		 
		 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(e) {
		this.tabidx=e.type;
		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(this.tabidx==1){
				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>
.navbg{width: 100%;height: 100vh;}
.fbg{width: 100%;height: 750rpx;position: absolute;bottom: 0;left: 0;}
.wymain{z-index: 2;position: relative;padding: 180rpx 60rpx;}
.headimg{width: 136rpx;height: 136rpx;margin:0 auto 36rpx;}
.head{margin-bottom: 64rpx;
	.htit{font-weight: bold;font-size: 48rpx;color: #0156FE;line-height: 60rpx;}
	.htxt{font-weight: 500;font-size: 24rpx;color: #666666;margin-top: 30rpx;
		text{color: #0156FE;}
	}
}
.mzimg{width: 100rpx;height: 44rpx;margin: 0 auto ;}
.regbox /deep/ .uni-easyinput__content{background-color: transparent !important;}
.regbox /deep/ .uni-easyinput__content-input{font-size: 30rpx !important;padding-left: 0 !important;line-height: 80rpx;height: 80rpx;}
.regbox /deep/ .uni-input-placeholder{font-size: 30rpx !important;padding-left: 0 !important;color: #808080;}
.rtxt{font-size: 30rpx;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: 22rpx;height: 22rpx;margin-right: 12rpx;}
	}
	.tit{font-size: 26rpx;font-weight: 500;color: #666666;
	text{color:#4888FA;padding: 0 6rpx;font-weight: 500;}
}
}
.tab{
	.tabtit{font-size: 30rpx;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 {height: 84rpx;margin: 120rpx 0 24rpx;font-weight: bold;font-size: 28rpx;color: #FFFFFF;line-height: 84rpx;
		&.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: 30rpx;
			font-weight: bold;
			color: #343434;margin-bottom: 8rpx;
		}
		.login_box{display: flex;align-items: center;
			.rimgs{width: 18rpx;height: 30rpx;flex: 0 0 auto;margin-left: 20rpx;}
		}
        .input {
          width: 100%;
          font-size: 30rpx;
		  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: 30rpx;height: 30rpx;margin-right: 14rpx;}
.input_ye image{width: 34rpx;height: 18rpx;}
.codess{font-size: 30rpx;color: $com-cd3;flex: 0 0 auto;min-width: 200rpx;text-align: center;border-left: 2rpx solid #CDCDCD;}
.codes{background: none;font-size: 30rpx;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;}
.login_txt{text-align: right;flex: 0 0 auto; padding:0 24rpx;
	text{font-size: 30rpx;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>