<template>
<view v-if="innerShow" @touchmove.stop.prevent class="flex alcenter justify-center"
style="position: fixed;left:0;top:0;z-index:999;width:100vw;height:100vh;background-color: rgba(0,0,0,0.5);"
:style="{top:(scrollTop||0) 'px'}">
<view class="pd40 bdr16 bg-w">
<view class="mb20 text-center">
<text class="ft20 text-main ftwbold">{{title}}</text>
</view>
<scroll-view class="ft16" :scroll-y="true" style="max-height: 50vh;width: 75vw;">
<text class="text-info" space="nbsp"> {{desc1}}</text>
<text class="text-red" @tap="openPrivacyContract">{{urlTitle}}</text>
<text class="text-info">{{desc2}}</text>
</scroll-view>
<view class="mt40 flex alcenter justify-between">
<button style="margin:0" size="mini" id="disagree-btn" type="default" @tap="handleDisagree">不同意</button>
<button style="margin:0" size="mini" id="agree-btn" type="warn" open-type="agreePrivacyAuthorization"
@agreeprivacyauthorization="handleAgree">同意并继续</button>
</view>
</view>
</view>
</template>
<!-- 注:text-info、text-main、text-red为CSS::color -->
<script>
let privacyHandler
let privacyResolves = new Set()
let closeOtherPagePopUpHooks = new Set()
if (wx.onNeedPrivacyAuthorization) {
wx.onNeedPrivacyAuthorization(resolve => {
console.log('触发《用户隐私指引保护》弹窗 onNeedPrivacyAuthorization')
if (typeof privacyHandler === 'function') {
privacyHandler(resolve)
}
})
}
const closeOtherPagePopUp = (closePopUp) => {
closeOtherPagePopUpHooks.forEach(hook => {
if (closePopUp !== hook) {
hook()
}
})
}
export default {
name: "privacy-popup",
props: {
scrollTop: {
type: Number,
default: 0
},
isSingleCheck: { // 是否单次检查隐私同意状态，因为同意隐私后，代码默认会执行（回调）该页面中Set集合存储的所有隐私接口操作。如果页面中有多个隐私接口回调，可能导致程序异常。
type: Boolean,
default: false
}
},
data() {
return {
title: "用户隐私保护提示",
desc1: " 感谢您使用本小程序，依据法规，在您使用本小程序前应当阅读并同意",
urlTitle: "《用户隐私保护指引》",
desc2: "当您点击同意并开始使用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，应当停止使用本小程序。",
innerShow: false
}
},
mounted() {
this.ponLoad(true)
},
destroyed() {
if (this.closePopUp) {
console.error("隐私组件已关闭[destroyed]")
closeOtherPagePopUpHooks.delete(this.closePopUp)
this.closePopUp = null
}
},
methods: {
ponLoad(isChildMounted =
false
) { // 因为一些页面（父组件）在生命周期onLoad时就调用隐私接口了，比这个隐私子组件的生命周期mounted早执行，所以要优先初始化弹出方法（父组件以$ref形式调用）。换个说法，在执行当前组件mounted之前调用隐私接口了的页面，需要提前执行this.$ref.privacyPopup?.ponLoad()以支持弹窗打开。
if (!this.closePopUp) {
console.error(`隐私组件已加载[${isChildMounted?'子mounted':'onLoad'}]`)
const closePopUp = () => {
this.disPopUp()
}
privacyHandler = resolve => {
if (this.isSingleCheck) {
privacyResolves.clear()
}
privacyResolves.add(resolve)
this.popUp()
// 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
closeOtherPagePopUp(closePopUp)
}
this.closePopUp = closePopUp
closeOtherPagePopUpHooks.add(this.closePopUp)
}
},
ponUnload() { // 兼容tabBar页（onHide）与普通页（onUnload）跳转，使得再次访问页面时能够弹出弹出
if (this.closePopUp) {
console.error("隐私组件已关闭[onUnload]")
closeOtherPagePopUpHooks.delete(this.closePopUp)
this.closePopUp = null
}
},
ponHide() { // 兼容tabBar页（onHide）与tabBar页（onHide）跳转，使得再次访问页面时能够弹出弹出
if (this.closePopUp) {
console.error("隐私组件已关闭[onHide]")
closeOtherPagePopUpHooks.delete(this.closePopUp)
this.closePopUp = null
}
},
onDisagree() { // 点击不同意时,主动关闭
// if (this.closePopUp) {
// console.error("隐私组件已关闭[onDisagree]")
// closeOtherPagePopUpHooks.delete(this.closePopUp)
// this.closePopUp = null
// }
},
handleAgree(e) {
this.disPopUp()
// 这里演示了同时调用多个wx隐私接口时要如何处理：让隐私弹窗保持单例，点击一次同意按钮即可让所有pending中的wx隐私接口继续执行
privacyResolves.forEach(resolve => {
resolve({
event: 'agree',
buttonId: 'agree-btn'
})
})
privacyResolves.clear()
},
handleDisagree(e) {
this.disPopUp()
privacyResolves.forEach(resolve => {
resolve({
event: 'disagree',
})
})
privacyResolves.clear()
// this.onDisagree()
},
popUp() {
if (this.innerShow === false) {
this.innerShow = true
}
},
disPopUp() {
if (this.innerShow === true) {
this.innerShow = false
}
},
openPrivacyContract() {
wx.openPrivacyContract({
success: res => {
console.log('打开《用户隐私指引保护》内容成功')
},
fail: res => {
console.error('打开《用户隐私指引保护》内容失败', res)
}
})
}
}
}
</script>
<style lang="scss">
</style>
