zc_saas_h5/pages4/login/login.vue

<template>
	<view style="height: 100%;">
		<image mode="widthFix" src="/pages4/static/login_bg.jpg" class="full_img"></image>
		<u-navbar title="登录" :border-bottom="false" background="{ background: '#ffffff',opacity:0.4; }" title-color="#ffffff" back-icon-color="#ffffff"></u-navbar>
		<view style="padding: 30rpx;">
			<view style="width: 400rpx;">
				<u-subsection @change="sectionChange" :list="list" :current="current" active-color="#007AFF" inactive-color="#ffffff" bg-color="rgba(255,255,255,0.52)"></u-subsection>
			</view>
			<view class="login_box">
				<u-form :model="form" ref="uForm1" v-show="current==0">
					<u-form-item prop="account" ><u-input type="idcard" v-model="form.account" placeholder-style="color:#999999" placeholder="手机号/学员身份证"/></u-form-item>
					<u-form-item prop="pwd" ><u-input class="password" v-model="form.pwd" placeholder-style="color:#999999" type="password" placeholder="登录密码"/></u-form-item>
				</u-form>
				<u-form :model="form" ref="uForm2" v-show="current==1">
					<u-form-item  prop="tel" ref="tel"><u-input type="number" maxlength="11" placeholder-style="color:#999999"  v-model="form.tel" placeholder="手机号"/></u-form-item>
					<u-form-item prop="code" >
						<u-input v-model="form.code" type="number" placeholder-style="color:#999999"  placeholder="验证码"/>
						<u-button slot="right"  size="mini" @click="getCode">{{codeTips}}</u-button>
					</u-form-item>
				</u-form>
			</view>
			<button class="loginBtn" :class="{able:canLogin()}" @click="pwlogin" v-if="current==0"> 
				登录
			</button>
			<button :disabled="isUse" :class="{able:canLogin()}" class="loginBtn" @click="sms_login" v-if="current==1">
				登录
			</button>
			<view style="width: 100%;margin: 40rpx auto;">
				<view  style="display: flex;align-items: center;color: #007AFF;font-size: 24rpx;justify-content:center;">
					<navigator  hover-class="none" :url="'/pages2/register/register?scanCode=' + scanCode" style="margin: 0 40rpx;">立即注册</navigator>
					<view style="width: 3rpx;height: 20rpx;background-color: #007AFF;"></view>
					<navigator  hover-class="none" url="/pages2/register/forget" style="margin: 0 40rpx;">忘记密码</navigator>
				</view>
			</view>
			
			<view  class="wxBtn">
				<button type="default" open-type="getPhoneNumber" @getphonenumber="wxLogin" class="wxloginBtn"></button>
				<view style="text-align: center;color: #999999;font-size: 24rpx;margin-top: 10rpx;">微信快捷登录</view>
			</view>
		</view>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
