H5_module/components/privacy/index.vue

<template>
	<view>
		<view class="ceng" @click="exitPop()" v-if="showPrivacy"></view>
		<view class="pop-protocol" :style="'bottom:' + XyBottom">
			<view class="privacy-exit ddflex" @click="exitPop()">
				<image :src="picUrlss+'privacy_exit.png'"></image>退出应用
			</view>
			<!-- <image src="../../static/pages/images/close1.png" class="update-close1" @click="exit"></image> -->
			<view class="pop-tit">用户协议与隐私保护提醒</view>
			<view class="pop-con">
				<view>感谢使用「{{config.CONFIG_PROJECT_TITLE}}」。</view>
				为保障您的个人信息安全，请在使用前仔细阅读<text @tap="handleOpenPrivacyContract">{{name}}</text><text
					@click="jump('/mine/page/page?title=用户协议&isXieyi=true')">《用户协议》</text>和<text
					@click="jump('/mine/page/page?title=隐私声明&isYinsi=true')">《隐私声明》</text>。如您同意请继续。
			</view>
			<view class="pop-btn">
				<!-- <view class="pop-no">退出应用</view> -->
				<button class="pop-agree" id="agree-btn" open-type="agreePrivacyAuthorization"
					@agreeprivacyauthorization="handleAgreePrivacyAuthorization"
					v-if="userInfo.mobile || (!userInfo.mobile && !isBindMobile)">已知晓，同意并继续</button>
				<button class="pop-agree" id="agree-btn" open-type="getPhoneNumber|agreePrivacyAuthorization"
					@getphonenumber="handleGetPhoneNumber" @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
					v-else>已知晓，同意并继续</button>
				<!-- <view class="pop-agree" @click="agn()">同意并继续</view> -->
			</view>
		</view>
		<block v-if="showExit">
			<view class="ceng" style="z-index: 104;"></view>
			<view class="privacy-pop">
				<view class="privacy-con">
					应国家相关法律要求，您在使用「{{config.CONFIG_PROJECT_TITLE}}」之前，必须阅读并同意<text
						@tap="handleOpenPrivacyContract">{{name}}</text>。给您带来不便，敬请谅解。
				</view>
				<view class="privacy-btn ddflex">
					<view class="privacy-jj" @click="exit()">关闭退出</view>
					<button class="privacy-agree" id="agree-btn" open-type="agreePrivacyAuthorization"
						@agreeprivacyauthorization="handleAgreePrivacyAuthorization"
						v-if="userInfo.mobile || (!userInfo.mobile && !isBindMobile)">继续使用</button>
					<button class="privacy-agree" id="agree-btn" open-type="getPhoneNumber|agreePrivacyAuthorization"
						@getphonenumber="handleGetPhoneNumber"
						@agreeprivacyauthorization="handleAgreePrivacyAuthorization" v-else>继续使用</button>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	const app = getApp();
	const req = require('../../utils/request.js');

	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				config: '',
				name: '',
				showPrivacy: false,
				XyBottom: '-100%',
				userInfo: '',
				showExit: false
			};
		},
		props: {
			isUpdate: {
				type: Boolean,
				default: false
			},
			isBindMobile: {
				type: Boolean,
				default: true
			},
			isTimeout: {
				type: Boolean,
				default: true
			}
		},
		async mounted() {
			await this.init();
		},
		methods: {
			init() {
				if (req.getStorage('configRes')) this.config = JSON.parse(req.getStorage('configRes'));
				else this.getConfig();
				setTimeout(async res => {
					this.userInfo = await req.getStorage('userInfo');
					await this.getPrivacySet();
				}, this.isTimeout ? 2000 : 0)
			},
			getPrivacySet() {
				// #ifdef MP-WEIXIN
				return new Promise((resolve, reject) => {
					uni.getPrivacySetting({
						success: res => {
							console.log('是否弹出隐私==', res)
							if (res.needAuthorization) {
								this.showPrivacy = true;
								this.XyBottom = 0;
								this.name = res.privacyContractName;
								if (!this.userInfo.mobile) req.setStorage('isShowUpdateMobile', true)
							}
							resolve();
						}
					})
				})
				// #endif
			},
			getConfig() {
				req.getRequest('/api/config', {}, data => {
					this.config = data;
					req.setStorage('configRes', JSON.stringify(data));
				})
			},
			handleOpenPrivacyContract() {
				// 打开隐私协议页面
				uni.openPrivacyContract({
					success: (res) => {
						console.log('隐私协议打开成功==', res)
					}, // 打开成功
					fail: () => {}, // 打开失败
					complete: () => {}
				})
			},
			handleGetPhoneNumber(e) {
				let that = this;
				let sessionKey = '';
				app.globalData.getCheckSessoin(json => {
					sessionKey = json.session_key;
					let _params = {
						sessionKey: sessionKey,
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData
					};
					if (req.getStorage('pidCode')) {
						_params.parentId = req.getStorage('pidCode');
					}
					if (e.detail.errMsg == 'getPhoneNumber:ok') {
						req.postRequest('/api/weixin/mobile', _params, json => {
							if (json.mobile) {
								var userInfo = req.getStorage('userInfo');
								userInfo.mobile = json.mobile;
								req.setStorage('userInfo', userInfo);
								req.removeStorage('isShowUpdateMobile')
							}
						});
					} else {}
				});
			},
			exitPop() {
				this.showExit = true;
				this.XyBottom = '-100%';
				this.showPrivacy = false;
			},
			exit() {
				uni.exitMiniProgram({
					success: (res) => {
						console.log('退出小程序', res)
					}
				})
			},
			handleAgreePrivacyAuthorization() {
				this.XyBottom = '-100%';
				this.showPrivacy = false;
				this.showExit = false;
				if (this.isUpdate) this.$emit('getLocations')
			},
			jump(url) {
				uni.navigateTo({
					url: url
				});
			},
		}
	};
</script>

<style>
	@import './index.css';
</style>