html
<template>
<view v-if="showPrivacy" :class="privacyClass">
<view :class="contentClass">
<view class="title">用户隐私保护指引</view>
<view class="des">
感谢您选择使用我们的小程序,我们非常重视您的个人信息安全和隐私保护。使用我们的产品前,请您仔细阅读"
<text class="link" @tap="openPrivacyContract">{{privacyContractName}} </text>",
如您同意此隐私保护指引,请点击同意按钮,开始使用此小程序,我们将尽全力保护您的个人信息及合法权益,感谢您的信任!<br />
</view>
<view class="btns">
<button class="item reject" @tap="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' ? 'content2 content-bottom' : 'content2';
}
},
mounted() {
if (wx.onNeedPrivacyAuthorization) {
wx.onNeedPrivacyAuthorization((resolve) => {
this.resolvePrivacyAuthorization = resolve;
});
}
if (wx.getPrivacySetting) {
wx.getPrivacySetting({
success: (res) => {
console.log(res, 'getPrivacySetting');
if (res.needAuthorization) {
this.privacyContractName = res.privacyContractName;
this.showPrivacy = true;
}
},
});
}
},
methods: {
openPrivacyContract() {
wx.openPrivacyContract({
success: () => {
this.isRead = true;
},
fail: () => {
uni.showToast({
title: '遇到错误',
icon: 'error',
});
},
});
},
exitMiniProgram() {
wx.exitMiniProgram();
},
handleAgreePrivacyAuthorization() {
this.showPrivacy = false;
if (typeof this.resolvePrivacyAuthorization === 'function') {
this.resolvePrivacyAuthorization({
buttonId: 'agree-btn',
event: 'agree',
});
}
},
},
};
</script>
<style lang="scss" 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;
}
.content2 {
width: 632rpx;
padding: 48rpx;
box-sizing: border-box;
background: #fff;
border-radius: 16rpx;
}
.content-bottom {
position: absolute;
bottom: 0;
width: 100%;
padding: 36rpx;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
border-radius: 16rpx 16rpx 0 0;
}
.content2 .title {
text-align: center;
color: #333;
font-weight: bold;
font-size: 32rpx;
}
.content2 .des {
font-size: 26rpx;
color: #666;
margin-top: 40rpx;
text-align: justify;
line-height: 1.6;
}
.content2 .des .link {
color: #07c160;
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: #07c160;
font-size: 14px;
font-weight: 300;
margin-right: 16rpx;
width: 240rpx;
&::after{
border: none;
}
}
.btns .agree {
width: 240rpx;
background: #07c160;
color: #fff;
font-size: 16px;
&::after{
border: none;
}
}
.privacy-bottom .btns .agree {
width: 240rpx;
}
</style>
然后在用到的页面进行引入
html
<template>
<popup ref="privacyComponent" position="bottom" />
</template>
<script setup>
import popup from '/components/privacy-popup.vue'
</script>