zhibo/pages/auth/h5WxLogin.vue

<template>
	<view class="content">
		<view  class="force-login-wrap">
			<view class="force-login__content y-f">
				<view class="logo">
					<view class="logo-img">
						<image src="/static/logo.png"></image>
					</view>
					<view class="title">直播</view>
				</view>
				<view class="login-notice">为了提供更优质的服务，请先登录</view>
				<view class="btns">
					<view class="author-btn" @click="loginByMp()">微信授权登录</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const isWechat = () => {
	return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
}
// import {  loginByMp } from '@/api/user'
import {  loginByWeChat } from '@/api/login'
export default {
	data() {
		return {
			code:null,
		}
	},
	onLoad(option) {
		this.getWechatCode();
		// setTimeout(()=>{
		// 	this.goToLanch();
		// },2000);
	},
	onUnload() {
		
	},
	mounted() {

	},
	methods: {
		loginByMp(){
			if(this.code==null){
				return;
			}
			uni.showLoading({
				title:"处理中..."
			});
			let that=this;
			var data={code:this.code}
			loginByWeChat(data).then(res => {
					uni.hideLoading();
					if(res.code==200){
						uni.setStorageSync('AppToken',res.token);
						uni.setStorageSync('userInfo',JSON.stringify(res.user));
						uni.$emit('refreshIM');
						that.goToLanch();
					}
					else{
						uni.showToast({title: res.msg,icon: 'none'});
					}
				},
				err => {
				}
			);
		},
		getWechatCode() {
			if (isWechat) {
				let appid = "wx9ea36eecd281bcd3"; //微信APPid
				let code = this.getUrlCode().code; //是否存在code
				let local = window.location.href;
				if (code == null || code === "") {
				  //不存在就打开上面的地址进行授权
					window.location.href =
					"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
					appid +
					"&redirect_uri=" +
					encodeURIComponent(local) +
					"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
				} else {
					this.code = code;
				}
			  }
		},
		getUrlCode(){
			// 截取url中的code方法
			var url = location.search;
			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];
				}
			}
			console.log(theRequest);
			return theRequest;
		},
		goToLanch(){
			let beforLoginUrl=uni.getStorageSync('beforLoginPage');
			console.log("beforLoginUrl:"+beforLoginUrl);
			uni.reLaunch({
				url:beforLoginUrl
			});
		}
		 
	},
}
</script>

<style lang="scss">
.container {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	position: relative;
	
}

.force-login-wrap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 11111;
	top: 0;
	
	.force-login__content {
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%, -50%);
		.logo{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.logo-img{
				border: 4upx solid #FFFFFF;
				box-shadow: 0px 5px 15px 2px rgba(0,0,0,0.1);
				border-radius: 50%;
				width: 80px;
				height: 80px;
				image{
					border-radius: 50%;
					width: 100%;
					height: 100%;
					overflow: hidden;
				}
			}
			
			.title{
				margin-top: 20rpx;
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000;
				margin-bottom: 30rpx;
			}
		}
		 
		.login-notice {
		  font-size: 28rpx;
		  font-family: PingFang SC;
		  font-weight: 400;
		  color: #000;
		  line-height: 44rpx;
		  width: 500rpx;
		  text-align: center;
		  margin-bottom: 80rpx;
		}
		.btns{
			position: relative;
			width: 630rpx;
			height: 80rpx;
			.author-btn{	
				display: flex;
				justify-content: center;
				align-items: center;
				z-index:100;
				position: absolute;
				width: 630rpx;
				height: 80rpx;
				background: linear-gradient(to right, #FF5C03 0%, #E2C99E 100%);
				background: -moz-linear-gradient(to right, #FF5C03 0%, #E2C99E 100%);
				// box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				border-radius: 40rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}
		}
		
		 
	}
}
 
</style>