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