shicai/pages/public/wxLogin.vue

<template>
	<view class="content">
		<view class="back-img"><image src="http://shicai.liuniu946.com/static/img/img22.png" model="scoll-img"></image></view>
		<view class="back-name"><image src="http://shicai.liuniu946.com/static/img/img24.png" model="scoll-img"></image></view>
		<!-- <view class="name">美天选菜</view>
	   <view class="tip">台州买菜用美天</view> -->
		<button class="weixin" open-type="getUserInfo" @getuserinfo="userInfoData">微信用户一键登录</button>
		<!-- <view class="login" @click="Tologin">手机号码登录</view> -->
		<view class="info">
			登录代表你已同意
			<view class="text">
				<view class="text" @click="agreement">美天选菜用户协议，</view>
				<view class="text" @click="privacy">美天选菜隐私协议</view>
			</view>
		</view>
		<view class="Mask" v-show="MaskShow">
			<view class="Mask-box">
				<view class="title">申请获取您的手机号</view>
				<view class="text">为了方便您的取货和我们的送货，并获取更多优惠活动,需要您的手机授权</view>
				<button class="weixin" open-type="getPhoneNumber" @getphonenumber="PhoneNumber">获取手机号授权</button>
			</view>
		</view>
	</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: ''
		};
	},
	onShow(option) {
		this.loadData();
	},
	methods: {
		...mapMutations('user',['login', 'setUserInfo']),
		// 获取微信登录信息
		loadData() {
			// #ifdef H5
			loginWinxin();
			// #endif
			// #ifdef MP-WEIXIN
			let obj = this;
			wx.login({
				success(e) {
					obj.code = e.code;
				},
				fill: function(e) {}
			});
			// #endif
		},
		// 用户确认授权
		userInfoData(e) {
			let user = e.detail;
			user.code = this.code;
			this.loadMp(user);
			this.disabled = true;
		},
		// #ifdef MP-WEIXIN
		// 登录
		loadMp(option) {
			let obj = this;
			// 获取登录授权页数据
			// 获取推广人id
			let spread_spid = uni.getStorageSync('spread') || '';
			let spread_code = uni.getStorageSync('spread_code') || '';
			// uni.showModal({
			//     title: 'spread_spid',
			//     content: spread_spid,
			// });
			wechatMpAuth({
				code: option.code,
				iv: option.iv,
				encryptedData: option.encryptedData,
				spread_spid: spread_spid,
				spread_code: spread_code
			}).then(({ data }) => {
				obj.wchatAuth(data);
			});
		},
		// #endif
		wchatAuth(data) {
			let obj = this;
			// 保存token
			uni.setStorageSync('token', data.token);
			obj.cache_key = data.cache_key;
			uni.setStorageSync('cache_key', data.cache_key);
			// 获取用户基础信息
			getUserInfo({}).then(e => {
				obj.login();
				// 保存返回用户数据
				obj.setUserInfo(e.data);
				// obj.address = uni.getStorageSync('addressData') || '';
				if (e.data.phone == null) {
					obj.MaskShow = true;
				} else {
					obj.ToIndex();
				}
			});
		},
		// 绑定手机号
		PhoneNumber(e) {
			let obj = this;
			obj.MaskShow = false;
			(obj.iv = e.detail.iv), (obj.encryptedData = e.detail.encryptedData);
			
			uni.setStorageSync('code', obj.code);
			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);
					console.log(data,11)
					console.log(uni.getStorageSync('userInfo'),55)
				})
				.catch(e => {
					console.log(e);
				});
		},
		ToIndex() {
			let obj = this;
			// if (obj.address == '') {
			// 	uni.navigateTo({
			// 		url: '/pages/index/index'
			// 	});
			// } else {
				console.log(11111111)
				let ur = uni.getStorageSync('present') || '/pages/index/index';
				// 用于处理缓存bug
				if (ur == 'pages/product/product') {
					console.log(2222222)
					ur = '/pages/index/index';
				}
				uni.switchTab({
					url: ur,
					fail(e) {
						uni.navigateTo({
							url: ur,
							fail(e) {
								uni.navigateTo({
									url: '/pages/index/index'
								});
							}
						});
					}
				});
				// let userInfo = uni.getStorageSync('userInfo');
				// if ( userInfo.is_promoter == 1 ) {
				// 	uni.navigateTo({
				// 		url: '/pages/groupBooking/index',
				// 		fail(e) {
				// 			uni.navigateTo({
				// 				url: '/pages/index/index'
				// 			})
				// 		}
				// 	})
				// } else {
				// 	uni.switchTab({
				// 		url: ur,
				// 		fail(e) {
				// 			uni.navigateTo({
				// 				url: ur,
				// 				fail(e) {
				// 					uni.navigateTo({
				// 						url: '/pages/index/index'
				// 					});
				// 				}
				// 			});
				// 		}
				// 	});
				// }
			// }
		},
		//手机号登录
		Tologin() {
			uni.navigateTo({
				url: '/pages/public/login'
			});
		},
		// 菜佬用户协议
		agreement() {
			uni.navigateTo({
				url: '/pages/public/agreement'
			});
		},
		//隐私协议
		privacy() {
			uni.navigateTo({
				url: '/pages/public/privacy'
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #ffffff;
	height: 100%;
	.content {
		height: 100%;
		text-align: center;
		.Mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(51, 51, 51, 0.7);
			.Mask-box {
				margin: auto;
				margin-top: 320rpx;
				padding: 50rpx 50rpx;
				width: 80%;
				height: 450rpx;
				top: 500rpx;
				left: 10%;
				background-color: #ffffff;
				border-radius: 15rpx;
				.title {
					font-size: 35rpx;
					font-weight: 700;
				}
				.text {
					font-size: 30rpx;
					color: #848484;
					padding-top: 50rpx;
				}
			}
		}
	}
}
.back-img {
	width: 100%;
	height: 501rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.back-name {
	margin: 0rpx auto;
	margin-top: 50rpx;
	width: 239rpx;
	height: 98rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.name {
	color: #48ac34;
	font-size: 55rpx;
	font-weight: bold;
	letter-spacing: 15rpx;
	margin-top: 35rpx;
}
.tip {
	color: #48ac34;
	font-weight: bold;
	font-size: 28rpx;
	letter-spacing: 30rpx;
}
.weixin {
	background: linear-gradient(90deg, rgba(36, 214, 78, 1), rgba(45, 187, 89, 1));
	width: 65%;
	margin: 70rpx auto;
	color: #ffffff;
	border-radius: 50rpx;
	border: none;
}
.login {
	font-size: 26rpx;
	font-weight: 500;
	text-decoration: underline;
}
.info {
	position: fixed;
	bottom: 60rpx;
	margin: 0rpx auto;
	width: 100%;
	font-size: 26rpx;
	.text {
		color: #2cbf57;
		display: inline-block;
	}
}
</style>