changshu_WeChat/pages/login/login.vue

<template>
	<div style="padding-top: 88rpx;">
		<div class="login-tip">智游常熟 申请获得</div>
		<div class="login-tip2">以下权限</div>
		<div class="login-tip-box">
			<text>获得你的公开信息（昵称、头像、地区及性别）</text>
		</div>
		<div class="btn-box">
			<button bindtap="cancel" type="default" @click="redirectIndex()">取消</button>
			<button type="primary" @click="getUserInfo()">同意</button>
		</div>
		<div class="flex-center article-box">
			<radio-group @change="agree">
				<radio value="1" :checked="checked" style="transform:scale(0.7)"></radio>
			</radio-group>
			<div>同意<text @click="gotoInfo">《用户服务协议》、《隐私政策》</text></div>
		</div>
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" style="width: 100%;height: 12vh;line-height: 12vh;">点击授权手机号</button>
		</uni-popup>
	</div>
</template>

<script>
	export default {
		name: "login",
		data() {
			return {
				checked: false,
			};
		},
		onLoad(options) {
			// 只需授权手机号
			if (options.needAuth == 1) {
				setTimeout(()=>{
					this.$refs.popup.open('bottom')
				},400)
			}
		},
		methods: {
			decryptPhoneNumber(e){
				if( e.detail.errMsg == "getPhoneNumber:ok" ){ //成功
					this.$refs.popup.close()
					this.Post({
						code: e.detail.code,
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						token: uni.getStorageSync('token1')
					},'/api/mini_program/bindPhoneNumber').then(res => {
						this.$store.commit('changeUserInfo', res.data.userinfo)
						if (this.$store.state.user.toPath.includes('user/user')) {
							uni.switchTab({
								url: this.$store.state.user.toPath
							})
						} else {
							uni.navigateBack({})
						}
					})
				}
			},
			gotoInfo() {
				uni.navigateTo({
					url: '/subPackages/user/privacy'
				})
			},
			agree(data) {
				this.checked = !this.checked
			},
			redirectIndex() {
				uni.switchTab({
					url: '/pages/index/index',
				})
			},
			getUserInfo() {
				var _this = this
				if (!_this.checked) {
					uni.showToast({
						title: '请先勾选同意《用户服务协议》、《隐私政策》',
						icon: 'none'
					})
					return
				}
				uni.login({
					provider: 'weixin',
					success(loginRes) {
						uni.getUserInfo({
							withCredentials: true,
							success(res) {
								_this.Post({
									code: loginRes.code,
									userInfo: res.userInfo,
									encryptedData: res.encryptedData,
									iv: res.iv,
									wechat_qrcode: uni.getStorageSync('wechat_qrcode')?uni.getStorageSync('wechat_qrcode'):'',
									merchant_id: uni.getStorageSync("merchant_id") ? uni.getStorageSync("merchant_id") : ''
								}, '/api/mini_program/login').then(resTwo => {
									_this.$store.commit('changeUserInfo', resTwo.data.userinfo)
									if(resTwo.data.userinfo.mobile){
										if (_this.$store.state.user.toPath.includes('user/user')) {
											uni.switchTab({
												url: _this.$store.state.user.toPath
											})
										} else {
											uni.navigateBack({})
										}
									}else{
										uni.setStorageSync('token1', resTwo.data.userinfo.token)
										_this.$refs.popup.open('bottom')
									}
								})
							}
						})
					},
					fail(err) {
						console.log(err);
					},
				})
			}
		},
	}
</script>

<style>
	.login-tip {
		font-size: 28rpx;
		margin: 0 60rpx;
		margin-top: 40rpx;
	}

	.login-tip2 {
		font-size: 44rpx;
		margin: 0rpx 60rpx;
		margin-top: 20rpx;
		font-weight: 400;
	}

	.login-tip-box {
		display: flex;
		align-items: flex-start;
		margin: 0 60rpx;
		font-size: 28rpx;
		margin-top: 40rpx;
		line-height: 40rpx;
	}

	.login-tip-box .icon-gou1 {
		line-height: 80rpx;
		margin-top: -20rpx;
		margin-right: 30rpx;
		color: #666;
	}

	.btn-box {
		display: flex;
		position: absolute;
		bottom: 100rpx;
		left: 0;
		right: 0;
	}

	.btn-box button {
		width: 400rpx;
	}


	.article-box {
		position: absolute;
		left: 0;
		right: 0;
		justify-content: center;
		font-size: 24rpx;
		color: #1aad19;
		bottom: 40rpx;
	}

	.article-box .iconfont {
		margin-right: 10rpx;
		font-size: 26rpx;
	}

	.article-box text {
		border-bottom: 1px solid;
	}
</style>