MeiMeiZhuan/pages/public/wxLogin.vue

<template>
	<view class="content">
		<!-- #ifndef H5 -->
		<!-- <image class="bg-img" :src="baseURL+urlFile+'/img/img09.png'" mode=" scaleToFill"></image> -->
		<image class="logo-img-box" src="https://mmz.liuniu946.com/statics/img/img02.png" >
		</image>
		<image class="logo-img" src="https://mmz.liuniu946.com/statics/img/img48.png" mode=" aspectFit"></image>
		<button class="userInfo"  type="warn" open-type="getUserInfo" @getuserinfo='userInfoData'>
			<text class="iconfont iconweixin"></text>
			<text >
			微信授权登录
			</text>
		</button>
		<!-- <button class="userInfo" @click="show = true" v-if="show != true">点击</button> -->
		<!-- <view class="login_input flex-start" v-if="show == true" @click="isshow = true">
			<view class="login_img"><image src="/static/img/img06.png"></image></view>
			<view class="login_name"><input class="uni-input" type="text" v-model="spread" focus placeholder="请重复邀请人的id" /></view>
		</view> -->
		<!-- #endif -->
	</view>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
// #ifdef MP-WEIXIN
import { loginWinxinMp } from '@/utils/wxMinProgram';
import { wechatMpAuth } from '@/api/wx';
// #endif
// #ifdef H5
import { loginWinxin } from '@/utils/wxAuthorized';
// #endif
import { getUserInfo, bangding } from '@/api/login.js';
export default {
	data() {
		return {
			userInfo: {}, //授权用户信息
			code: '', //授权code
			selected: false,
			disabled: false,
			MaskShow: false,
			address: '',
			cache_key: '',
			iv: '',
			encryptedData: '',
			loding:false,//判断是否在点击中
		};
	},
	onShow(option) {
		this.loadData();
	},
	methods: {
		...mapMutations(['login', 'setUserInfo']),
		// 获取微信登录信息
		loadData() {
			// #ifdef H5
			loginWinxin();
			// #endif
			// #ifdef MP-WEIXIN
			let obj = this;
			wx.login({
				success(e) {
					obj.code = e.code;
				},
				fail: function(e) {
				}
			});
			// #endif
		},
		// 用户确认授权
		userInfoData(e) {
			this.disabled = true;
			console.log(e,55)
			let user = e.detail;
			user.code = this.code;
			if(!this.loding){
				this.loadMp(user);
			}
		},
		// #ifdef MP-WEIXIN
		// 登录
		loadMp(option) {
			let obj = this;
			obj.loding = true;
			// 获取登录授权页数据
			// 获取推广人id
			let spread_spid = uni.getStorageSync('spread') || '';
			let spread_code = uni.getStorageSync('spread_code') || '';
			wechatMpAuth({
				code: option.code,
				iv: option.iv,
				encryptedData: option.encryptedData,
				spread_spid: spread_spid,
				spread_code: spread_code,
				login_type:'routine'
			}).then(({ data }) => {
				obj.loding = false;
				obj.wchatAuth(data);
			}).catch((e) => {
				obj.loding = false;
			});
		},
		// #endif
		wchatAuth(data) {
			let obj = this;
			// 保存token
			uni.setStorageSync('token', data.token);
			obj.cache_key = data.cache_key;
			// 获取用户基础信息
			getUserInfo({}).then(e => {
				obj.login();
				// 保存返回用户数据
				obj.setUserInfo(e.data);
				obj.ToIndex();
			});
		},
		// 绑定手机号
		// PhoneNumber(e) {
		// 	let obj = this;
		// 	obj.MaskShow = false;
		// 	(obj.iv = e.detail.iv), (obj.encryptedData = e.detail.encryptedData);
		// 	bangding({
		// 		flag: 1,
		// 		cache_key: obj.cache_key,
		// 		code: obj.code,
		// 		iv: obj.iv,
		// 		encryptedData: obj.encryptedData
		// 	}).then(function(e) {
		// 		if (e.data.is_bind == 1) {
		// 			console.log('bangding1')
		// 			bangding({
		// 				flag: 1,
		// 				cache_key: obj.cache_key,
		// 				code: obj.code,
		// 				iv: obj.iv,
		// 				encryptedData: obj.encryptedData,
		// 				step: 1
		// 			})
		// 				.then(function(e) {
		// 					// 获取用户基础信息
		// 					obj.GetUser();
		// 					obj.$api.msg(e.msg);
		// 					obj.$nextTick(function() {
		// 						obj.ToIndex();
		// 					});
		// 				})
		// 				.catch(e => {
		// 					console.log(e);
		// 				});
		// 		} else {
		// 			console.log('bangding2')
		// 			obj.$api.msg(e.msg);
		// 			// 获取用户基础信息
		// 			obj.GetUser();
		// 			obj.$api.msg(e.msg);
		// 			obj.$nextTick(function() {
		// 				obj.ToIndex();
		// 			});
		// 		}
		// 	});
		// },
		// GetUser() {
		// 	// 获取用户基础信息
		// 	getUserInfo({})
		// 		.then(({ data }) => {
		// 			this.setUserInfo(data);
		// 		})
		// 		.catch(e => {
		// 			console.log(e);
		// 		});
		// },
		ToIndex() {
			let obj = this;
			let ur = uni.getStorageSync('present') || '/pages/index/index';
			// 用于处理缓存bug
			if (ur == 'pages/product/product') {
				ur = '/pages/index/index';
			}
			uni.switchTab({
				url: ur,
				fail(e) {
					uni.navigateTo({
						url: ur,
						fail(e) {
							uni.navigateTo({
								url: '/pages/index/index'
							});
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	height: 100%;
}

.login_input {
	background:#f2f2f2;
	padding: 35rpx 25rpx;
	margin-bottom: 45rpx;
	border-radius: 15rpx;
	.login_img image {
		height: 37rpx;
		width: 31rpx;
		margin-right: 30rpx;
	}
	.login_name {
		color: #333333;
		.uni-input {
			text-align: left;
			width: 380rpx;
			font-size: 30rpx !important;
			color:#666666;
		}
		.code {
			color: #FC4141;
			font-size: 23rpx;
			border-left: 1px solid #666666;
			width: 180rpx;
			flex-shrink: 0;
			text-align: center;
		}
	}
}



.bg-img,
.logo-img-box {
	width: 750rpx;
	height: 600rpx;
}
.logo-img {
	position: absolute;
	top:180rpx;
	left:255rpx;
	width: 240rpx;
	height: 240rpx;
}
.userInfo {
	margin: 0 50rpx;
	margin-top: 100rpx;
	color: #FFFFFF;
	border-radius: 10rpx;
	background-color: $base-color !important;
}
</style>