novel-app/RuoYi-App/components/AdSystem.vue

<script>
export default {
  data() {
    return {
      // 多平台广告配置
      adConfig: {
        h5: {
          adpid: 'AYDZ_H5_MAIN',
          widescreen: 'AYDZ_H5_WIDE'
        },
        wechat: {
          unitId: 'WECHAT_AD_UNIT_ID'
        },
        douyin: {
          codeId: 'DOUYIN_AD_CODE_ID'
        }
      }
    }
  },
  computed: {
    currentAdConfig() {
      // #ifdef H5
      return this.adConfig.h5
      // #endif
      // #ifdef MP-WEIXIN
      return this.adConfig.wechat
      // #endif
      // #ifdef MP-TOUTIAO
      return this.adConfig.douyin
      // #endif
      return {}
    }
  },
  methods: {
    showAd(adType) {
      // #ifdef H5
      if(adType === 'feed') {
        this.showH5FeedAd()
      } else {
        this.showH5RewardAd()
      }
      // #endif
      
      // #ifdef MP-WEIXIN
      if(adType === 'feed') {
        this.showWechatBannerAd()
      } else {
        this.showWechatRewardAd()
      }
      // #endif
      
      // #ifdef MP-TOUTIAO
      if(adType === 'feed') {
        this.showDouyinBannerAd()
      } else {
        this.showDouyinRewardAd()
      }
      // #endif
    },
    showH5FeedAd() {
      // 获取DCloud广告实例
      const ad = plus.ad.createAd({
        adpid: this.currentAdConfig.adpid,
        adType: 'feed'
      })
      ad.show()
      
      // 广告事件监听
      ad.onLoad(() => console.log('H5广告加载成功'))
      ad.onClose(res => {
        if(res && res.isEnded) {
          this.$emit('ad-completed')
        }
      })
    }
  }
}
</script>

<template>
  <!-- H5广告组件 -->
  <view v-if="platform === 'h5'">
    <ad 
      v-if="showAd"
      :adpid="currentAdConfig.adpid"
      :adpid-widescreen="currentAdConfig.widescreen"
      @close="onAdClose"
    ></ad>
  </view>
</template>

<style>
</style>