pinfen/pages/public/loginMethods.vue

<template>
	<view class="">
		<view class="flex other">
			<view class="fenge"></view>
			<view class="qita">其他方式登录</view>
			<view class="fenge"></view>
		</view>
		<!-- #ifndef APP-PLUS -->
		<view class="weixin" @click="wecahtLogin">
			<image src="../../static/icon/weichat.png" mode=""></image>
		</view>
		<view class="weixin_text" @click="wecahtLogin">微信登录</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<block v-if="!is_ios">
			<view class="weixin" @click="wecahtLogin('weixin')">
				<image src="../../static/icon/weichat.png" mode="scaleToFill"></image>
			</view>
			<view class="weixin_text" @click="wecahtLogin('weixin')">微信登录</view>
		</block>
		<block v-else>
			<view class="ios_login flex" @click="wecahtLogin('weixin')">
				<image class="loginIcon" src="../../static/icon/weichat.png" mode=" scaleToFill"></image>
				<text class="weixin_text">微信登录</text>
			</view>
			<view class="ios_login flex" @click="wecahtLogin('apple')">
				<image class="loginIcon" src="../../static/icon/appleIcon.png" mode=" scaleToFill"></image>
				<text class="weixin_text">Apple登录</text>
			</view>
		</block>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	// #ifdef APP-PLUS
	// loginWx,applelogin接口需要开发编写，基础项目中可能没有
	import {
		loginWx,
		applelogin
	} from '@/api/login.js';
	// #endif
	// #ifdef H5
	import {
		loginWinxin
	} from '@/utils/wxAuthorized';
	// #endif
	import {
		getUserInfo
	} from '@/api/user.js';
	export default {
		data() {
			return {
				// #ifdef APP-PLUS
				is_ios: false, //判断是否为ios手机
				// is_apple_login: false, //是否有ios授权登录功能
				// #endif
				successUrl:'/pages/home/index'
			};
		},
		created() {
			let obj = this;
			// #ifdef APP-PLUS
			let system = uni.getStorageSync('platform');
			console.log(system);
			// 判断是否为ios
			if (system == 'ios') {
				obj.is_ios = true;
			}
			// uni.getSystemInfo({
			// 	success(e) {
			// 		if (+e.system.split('.')[0] >= 13) {
			// 			obj.is_apple_login = true;
			// 		}
			// 	}
			// })
			// #endif
		},
		
		methods: {
			...mapMutations('user', ['setUserInfo', 'login']),
			wecahtLogin(type) {
				let obj = this;
				// #ifdef H5
				let weichatBrowser = uni.getStorageSync('weichatBrowser');
				if (weichatBrowser) {
					loginWinxin();
				}
				// #endif
				// #ifdef APP-PLUS
				uni.login({
					provider: type,
					success(e) {
						console.log('授权返回结果',e);
						uni.getUserInfo({
							provider: type,
							success(es) {
								console.log('用户信息',es);
								if (type === 'weixin') {
									loginWx(es.userInfo)
										.then(e => {
											console.log(e,'回调数据');
											uni.setStorageSync('token', e.data.token);
											getUserInfo({}).then(e => {
												obj.login();
												// 保存返回用户数据
												obj.setUserInfo(e.data);
												obj.$emit('onLogin',e.data)
											}).catch((e)=>{
												console.log('错误',e);
											});
										})
										.catch(e => {
											console.log(e);
											uni.showModal({
												content: JSON.stringify(e),
												success() {},
												fail() {}
											});
										});
								}
								if (type === 'apple') {
									console.log(es.userInfo);
									applelogin({
											account: es.userInfo.openId,
										})
										.then(function(e) {
											console.log(e, 'token')
											uni.setStorageSync('token', e.data.token);
											getUserInfo({}).then(e => {
												obj.login();
												// 保存返回用户数据
												obj.setUserInfo(e.data);
												//成功跳转首页
												uni.switchTab({
													url: obj.successUrl
												});
											});
			
										})
										.catch(function(e) {
											console.log(e);
										});
								}
			
							},
							fail(es) {
								console.log(es,'错误');
								uni.showModal({
									content: JSON.stringify(es),
									success() {
										// obj.login();
										// // 保存返回用户数据
										// obj.setUserInfo(e.data);
										// //成功跳转首页
										// uni.switchTab({
										// 	url: this.successUrl
										// });
									}
								});
							}
						});
					},
					fail(e) {
						console.log(e,'错误');
						uni.showModal({
							title: '提示',
							content: JSON.stringify(e),
							showCancel: false
						});
					}
				});
				// #endif
			},
		},
	};
</script>

<style  lang="scss">
	.other {
		margin-top: 60rpx;
	
		.fenge {
			width: 30%;
			height: 2rpx;
			background-color: #eeeeee;
		}
	
		.qita {
			font-size: 28rpx;
			color: #999999;
		}
	}
	.weixin {
		width: 75rpx;
		height: 75rpx;
		margin: 25rpx auto;
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.weixin_text {
		text-align: center;
		font-size: 28rpx;
		color: #999999;
	}
	/* #ifdef APP-PLUS */
	
	.ios_login {
		width: 260rpx;
		border-radius: 12rpx;
		justify-content: center;
		border: 1px solid #212121;
		margin: 24rpx auto;
		padding: 10rpx;
		background-color: #FFFFFF;
		.loginIcon {
			width: 50rpx;
			height: 50rpx;
		}
	
		.weixin_text {
			line-height: 1;
			margin-left: 20rpx;
			font-size: 24rpx !important;
			color: #212121 !important;
		}
	}
	
	/* #endif */
	/* #ifdef H5 */
	.ios_login {
		width: 350rpx;
		border-radius: 12rpx;
		justify-content: center;
		border: 1px solid #212121;
		margin: 24rpx auto;
		padding: 15rpx;
		background-color: #212121;
		color: #ffffff;
		font-size: 32rpx;
	
		.loginIcon {
			font-size: 35rpx;
			width: 35rpx;
			height: 35rpx;
		}
	
		.weixin_text {
			line-height: 1;
			margin-left: 20rpx;
			color: #ffffff !important;
		}
	}
	/* #endif */
</style>