novelQuick/src/pages/commonModule/redPacket/index.ux

<!-- src/components/tools-mall/index.ux -->
<template>
  <div class="content">
    <div class="box text-white">
      <text class="text-24 text-white" style="font-size: 24px;">金币明细</text>
      <div class="mgy-20" style="align-items: center;">
        <text class="text-48 text-white" style="margin-right: 5px;font-size: 48px;">{{ coinNum }}</text>
        <text class="text-white" style="font-size: 24px;margin-left: 10px;" @click="navTo('pages/commonModule/coinRecord')">金币 ></text>
      </div>
      <text class="text-24 text-white" style="font-size: 24px;">活动奖品数量有限，先到先得，兑完即止</text>
    </div>
    <div class="box2">
      <div class="top_box">
        <text class="text-36" style="color: #333;">新人签到 必得金币</text>
        <text class="text-24" style="color: #ffcdaf;margin-top: 10px;">活动盛启，福利满满</text>
      </div>
      <div class="bottom_box">
        <div class="bottom_item" style="border-bottom: 1px solid #ddd;">
          <div class="fd_c">
            <text class="text-32 text-000">签到</text>
            <text class="text-24 text-999">连续签到奖励更高！</text>
          </div>
          <div class="{{ signStatus?'disBtn':'btn' }}" @click="signIn">
            <text>{{ signStatus ? '已签到' : '签到'}}</text>
          </div>
        </div>
        <div class="bottom_item" style="border-bottom: 1px solid #ddd;">
          <div class="fd_c">
            <text class="text-32 text-000">天天惊喜，红包多多</text>
            <text class="text-24 text-999">金币兑换海量福利等你来拿</text>
          </div>
          <div class="{{ getStatus?'disBtn':'btn' }}" @click="getCoin">
            <text>{{getStatus?'已领取':'立即领取'}}</text>
          </div>
        </div>
        <div style="height: 300px;width: 100%;">
           <ad
            adId="{{adList.adId}}"
            class="ad-native"
            style="height: 100%;width: 100%;"
            if="{{adList && adList.adId}}"
          >
            <div class="container">
              <block>
                <div class="vertical-content big-img">
                  <ad-clickable-area type="click" class="ad-image"  if="{{ adList.creativeType===2}}">
                    <image src="{{adList.imgUrlList[0]}}" style="width: 100%;"></image>
                  </ad-clickable-area>
                  <!-- <div class="ad-text">
                    <ad-clickable-area type="click">
                      <text>{{ adList.desc }}</text>
                    </ad-clickable-area>
                  </div> -->
                </div>
              </block>
              <div class="footer">
                <ad-clickable-area type="click" class="footer-info">
                  <image class="tag" src="{{adList.icon}}"></image>
                  <text class="title">{{ adList.title  }}</text>
                </ad-clickable-area>
                <div class="click-item">
                  <ad-clickable-area
                    type="button"
                    class="click-txt"
                    value="{{ adList.clickBtnTxt }}"
                  >
                  </ad-clickable-area>
                </div>
              </div>
            </div>
          </ad>
        </div>
        <div class="bottom_item" style="border-bottom: 1px solid #ddd;">
          <div class="fd_c">
            <text class="text-32 text-000">柚趣屋</text>
            <text class="text-24 text-999">点击右边按钮体验</text>
          </div>
          <div class="btn" @click="backIndex()">
            <text>返回首页</text>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import router from '@system.router'

