HNKDBOSS-WEB/hn-shop-uniapp/components/privacy-popup/index.vue

<template>
  <!-- 用户隐私保护弹窗 -->
  <!-- #ifdef MP-WEIXIN -->
  <view v-if="storeInfo" class="privacy-popup">
    <u-popup v-model="showPrivacy" mode="bottom" border-radius="20" :safe-area-inset-bottom="true" :mask-close-able="false" :mask-custom-style="{background: 'rgba(0, 0, 0, 0.7)'}">
      <view class="privacy-container">
        <view class="title">用户隐私保护提示</view>
        <view class="content">
          <text>感谢您使用{{ storeInfo.store_name }}，同意并继续表示您已阅读并同意</text>
          <text class="col-m" @click="handlePrivacyContract()">《隐私政策》</text>
          <text>，否则将无法正常使用相关功能。</text>
        </view>
        <view class="actions">
          <view class="btn-item btn-grey" @click="handleDisagree()">
            <text>不同意</text>
          </view>
          <button class="btn-item btn-main btn-normal" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgreePrivacyAuthorization()">
            <text>同意并继续</text>
          </button>
        </view>
      </view>
    </u-popup>
  </view>
  <!-- #endif -->
</template>

<script>
export default {
  props: {
    // 弹出隐私窗口时是否隐藏tabbar
    hideTabBar: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      // 隐私协议弹窗
      showPrivacy: false,
      // 商城基本信息
      storeInfo: undefined
    }
  },

  created() {
    // 获取商城基本信息
    this.getStoreInfo()
    // #ifdef MP-WEIXIN
    // 弹出隐私协议 (微信小程序端)
    this.needAuthorization()
    // #endif
  },

  methods: {
    // 弹出隐私协议 (微信小程序端)
    needAuthorization() {
      const app = this
      uni.getPrivacySetting({
        success({needAuthorization, privacyContractName}) {
          console.info('getPrivacySetting', {needAuthorization, privacyContractName})
          // 需要弹出隐私协议
          if (needAuthorization) {
            app.showPrivacy = true
            app.hideTabBar && uni.hideTabBar()
          }
        }
      })
    },

    // 查看隐私协议内容
    handlePrivacyContract() {
      uni.openPrivacyContract()
    },

    // 用户同意隐私协议事件回调
    handleAgreePrivacyAuthorization() {
      // 用户点击了同意，才可以调用隐私接口和组件，例如：
      // wx.getUserProfile()
      // wx.chooseImage()
      // wx.saveImageToPhotosAlbum()
      // wx.setClipboardData()

      this.hideTabBar && uni.showTabBar()
      this.showPrivacy = false
    },

    // 用户不同意隐私协议
    handleDisagree() {
      this.$toast('很抱歉，请先同意后可继续使用~', 2000)
    }
  }
}
</script>

<style lang="scss" scoped>
.privacy-container {
  padding: 40rpx 60rpx;

  .title {
    text-align: center;
    margin-bottom: 40rpx;
    font-size: 32rpx;
    font-weight: bold;
  }

  .content {
    margin-bottom: 50rpx;
    font-size: 28rpx;
    line-height: 50rpx;
  }

  .actions {
    display: flex;
    justify-content: space-between;
    padding: 0 20rpx;

    .btn-item {
      width: 280rpx;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 20rpx;
      text-align: center;

      &.btn-grey {
        background: #f8f8f8;
        color: #000;
      }

      &.btn-main {
        background: linear-gradient(to right, $main-bg, $main-bg2);
        color: $main-text;
      }
    }
  }
}
</style>