wx_h5_front/src/components/popup_new/popup.vue

<template>
  <transition name='fade'>
    <!-- 蒙版 -->
    <div class="mask" v-if="show" @touchmove.prevent>
      <div class="wrapper">
        <img :src="info.popup_image_url" class="ad-image" alt="" @click="toAdPay">
        <!-- <img src="../../api/adtest.png" class="ad-image" alt="" @click="toAdPay"> -->
        <div class="text-wrapper" @click="toAdPay">
          <div class="title">充<span>{{ info.product_info.price }}</span>元 <span v-if="isShowGive">，送{{
            info.product_info.given }}书币</span>
          </div>
          <div class="title" v-if="isShowGive">立得<span>{{ standCoin }}</span>书币</div>
          <div class="title" v-else>得<span>{{ coin }}</span>书币</div>
          <!-- <div class="sub-title">立省M元</div> -->
        </div>
        <div class="close-wrapper">
          <img @click="close" class="close" src="../../assets/close_icon.png" alt="">
        </div>
      </div>

    </div>
  </transition>
</template>

<script>
import { advertisementPopupInfo } from '../../api/index'
import {
  adPay,
} from "../../view/namespace";
export default {
  name: 'adPay',
  props: {
    popup_position: {
      type: String,
      default: 'homePage'
    },
    from: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      info: {
        "popup_image_url": "https://zhuishuyun.oss-cn-hangzhou.aliyuncs.com/wap/popup_adv_images/popup3%402x.png",  // 弹窗图片地址
        "product_id": null, // 充值档位id
        // 充值档位信息
        "product_info": {
          "price": 555, // 充值金额
          "given": 666, //赠送金币
        },
        "id": null, // 弹窗广告id
      },
      show: false,
      title: '',
      content: '',
      btnText: '',
      click: ''
    }
  },
  computed: {
    isShowGive () {
      return Number(this.info.product_info.given) > 0
    },
    standCoin () {
      return Number(this.info.product_info.price) * 100 + Number(this.info.product_info.given)
    },
    coin () {
      return Number(this.info.product_info.price) * 100
    }
    // show () {
    //   return Boolean(this.info.id)
    // }
  },
  created () {
    console.log(adPay);
    this.init()
  },
  methods: {
    init () {
      advertisementPopupInfo({ popup_position: this.popup_position })
        .then(res => {
          console.log(res);
          this.info = res
          if (this.info.id) {
            this.show = true
          }
        }).catch(err => {
          console.log(err);
          if (this.popup_position == 'returnNotRecharge') {
            if (this.from == 'reader') {
              console.log('readerreaderreader');
              this.$router.go(-2)
            } else {
              console.log('chongzchongzchongzchongz');
              this.$router.go(-1)
            }
          }
        })
    },
    close () {
      this.show = false
      this.info.id = null
    },
    toAdPay () {
      this.$router.push({ path: 'ad_pay', query: { product_id: this.info.product_id, id: this.info.id } })
      this.show = false

    }
  }
}
</script>
<style lang="scss" scoped>
// 渐变过渡
.fade-enter,
.fade-leave-active {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.35s;
}

.text-wrapper {
  width: 70%;
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -48%);

  .title {
    font-size: 0.36rem;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    color: #d65142;
  }

  .sub-title {
    font-size: 0.45rem;
    font-family: MicrosoftYaHei;
    color: #5e5a60;
    margin-bottom: 0.5rem;
  }
}

.mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 75/75rem;

  .wrapper {
    width: 95%;
    border-radius: 8px;
    text-align: center;

    .ad-image {
      width: 100%;
      object-fit: contain;
    }

    .close-wrapper {
      .close {
        width: 42px;
        height: 42px;
        margin-top: 2em;
      }
    }
  }
}

@media screen and (max-width: 321px) and (max-width: 375px) {}
</style>