zhibo/components/Privacy-Authorization/Privacy-Authorization.vue

<template>
	<view class="privacy-authorization">
		<u-popup :show="show" @close="close" :mode="mode" :round="round" :safeAreaInsetBottom="false"
			:closeOnClickOverlay="false">
			<view class="pop_content center column">
				<text class="title">用户服务协议及隐私政策</text>
				<!-- #ifdef MP-WEIXIN -->
				<view class="content_text">
					<view>亲爱的燕飞凡上门选车用户感谢您信任并使用燕飞凡上门洗车小程序!依据微信开放平台要求，，请您在点击同意前仔细阅读<text class="url_text"
							@click="handleOpenPrivacyContract">{{privacyContractName}}</text> 并充分理解相关条款。为便于您理解，特向您说明如下:</view>
					<view class="mt10">
						1.为向您提供基本服务，我们可能会基于您的授权进行收票和使用您的位置和必要个人的信息。
					</view>
					<view class="mt10">
						2.我们会努力保护您的信息安全。
					</view>
					<view class="mt10">
						3.您可以查询，更正，删除您的个人人信息或注销您的账号。
					</view>
					<view class="mt10">
						4.未经您同意，我们不会将上述信息共享至第三方或用于您未授权的其他用途。
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="pop_content center column">
					<view class="content_text">
						请你务必审慎阅读、充分理解<text class="base-color"
							@click="navTo('pages/article/index',{code:'agreement'})">《用户协议》</text>和<text
							@click="navTo('pages/article/index',{code:'policy'})" class="base-color">《隐私政策》</text>各条款
						，包括但不限于:通讯录、相册读取、写入、位置信息等服务，
						<!-- 我们需要收集你的设备信息、操作日志等个人信息。 -->
						你可以阅读<text class="base-color" @click="navTo('pages/article/index',{code:'agreement'})">《用户协议》</text>和<text
							@click="navTo('pages/article/index',{code:'policy'})" class="base-color">《隐私政策》</text>了解详细信息。
						如你同意，请点击“同意”开始接受我们的服务。
					</view>
				</view>
				<!-- #endif -->
				<view class="buttom justify-between">
					<u-button :custom-style="{margin:'0 10rpx 0 0',height:'97rpx'}" @click="cancel" shape="circle">拒绝</u-button>
					<!-- #ifdef MP-WEIXIN -->
					<u-button type="primary" open-type="agreePrivacyAuthorization"
						:custom-style="{margin:'0 0 0 10rpx',height:'97rpx'}" @click="confirm" shape="circle">同意并继续</u-button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<u-button type="primary" :custom-style="{margin:'0 0 0 10rpx',height:'97rpx'}" @click="confirm"
						shape="circle">同意并继续</u-button>
					<!-- #endif -->
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		navTo
	} from '@/core/app';
	import {
		onMounted,
		ref
	} from "vue";
	/**
	 * 请在manifest.json中加上:"__usePrivacyCheck__": true
	 */
	name: "Privacy-Authorization"
	const props = defineProps({
		mode: {
			type: String,
			default: 'center'
		},
		round: {
			type: String,
			default: '20rpx'
		}
	})
	const emits = defineEmits(['confirm', 'close', 'cancel'])
	const show = ref(false)
	const privacyContractName = ref('')
	onMounted(() => {
		// #ifdef MP-WEIXIN
		if (wx.getPrivacySetting) {
			wx.getPrivacySetting({
				success: res => {
					privacyContractName.value = res.privacyContractName
					if (res.needAuthorization) {
						show.value = true
					} else {
						confirm()
					}
				},
				fail: () => {},
				complete: () => {},
			})
		} else {
			// 低版本基础库不支持 wx.getPrivacySetting 接口，隐私接口可以直接调用
			emits('confirm', '用户同意隐私授权')
		}
		// #endif
		// #ifdef APP-PLUS
		let userEmpower = uni.getStorageSync('userEmpower')
		if (userEmpower) {
			if (userEmpower.isEmpower) confirm()
			else show.value = true
		} else show.value = true
		// #endif
	})
	const close = () => {
		show.value = false
		emits('close', '关闭弹窗')
	}
	const confirm = () => {
		uni.setStorageSync('userEmpower', {
			isEmpower: true
		})
		show.value = false
		emits('confirm', true)
	}
	const cancel = () => {
		emits('cancel', false)
		show.value = false
	}
	// 打开隐私协议页面
	const handleOpenPrivacyContract = () => {
		wx.openPrivacyContract({
			success: res => {
				console.log('openPrivacyContract success')
			},
			fail: res => {
				console.error('openPrivacyContract fail', res)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.pop_content {
		width: 600rpx;
		padding: 30rpx 0 0 0;

		.title {
			font-weight: bold;
			padding: 0 20rpx;
			color: #111;
			font-size: 32rpx;
		}

		.content_text {
			margin-top: 27rpx;
			padding: 0 20rpx;
			color: #959595;
			font-size: 28rpx;
			;
		}

		.buttom {
			width: calc(100% - 60rpx);
			margin: 30rpx 30rpx;
		}

		.url_text {
			color: $--base-color;
		}
	}
</style>