supplier-dispatch-h5/src/views/rvDriverAuthentication/component/protocolDialog.vue

<template>
  <div class="privacy" v-if="showPrivacy">
    <div class="content">
      <div class="title">隐私保护指引</div>
      <div class="pop_con">
        在使用当前小程序服务之前，请仔细阅读<text class="pop_protocol" @click="openPrivacyContract">{{privacyContractName}}</text>如你同意{{privacyContractName}}，请点击“同意”开始使用。
      </div>
      <div class="pop_button_wrap" :style="{'height': 50 + 'px', 'lineHeight': 50 + 'px'}">
        <div class="border_right" @click="exitMiniProgram">
          拒绝
        </div>
        <button id="agree-btn" plain="true" class="pop_confirm" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
      </div>
    </div>
  </div>
</template>

<script>
  import { myMixins } from '@/utils/myMixins.js';
  import twoBtn from "@/components/twoBtn";
  export default {
    name: "protocolDialog",
    data() {
      return {
        privacyContractName: '',
        showPrivacy: false
      }
    },
    components: {
      twoBtn
    },
    mixins: [myMixins],
    created() {
      if (wx.getPrivacySetting) {
        const version = wx.getAppBaseInfo().SDKVersion
        if (this.compareVersion(version, '2.32.3') >= 0) {
          wx.getPrivacySetting({
            success: (res) => {
              if (res.needAuthorization) {
                this.showPrivacy = true;
                this.privacyContractName = res.privacyContractName
              } else{
                this.$emit("agree")
                this.showPrivacy = false;
              }
            }
          })
        }
      } else {
        // 低版本基础库不支持 wx.getPrivacySetting 接口，隐私接口可以直接调用
        this.$emit("agree")
        this.showPrivacy = false;
      }
    },
    /**
     * 组件的生命周期
     */
    pageLifetimes: {
      show() {
        const _ = this
        const version = wx.getAppBaseInfo().SDKVersion
        if (_.compareVersion(version, '2.32.3') >= 0) {
          wx.getPrivacySetting({
            success(res) {
              console.log('隐私设置：', res)
              if (res.errMsg == "getPrivacySetting:ok") {
                this.privacyContractName = res.privacyContractName;
                this.showPrivacy = res.needAuthorization;
              }
            }
          })
        }
      }
    },
    /**
     * 组件的方法列表
     */
    methods: {
      // 打开隐私协议页面
      openPrivacyContract() {
        wx.openPrivacyContract({
          fail: () => {
            wx.showToast({
              title: '遇到错误',
              icon: 'error'
            })
          }
        })
      },
      // 拒绝隐私协议
      exitMiniProgram() {
        // 直接退出小程序
        wx.exitMiniProgram()
        this.showPrivacy = false
      },
      // 同意隐私协议
      handleAgreePrivacyAuthorization() {
        console.log('我点击同意了')
        this.showPrivacy = false
        this.$emit('agree')
      },
      // 比较版本号
      compareVersion(v1, v2) {
        v1 = v1.split('.')
        v2 = v2.split('.')
        const len = Math.max(v1.length, v2.length)

        while (v1.length < len) {
          v1.push('0')
        }
        while (v2.length < len) {
          v2.push('0')
        }

        for (let i = 0; i < len; i++) {
          const num1 = parseInt(v1[i])
          const num2 = parseInt(v2[i])

          if (num1 > num2) {
            return 1
          } else if (num1 < num2) {
            return -1
          }
        }

        return 0
      }
    },
  }
</script>

<style scoped lang="scss">
  .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;
    .content {
      width: 632rpx;
      padding-top: 48rpx !important;
      box-sizing: border-box;
      background: #fff;
      border-radius: 16rpx;
    }
  }



  .content .title {
    font-size: 16px;
    color: #000;
    margin-bottom: 10px;
    text-align: center;
  }

  /*登录弹框样式*/
  .pop_con {
    color: #203152;
    font-size: 14px;
    margin-bottom: 30px;
    /*text-align: left;*/
    padding: 0 20px;
    line-height: 26px;
    text-align: center;
  }
  .pop_protocol {
    color: #1D64D2;
    word-break: keep-all;
  }

  .pop_button_wrap {
    display: flex;
    border-top:  1rpx solid rgba($color: #979797, $alpha: 0.34);
    div {
      width: calc(50% - 1rpx);
      text-align: center;
      font-size: 14px;
      color: rgba(0,0,0,0.73);
    }
    .border_right {
      border-right: 1rpx solid rgba($color: #979797, $alpha: 0.34);
    }
    .pop_confirm {
      color: #1D64D2;
      border: none;
      background-color: transparent;
    }
  }
</style>