liedou_uniapp/components/firstAdv.vue

<template>
  <u-mask :show="isShow" :mask-click-able="false">
		<view class="adv-wrap">
			<image class="adv-img" :src="advImg" mode="aspectFit" @click="onClickAd" />
		  <image class="adv-close" src="/static/imgs/close.png" mode="widthFix" @click="onClickClose" />
		</view>
	</u-mask>
</template>

<script>
const app = getApp();
export default {
  name: "firstAdv",
  data() {
    return {
      isShow: false,
      advImg: '',
      advKeyword: '',
    };
  },
  mounted() {
    this.handleGetAdv();
  },
  methods: {
    async handleGetAdv() {
      try {
        const url = this.$api.home_advByType;
        const params = {
          adv_type: 6, // 6弹框广告
          ver_type: 1, // 1-h5
          device_type: 2, // 0不区分设备 1app广告 2小程序广告
        };
        const { data: res = {} } = await this.$get(url, params);
        if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
          const adv = res.rst.data[0]
          if (!adv || adv.status != 1) return false
          this.advImg = adv.img
          this.advKeyword = adv.word
          this.isShow = true
        } else {
          this.isShow = false
          uni.showToast({ title: res.err || "操作失败", icon: "none" });
        }
      } catch (error) {
        this.isShow = false
        console.log('error => ', error)
      }
    },
    onClickAd() {
      this.$emit('confirm', { advKeyword: this.advKeyword })
    },
    onClickClose() {
      this.$emit('cancel')
    },
  },
};
</script>

<style scoped lang="scss">
.adv-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  .adv-img {
    height: 50%;
  }
  .adv-close {
    margin-top: 60rpx;
    width: 60rpx;
    height: 60rpx;
  }
}
</style>