const PUBLIC_KEY = `-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4qkbwIKErstK1sFESPEhOShpR
pj4+sOVpJHxl5r/2xLBfA/MrXcAEra5Ro9cXNQSqmLLt8wecoLk/glfa5IdhXV0h
RVQplIVs5z3MxcUa9ptKPHUTgh8xMCBvl8sUJKwkmn4vYWeDfHT22EL7Hr1pTMwU
hF6WiNlWfQTVoF1rhwIDAQAB
-----END PUBLIC KEY-----`
import JSEncrypt from '@/pages4/static/jsencrypt.min.js';
export default {
	data() {
		return {
			code: '',
			form:{
				tel:'',
				code:'',
				account:'',
				pwd:''
			},
			list: [
				{
					name: '密码登录'
				}, 
				{
					name: '短信登录'
				}
			],
			rules: {
				tel: [
					{ 
						required: true, 
						message: '请输入手机号', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					},
					{
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码格式不正确',
						// 触发器可以同时用blur和change
						trigger: ['change'],
					}
				],
				account: [
					{ 
						required: true, 
						message: '请输入手机号/学员身份证', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				pwd: [
					{ 
						required: true, 
						message: '请输入密码', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				code: [
					{ 
						required: true, 
						message: '请输入验证码', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
			},
			current: 0,
			codeTips: '',
			isUse:false,
			scanCode: '', // pc端扫码登录获取的标志码
			isBack:false
		};
	},
	onLoad(option) {
		this.$refs.uForm1.setRules(this.rules)
		this.$refs.uForm2.setRules(this.rules)
		if(option.isBack){
			this.isBack = option.isBack;
		} 
		// else if (option.scanCode) {
		// 	this.scanCode = option.scanCode
		// }
		// this.from = option.from; 
		
	},
	onShow() {
		// 获取code
		this.getwxCode()
	},
	methods: {
		getwxCode() {
			uni.login({
				provider: 'weixin',
				success: (loginRes) => {
					this.code = loginRes.code
					console.log('获取的code:', this.code)
				}
			})
		},
		wxLogin(e) {
			this.$api.wxLogin({
				code: this.code,
				encryptedData: e.detail.encryptedData,
				iv:  e.detail.iv
			}).then(res => {
				if (res.data.code == 200) {
					this.loginCallback(res, 'wxlogin')
				} else {
					this.getwxCode() // code用完一次就会过期，防止用户点击取消后再点微信登录后code过期
					// this.$u.toast(res.data.msg);
				}
			})
		},
		canLogin() {
			if(this.current == 0) {
				if(this.form.account && this.form.pwd) {
					return true;
				}
				return false;
			} else if(this.current == 1) {
				if(this.form.tel && this.form.code) {
					return true;
				}
				return false;
			}
		},
		sms_login(){
			this.$refs.uForm2.validate(valid => {
				if(valid) {
					let that = this
					if(!this.form.tel){
						this.$u.toast('请输入手机号码');
						return 
					}
					if(!this.form.code){
						this.$u.toast('请输入验证码');
						return 
					}
					that.isUse = true
					let datas = {
						tel:this.form.tel,
						code:this.form.code
					}
					that.$api.smsLogin(datas).then(
						res => {
							that.isUse = false
							if (res.data.code == 200) {
								this.loginCallback(res, 'smslogin')
							} else {
								that.$u.toast(res.data.msg);
							}
						},
						err => {
							that.isUse = false
						}
					);
				}
			})
			
		},
		fakeLogin(){
			uni.setStorageSync('user_account', '123');
			uni.setStorageSync('token', '123');
			uni.switchTab({
				url:'/pages/index/index'
			})
		},
		/**
				* 
				* @param {*} data 
				* @returns 
				* 加密
				*/
		encryptor(data) {
				 const encrypt =new JSEncrypt();
				encrypt.setPublicKey(PUBLIC_KEY);
		
				return encrypt.encrypt(data);
		},
		pwlogin(){
			let that = this
			if(!this.form.account){
				this.$u.toast('请输入手机号码/身份证号');
				return 
			}
			if(!this.form.pwd){
				this.$u.toast('请输入密码');
				return 
			}
			//虚拟登录
			/* that.fakeLogin()
			return */
			that.isUse = true
			let form = JSON.parse(JSON.stringify(this.form))
			form.pwd = this.encryptor(form.pwd)
			// 账号登录用户 /app/common/account_login
			that.$api.accountLogin(form).then(
				res => {
					that.isUse = false
					if (res.data.code == 200) {
						this.loginCallback(res, 'pwlogin')	
					} else {
						that.$u.toast(res.data.msg);
					}
				},
				err => {
					that.isUse = false
				}
			);
		},
		codeChange(text) {
			this.codeTips = text;
		},
		// 获取验证码
		getCode() {
			let that = this
			if(that.$refs.uCode.canGetCode) { 
				if(that.$refs.tel.validateState == 'success') {
					let datas = {tel:this.form.tel}
					that.$api.loginSms(datas).then(
						res => {
							if (res.data.code == 200) {
								that.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								that.$refs.uCode.start();
							} else {
								that.$u.toast(res.data.msg);
							}
						},
						err => {
							console.log(err);
						}
					);
				} else {
					
					this.$refs.tel.onFieldChange()
				}
			}
			
		},
		sectionChange(index) {
			this.current = index;
		},
		getPhoneNumber(e) {
			let that = this;
			uni.checkSession({
			  success () {
			    //session_key 未过期，并且在本生命周期一直有效
				that.putInfo(e)
			  },
			  fail () {
			    // session_key 已经失效，需要重新执行登录流程
			    uni.login({
			    	provider: 'weixin',
			    	success: function(loginRes) {
			    		that.code = loginRes.code;
						that.putInfo(e)
			    	}
			    });
			  }
			})
		},
		putInfo(e){
			let that = this;
			if (e.detail.encryptedData) {
				let inviteCode =  uni.getStorageSync("inviteCode") 
				//用户同意授权
				var  datas = {
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData,
					code: that.code
				};
				if(inviteCode){
					datas.inviteCode = inviteCode
				}
				that.$api.login(datas).then(
					res => {
						if (res.data.code == 200) {
							uni.setStorageSync('union_id', res.data.data.union_id);
							uni.setStorageSync('token', res.data.data.token);
							that.$api.getInfo().then(resdata => {
								if(resdata.data.code == 200){
									uni.navigateBack();
									that.$store.state.userInfo = resdata.data.data;
								}
								
							});
						} else {
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false
							});
						}
					},
					err => {
						console.log(err);
					}
				);
			}
		},
		// 微信、密码、验证码 登录成功的回调
		loginCallback(res, types) {
			if(res.data.data && res.data.data.full_info){
				//信息完善，直接进入页面
				uni.setStorageSync('user_account', res.data.data.user_account);
				uni.setStorageSync('token', res.data.data.token);
				// /app/user/getInfo 登录用户信息
				this.$api.getInfo().then(resdata => {
					if(resdata.data.code == 200){
						this.$store.state.userInfo = resdata.data.data;
						
						// if (this.scanCode) { // pc扫码进来登录成功
						// 	this.submitCode()
						// } else 
						if(!this.isBack){
							let goPath = ''
							if (types == 'wxlogin' || types == 'smslogin') { //密码登录不用判断电脑goPath, 直接到首页
								goPath = uni.getStorageSync('goPath')
							}
							if(goPath == 'course') {
								uni.redirectTo({
									url:'/pages2/wd/class'
								})
								types == 'wxlogin' && this.$method.setUuid(new Date().valueOf() + "")
							} else if(goPath == 'bank') {
								uni.redirectTo({
									url:'/pages2/wd/question_bank'
								})
								types == 'wxlogin' && this.$method.setUuid(new Date().valueOf() + "")
							} else {
								uni.reLaunch({
									url:'/pages/index/index'
								})
								types == 'wxlogin' && this.$method.setUuid(new Date().valueOf() + "")
							}
							
						}else{
							uni.navigateBack();
						}
					}
					
				});
			} else {
				//未完善信息,存为临时信息
				uni.setStorageSync('user_account_temp', res.data.data.user_account);
				uni.setStorageSync('token_temp', res.data.data.token);
				// if (this.scanCode) {
				// 	this.$navTo.togo('/pages2/register/bind', {scanCode: this.scanCode})
				// } else {
					this.$navTo.togo('/pages2/register/bind');
				// }
				
			}	
		},
		// scanLoginCheck小程序校验PC登录二维码,执行登录获取到令牌，然后把扫码的路径最后面的6位标识码提交给后台就行
		// submitCode() {
		// 	console.log('跳转请求提交code到接口', this.scanCode)
		// 	this.$api.scanLoginCheck({
		// 		scanCode: this.scanCode
		// 	}).then((res) => {
		// 		if (res.data.code == 200) {
		// 			uni.navigateTo({
		// 				url: '/pages4/login/pcLoginSuccess'
		// 			})
		// 		} else {
		// 			this.$u.toast(res.data.msg)
		// 		}
		// 	})
		// }
	}

};
</script>

<style scoped lang="scss">
	.wxBtn{
		position: fixed;
		bottom: 10%;
		width: 100%;
		left: 0;
	}
	/deep/ .wxBtn button::after{
	    border: none; 
	}
	.loginBtn{
		width: 526rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #015EEA, #00C0FA);
		box-shadow: 0rpx 10rpx 16rpx 4rpx rgba(1, 99, 235, 0.04);
		opacity: 0.6;
		border-radius: 40rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		margin: 40rpx auto;
		
		&.able {
			opacity: 1;
		}
	}
	
	
	.wxloginBtn{
		margin:0 auto;
		background: url("/static/loginBtn.png") no-repeat;
		background-size:100% 100%;
		border:none;
		width: 100rpx;
		height: 100rpx;
	}
	
	/deep/page {
		background-color: #FFFFFF;
		height: 100%;
		width: 100%;
	}
	.login_box{
		width: 100%;
		height: 360rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(1, 99, 235, 0.1);
		border-radius: 24rpx;
		margin-top: 30rpx;
		padding:40rpx 35rpx;
		
		
		.password {
			/deep/.uicon-eye-fill {
				&::before{
					color:#007AFF;
					content:"\e613";
				}
			}
		}
	}
	/deep/ .u-item-bg{
		border-radius: 32px !important;
	}
	/deep/ .u-subsection{
		border-radius: 32px !important;
	}
.full_img {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	z-index: -999;
	top: 0;
}

.head {
	height: 96rpx;
	width: 100%;
	line-height: 96rpx;
	margin-top: 40rpx;
	text-align: center;
	display: flex;
	position: relative;
	justify-content: center;
}
.icon {
	position: absolute;
	left: 30rpx;
}
</style>