medical/pages/signIn/logOn.vue

<template>
	<view>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<!-- 账号密码登录 -->
		<view v-if="type == 1">
			<!-- <view class="ver" @click="verificationShow">
				验证码登录
			</view> -->
			
			<view class="title">
				账号登录
			</view>
			
			<view class="inp">
				<input placeholder="请输入你的账号" v-model="account"/>
			</view>
			
			<view class="inp">
				<input placeholder="请输入密码" v-if="passShow" type="password" v-model="pwd" >
				<input placeholder="请输入密码" v-else type="text" v-model="pwd" >
				<u-icon v-if="passShow" class="i" name="eye-off" size="40rpx" @click="pass()"></u-icon>
				<u-icon v-else class="i" name="eye" size="40rpx" @click="pass()"></u-icon>
			</view>
			
			<view class="an" :class="[isBindAuth ? 'forbidden':'']" @click="to(1)">
				{{ isBindAuth? '正在授权中...':'登录' }} 
			</view>
			
		</view>
		
		<!-- 验证码登录 -->
		<view v-if="type == 2">
			<!-- <view class="title" style="margin-top: 30rpx;">
				验证码登录
			</view> -->
			
			<view class="inp" style="padding-left: 216rpx;">
				<input placeholder="请输入手机号" :type="passShow ? 'password' : 'text' " />
				<text>+86</text>
			</view>
			
			<view class="an" @click="toVer(1)">
				下一步
			</view>
			
		</view>
		
		<!-- 验证码登录(输入验证码) -->
		<view v-if="type == 3">
			<view class="title" style="margin-top: 30rpx;">
				输入验证码
				<view style="font-size: 28rpx; font-weight: 500; margin-top: 25rpx;">
					已发送4位验证码至 +86 18899339922
				</view>
			</view>
			
			<view class="code-u">
				
				<view class="code"></view>
				<view class="code"></view>
				<view class="code"></view>
				<view class="code"></view>
				
				<u-code-input
					v-model="prove"
					mode="middleLine"
					:maxlength="4"
					space="58"
					class="prove"
					fontSize="40"
				></u-code-input>
			</view>
			
			<view class="an" @click="to(1)">
				登录
			</view>
			
			<view class="countDown" @click="upUtem">
				重新获取<text v-if="item != 0">（{{item}}）</text>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import md5 from "../../utils/md5.js";
	export default {

		data() {
			return {
				type: 3, // 判断当前页面 1 = 账号登录   2 = 验证码登录（输入手机号）  3 = 验证码登录（输入验证码）
				passShow: true,
				prove: '',
				item: 60,
				account: '',
				isBindAuth: false,
				pwd: '',
				code: '',
				state: ''
			}
		},
		onLoad(e) {
			console.log(e)
			this.type = e.type
		},
		mounted() {
			this.code = ''
			this.state = 'index'
			this.code = this.getUrlCode().code // 截取code
			this.state = this.getUrlCode().state
			// 此时为授权回调
			if (this.code != null && this.code != ''){
				this.isBindAuth = true
				// 拿到CODE之后请求绑定微信号
				this.$request({
					url: this.$api.auth.bindWxId+`?wxcode=${this.code}`,
					method: 'get',
				}).then(res=>{
					console.log('res',res)
					if(res.code == 200) {
						uni.showToast({
							title:"绑定成功",
							icon: 'none'
						})
						// todo 跳转至首页
						uni.reLaunch({
							url:'/pages/index/index'
						})
					} else if(res.code == 201) {
						uni.showToast({
							title:'该账号已绑定其他账号',
							icon: 'none'
						})
						// 清空缓存并重新进入登录
						uni.clearStorageSync()
						setTimeout(()=>{
							uni.reLaunch({
								url: '/pages/signIn/logOn?type=1'
							})
						}, 1000);
					} else {
						uni.showToast({
							title:'请关注公众号后重试',
							icon: 'none'
						})
						// 清空缓存并重新进入登录
						uni.clearStorageSync()
						setTimeout(()=>{
							uni.reLaunch({
								url: '/pages/signIn/logOn?type=1'
							})
						}, 1000);
					}
				})
			}
		},
		methods: {
			 pass(){
				 this.passShow = !this.passShow
			 },
			 
			 // 验证码登录显示
			 verificationShow(){
				 this.type = 2
			 },
			 getUrlCode() { // 截取url中的code方法
			 	var url = location.search
			 	this.winUrl = url
			 	var theRequest = new Object()
			 	if (url.indexOf("?") != -1) {
			 		var str = url.substr(1)
			 		var strs = str.split("&")
			 		for (var i = 0; i < strs.length; i++) {
			 			theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
			 		}
			 	}
			 	return theRequest
			 },
			 to(){
				 if(this.account == '' || this.pwd == ''){
					 this.$u.toast('请输入账号密码')
					 return
				 };
				 if(this.isBindAuth) return
				 let md5Pwd = md5.hex_md5(this.pwd)
				 let appid = 'wxac0afae9104e5e4d'
				 // let local = 'http://192.168.1.16:8081/pages/signIn/logOn?type=1'
				 let local = 'https://xiaoyi.xunsoftware.com/pages/signIn/logOn?type=1'
				 this.$request({
				 	url: (this.$api.auth.getToken+`?tenantId=&username=${this.account}&password=${md5Pwd}&grant_type=password&scope=all&type=account`),
					method:"post"
				 }).then(res=>{
					 console.log(res);
					 // 如果是平台租户角色的话不允许登录
					 if(res && res.tenant_id == '000000') {
					   this.$refs.uNotify.show({
							 top: 10,
							 type: 'error',
							 color: '#000',
							 bgColor: '#e8e8e8',
							 message: '该账号不属于学校医生',
							 duration: 1000 * 3,
							 fontSize: 20,
							 safeAreaInsetTop:true
						 })
						 return
					 }
					 localStorage.setItem('tenant_id', res.tenant_id) // 获取登录之后的租户id
					 localStorage.setItem("access_token", res.access_token)
					 localStorage.setItem('user',JSON.stringify(res))
					 // 请求绑定该账号和当前微信号
					 uni.showLoading({
					 	title:"正在绑定到此微信号"
					 })
					 setTimeout(()=>{
						 wx.hideLoading()
						 let redirectType = 'index'
						 window.location.href =
						 	// `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local1)}&response_type=code&scope=snsapi_userinfo&state=${redirectType}#wechat_redirect`
						 	`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=${redirectType}#wechat_redirect`
					 },1500)
					
				 }).catch(err => {
					 this.$u.toast(err.error_description)
				 })
			 },
			 
			 toVer(){
				 this.type = 3
				 this.countDown()
			 },
			 
			 countDown(){
				this.item = 60
				setInterval(()=>{
					if(this.item > 0){
						this.item--
					}
				}, 1000)
			 },
			 
			 upUtem(){
				 if(this.item != 0){
					 this.$u.toast('短时间无法重复获取')
					 return
				 }
				 this.countDown()
			 },
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding: 50rpx 65rpx;
		/* background-color: #D9D9D9; */
		background-color: #fff !important;
	}
	
	.title{
		font-size: 56rpx;
		font-weight: 600;
		margin-bottom: 65rpx;
		margin-top: 80rpx;
	}
	
		
	.an{
		height: 112rpx;
		color: #fff;
		background-color: #846FFE;
		text-align: center;
		line-height: 112rpx;
		margin: 0 auto;
		border-radius: 64rpx;
		font-size: 32rpx;
	}
	.forbidden{
		background-color: #846FFE77;
	}
	
	.w{
		font-size: 25rpx;
		color: rgba(0,0,0,0.60);
		margin-top: 476rpx;
	}
	
	.inp{
		height: 100rpx;
		background: #ededed;
		border-radius: 64rpx;
		display: flex;
		align-items: center;
		padding-left: 95rpx;
		margin-bottom: 52rpx;
		position: relative;
		
		.i{
			position: absolute;
			right: 52rpx;
		}
		
		text{
			position: absolute;
			left: 96rpx;
			font-size: 32rpx;
			color: rgba(0,0,0,0.38);
		}
	}
	
	.ver{
		position: absolute;
		top: 10rpx;
		right: 64rpx;
		font-size: 28rpx;
		
	}
	
	.code-u{
		position: relative;
		display: flex;
		justify-content: space-between;
		margin-bottom: 52rpx;
		
		.code{
			width: 112rpx;
			height: 112rpx;
			background: #ededed;
			border-radius: 20rpx;
		}
		
		.prove{
			position: absolute;
			font-size: 52rpx;
			top: 25rpx;
			left: 28rpx;
		}
	}
	
	.countDown{
		text-align: center;
		font-size: 32rpx;
		color: rgba(0,0,0,0.60);
		margin-top: 38rpx;
	}
</style>