uni-app 开发小程序接入隐私协议弹窗

一、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;
    }
  }
}