export default {
  private: {
    coinNum:0,//金币数量
    signStatus:false, // 是否已经签到
    getStatus:false,// 是否已领取
    adUnitId: "d3d0539a806145ebabf502d29d0d1b43", // 这个id是vivo的com.quickapp.center创建的，需要修改manifest的package才能预览出效果
    ad: null,
    adList:{},
  },
  onInit() {
      // this.initAd()
      this.indexNativeAd()
  },
  indexNativeAd(){
    // 原生广告 1.0
    // let nativeAd = ad.createNativeAd({  // 使用require方式避免在不支持的广告接口的厂商运行是报错
    //     adUnitId:  '805a483bc3b14205a1d160cb97d0eca0',
    // })
    // nativeAd.onLoad((data) => {          
    //   console.log('Native ad resources!', data); // 广告加载成功，返回原生广告资源，根据但是资源自行渲染展现
    // })        
    // nativeAd.load();
    // 原生广告2.0
    let adParams = {
      adUnitId: '805a483bc3b14205a1d160cb97d0eca0', // 原生广告2.0广告位id
      type: 'native',          // 原生广告2.0广告类型 
      adCount: 1,              // 原生广告2.0广告预期返回广告条数   
    }
    require('@service.ad').preloadAd({
      ...adParams,
      success: (data) => {
        this.adList = data.adList[0]
        console.log('data',data)
        // prompt.showToast({
        //   message: `success! data=${JSON.stringify(data)}`
        // })
      }, fail: (data, code) => {
        console.log(data, code)
        // prompt.showToast({
        //   message: `fail! data=${JSON.stringify(data)}, code=${code}`
        // })
      }
    })
  },
  backIndex() {
    router.replace({
      uri: 'pages/main',
      params: {
        testId: '1'
      }
    })
  },
  navTo(uri){
    router.push({
      uri,
    })
  },
  getCoin(){
      this.initAd()
  },
   initAd() {      
      try {        
        this.ad = require('@service.ad').createRewardedVideoAd({  // 使用require方式避免在不支持的广告接口的厂商运行是报错
          adUnitId: this.adUnitId,
        })        
        this.ad.onLoad(() => {          
          this.ad.show();
        })        
        this.ad.onClose((res) => {           
           if (res && res.isEnded) {             
             console.log("正常播放结束，可以下发奖励");
             if(!this.getStatus){
                $utils.showToast('领取成功')
                this.coinNum += 10
                this.getStatus = true
              }else{
                $utils.showToast('已领取')
              }
           } else {             
             console.log("播放中途退出，不下发奖励");
           }
        })        
        this.ad.load();
      } catch (e) {        
        console.log(e)
      }
    },
  signIn(){
      if(!this.signStatus){
        $utils.showToast('签到成功')
        this.coinNum += 10
        this.signStatus = true
      }else{
        $utils.showToast('已签到')
      }
  },
  
}
</script>

<style lang="less">
.content {
  padding: 28px;
  flex-direction: column;
  background: linear-gradient(to bottom, #ff8843, #ffffff);
}
.box {
  width: 100%;
  height: 220px;
  padding: 28px;
  background: linear-gradient(90deg, #ff7a3d, #ff582e);
  border-radius: 30px;
  flex-direction: column;
}
.text-white{
    color: #fff;
  }
  .mgy-20{
    margin: 20px 0;
  }
.box2 {
  flex-direction: column;
  margin-top: 50px;
  border-radius: 30px;
  .top_box {
    height: 180px;
    background: linear-gradient(90deg, #ff843c, #ff6e6e);
    border-radius: 30px;
    flex-direction: column;
    padding: 30px;
  }
  
  .text-36{
    font-size: 36px;
  }
  .text-32{
    font-size: 32px;
  }
  .text-24{
    font-size: 24px;
  }
  .fd_c{
    flex-direction: column;
  }
  .text-000{
    color: #000;
  }
  .text-white{
    color: #fff;
  }
  .bottom_box {
    margin-top: -30px;
    border-radius: 30px;
    background-color: #ffffff;
    height: 600px;
    flex-direction: column;
    .bottom_item{
      justify-content: space-between;
      align-items: center;
      padding: 20px;
    }
    .disBtn{
      text{
        color: #999;
        font-size: 22px;
      }
      background-color: #ccc;
      height: 60px;
      line-height: 60px;
      width: 150px;
      justify-content: center;
      border-radius: 30px;
    }
    .btn {
      text{
        color: #ffffff;
        font-size: 22px;
      }
      background-color: #ff843c;
      height: 60px;
      line-height: 60px;
      width: 150px;
      justify-content: center;
      border-radius: 30px;
    }
  }
}
</style>