bindbox-mini/components/PrivacyPopup.vue

<template>
  <view v-if="showPrivacy" class="privacy-popup-mask">
    <view class="privacy-popup-content">
      <view class="privacy-title">用户隐私保护提示</view>
      <view class="privacy-desc">
        感谢您使用柯大鸭盲盒小程序。我们非常重视您的隐私保护和用户权益。
        <br /><br />
        在您使用我们的服务前，请您仔细阅读并充分理解
        <text class="privacy-link" @tap="openPrivacyContract">《用户隐私保护指引》</text>。
        <br /><br />
        当您点击同意并开始使用我们的服务时，即表示您已理解并同意该指引内容，我们将按照指引内容处理您的个人信息。
      </view>
      <view class="privacy-buttons">
        <button class="btn-reject" @tap="handleDisagree">拒绝</button>
        <button 
          class="btn-agree" 
          id="agree-btn" 
          open-type="agreePrivacyAuthorization" 
          @agreeprivacyauthorization="handleAgree"
        >
          同意
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PrivacyPopup',
  data() {
    return {
      showPrivacy: false,
      resolvePrivacyAuthorization: null
    }
  },
  mounted() {
    // #ifdef MP-WEIXIN
    this.initPrivacy()
    // #endif
  },
  methods: {
    initPrivacy() {
      // #ifdef MP-WEIXIN
      wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
        console.log('[隐私协议] 触发隐私授权', eventInfo)
        this.resolvePrivacyAuthorization = resolve
        this.showPrivacy = true
      })
      
      wx.getPrivacySetting({
        success: (res) => {
          console.log('[隐私协议] 隐私设置', res)
          if (res.needAuthorization) {
            // 需要弹出隐私协议
          } else {
            // 用户已同意隐私协议
            this.showPrivacy = false
          }
        },
        fail: (err) => {
          console.error('[隐私协议] 获取隐私设置失败', err)
        }
      })
      // #endif
    },
    
    openPrivacyContract() {
      // #ifdef MP-WEIXIN
      wx.openPrivacyContract({
        success: () => {
          console.log('[隐私协议] 打开隐私协议成功')
        },
        fail: (err) => {
          console.error('[隐私协议] 打开隐私协议失败', err)
        }
      })
      // #endif
    },
    
    handleAgree() {
      console.log('[隐私协议] 用户同意')
      this.showPrivacy = false
      if (this.resolvePrivacyAuthorization) {
        this.resolvePrivacyAuthorization({
          event: 'agree',
          buttonId: 'agree-btn'
        })
        this.resolvePrivacyAuthorization = null
      }
      this.$emit('agree')
    },
    
    handleDisagree() {
      console.log('[隐私协议] 用户拒绝')
      this.showPrivacy = false
      if (this.resolvePrivacyAuthorization) {
        this.resolvePrivacyAuthorization({
          event: 'disagree'
        })
        this.resolvePrivacyAuthorization = null
      }
      this.$emit('disagree')
      uni.showModal({
        title: '提示',
        content: '您拒绝了隐私协议，部分功能可能无法正常使用',
        showCancel: false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.privacy-popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.privacy-popup-content {
  width: 600rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 48rpx 40rpx;
  box-sizing: border-box;
}

.privacy-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 32rpx;
}

.privacy-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.8;
  margin-bottom: 40rpx;
}

.privacy-link {
  color: #FF6B00;
  text-decoration: underline;
}

.privacy-buttons {
  display: flex;
  gap: 24rpx;
}

.btn-reject {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 30rpx;
  color: #666;
  background: #f5f5f5;
  border: none;
  border-radius: 44rpx;
  
  &::after {
    border: none;
  }
}

.btn-agree {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 30rpx;
  color: #fff;
  background: linear-gradient(135deg, #FF9500, #FF6B00);
  border: none;
  border-radius: 44rpx;
  
  &::after {
    border: none;
  }
}
</style>