uni-app 第三方微信登录

<template>
	<view class="page page-fill">
		<!-- header start -->
		<view class="header">

			<view v-if="userLogin">
				<image :src="userphoto" class="face"></image>
			</view>
			<view v-else>
				<image src="../../static/userfalse.png" class="face"></image>
			</view>
			<view class="info-wapper" v-if="userLogin">
				<view class="nickname">{{nickname}}</view>
				<view class="nav-info">city: {{city}}</view>
			</view>
			<view class="info-wapper" v-else>
				<view class="regist-login" data-logintype="weixin" @click="appAuthLogin">微信登录</view>
			</view>

			<view class="set-wapper">
				<image src="../../static/setting.png" mode="" class="settings"></image>
			</view>
		</view>
		<!-- header end -->

		<view class="page-content">
			<!-- 服务 start -->
			<view class="service-wapper">
				<view class="service-item" @click="outLogin">
					<image src="../../static/daifukuan2.png" mode="widthFix" class="service-icon"></image>
					<text class="service-title">退出登录</text>
					<image src="../../static/come.png" mode="widthFix" class="service-come"></image>
				</view>
			</view>
			<!-- 服务 end -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userLogin: false,
				nickname: "",
				city: "",
				userphoto: ""
			}
		},
		onLoad() {
		},
		onShow() {
			let userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.userLogin = true;
				this.nickname = userInfo.nickName;
				this.city = userInfo.city;
				this.userphoto = userInfo.avatarUrl;
			} else {
				this.userLogin = false;
			}
		},
		methods: {
			appAuthLogin(e) {
				//获取用户的登录类型
				var logintype = e.currentTarget.dataset.logintype;
				//授权登录
				uni.login({
					provider: logintype,
					success: (res) => {
						//授权成功后获取用户信息
						uni.getUserInfo({
							provider: logintype,
							success: (res) => {
								
								uni.showToast({
									title: "登录成功",
									success: (res) => {
										uni.switchTab({
											url: "../index/index"
										})
									}
								})
								
								var me = this;
								me.userLogin = true;
								uni.setStorageSync("userInfo", res.userInfo);
							}
						})
					}
				})

			},
			onPullDownRefresh() {
				//延迟加载,防止提示框出不来
				setTimeout(function() {
					uni.showToast({
						title: "数据加载成功",
					})
				}, 200)
				//导航条的加载动画，pages.json里如果不禁用的话
				uni.showNavigationBarLoading();
				//成功获取数据后结束下拉刷新
				uni.stopPullDownRefresh();
				//成功获取数据后隐藏加载动画
				uni.hideNavigationBarLoading();
			},
			//退出登录
			outLogin() {
				var me = this;
				uni.showModal({
					title: '退出登录',
					content: '确定要退出登录吗',
					success: function(res) {
						if (res.confirm) {
							me.userLogin = false;
							uni.removeStorageSync('userInfo');
							uni.showToast({
								title: "成功退出登录"
							})
						}
					}
				});

			}
		},


	}
</script>

<style>
	@import url("me.css");
</style>