authorization.vue

<template>
	<view>
		<uni-popup ref="authorization" background-color="#fff">
            <view class="content-page" @touchmove="stopTouchMove">
				<view class="img-box">
					<image style="width: 100rpx; height: 100rpx;margin:22rpx;" mode="aspectFill" src="../static/images/logo.png"></image>
				</view>
				<view class="text">为了更完美的体验，请授权获取电话</view>
				<button v-if="checked" class="login-btn" type="primary" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" hover-class="none">手机号登录/注册</button>
				<button v-else class="login-btn" type="primary" @click="verifyPolicy" hover-class="none">手机号登录/注册</button>
				<view class="refuse" @click="refuse">取消</view>

				<view class="policy-fixed">
					<checkbox-group @change="changePolicy">
						<label>
							<view class="policy-box">
								<checkbox value="true" :checked="checked" color="#1677FF" style="transform:scale(0.7)" />
								<text class="text">我已阅读并同意</text>
								<text class="policy" @click.stop="readAgreement">《用户服务协议》</text>
								<text class="text">和</text>
								<text class="policy" @click.stop="readPolicy">《隐私政策》</text>
							</view>
						</label>
					</checkbox-group>
				</view>
            </view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		analysisMobileApi,
		getPropertyLoginApi,
		bindingUserInfoApi
	} from "@/config/api.js"
	export default {
		data() {
			return {
				checked: false,
				result: {}
			}
		},
		watch: {
			checked(newV) {
				if(newV) {
					let _this = this
					wx.login({
						success (res) {
							if (res.code) {
								_this.getCode(res.code)
							}
						}
					})
				}
			}
		},
		methods: {
			async getCode(code) {
				let {result} = await getPropertyLoginApi({code}, {custom: {load: false}})
				this.result = {...result}
			},
			onOpenLogin() {
				this.$refs.authorization.open('center')
			},
			stopTouchMove() {
				return false
			},
			refuse() {
				this.$emit('refuse')
				this.$refs.authorization.close()
				uni.showToast({
					icon: "none",
					title: '您拒绝了授权，登录失败！'
				})
			},
			verifyPolicy(e) {
				if(!this.checked) {
					uni.showToast({
						title: '请先同意协议和政策',
						icon: 'none'
					});
					return
				}
			},
			//获取手机号
			onGetPhoneNumber(e) {
				let _this = this
				if (e.detail.errMsg === "getPhoneNumber:fail user deny") { //用户决绝授权  
					//拒绝授权后弹出一些提示
					uni.showModal({
						content: '您拒绝了授权，登录失败！',
						showCancel: false
					})
				} else { //允许授权
					_this.getUserPhone(e)
				}
			},
			// 获取手机号
			async getUserPhone(e) {
				
				let res = await analysisMobileApi({
					code: e.detail.code,
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData,
					sessionKey: this.result.sessionKey
				})
				if (res.code === 200 && res.result) {
					uni.setStorageSync('openid', this.result.openid);
					let data = JSON.parse(res.result)
					uni.setStorageSync('user_phone', data.purePhoneNumber);
					this.$emit('loginEnd')
					this.$refs.authorization.close()
				}
			},
			// 绑定用户
			// async onbindingUserInfo(openId, phone) {
			// 	let res = await bindingUserInfoApi({openId, phone})
			// 	if(res.code === 200 && res.result) {
			// 		uni.setStorageSync('openid', res.result.communityUser.openid);
			// 		if(res.result.communityOwners && res.result.communityOwners.length) {	// 业主
			// 			this.$emit('loginEnd', true)
			// 		} else if(res.result.employeeVos && res.result.employeeVos.comList.length) {	// 维修员
			// 			this.$emit('loginEnd', true)
			// 		} else {
			// 			this.$emit('loginEnd', false)
			// 		}
			// 		this.$refs.authorization.close()
			// 	}
			// },
			changePolicy(e) {
				this.checked = e.detail.value.length === 1
			},
			readPolicy() {
				uni.navigateTo({
					url: '/pages/policy/policy'
				})
			},
			readAgreement() {
				uni.navigateTo({
					url: '/pages/policy/agreement'
				})
			}
		}
	}
</script>

<style lang="scss">
.content-page {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	.img-box {
		width: 144rpx;
		height: 144rpx;
		border: 2rpx solid #E4E6E9;
		border-radius: 50%;
		margin-top: 200rpx;
	}
	.text {
		font-size: 28rpx;
		color: #3D3D3D;
		line-height: 50rpx;
		margin-top: 50rpx;
	}
	.login-btn {
		width: 578rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		background: #6799F1;
		border-radius: 200rpx;
		margin-top: 72rpx;
	}
	.refuse {
		font-size: 28rpx;
		color: #767676;
		line-height: 33rpx;
		margin-top: 34rpx;
	}

	.policy-fixed {
		position: fixed;
		bottom: 160rpx;
		left: 0;
		right: 0;
		z-index: 11;

		.policy-box {
			padding: 0 30rpx;
			font-size: 14px;
			vertical-align: middle;

			.text {
				color: #191A23;
				vertical-align: middle;
			}
			.policy {
				color: #1677FF;
				vertical-align: middle;
			}
		}
	}
}
</style>