JianjianStreet-H5/pages/my/login-kehu.vue

<template>
	<view>
		<WxBLogin v-if="code === ''"/>
		<view v-else class="login">
		<!-- <view  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();
			}
		},

		// 隐藏微信h5的标题栏
		onReady() {
			this.$com.displayNav();
		},
		methods:{
			seeXieyi(){
				uni.navigateTo({
					url:'/pages/my/xieyi'
				})
			},
			logionClick(){
				let actoken ="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2OTAxNzI3NjAsInVzZXJuYW1lIjoib2ROdHc2dEJVNmMxenlnU1lmb2d4ZWdTX2xxbyJ9.btUCZf5Jhx6XZIDLqI8TVTa00edZ989sxzNXe0V0eiw";
				this.$store.commit('set_userToken', actoken);
				uni.switchTab({
					url:'/pages/my/index'
				})
				let did = uni.getStorageSync("did");
				if (did) {
					uni.navigateTo({
						url:'/pages/home/course-detial?id=' + did
					})
				} else {
					uni.switchTab({
						url:'/pages/my/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/course-detial?id=' + did
							})
						} else {
							uni.navigateTo({
								url:'/pages/my/my-xiansuo-now'
							})
						}
					}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://job.java996.icu/pages/my/login-kehu');
				// //这是我们公众号的appid
				// let appid = 'wx6fb4a17b28186d58';
				// //修改授权参数
				// 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>