dianpin-h5-4000-0827/pages/my/login-kehu.vue

<template>
	<view>
		<WxBLogin v-if="code === ''"/>
		<view v-else class="login">
			<view class="login-img flex align-center justify-center">
				<image src="@/static/img/logon-icon.png" mode=""></image>
			</view>
			<view class="login-title">汇智文化学苑</view>
			<view class="btn-box">
				<u-button v-if="code !== ''" text="微信授权登录"  :round="true" openType="getUserInfo" @click="logionClick" :customStyle="baomingStyle" :hairline="false" color="#00CCCC"></u-button>
				<u-button v-else="code === ''" text="获取登录权限"  :round="true" openType="getUserInfo" @click="logionClick" :customStyle="baomingStyle" :hairline="false" color="#00CCCC"></u-button>
			</view>
			<view class="tips flex align-center justify-between" @click="xieyiChoose = !xieyiChoose">
				<view>
					注册/登录即代表同意
					<text class="xieyi" @click.stop="seeXieyi">《用户协议与隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import WxBLogin from '@/components/run-component/wx-b-login.vue'
	export default{
		components: {
			WxBLogin
		},
		data(){
			return{
				xieyiChoose:true,
				code: '',
				did: '',
				vid:'',
				baomingStyle: {
					fontSize:"30rpx",
					fontWeight:"700",
					height: "100rpx",
					width: "480rpx"
				},
				baomingStyleQuxiao:{
					fontSize:"30rpx",
					fontWeight:"700",
					height: "100rpx",
					width: "480rpx",
					marginTop : "40rpx"
				}
			}
		},
		onLoad(err){
			if (err.vid) {
				this.$store.commit('set_ivcode', err.vid);
			}
			if (err.did) {
				uni.setStorageSync("did", err.did);
			}
			this.code = this.GetQueryString('code');
			if(!this.code){
				this.getwx_authorize();
			}
		},
		onShow() {
			if(uni.getStorageSync("set_userToken")){
				uni.navigateTo({
					url:'/pages/home/index'
				})
			}
		},

		// 隐藏微信h5的标题栏
		onReady() {
			this.$com.displayNav();
		},
		methods:{
			seeXieyi(){
				uni.navigateTo({
					url:'/pages/my/xieyi'
				})
			},
			logionClick(){
				// let actoken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2OTMzNjA0NDEsInVzZXJuYW1lIjoib1loZmFzdlY0RjVpMk5nWGR2cmU3akZwME5zTSJ9.KtxULfyzKVouBAWRe41AFEB3uSL_VTVU-lXpSGF-yw8";
				// this.$store.commit('set_userToken',actoken);
				// uni.navigateTo({
				// 	url:'/pages/home/index'
				// })
				// let did = uni.getStorageSync("did");
				// if (did) {
				// 	uni.navigateTo({
				// 		url:'/pages/home/index?id=' + did
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 		url:'/pages/home/index'
				// 	})
				// }
				if(this.code){
					//直接去登录发起请求
					this.toWxLogin()
				} else {
					//获取code 静默授权
					this.getwx_authorize();
				}
			},
			toWxLogin(code){
				this.vid= uni.getStorageSync("ivcode"); 
				this.$api('wxLogin',{code:this.code, vid: this.vid})
				.then(res=>{
					if(res.code == 200){
						this.$store.commit('set_userToken',res.result.token);
						this.$store.commit('set_userInfo',res.result.userInfo);
						let did = uni.getStorageSync("did");
						if (did) {
							uni.setStorageSync("did", null);
							uni.navigateTo({
								url:'/pages/home/index?id=' + did
							})
						} else {
							uni.navigateTo({
								url:'/pages/home/index'
							})
						}
					}else{
						this.$Toast(res.message)
					}
				}).catch(error=>{
					uni.showModal({
						content:JSON.stringify(error)
					})
				})
			},
			getwx_authorize(){
				console.log("进入了这")
				// this.logionClick()
				let vid = uni.getStorageSync("ivcode"); 
				//授权的回调地址
				let redirect_uri = encodeURIComponent('https://cmbms-h5.xzaiyp.top/pages/my/login-kehu');
				//这是我们公众号的appid
				let appid = 'wx77fe1fcd6471ecbe';
				//修改授权参数
				window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appid+'&redirect_uri='+redirect_uri+'&response_type=code&scope=snsapi_userinfo&state='+vid+'&connect_redirect=1#wechat_redirect';
			},
			//获取url中参数的方法
			GetQueryString(name) {
				var url = window.location.href;
				try {
					var cs = url.split('?')[1]; //获取?之后的参数字符串
					var cs_arr = cs.split('&'); //参数字符串分割为数组
					for (var i = 0; i < cs_arr.length; i++) { //遍历数组，拿到json对象
						if (cs_arr[i].split('=')[0] == name) {
							return cs_arr[i].split('=')[1];
						}
					}
					return "";
				} catch {
					return "";
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		background-size: 100% 100%;
		height: 70vh;
		padding-top: 154rpx;
		.login-title {
			margin-top: 40rpx;
			font-size: 34rpx;
			font-weight: 700;
			text-align: center;
			padding-bottom: 30rpx;
		}
		
		.login-img {
			image {
				border-radius: 50%;
				width:248rpx;
				height: 248rpx;
			}
		}
		
		.btn-box {
			margin-top: 136rpx;
		}
		
		.tips {
			width: 500rpx;
			position: fixed;
			bottom: 52rpx;
			left: 51%;
			transform: translate(-50%,0);
			font-size: 24rpx;
			color: #707070;
			.xieyi {
				color: #00CCFF;
			}
		}
		
	}
</style>