lucky_shop/components/wx-privacy-popup/privacy-popup.vue

<template>
	<view v-if="showPop">
		<view class="privacy-mask">
			<view class="privacy-wrap">
				<view class="privacy-title">用户隐私保护提示</view>
				<view class="privacy-desc">
					感谢您使用本小程序，在使用前您应当阅读并同意
					<text class="privacy-link" @tap="openPrivacyContract">{{privacyContractName}}</text>，
					当点击同意并继续时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力；如您不同意，将无法继续使用小程序相关功能。
				</view>
				<view class="privacy-button-flex">
					<button class="privacy-button-btn bg-disagree" @tap="handleDisagree">不同意</button>
					<button id="agree-btn" class="privacy-button-btn bg-agree" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgree">同意并继续</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agree: false,
				showPop: false,
				privacyAuthorization: null,
				privacyResolves: new Set(),
				closeOtherPagePopUpHooks: new Set(),
				privacyContractName: '用户隐私保护指引'
			}
		},
		mounted() {
			this.init()
			this.curPageShow()
		},
		created() {
			let that = this
			//查询微信侧记录的用户是否有待同意的隐私政策信息
			try {
				wx.getPrivacySetting({
					success(res) {
						// console.log('隐私政策信息', res);
						// console.log(res.privacyContractName);
						that.privacyContractName = res.privacyContractName
					}
				});
			} catch (e) {
				// console.log("=========低版本基础库==========")
			}
		},
		methods: {
			// 监听何时需要提示用户阅读隐私政策
			init() {
				let that = this;
				if (wx.onNeedPrivacyAuthorization) {
					wx.onNeedPrivacyAuthorization((resolve) => {
						if (typeof that.privacyAuthorization === 'function') {
							that.privacyAuthorization(resolve)
						}
					})
				}
			},
			proactive() {
				let that = this
				if (wx.getPrivacySetting) {
					wx.getPrivacySetting({
						success: (res) => {
							// console.log(res)
							if (res.needAuthorization) {
								that.popUp()
								// 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
								this.closeOtherPagePopUp(this.disPopUp)
							} else {
								this.$emit('agree')
							}
						},
					});
				} else {
					this.$emit('agree')
				}
			},
			//初始化监听程序
			curPageShow() {
				this.privacyAuthorization = resolve => {
					this.privacyResolves.add(resolve)
					//打开弹窗
					this.popUp()
					// 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
					this.closeOtherPagePopUp(this.disPopUp)
				}
				this.closeOtherPagePopUpHooks.add(this.disPopUp)
			},
			// 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
			closeOtherPagePopUp(closePopUp) {
				this.closeOtherPagePopUpHooks.forEach(hook => {
					if (closePopUp !== hook) {
						hook()
					}
				})
			},
			//打开隐私协议
			openPrivacyContract() {
				wx.openPrivacyContract({
					success(res) {
						// console.log('打开隐私协议', res);
					},
					fail(err) {
						// console.error('打开隐私协议失败', err)
					}
				});
			},
			// 不同意
			handleDisagree() {
				this.privacyResolves.forEach(resolve => {
					resolve({
						event: 'disagree',
					})
				})
				this.privacyResolves.clear()
				//关闭弹窗
				this.disPopUp()
				//退出小程序
				uni.showModal({
					content: '未同意隐私协议，无法使用相关功能',
					success: () => {
						this.$emit('disagree')
					}
				})
			},
			// 同意并继续
			handleAgree() {
				this.privacyResolves.forEach(resolve => {
					resolve({
						event: 'agree',
						buttonId: 'agree-btn'
					})
				})
				this.privacyResolves.clear()
				//关闭弹窗
				this.disPopUp()
				this.$emit('agree')
			},
			//打开弹窗
			popUp() {
				if (this.showPop === false) {
					this.showPop = true
				}
			},
			//关闭弹窗
			disPopUp() {
				if (this.showPop === true) {
					this.showPop = false
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.privacy-mask {
		position: fixed;
		z-index: 5000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.privacy-wrap {
		width: 632rpx;
		padding: 48rpx 30rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 16rpx;
	}

	.privacy-title {
		padding: 0rpx 30rpx 40rpx 30rpx;
		font-weight: 700;
		font-size: 36rpx;
		text-align: center;
	}

	.privacy-desc {
		font-size: 30rpx;
		color: #555;
		line-height: 2;
		text-align: left;
		padding: 0 40rpx;
	}

	.privacy-link {
		color: #2f80ed;
	}

	.privacy-button-flex {
		display: flex;
		padding: 20rpx 40rpx;
	}

	.privacy-button-btn {
		color: #FFF;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 100rpx;
		text-align: center;
		height: 100rpx;
		border-radius: 20rpx;
		border: none;
		background: #07c160;
		flex: 1;
		margin-right: 30rpx;
		justify-content: center;
	}

	.privacy-button-btn::after {
		border: none;
	}

	.bg-disagree {
		color: #07c160;
		background: #f2f2f2;
	}

	.bg-agree {
		margin-right: 0rpx;
	}
</style>