web/apps/mobile/src/components/ad/pop-screen/index.vue

<template>
  <van-dialog
    v-if="!destroyed"
    get-container="body"
    close-on-click-overlay
    overlay-class="tabbar-home-pop-screen"
    :show-confirm-button="false"
    class="tabbar-home-dialog"
    v-model="show"
    @close="close"
  >
    <AppIcon name="close" @click.stop="close" />
    <div
      class="container"
      :style="{
        width: getStyle.width,
        height: getStyle.height
      }"
      @click.stop="openAD"
    >
      <AdSvga
        v-if="isSvgaType"
        :style="{
          width: getStyle.width,
          height: getStyle.height
        }"
        :svga-link="config.pic"
      />
      <van-image
        v-else
        :id="config.name"
        :src="config.pic"
        :width="getStyle.width"
        :height="getStyle.height"
      />
    </div>
  </van-dialog>
</template>

<script>
import { Icon, Image, Dialog } from 'vant'
import { AppIcon } from '@/ui'
import AdSvga from '@/components/ad/svga-support'

import { openLinkOfAd, px2px } from '@/utils'

export default {
  name: 'AdPopScreen',
  components: {
    [AppIcon.name]: AppIcon,
    [AdSvga.name]: AdSvga,
    [Dialog.Component.name]: Dialog.Component,
    [Image.name]: Image,
    [Icon.name]: Icon
  },
  props: {
    // 缓存 Key, 未传递则不缓存
    cacheKey: {
      type: String,
      default: ''
    },
    beforeOpen: Function,
    // 过期规则 today 今天23:59:59 或 时间戳
    expires: {
      type: [String, Number],
      default: 'today'
    },
    // 广告配置
    config: {
      type: Object,
      default() {
        return {
          pic: '',
          link: '',
          name: '首屏广告',
          extend: {
            width: '',
            height: '',
            type: ''
          }
        }
      }
    }
  },
  computed: {
    isSvgaType() {
      return this.config?.pic?.indexOf('.svga') !== -1
    },
    getStyle() {
      return {
        width: px2px(this.config?.extend?.width || 311),
        height: px2px(this.config?.extend?.height || 440)
      }
    }
  },
  /**
   * 初始化数据
   * @typedef {object} FullScreen 初始化数据
   * @property {boolean} destroyed 是否需要初始化组件
   * @property {boolean} show 是否显示遮罩
   */
  /**
   * 初始化数据函数
   * @returns FullScreen
   */
  data: () => ({
    destroyed: true,
    show: false
  }),
  created() {
    const toDayShow = this.$storage.get(this.cacheKey, false)
    if (!toDayShow) {
      this.destroyed = false
    } else {
      this.initNextDialog()
      this.$emit('destroyed')
    }
  },
  mounted() {
    this.loadSuccess()
  },
  methods: {
    initNextDialog() {
      this.$nextTick(() => {
        this.$emit('initNext')
      })
    },
    loadSuccess() {
      this.show = true
      this.$emit('load')
    },
    /**
     * 关闭弹窗
     * @param type -关闭事件是否由点击关闭弹窗触发的
     */
    close(type = true) {
      this.show = false
      this.destroyed = true
      if (this.cacheKey) {
        this.$storage.set(this.cacheKey, true, {
          expires: this.expires
        })
      }
      this.initNextDialog()
      this.$emit('close', type)
    },
    async openAD() {
      if (this.beforeOpen) {
        const prevent = await this.beforeOpen()
        // 返回 true 可以继续往下走，返回 false 阻止跳转
        if (!prevent) {
          return
        }
      }
      this.close(false)
      openLinkOfAd({
        link: this.config.link,
        title: this.config.name,
        type: this.config.extend.type
      })
    }
  }
}
</script>

<style lang="scss">
.tabbar-home-pop-screen {
  background: rgba(0, 0, 0, 0.5);
  z-index: 3001 !important;
}
</style>
<style scoped lang="scss">
::v-deep {
  .van-dialog__content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.tabbar-home-dialog {
  z-index: 3002 !important;
  overflow: unset;
  background: transparent;
}
.container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.van-image {
  max-width: 100%;
}
.icon-close {
  pointer-events: none;
  position: absolute;
  top: -28px - 16px;
  right: 0;
  font-size: 28px;
  color: #fff;
}
</style>