create-rewarded-video-ad.uvue

<template>
  <page-head title="激励视频广告"></page-head>
  <button :type="btnType" style="margin: 10px;" :disabled="btnDisable" @click="showAd()">{{btnText}}</button>
</template>

<script>
  export default {
    data() {
      return {
        btnText: "",
        btnType: "primary",
        btnDisable: false,
        rewardAd: null as RewardedVideoAd | null,
        isAdLoadSuccess: false
      }
    },
    onReady() {
      this.loadAd()
    },
    methods: {
      loadAd() {
        if (this.btnDisable)
          return
        this.btnDisable = true
        this.btnText = "正在加载广告"
        this.btnType = "primary"
        if (this.rewardAd == null) {
          this.rewardAd = uni.createRewardedVideoAd({
            adpid: "1507000689" //此处为测试广告位，实际开发中请在uni-ad后台申请自己的广告位后替换
          })
          this.rewardAd!.onError((_) => {
            this.btnType = "warn"
            this.btnText = "广告加载失败，点击重试"
            this.btnDisable = false
          })
          this.rewardAd!.onLoad((_) => {
            this.btnType = "primary"
            this.btnText = "广告加载成功，点击观看"
            this.btnDisable = false
            this.isAdLoadSuccess = true
          })
          this.rewardAd!.onClose((e) => {
            // 测试广告位无法通过服务器回调。实际开发中，使用自己的广告位后，需参考uni-ad文档编写服务器回调的代码，在服务端发放奖励
            this.isAdLoadSuccess = false
            uni.showToast({
              title: "激励视频" + (e.isEnded ? "" : "未") + "播放完毕",
              position: "bottom"
            })
            this.loadAd()
          })
        }
        this.rewardAd!.load()
      },
      showAd() {
        if (this.isAdLoadSuccess) {
          this.rewardAd!.show()
        } else {
          this.loadAd()
        }
      }
    }
  }
</script>

<style>

</style>