refactor(privacy-popup): 优化隐私弹窗逻辑结构
This commit is contained in:
@@ -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;
|
||||||
@@ -55,23 +55,20 @@ 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) {
|
||||||
@@ -80,46 +77,56 @@ export default {
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
|
||||||
// #endif
|
// #endif
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error("=========低版本基础库==========", e)
|
console.error("=========低版本基础库==========", e)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getPrivacySettingByQuickApp() {
|
/**
|
||||||
// #ifdef QUICKAPP-WEBVIEW || H5 || WEB
|
* 统一弹窗 + 关闭其他页面的弹窗
|
||||||
if (this.$util.isQuickApp()) {
|
*/
|
||||||
if (typeof has != 'undefined' && has?.getPrivacySetting) {
|
showPrivacyPopup() {
|
||||||
has.getPrivacySetting({
|
|
||||||
success: (res) => {
|
|
||||||
// console.log(res)
|
|
||||||
if (res.needAuthorization) {
|
|
||||||
this.popUp()
|
this.popUp()
|
||||||
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
|
|
||||||
this.closeOtherPagePopUp(this.disPopUp)
|
this.closeOtherPagePopUp(this.disPopUp)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据是否需要授权决定弹窗或 emit agree
|
||||||
|
*/
|
||||||
|
checkAndShow(needAuthorization) {
|
||||||
|
if (needAuthorization) {
|
||||||
|
const privacyAgreed = uni.getStorageSync('privacyAgreed');
|
||||||
|
if (privacyAgreed) {
|
||||||
|
this.$emit('agree')
|
||||||
|
} else {
|
||||||
|
this.showPrivacyPopup()
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
this.$emit('agree')
|
this.$emit('agree')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getPrivacySettingByQuickApp() {
|
||||||
|
// #ifdef QUICKAPP-WEBVIEW || H5 || WEB
|
||||||
|
if (!this.$util.isQuickApp()) return;
|
||||||
|
if (typeof has != 'undefined' && has?.getPrivacySetting) {
|
||||||
|
has.getPrivacySetting({
|
||||||
|
success: (res) => {
|
||||||
|
this.checkAndShow(res.needAuthorization)
|
||||||
|
},
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
// 属于嵌入到快应用Webview组件中的情况,按照H5的方式来处理,判断是否已经授权
|
this.checkAndShow(!uni.getStorageSync('privacyAgreed'))
|
||||||
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) {
|
||||||
// 监听快速应用侧隐私政策授权变化事件
|
|
||||||
if (typeof has != 'undefined' && has?.onPrivacySettingChange) {
|
|
||||||
has.onPrivacySettingChange((res) => {
|
has.onPrivacySettingChange((res) => {
|
||||||
// console.log(res)
|
this.checkAndShow(res.needAuthorization)
|
||||||
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>
|
||||||
|
|||||||
Reference in New Issue
Block a user