小程序添加隐私保护指引弹框（包罗设置隐私保护指引方法） - ToB企服应用市场:ToB评测及商务社交产业平台

<template>
<view v-if="showPrivacy" :class="privacyClass">
<view :class="contentClass">
<view class="title">用户隐私保护指引</view>
<view class="des">
感谢您选择使用xxxx小程序，我们非常重视您的个人信息安全和隐私保护。使用我们的产品前，请您仔细阅读“
<text class="link" @tap="openPrivacyContract">{{privacyContractName}} </text>”，
如您同意此隐私保护指引,请点击同意按钮,开始使用此小程序,我们将尽全力保护您的个人信息及合法权益，感谢您的信任！<br />
</view>
<view class="btns">
<button class="item reject" @click="exitMiniProgram">拒绝</button>
<button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization"
@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'PrivacyPopup',
data() {
return {
isRead: false,
showPrivacy: false,
privacyContractName: '',
resolvePrivacyAuthorization: null,
};
},
props: {
position: {
type: String,
default: 'center'
}
},
computed: {
privacyClass() {
return this.position === 'bottom' ? 'privacy privacy-bottom' : 'privacy';
},
contentClass() {
return this.position === 'bottom' ? 'content content-bottom' : 'content';
}
},
mounted() {
if (uni.onNeedPrivacyAuthorization) {
uni.onNeedPrivacyAuthorization((resolve) => {
this.resolvePrivacyAuthorization = resolve;
});
}
if (uni.getPrivacySetting) {
uni.getPrivacySetting({
success: (res) => {
if (res.needAuthorization) {
this.privacyContractName = res.privacyContractName;
this.showPrivacy = true;
} else {
this.showPrivacy = false;
}
},
});
}
},
methods: {
openPrivacyContract() {
uni.openPrivacyContract({
success: () => {
this.isRead = true;
},
fail: () => {
uni.showToast({
title: '遇到错误',
icon: 'error',
});
},
});
},
exitMiniProgram() {
// uni.navigateBack();
wx.exitMiniProgram();
},
handleAgreePrivacyAuthorization() {
this.showPrivacy = false;
this.$emit('allowPrivacy');
if (typeof this.resolvePrivacyAuthorization === 'function') {
this.resolvePrivacyAuthorization({
buttonId: 'agree-btn',
event: 'agree',
});
}
},
closePrivacy() {
this.showPrivacy = false;
}
},
};
</script>
<style scoped>
.privacy {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .5);
z-index: 9999999;
display: flex;
align-items: center;
justify-content: center;
}
.privacy-bottom {
align-items: flex-end;
}
.content {
width: 632rpx;
padding: 48rpx;
box-sizing: border-box;
background: #fff;
border-radius: 16rpx;
}
.content-bottom {
position: absolute;
bottom: 0;
width: 96%;
padding: 36rpx;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
border-radius: 16rpx 16rpx 0 0;
}
.content .title {
text-align: center;
color: #333;
font-weight: bold;
font-size: 32rpx;
}
.content .des {
font-size: 26rpx;
color: #666;
margin-top: 40rpx;
text-align: justify;
line-height: 1.6;
}
.content .des .link {
color: #1989ff;
text-decoration: underline;
}
.btns {
margin-top: 48rpx;
margin-bottom: 12rpx;
display: flex;
}
.btns .item {
width: 200rpx;
height: 72rpx;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
/* border-radius: 16rpx; */
box-sizing: border-box;
border: none !important;
}
.btns .reject {
background: #f4f4f5;
color: #1989ff;
font-size: 14px;
background: #edf5fe;
font-weight: 300;
margin-right: 16rpx;
}
.btns .agree {
width: 200rpx;
background: #1989ff;
color: #fff;
font-size: 16px;
}
.privacy-bottom .btns .agree {
width: 440rpx;
}
</style>

复制代码

<template>
<view>
<xc-privacyPopup ref="privacyComponent" position="center" @allowPrivacy="allowPrivacy"></xc-privacyPopup>
</view>
</template>
<script>
export default {
data() {
return {};
},
onLoad() {},
onShow() {
// 查询隐私协议
wx.getPrivacySetting({
success: res => {
if (!res.needAuthorization) {
this.$refs.privacyComponent.closePrivacy();
// 查询授权，针对有tab切换的页面，可以在onshow中查询隐私授权状态，判断在tab切换后是否需要关闭授权弹框
console.log('已经同意隐私授权，不需要再次授权')
}
},
fail: () => {},
complete: () => {}
})
},
methods: {
// 同意隐私协议
allowPrivacy() {
// 同意隐私协议触发事件，有些接口需要同意授权后才能执行，比如获取手机号授权接口，可以在同意隐私协议后，再执行授权获取手机号接口，如果不需要可以不添加该方法
console.log('同意隐私授权')
}
}
}
</script>
<style lang="scss" scoped>
</style>

复制代码