uniapp微信小程序用户隐私保护指引弹窗组件

<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>

然后在用到的页面进行引入

<template><popup ref="privacyComponent" position="bottom"  />
</template><script setup>import popup from '/components/privacy-popup.vue'
</script>