refactor(privacy-popup): 优化隐私弹窗逻辑结构

This commit is contained in:
2026-05-09 08:58:48 +08:00
parent 37958cbe39
commit fb47da8095
2 changed files with 83 additions and 135 deletions

View File

@@ -54,6 +54,6 @@ const localDevConfig = ({
uniacid: 115, uniacid: 115,
domain: 'https://5g.aigc-quickapp.com/', domain: 'https://5g.aigc-quickapp.com/',
}, },
})['1']; // 选择要使用的环境配置 })['2811']; // 选择要使用的环境配置
export default localDevConfig; export default localDevConfig;

View File

@@ -55,31 +55,27 @@ export default {
mounted() { mounted() {
this.listenPrivacySettingChange() this.listenPrivacySettingChange()
this.curPageShow() this.curPageShow()
this.proactive()
}, },
created() { created() {
try { try {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
//查询微信侧记录的用户是否有待同意的隐私政策信息
wx.getPrivacySetting({ wx.getPrivacySetting({
success: (res) => { success: (res) => {
// console.log('隐私政策信息', res);
// console.log(res.privacyContractName);
this.privacyContractName = res.privacyContractName this.privacyContractName = res.privacyContractName
} }
}); });
// #endif // #endif
// #ifdef QUICKAPP-WEBVIEW || H5 // #ifdef QUICKAPP-WEBVIEW || H5
if (this.$util.isQuickApp()) { if (this.$util.isQuickApp() && typeof has != 'undefined' && has?.getPrivacySetting) {
if (typeof has != 'undefined' && has?.getPrivacySetting) { has.getPrivacySetting({
has.getPrivacySetting({ success: (res) => {
success: (res) => { if (res.privacyContractName) {
if (res.privacyContractName) { this.privacyContractName = res.privacyContractName
this.privacyContractName = res.privacyContractName }
} },
}, })
})
}
} }
// #endif // #endif
} catch (e) { } catch (e) {
@@ -87,39 +83,50 @@ export default {
} }
}, },
methods: { methods: {
/**
* 统一弹窗 + 关闭其他页面的弹窗
*/
showPrivacyPopup() {
this.popUp()
this.closeOtherPagePopUp(this.disPopUp)
},
/**
* 根据是否需要授权决定弹窗或 emit agree
*/
checkAndShow(needAuthorization) {
if (needAuthorization) {
const privacyAgreed = uni.getStorageSync('privacyAgreed');
if (privacyAgreed) {
this.$emit('agree')
} else {
this.showPrivacyPopup()
}
} else {
this.$emit('agree')
}
},
getPrivacySettingByQuickApp() { getPrivacySettingByQuickApp() {
// #ifdef QUICKAPP-WEBVIEW || H5 || WEB // #ifdef QUICKAPP-WEBVIEW || H5 || WEB
if (this.$util.isQuickApp()) { if (!this.$util.isQuickApp()) return;
if (typeof has != 'undefined' && has?.getPrivacySetting) { if (typeof has != 'undefined' && has?.getPrivacySetting) {
has.getPrivacySetting({ has.getPrivacySetting({
success: (res) => { success: (res) => {
// console.log(res) this.checkAndShow(res.needAuthorization)
if (res.needAuthorization) { },
this.popUp() })
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗 } else {
this.closeOtherPagePopUp(this.disPopUp) this.checkAndShow(!uni.getStorageSync('privacyAgreed'))
} else {
this.$emit('agree')
}
},
})
} else {
// 属于嵌入到快应用Webview组件中的情况,按照H5的方式来处理,判断是否已经授权
if (uni.getStorageSync('privacyAgreed')) {
this.$emit('agree')
} else {
this.popUp()
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
this.closeOtherPagePopUp(this.disPopUp)
}
}
} }
// #endif // #endif
}, },
/**
* 监听平台侧的隐私授权事件
*/
listenPrivacySettingChange() { listenPrivacySettingChange() {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
// 监听微信侧隐私政策授权变化事件
if (wx.onNeedPrivacyAuthorization) { if (wx.onNeedPrivacyAuthorization) {
wx.onNeedPrivacyAuthorization((resolve) => { wx.onNeedPrivacyAuthorization((resolve) => {
if (typeof this.privacyAuthorization === 'function') { if (typeof this.privacyAuthorization === 'function') {
@@ -130,58 +137,28 @@ export default {
// #endif // #endif
// #ifdef QUICKAPP-WEBVIEW || H5 || WEB // #ifdef QUICKAPP-WEBVIEW || H5 || WEB
if (this.$util.isQuickApp()) { if (this.$util.isQuickApp() && typeof has != 'undefined' && has?.onPrivacySettingChange) {
// 监听快速应用侧隐私政策授权变化事件 has.onPrivacySettingChange((res) => {
if (typeof has != 'undefined' && has?.onPrivacySettingChange) { this.checkAndShow(res.needAuthorization)
has.onPrivacySettingChange((res) => { })
// console.log(res)
if (res.needAuthorization) {
this.popUp()
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
this.closeOtherPagePopUp(this.disPopUp)
} else {
this.$emit('agree')
}
})
}
} }
// #endif // #endif
// 主动查询用户隐私政策授权状态,针对快速应用
this.getPrivacySettingByQuickApp();
}, },
// 主动查询用户隐私政策授权状态
/**
* 主动查询隐私授权状态并弹窗
*/
proactive() { proactive() {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
if (wx.getPrivacySetting) { if (wx.getPrivacySetting) {
wx.getPrivacySetting({ wx.getPrivacySetting({
success: (res) => { success: (res) => {
// console.log(res) this.checkAndShow(res.needAuthorization)
if (res.needAuthorization) {
// 检查本地存储中是否已经同意过隐私政策
const privacyAgreed = uni.getStorageSync('privacyAgreed');
if (!privacyAgreed) {
this.popUp()
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
this.closeOtherPagePopUp(this.disPopUp)
} else {
this.$emit('agree')
}
} else {
this.$emit('agree')
}
}, },
}); });
} else { } else {
// 检查本地存储中是否已经同意过隐私政策 // 低版本基础库直接检查本地存储
const privacyAgreed = uni.getStorageSync('privacyAgreed'); this.checkAndShow(!uni.getStorageSync('privacyAgreed'))
if (privacyAgreed) {
this.$emit('agree');
} else {
this.popUp()
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
this.closeOtherPagePopUp(this.disPopUp)
}
} }
// #endif // #endif
@@ -190,29 +167,24 @@ export default {
// #endif // #endif
// #ifdef H5 || WEB // #ifdef H5 || WEB
// 检查本地存储中是否已经同意过隐私政策 this.checkAndShow(!uni.getStorageSync('privacyAgreed'))
const privacyAgreed = uni.getStorageSync('privacyAgreed');
if (privacyAgreed) {
this.$emit('agree');
} else {
this.popUp()
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
this.closeOtherPagePopUp(this.disPopUp)
}
// #endif // #endif
}, },
//初始化监听程序
/**
* 初始化监听程序(页面级)
*/
curPageShow() { curPageShow() {
closeOtherPagePopUpHooks.add(this.disPopUp) closeOtherPagePopUpHooks.add(this.disPopUp)
this.privacyAuthorization = resolve => { this.privacyAuthorization = resolve => {
this.privacyResolves.add(resolve) this.privacyResolves.add(resolve)
//打开弹窗 this.showPrivacyPopup()
this.popUp()
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
this.closeOtherPagePopUp(this.disPopUp)
} }
}, },
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
/**
* 弹窗时关掉其他页面的隐私弹窗,避免重叠
*/
closeOtherPagePopUp(closePopUp) { closeOtherPagePopUp(closePopUp) {
closeOtherPagePopUpHooks.forEach(hook => { closeOtherPagePopUpHooks.forEach(hook => {
if (closePopUp !== hook) { if (closePopUp !== hook) {
@@ -220,16 +192,12 @@ export default {
} }
}) })
}, },
//打开隐私协议
openPrivacyContract() { openPrivacyContract() {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
wx.openPrivacyContract({ wx.openPrivacyContract({
success(res) { success(res) {},
// console.log('打开隐私协议', res); fail(err) {}
},
fail(err) {
// console.error('打开隐私协议失败', err)
}
}); });
// #endif // #endif
@@ -237,59 +205,44 @@ export default {
if (this.$util.isQuickApp()) { if (this.$util.isQuickApp()) {
if (typeof has != 'undefined' && has?.openPrivacySetting) { if (typeof has != 'undefined' && has?.openPrivacySetting) {
has.openPrivacySetting({ has.openPrivacySetting({
success: (res) => { success: (res) => {},
// console.log('打开隐私协议', res); fail: (err) => {}
},
fail: (err) => {
// console.error('打开隐私协议失败', err)
}
}); });
} else { } else {
// 属于嵌入到快应用Webview组件中的情况,按照H5的方式来处理
this.$util.redirectTo(privacyContractPage); this.$util.redirectTo(privacyContractPage);
} }
} else { } else {
// H5 环境下的处理逻辑
this.$util.redirectTo(privacyContractPage); this.$util.redirectTo(privacyContractPage);
} }
// #endif // #endif
}, },
//打开用户服务协议
openPrivacyService() { openPrivacyService() {
// #ifdef QUICKAPP-WEBVIEW || H5 || WEB // #ifdef QUICKAPP-WEBVIEW || H5 || WEB
if (this.$util.isQuickApp()) { if (this.$util.isQuickApp()) {
if (typeof has != 'undefined' && has?.openPrivacySetting) { if (typeof has != 'undefined' && has?.openPrivacySetting) {
has.openPrivacySetting({ has.openPrivacySetting({
success: (res) => { success: (res) => {},
// console.log('打开用户服务协议', res); fail: (err) => {}
},
fail: (err) => {
// console.error('打开用户服务协议失败', err)
}
}); });
} else { } else {
// 属于嵌入到快应用Webview组件中的情况,按照H5的方式来处理
this.$util.redirectTo(privacyServicePage); this.$util.redirectTo(privacyServicePage);
} }
} else { } else {
// H5 环境下的处理逻辑
this.$util.redirectTo(privacyServicePage); this.$util.redirectTo(privacyServicePage);
} }
// #endif // #endif
}, },
// 不同意
handleDisagree() { handleDisagree() {
this.privacyResolves.forEach(resolve => { this.privacyResolves.forEach(resolve => {
resolve({ resolve({ event: 'disagree' })
event: 'disagree',
})
}) })
this.privacyResolves.clear() this.privacyResolves.clear()
//关闭弹窗
this.disPopUp() this.disPopUp()
// 保存用户授权状态到本地存储,无论同意还是不同意,都不再重复弹出
uni.setStorageSync('privacyAgreed', true); uni.setStorageSync('privacyAgreed', true);
//退出小程序
uni.showModal({ uni.showModal({
content: '未同意隐私协议,无法使用相关功能', content: '未同意隐私协议,无法使用相关功能',
success: () => { success: () => {
@@ -297,7 +250,7 @@ export default {
} }
}) })
}, },
// 同意并继续
handleAgree() { handleAgree() {
this.privacyResolves.forEach(resolve => { this.privacyResolves.forEach(resolve => {
resolve({ resolve({
@@ -306,28 +259,23 @@ export default {
}) })
}) })
this.privacyResolves.clear() this.privacyResolves.clear()
//关闭弹窗
this.disPopUp() this.disPopUp()
// 保存用户授权状态到本地存储,用于所有环境 uni.setStorageSync('privacyAgreed', true);
uni.setStorageSync('privacyAgreed', true);
this.$emit('agree') this.$emit('agree')
}, },
//打开弹窗
popUp() { popUp() {
this.showPop = true; this.showPop = true;
}, },
//关闭弹窗
disPopUp() { disPopUp() {
this.showPop = false; this.showPop = false;
}, },
}, },
beforeDestroy() { beforeDestroy() {
// 清理事件监听器和集合
this.privacyResolves.clear() this.privacyResolves.clear()
closeOtherPagePopUpHooks.delete(this.disPopUp) closeOtherPagePopUpHooks.delete(this.disPopUp)
// 注意:这里需要根据实际情况清理微信和快速应用的事件监听器
// 由于微信的 wx.onNeedPrivacyAuthorization 没有对应的 off 方法,这里可能需要其他方式处理
}, },
} }
</script> </script>