<template>
  <div class="basicMaskDiv" @click="closeClick" v-if="show">
    <div class="van-popup-actred van-popup-actred-center" style="z-index: 2012;">
      <div class="van-dialog__header">注意</div>
      <div class="explain-container-actred">
        <div
          style="font-size: .1rem; margin-left: .16rem; margin-top: .08rem; text-align: center; color: rgb(242, 60, 60);">
          提醒功能只能在京东中使用，请打开京东扫码进入活动完成提醒操作。
        </div>
        <div style="margin:.1rem auto 0;display: flex;justify-content: center">
          <img class="qrCodeImg" :src="qrCodeImg"/>
        </div>
      </div>
      <div class="van-hairline--top van-dialog__footer">
        <button class="van-button van-button--default van-button--large van-dialog__confirm"
                style="color: rgb(242, 60, 60);"><span class="van-button__text">知道了</span></button>
      </div>
    </div>
  </div>
</template>

<script>
import {qrCodeFunction} from '../../../js/common.js';

export default {
  props: [],
  components: {},
  data() {
    return {
      activityLink: '',
      qrCodeImg: '',
      show: true,
    };
  },
  created() {
    document.querySelector("body").setAttribute("style",
      "position:#fixed;top:0;height:100%;overflow:hidden"
    );
    this.initData();
  },
  methods: {
    initData() {
      this.activityLink = this.acRemindAddress;
      if (this.activityLink != '') {
        qrCodeFunction(this.activityLink, callBack => {
          if (callBack != '') {
            this.qrCodeImg = callBack;
          }
        })
      }
    },
    closeClick() {
      document.querySelector('body').removeAttribute('style');
      this.submit();
    },
  },

};
</script>

<style lang="scss">
.van-popup-actred {
  position: fixed;
  top: 45%;
  left: 50%;
  width: 320px;
  overflow: hidden;
  font-size: 16px;
  background-color: #fff;
  border-radius: 16px;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}

.van-popup-actred-center {
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

.explain-container-actred {
  width: 6.3rem;
  height: 4.55rem;
  box-sizing: border-box;
}

.basicMaskDiv {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  bottom: 0;
  z-index: 200;
}

.qrCodeImg {
  width: 3.8rem;
}
</style>
