newXLSC/pages/public/wxLogin.vue

<template>
	<view class="content">
		<!-- #ifndef H5 -->
		<view class="logo-img-box">
			<image class="logo-img" src="../../static/img/logo.png" mode=" aspectFit"></image>
			<!-- <button class="userInfo" type="warn" @click="userInfoData()" :class="{'nocaction': isclick}">
				<text class="iconfont iconweixin"></text>
				<text>
					微信授权登录
				</text>
			</button> -->
			<view class="two" @click="checkboxChange">
				<radio style="transform:scale(0.7)" color="#f65067" :checked="istype" />
				我已阅读并同意
				<text @click.stop="mzss">《隐私政策》</text>
			</view>
			<button class="userInfo" :class="{'nocaction': isclick}" open-type="getPhoneNumber"
				@getphonenumber="decryptPhoneNumber" v-if="istype">
				<text class="iconfont iconweixin"></text>
				<text>
					微信用户一键登录
				</text>
			</button>
			<button class="userInfo" :class="{'nocaction': true}" v-if="!istype">
				<text class="iconfont iconweixin"></text>
				<text>
					微信用户一键登录
				</text>
			</button>
		</view>
		<!-- #endif -->
		<uni-popup ref="popup" type="center">
			<scroll-view scroll-y="true" class="mzsm-wrap">
				<view class="" style="font-size: 28rpx;text-align: center;padding: 20rpx 0;">
					隐私政策
				</view>
				<view style="white-space: pre-line;">
					本指引是想亮商城小程序开发者“台州六牛传媒策划有限公司”（以下简称“开发者”）为处理你的个人信息而制定。
					开发者处理的信息
					· 为了便于小程序内展示用户信息，且方便线下处理客诉问题作为一个参考值，开发者将在获取你的明示同意后，收集你的微信昵称、头像。
					
					· 为了便于给用户推荐匹配度更高的商品，开发者将在获取你的明示同意后，收集你的位置信息。
					
					· 为了用户下单需求，方便处理物流、售后等问题，开发者将在获取你的明示同意后，收集你的手机号。
					
					· 为了部分场景下用户对于素材信息主动保存，开发者将在获取你的明示同意后，使用你的相册（仅写入）权限。
					
					· 开发者收集你选中的照片或视频信息，用于用户发表评论时可做出更具象的描述。
					
					· 开发者收集你的地址，用于用户下单需求，方便处理物流、售后等问题。
					
					· 开发者收集你的身份证号码，用于用户下单需求，根据商家的到店使用需求。
					
					第三方插件信息/SDK信息
					为实现特定功能，开发者可能会接入由第三方提供的插件/SDK。第三方插件/SDK的个人信息处理规则，请以其公示的官方说明为准。探店台州严选小程序接入的第三方插件信息/SDK信息如下：<br />
					
					插件名称：小程序直播组件
					
					插件提供方名称: 深圳市腾讯计算机系统有限公司
					
					插件名称：微信支付券
					
					插件提供方名称: 财付通支付科技有限公司
					
					第三方服务商信息
					想亮商城小程序由浙江六牛科技有限公司代为开发，开发者保证，浙江六牛科技有限公司将在本指引规定范围内处理你的个人信息。
					
					你的权益
					关于你的个人信息，你可以通过以下方式与开发者联系，行使查阅、复制、更正、删除等法定权利。
					
					- 邮箱: 1334991396@qq.com
					
					开发者对信息的存储
					开发者承诺，除法律法规另有规定外，开发者对你的信息的保存期限应当为实现处理目的所必要的最短时间。
					
					信息的使用规则
					开发者将会在本指引所明示的用途内使用收集的信息
					
					如开发者使用你的信息超出本指引目的或合理范围，开发者必须在变更使用目的或范围前，再次以公告方式告知并征得你的明示同意。
					
					信息对外提供
					开发者承诺，不会主动共享或转让你的信息至任何第三方，如存在确需共享或转让时，开发者应当直接征得或确认第三方征得你的单独同意。
					
					开发者承诺，不会对外公开披露你的信息，如必须公开披露时，开发者应当向你告知公开披露的目的、披露信息的类型及可能涉及的信息，并征得你的单独同意。
					
					若你认为开发者未遵守上述约定，或有其他的投诉建议、或未成年人个人信息保护相关问题，可通过以下方式与开发者联系；或者向微信进行投诉。
					- 邮箱: 1334991396@qq.com
					
					更新日期：2022年6月24日 
					生效日期：2022年6月24日
				</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getUserInfo,
		bangding
	} from '@/api/login.js';
	// #ifdef H5
	import {
		loginWinxin
	} from '@/utils/wxAuthorized';
	// #endif
	// #ifdef MP-WEIXIN
	import {
		loginWinxinMp
	} from '@/utils/wxMinProgram';
	import {
		wechatMpAuth
	} from '@/api/wx';
	// #endif
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				userInfo: {}, //授权用户信息
				code: '', //授权code
				isclick: false, //是否点击了
				isShow:false,
				istype: false
			};
		},
		onLoad(option) {
			// #ifdef H5
			this.loadData();
			// #endif
			
		},
		computed: {
			// ...mapState(['baseURL','urlFile']) 
		},
		methods: {
			// ...mapMutations(['login', 'setUserInfo']),
			checkboxChange() {
				this.istype = !this.istype;
				console.log(this.istype);
			},
			mzss() {
				this.$refs.popup.open();
			},
			mzssClose() {
				this.$refs.popup.close();
			},
			decryptPhoneNumber(e) {
				console.log(e)
				let obj = this
				if(obj.isclick) {
					return
				}
				let spread_spid = uni.getStorageSync('spread') || '';
				// #ifdef MP
				let spread_code = uni.getStorageSync('spread_code') || '';
				// #endif
				obj.isclick = true
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') { //用户点击拒绝
					// uni.showToast({
					// 	title: '请绑定手机号',
					// 	duration: 5000,
					// 	icon: 'none',
					// });
					obj.isclick = false
				} else {

					wx.login({
						success(res) {
							console.log(e, 'loginWinxinMp');
							obj.code = res.code;
							console.log(res.code,'res.code')
							console.log( e.detail,' e.detail+++++')
							wechatMpAuth({
								code: obj.code,
								iv: e.detail.iv,
								encryptedData: e.detail.encryptedData,
								spread_spid: spread_spid,
								// #ifdef MP
								spread_code: spread_code,
								// #endif
							}).then(({
								data
							}) => {
								obj.isclick = false
								obj.wchatAuth(data);
								console.log(data, 'wechatMpAuth++++++++++++++++++++++++++')

							}).catch(err => {
								// obj.loding = false;
								// uni.hideLoading();
							});
						},
						fill: function(e) {
							console.log(e)
						}
					})
				}
			},
			...mapMutations('user', ['login', 'setUserInfo']),
			loadData() {
				let obj = this;
				// #ifdef H5
				loginWinxin();
				// #endif
				// #ifdef MP-WEIXIN
				loginWinxinMp().then(() => {
					wx.login({
						success(e) {
							console.log(e, 'loginWinxinMp');
							obj.code = e.code;
						},
						fill: function(e) {
							console.log(e)
						}
					})
				});
				// #endif
			},
			// 用户确认授权
			userInfoData() {
				let that = this
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: res => {
						console.log(res, 'that.userInfo+++++++++++++++++++')
						that.userInfo = res;
						uni.showLoading({
							title: '授权中',
							mask: true
						});
						that.loadMp();
					},
					fail: err => {
						that.isclick = false
						uni.showToast({
							title: '您拒绝了请求,不能正常使用小程序',
							icon: 'error',
							duration: 2000
						});
						return;
					}
				});
				// this.userInfo = e;
				// console.log(e,'用户确认授权')
				// this.loadMp()

			},
			// #ifdef MP-WEIXIN
			loadMp() {
				let obj = this;
				// 获取登录授权页数据
				let user = obj.userInfo;
				console.log(user)
				// 获取推广人id
				let spread_spid = uni.getStorageSync('spread') || '';
				// #ifdef MP
				let spread_code = uni.getStorageSync('spread_code') || '';
				// #endif

				wechatMpAuth({
					code: obj.code,
					iv: user.iv,
					encryptedData: user.encryptedData,
					spread_spid: spread_spid,
					// #ifdef MP
					spread_code: spread_code,
					// #endif
				}).then(({
					data
				}) => {
					obj.wchatAuth(data);
					console.log(data, 'wechatMpAuth++++++++++++++++++++++++++')

				}).catch(err => {
					// obj.loding = false;
					// uni.hideLoading();
				});
			},
			// #endif
			wchatAuth(data) {
				let obj = this;
				// 保存token
				uni.setStorageSync('token', data.token);
				console.log(data.token, 'token++++++++++++++')
				// 获取用户基础信息
				getUserInfo({}).then(e => {
					console.log('userInfo+++++++++++', e)
					obj.login();
					uni.hideLoading();
					// 保存返回用户数据
					obj.setUserInfo(e.data);
					let ur = uni.getStorageSync('present') || '/pages/index/index';
					// 用于处理缓存bug
					if (ur == 'pages/product/product' || ur == '/pages/public/wxLogin') {
						ur = '/pages/index/index'
					}
					uni.switchTab({
						url: ur,
						fail(e) {
							uni.navigateTo({
								url: ur,
								fail(e) {
									uni.navigateTo({
										url: '/pages/index/index',
									});
								}
							});
						}
					});
				});
			},
			// 绑定手机号
			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();
						});
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		height: 100%;
		background-color: #fff;
	}

	.bg-img,
	.logo-img-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.logo-img {
		margin-top: 20vh;
		margin-left: 176rpx;
		width: 385rpx;
		height: 394rpx;
	}

	.userInfo {
		margin: 0 100rpx;
		margin-top: 50rpx;
		color: #FFFFFF;
		border-radius: 99rpx;
		background-color: $base-color;
	}

	.nocaction {
		background: #999 !important;
	}
	.two {
		margin: 20rpx 0;
		width: 750rpx;
		font-size: 28rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	
		text {
			color: #f65067;
		}
	}
	.mzsm-wrap {
		width: 500rpx;
		height: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		text-align: justify;
		font-size: 26rpx;
	}
</style>