@@ -1,237 +1,385 @@
< template >
<!-- # ifdef MP -- >
< view v-if = "showPop" >
< view class = "privacy-mask" >
< view >
< view class = "privacy-mask" v-if = "showPop" >
< view class = "privacy-wrap" >
< view class = "privacy-title" > 用户隐私保护提示 < / view >
< view class = "privacy-desc" >
感谢您使用本小程序 , 在使用前您应当阅读并同意
< text class = "privacy-link" @tap ="openPrivacyContract" > {{ privacyContractName }} < / text > ,
当点击同意并继续时 , 即表示您已理解并同意该条款内容 , 该条款将对您产生法律约束力 ; 如您不同意 , 将无法继续使用小程序相关功能 。
感谢您使用{ { appName } } , 在使用前您应当阅读并同意
< text class = "privacy-link" @tap ="openPrivacyContract" > {{ privacyContractName }} < / text >
< ! - - # ifdef QUICKAPP -WEBVIEW | | H5 - - >
< text class = "privacy-link" @tap ="openPrivacyService" > {{ privacyServiceName }} < / text >
< ! - - # endif - - >
, 当点击同意并继续时 , 即表示您已理解并同意该条款内容 , 该条款将对您产生法律约束力 ; 如您不同意 , 将无法继续使用 { { appName } } 相关功能 。
< / 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 >
<! - - # ifdef QUICKAPP -WEBVIEW | | MP -WEIXIN - - >
< button id = "agree-btn" class = "privacy-button-btn bg-agree" open -type = " agreePrivacyAuthorization "
@agreeprivacyauthorization ="handleAgree" > 同意并继续 < / button >
< ! - - # endif - - >
<!-- # ifdef WEB || H5 -- >
< button id = "agree-btn" class = "privacy-button-btn bg-agree" @tap ="handleAgree" @click ="handleAgree" > 同意并继续 < / button >
< ! - - # endif - - >
< / view >
< / view >
< / view >
< / view >
< ! - - # endif - - >
<!-- # ifdef WEB || H5 -- >
< view v-if = "showPop" > < / view >
< ! - - # endif - - >
< / 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
// #ifdef QUICKAPP-WEBVIEW
import has from '@system.has'
// #endif
const closeOtherPagePopUpHooks = new Set ( ) ;
const privacyContractPage = '/pages_tool/agreement/contenr?type=0' ;
const privacyServicePage = '/pages_tool/agreement/contenr?type=1' ;
export default {
name : 'PrivacyPopup' ,
data ( ) {
return {
agree : false ,
showPop : false ,
privacyAuthorization : null ,
privacyResolves : new Set ( ) ,
privacyContractName : '用户隐私保护指引' ,
appName : '本小程序' ,
// #ifdef WEB || H5
appName : '本应用' ,
privacyContractName : '《隐私条款》' ,
privacyServiceName : '《用户服务协议》' ,
// #endif
}
} ,
mounted ( ) {
this . listenPrivacySettingChange ( )
this . curPageShow ( )
} ,
created ( ) {
try {
// #ifdef MP-WEIXIN
//查询微信侧记录的用户是否有待同意的隐私政策信息
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 )
}
wx . getPrivacySetting ( {
success : ( res ) => {
// console.log('隐私政策信息', res);
// console.log(res.privacyContractName );
this . privacyContractName = res . privacyContractName
}
} ) ;
// #endif
// #ifdef QUICKAPP-WEBVIEW || H5
if ( this . $util . isQuickApp ( ) ) {
if ( typeof has != 'undefined' && has ? . getPrivacySetting ) {
has . getPrivacySetting ( {
success : ( res ) => {
if ( res . privacyContractName ) {
this . privacyContractName = res . privacyContractName
}
} ,
} )
}
} ,
proactive ( ) {
let that = this
if ( wx . getPrivacySetting ) {
wx . getPrivacySetting ( {
}
// #endif
} catch ( e ) {
console . error ( "=========低版本基础库==========" , e )
}
} ,
methods : {
getPrivacySettingByQuickApp ( ) {
// #ifdef QUICKAPP-WEBVIEW || H5 || WEB
if ( this . $util . isQuickApp ( ) ) {
if ( typeof has != 'undefined' && has ? . getPrivacySetting ) {
has . getPrivacySetting ( {
success : ( res ) => {
// console.log(res)
if ( res . needAuthorization ) {
that . popUp ( )
this . popUp ( )
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
this . closeOtherPagePopUp ( this . disPopUp )
} else {
this . $emit ( 'agree' )
}
} ,
} )
} else {
// 属于嵌入到快应用Webview组件中的情况, 按照H5的方式来处理, 判断是否已经授权
if ( uni . getStorageSync ( 'privacyAgreed' ) ) {
this . $emit ( 'agree' )
} else {
this . popUp ( )
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
this . closeOtherPagePopUp ( this . disPopUp )
}
}
}
// #endif
} ,
listenPrivacySettingChange ( ) {
// #ifdef MP-WEIXIN
// 监听微信侧隐私政策授权变化事件
if ( wx . onNeedPrivacyAuthorization ) {
wx . onNeedPrivacyAuthorization ( ( resolve ) => {
if ( typeof this . privacyAuthorization === 'function' ) {
this . privacyAuthorization ( resolve )
}
} )
}
// #endif
// #ifdef QUICKAPP-WEBVIEW || H5 || WEB
if ( this . $util . isQuickApp ( ) ) {
// 监听快速应用侧隐私政策授权变化事件
if ( typeof has != 'undefined' && has ? . onPrivacySettingChange ) {
has . onPrivacySettingChange ( ( res ) => {
// console.log(res)
if ( res . needAuthorization ) {
this . popUp ( )
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
this . closeOtherPagePopUp ( this . disPopUp )
} else {
this . $emit ( 'agree' )
}
} )
}
}
// #endif
// 主动查询用户隐私政策授权状态,针对快速应用
this . getPrivacySettingByQuickApp ( ) ;
} ,
// 主动查询用户隐私政策授权状态
proactive ( ) {
// #ifdef MP-WEIXIN
if ( wx . getPrivacySetting ) {
wx . getPrivacySetting ( {
success : ( res ) => {
// console.log(res)
if ( res . needAuthorization ) {
this . popUp ( )
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
this . closeOtherPagePopUp ( this . disPopUp )
} else {
this . $emit ( 'agree' )
}
} ,
} ) ;
} else {
this . $emit ( 'agree' )
}
// #endif
// #ifdef QUICKAPP-WEBVIEW
this . getPrivacySettingByQuickApp ( ) ;
// #endif
} ,
//初始化监听程序
curPageShow ( ) {
closeOtherPagePopUpHooks . add ( this . disPopUp )
this . privacyAuthorization = resolve => {
this . privacyResolves . add ( resolve )
//打开弹窗
this . popUp ( )
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
this . closeOtherPagePopUp ( this . disPopUp )
}
} ,
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
closeOtherPagePopUp ( closePopUp ) {
closeOtherPagePopUpHooks . forEach ( hook => {
if ( closePopUp !== hook ) {
hook ( )
}
} )
} ,
//打开隐私协议
openPrivacyContract ( ) {
// #ifdef MP-WEIXIN
wx . openPrivacyContract ( {
success ( res ) {
// console.log('打开隐私协议', res);
} ,
fail ( err ) {
// console.error('打开隐私协议失败', err)
}
} ) ;
// #endif
// #ifdef QUICKAPP-WEBVIEW || H5 || WEB
if ( this . $util . isQuickApp ( ) ) {
if ( typeof has != 'undefined' && has ? . openPrivacySetting ) {
has . openPrivacySetting ( {
success : ( res ) => {
// console.log('打开隐私协议', res);
} ,
fail : ( err ) => {
// console.error('打开隐私协议失败', err)
}
} ) ;
} else {
this . $emit ( 'agree' )
// 属于嵌入到快应用Webview组件中的情况, 按照H5的方式来处理
this . $util . redirectTo ( privacyContractPage ) ;
}
} ,
//初始化监听程序
curPageShow ( ) {
this . privacyAuthorization = resolve => {
this . privacyResolves . add ( resolve )
//打开弹窗
this . popUp ( )
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
this . closeOtherPagePopUp ( this . disPopUp )
} else {
// H5 环境下的处理逻辑
this . $util . redirectTo ( privacyContractPage ) ;
}
// #endif
} ,
//打开用户服务协议
openPrivacyService ( ) {
// #ifdef QUICKAPP-WEBVIEW || H5 || WEB
if ( this . $util . isQuickApp ( ) ) {
if ( typeof has != 'undefined' && has ? . openPrivacySetting ) {
has . openPrivacySetting ( {
success : ( res ) => {
// console.log('打开用户服务协议', res);
} ,
fail : ( err ) => {
// console.error('打开用户服务协议失败', err)
}
} ) ;
} else {
// 属于嵌入到快应用Webview组件中的情况, 按照H5的方式来处理
this . $util . redirectTo ( privacyServicePage ) ;
}
this . closeOtherPagePopUpHooks . add ( this . disPopUp )
} ,
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
closeOtherPagePopUp ( closePopUp ) {
this . closeOtherPagePopUpHooks . forEach ( hook => {
if ( closePopUp !== hook ) {
hook ( )
}
} else {
// H5 环境下的处理逻辑
this . $util . redirectTo ( privacyServicePage ) ;
}
// #endif
} ,
// 不同意
handleDisagree ( ) {
this . privacyResolves . forEach ( resolve => {
resolve ( {
event : 'disagree' ,
} )
} ,
//打开隐私协议
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
}
} ,
} )
this . privacyResolves . clear ( )
//关闭弹窗
disPopUp ( ) {
if ( this . showPop === true ) {
this . showPop = false
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 ( )
// #ifdef QUICKAPP-WEBVIEW || H5 || WEB
// 保存用户授权状态到本地存储, 用于快应用Webview组件中的H5方式处理
uni . setStorageSync ( 'privacyAgreed' , true ) ;
// #endif
this . $emit ( 'agree' )
} ,
//打开弹窗
popUp ( ) {
this . showPop = true ;
} ,
//关闭弹窗
disPopUp ( ) {
this . showPop = false ;
} ,
} ,
beforeDestroy ( ) {
// 清理事件监听器和集合
this . privacyResolves . clear ( )
closeOtherPagePopUpHooks . delete ( this . disPopUp )
// 注意:这里需要根据实际情况清理微信和快速应用的事件监听器
// 由于微信的 wx.onNeedPrivacyAuthorization 没有对应的 off 方法,这里可能需要其他方式处理
} ,
}
< / 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 - 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 : 632 rpx ;
padding : 48 rpx 30 rpx ;
box - sizing : border - box ;
background : # fff ;
border - radius : 16 rpx ;
}
. privacy - wrap {
width : 632 rpx ;
padding : 48 rpx 30 rpx ;
box - sizing : border - box ;
background : # fff ;
border - radius : 16 rpx ;
}
. privacy - title {
padding : 0 rpx 30 rpx 40 rpx 30 rpx ;
font - weight : 700 ;
font - size : 36 rpx ;
text - align : center ;
}
. privacy - title {
padding : 0 rpx 30 rpx 40 rpx 30 rpx ;
font - weight : 700 ;
font - size : 36 rpx ;
text - align : center ;
}
. privacy - desc {
font - size : 30 rpx ;
color : # 555 ;
line - height : 2 ;
text - align : left ;
padding : 0 40 rpx ;
}
. privacy - desc {
font - size : 30 rpx ;
color : # 555 ;
line - height : 2 ;
text - align : left ;
padding : 0 40 rpx ;
}
. privacy - link {
color : # 2 f80ed ;
}
. privacy - link {
color : # 2 f80ed ;
}
. privacy - button - flex {
display : flex ;
padding : 20 rpx 40 rpx ;
}
. privacy - button - flex {
display : flex ;
padding : 20 rpx 40 rpx ;
}
. privacy - button - btn {
color : # FFF ;
font - size : 30 rpx ;
font - weight : 500 ;
line - height : 100 rpx ;
text - align : center ;
h eight : 1 00rpx ;
border - radius : 2 0rpx ;
border : none ;
background : # 07 c160 ;
flex : 1 ;
margin - right : 30 rpx ;
justify - content : center ;
}
. privacy - button - btn {
color : # FFF ;
font - size : 30 rpx ;
// #ifdef QUICKAPP-WEBVIEW || H5 || WEB
font - size : 28 rpx ;
// #endif
font - w eight: 5 00;
line - height : 10 0rpx ;
text - align : center ;
height : 100 rpx ;
border - radius : 20 rpx ;
border : none ;
background : # 07 c160 ;
flex : 1 ;
margin - right : 30 rpx ;
justify - content : center ;
}
. privacy - button - btn : : after {
border : none ;
}
. privacy - button - btn : : after {
border : none ;
}
. bg - disagree {
color : # 07 c160 ;
background : # f2f2f2 ;
}
. bg - disagree {
color : # 07 c160 ;
background : # f2f2f2 ;
}
. bg - agree {
margin - right : 0 rpx ;
}
. bg - agree {
margin - right : 0 rpx ;
}
< / style >