H5-frontend/business/PrivacyAgreement.vue

<template>
	<fs-modal v-model="showPrivacy" :showTitle="false" :showCancel="false" :showConfirm="false" :maskClickable="false">
		<view class="modal-content">
			<view class="modal-content-title bdb">用户隐私保护提示</view>
			<view class="modal-content-section">
				<view class="section">
					欢迎使用我们的服务！在您开始体验我们提供的便捷与高效之前，请您务必仔细阅读我们的<text class="primary" @click="handleOpenPrivacyContract">{{
						privacyContractName }}</text>。该指引详细阐述了我们如何收集、使用、存储和保护您的个人信息，以及您在使用服务过程中所享有的权利。
				</view>

				<view class="section">
					我们深知个人信息对您的重要性，并承诺将严格按照相关法律法规和<text class="primary" @click="handleOpenPrivacyContract">{{
						privacyContractName }}</text>的约定，保护您的个人信息安全。我们建议您完整阅读隐私指引，以便更好地了解我们的隐私保护措施。
				</view>

				<view class="section">
					如果您对<text class="primary" @click="handleOpenPrivacyContract">{{
						privacyContractName }}</text>的内容表示理解并同意，请您点击“同意”按钮，以开始使用本小程序。您的点击同意将视为对我们隐私指引的认可和接受。
				</view>
			</view>
			<view class="modal-content-footer-btn bdt tw-flex tw-items-center tw-justify-around">
				<button class="xc-button bg-danger tw-w-[46%] tw-rounded-[8rpx]"
					@click="handleRefusePrivacyAuthorization">拒绝</button>
				<button class="xc-button bg-success tw-w-[46%] tw-rounded-[8rpx]" id="agree-btn"
					open-type="agreePrivacyAuthorization" @click="handleAgreePrivacyAuthorization">同意</button>
			</view>
		</view>
	</fs-modal>
</template>

<script setup>
const TNAME = '《用户隐私保护指引》'
const emits = defineEmits(['change'])

const showPrivacy = ref(false)
const privacyContractName = ref(TNAME)

onMounted(() => {
	initGetPrivacySetting()
})

// 获取隐私设置
const initGetPrivacySetting = () => {
	if (!uni.getPrivacySetting) {
		// H5端 直接跳过
		showPrivacy.value = false
		emits('change', false)
		return false
	}
	uni.getPrivacySetting({
		success: (res) => {
			privacyContractName.value = res.privacyContractName || TNAME
			if (res.needAuthorization) {
				showPrivacy.value = true // 需要授权
			} else {
				handleAgreePrivacyAuthorization() // 不需要授权
			}
		},
		fail: (err) => {
			handleAgreePrivacyAuthorization()
		},
	})
}

// 查看隐私协议内容
const handleOpenPrivacyContract = () => {
	uni.openPrivacyContract({
		success: (res) => { },
		fail: (err) => {
			uni.showToast({
				title: '打开隐私协议失败',
				icon: 'none',
			})
		},
		complete: () => { }
	});
}

// 同意隐私授权
const handleAgreePrivacyAuthorization = () => {
	showPrivacy.value = false
	emits('change', false)
}
// 拒绝隐私授权
const handleRefusePrivacyAuthorization = () => {
	showPrivacy.value = false
	emits('change', true)
}

// 导出
defineExpose({
	initGetPrivacySetting,
})
</script>

<style lang="scss" scoped>
.modal-content {
	padding: 20rpx;
	text-align: left;

	&-title {
		font-size: 38rpx;
		padding-bottom: 20rpx;
		font-weight: 700;
		text-align: center;
	}

	&-section {
		min-height: 200rpx;
		max-height: 600rpx;
		overflow-y: auto;
		word-wrap: break-word;
		white-space: pre-line;

		.section {
			text-indent: 2em;
			margin: 10rpx 0;
		}
	}

	&-footer-btn {
		padding-top: 30rpx;
	}
}
</style>