一、template
<!-- 隐私保护指引 -->
<view class="privacy-guide-box" v-if="showPrivacyGuide" @touchmove.stop.prevent="toMoveHandle">
<view class="container-box">
<view class="pop-title">温馨提示</view>
<view class="pop-cont-box">
<text>在你使用【{
{ dialogName }}】 服务之前,请仔细阅读</text>
<text class="pop-link-tip" @click="toShowPact">《{
{ dialogName }}隐私保护指引》</text>
<text>。如你同意《{
{ dialogName }}隐私保护指引》,请点击“同意”开始使用【{
{ dialogName }}】。</text>
</view>
<view class="pop-btn-box">
<button class="pop-reject-tip" @click.stop="toPopReject">拒绝</button>
<button class="pop-agree-tip" id="agree-btn" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="toPopAgree">
同意
</button>
</view>
</view>
</view>
二、data
/* 隐私保护指引 */
showPrivacyGuide: false,
dialogName: "数智贵阳",
resolvePrivacyAuthorization: null,
三、onLoad
/* 隐私保护指引 */
wx.getPrivacySetting({
success: res => {
if (res.needAuthorization) this.showPrivacyGuide = true; // 需要弹出隐私协议
}
});
wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
console.log("触发本次事件的接口是:", resolve, eventInfo, eventInfo.referrer);
this.showPrivacyGuide = true; // 需要弹出隐私协议
this.resolvePrivacyAuthorization = resolve;
});
四、methods
/* 隐私保护指引 */
toShowPact() {
// 跳转至隐私协议页面
wx.openPrivacyContract({});
},
toPopReject() {
// 拒绝
this.showPrivacyGuide = false;
},
toPopAgree() {
// 同意
this.showPrivacyGuide = false;
this.resolvePrivacyAuthorization && this.resolvePrivacyAuthorization({ buttonId: "agree-btn", event: "agree" });
},
toMoveHandle() {},
五、style
/* 隐私保护指引 - style */
.privacy-guide-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 999;
.container-box {
width: 80%;
background: #fff;
border-radius: 16rpx;
}
.pop-title {
width: 100%;
text-align: center;
color: #000;
font-size: 38rpx;
margin-top: 30rpx;
font-weight: 900;
}
.pop-cont-box {
color: #969799;
line-height: 1.5;
font-size: 32rpx;
padding: 30rpx 40rpx;
text-align: justify;
.pop-link-tip {
color: #01a281;
}
}
.pop-btn-box {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 20rpx 30rpx;
button {
width: 45%;
border: 2px solid #01a281;
border-radius: 50rpx;
}
.pop-reject-tip {
color: #01a281;
}
.pop-agree-tip {
color: #fff;
background: #01a281;
}
}
}