qidong.vue 3.0 KB
<template>
	<div class="box">

		<div class="topimg">
			<image src="../../static/img/logo.png"></image>
		</div>
		<div class="bottom">
			<div class="bottom_btn">
				<button class='bottom_anniu' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo"
				 hover-class="none">
					授权登录
				</button>
			</div>
			<div class="quxiao" @click="cancel">取消</div>
		</div>

	</div>
</template>

<script>
	import app from "../../App.vue"
	export default {
		data() {
			return {
				code: "",
				nickname: "",
				avatar: "",

			}
		},
		methods: {
			// 暂不授权
			no_grant() {
				uni.navigateBack();
			},
			// 获取到code
			get_code() {
				let t = this;
				uni.login({
					provider: "weixin",
					success(r) {
						console.log(r.code)
						t.code = r.code
					}
				})
			},
			// 用code换去sessionkey和openid

			//第一授权获取用户信息===》按钮触发
			wxGetUserInfo() {
				let t = this;
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						console.log(infoRes)
						let param = {
							code: t.code,
							nickname: infoRes.userInfo.nickName,
							avatar: infoRes.userInfo.avatarUrl
						}
						// t.nickname = infoRes.nickname;
						// t.avatar=infoRes.userInfo.avatarUrl
						app.post("api/user/login", param, 'post')
							.then(res => {
								console.log(res,"返回token");
								 uni.setStorageSync('token', res.userInfo.token);
								 uni.setStorageSync("openid",res.openid);
								 uni.setStorageSync("re_id",1);
								// if(res.userInfo.re_id == 0){
								// 	uni.navigateTo({
								// 		url: '/pages/binding/binding'
								// 	});
								// }else{
									uni.switchTab({
										url: '/pages/dianshu/dianshu'
									});
								// }
							})
							.catch(err => {});
						// 	t avatar = infoRes.userInfo.avatarUrl; 
					},
					fail(res) {}
				});
			},
			
			// 取消登录
			cancel() {
				
				uni.switchTab({
					url: '/pages/dianshu/dianshu'
				})

			}

		},

		onLoad() {
			this.get_code()
		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.box {
		background: #fff;
	}

	.topimg {
		width: 180rpx;
		height: 200rpx;
		font-size: 0;
		margin: 250rpx auto 0;
	}

	.topimg image {
		width: 100%;
		height: 100%;
	}

	.bottom_btn {
		width: 580rpx;
		height: 100rpx;
		background: rgba(243, 152, 0, 1);
		box-shadow: 0rpx 4rpx 18rpx rgba(0, 0, 0, 0.04);
		opacity: 1;
		border-radius: 10rpx;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 100rpx;
		margin: 454rpx auto 0;
	}

	button {
		width: 580rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border: none;
		outline: none;
		background: transparent;
		color: #fff;
		font-size: 32rpx;
	}

	button::after {
		border: none;
		background: transparent;
	}

	.quxiao {
		width: 580rpx;
		height: 100rpx;
		border: 2rpx solid rgba(243, 152, 0, 1);
		opacity: 1;
		border-radius: 10rpx;
		color: #F39800;
		font-size: 32rpx;
		text-align: center;
		line-height: 100rpx;
		margin: 40rpx auto 0;
	}
</style>