<!– 隐私协议 –>
<privacyPopup :privacyShow=”privacyShow” @custom-event=”privacyClose”></privacyPopup>
import privacyPopup from ‘@/components/privacy-popup/privacy-popup.vue’;
{
components: {
privacyPopup
},
data() {
return {
options:{
// 隐私协议弹窗
privacyShow:false,
},
},
},
onLoad: function (options) {
// #ifdef MP-WEIXIN
// 获取隐私协议设置
wx.getPrivacySetting({
success: res => {
console.log(‘wx.getPrivacySetting’, res)
// 返回结果为: res = { needAuthorization: true/false, privacyContractName: ‘《xxx隐私保护指引》’ }
// false.已同意过隐私协议
if (res.needAuthorization) {
// 需要弹出隐私协议
that.setData({
privacyShow:true,
});
}
else {
// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用已声明过的隐私接口
that.privacyClose();
}
},
fail: () => {},
complete: () => {}
});
// #endif
},
privacyClose:function(){
this.setData({privacyShow:false})
},
}
privacy-popup.vue
<template>
<view
v-if=”privacyShow”
class=”weui-half-screen-dialog”>
<view class=”weui-half-screen-dialog__hd”>
<text class=”weui-half-screen-dialog__title”>{{privacyData.title}}</text>
</view>
<view class=”weui-half-screen-dialog__bd”>
<view class=”weui-half-screen-dialog__tips”>{{privacyData.desc1}}</view>
<view class=”weui-half-screen-dialog__tips”
style=”color:blue”
@click=”openPrivacyContract”>
{{privacyData.urlTitle}}
</view>
<view class=”weui-half-screen-dialog__tips”>{{privacyData.desc2}}</view>
</view>
<view class=”weui-half-screen-dialog__ft”>
<view class=”weui-half-screen-dialog__btn-area”>
<button id=”disagree-btn”
type=”default”
class=”weui-btn”
@click=”handleDisagree”
style=”margin-right: 20rpx;”
>不同意并退出</button>
<!– 同意协议 –>
<button id=”agree-btn”
type=”default”
open-type=”agreePrivacyAuthorization”
class=”weui-btn btn0″
@click=”handleAgree”
>同意并继续</button>
</view>
</view>
</view>
</template>
<script>
export default {
name:’privacyPopup’,
props:{
privacyData: {
type: Object,
default: {
title: ‘隐私协议弹窗’,
desc1:’在您使用之前，请仔细阅读’,
urlTitle:’《小程序用户隐私保护指引》’,
desc2:’。如果您认可该保护指引，请点击“同意”开始使用。’
},
},
privacyShow: {
type: Boolean,
default: false,
},
doDisagree: {
type: Function,
default: function(){
},
},
},
methods:{
handleDisagree:function(){
console.log(‘handleDisagree’)
uni.showModal({
content:”请先同意该协议”
})
},
handleAgree:function(e){
console.log(‘handleAgree’)
//1.父组件的方法 @custom-event=””, e.要传递的参数
this.$emit(“custom-event”, e);
},
openPrivacyContract:function(){
// 打开隐私协议页面
uni.openPrivacyContract({
success: () => {}, // 打开成功
fail: () => {}, // 打开失败
complete:() => {}
});
}
}
}
</script>
<style>
.weui-half-screen-dialog {
position: fixed;
left: 50%;
top: 50%;
width: 90%; height:600rpx;
margin-top:-300rpx; margin-left:-45%;
z-index: 5000;
line-height: 1.4;
background-color: #fff;
color: #000;
border-radius:24rpx;
overflow: hidden;
padding: 0 48rpx;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
outline: 0;
box-shadow: 0 0 30rpx rgba(0, 0, 0, .5);
}
.weui-half-screen-dialog__hd {
min-height: 128rpx;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.weui-half-screen-dialog__title {
display: block;
color: var(–weui-FG-0);
font-weight: 500;
font-size: 30rpx;
}
.weui-half-screen-dialog__bd {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
min-height: 0;
overflow-y: auto;
word-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
padding-bottom: 112rpx;
font-size: 28rpx;
}
.weui-half-screen-dialog__desc {
font-size: 34rpx;
font-weight: 700;
line-height: 1.4;
}
.weui-half-screen-dialog__tips {
padding-top: 32rpx;
font-size: 28rpx;
line-height: 1.4;
}
.weui-half-screen-dialog__ft {
padding: 0 0 40rpx;
text-align: center;
}
.weui-half-screen-dialog__btn-area {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.weui-half-screen-dialog__btn-area .weui-btn {
flex:1;
font-size:28rpx;
height: 80rpx; line-height:80rpx;
padding-left: 32rpx;
padding-right: 32rpx;
margin-top: 0!important;
}
.weui-half-screen-dialog__btn-area .weui-btn.btn0 {
background:#227bfd; color:#fff;
}
</style>