ylrz_scrm_course_h5/pages/auth/login.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="headerImg"></image>
					</view>
				</view>
				<view class="login-notice">允许微信授权后，可体验更多功能</view>
				<view class="btns" v-if="appid">
					<view class="author-btn" @click="loginByMp()">微信授权登录</view>
				</view>
			</view>
		</view>
		<view class="footer-tips">重庆云联融智提供技术支持</view>
	</view>
</template>

<script>
const isWechat = () => {
	return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
}
import { getRealLink } from '@/api/course.js'
export default {
	data() {
		return {
			sortLink: '',
			appid: "",
			code:null,
			realLink: '',
			headerImg:''
		}
	},
	onLoad(option) {
		this.sortLink = option.sortLink || ''
		this.code = option.code || ''
		this.getRealLink()
	},
	methods: {
		getRealLink() {
			getRealLink({sortLink:this.sortLink}).then(res=>{
				this.headerImg = res.headerImg||''
				if(res.code == 200 && res.realLink) {
					this.realLink = res.realLink
					this.appid = res.config.mpAppId
					if(this.code) {
						this.loginByMp()
					}
				} else {
					uni.showToast({
						title: '课程已过期或链接无效',
						icon: 'none'
					});
				}
			}).catch(err=>{
				if(err.code ==='ECONNABORTED'){
					uni.showToast({
						title: '请求超时，请检查网络后重试',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: '发生错误，请稍后再试',
						icon: 'none'
					});
				}
			})
		},
		loginByMp(){
			if(this.code==null || !this.code){
				this.getWechatCode()
				return;
			}
			const url = this.realLink + '&code=' + this.code
			window.location.replace(url)
		},
		getWechatCode() {
			if (isWechat) {
				let appid = this.appid; //微信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;
				}
			  }
		},
		// 截取url中的code方法
		getUrlCode(){
			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];
				}
			}
			return theRequest;
		}
	}
}
</script>

<style lang="scss">
.container {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	position: relative;
	
}
.footer-tips {
	width: 100%;
	position: absolute;
	bottom: 14rpx;
	left: 0;
	text-align: center;
	font-family: PingFang SC,PingFang SC;
	font-weight: 500;
	font-size: 12px;
	color: #bbb;
}
.force-login-wrap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 11111;
	top: 0;
	
	.force-login__content {
		width: 100%;
		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;
		  text-align: center;
		  margin-top: 20rpx;
		  margin-bottom: 80rpx;
		}
		.btns{
			position: relative;
			width: 630rpx;
			height: 80rpx;
			margin: 0 auto;
			.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>