js-life/src/pages/subjectTextCheats/index.vue

<template>
  <div @touchend="touchCountWxAd" class="bg">
    <button open-type="share" class="share1">
      <div style="position: relative; width: 100%">
        <image
          v-for="(item, index) in 9"
          :style="{
            left: item * 34 + 'rpx',
          }"
          :key="index"
          class="headImg"
          :src="
            'https://ndata.zzxcx.net/ctjk/mp-wx/textCheatsList/headImg' +
            (item + 1) +
            '@2x.png'
          "
        ></image>
        <view
          style="
            color: #8a9099;
            font-size: 28rpx;
            left: 340rpx;
            position: absolute;
            width: 90rpx;
            top: 6rpx;
          "
          class=""
          >已参与</view
        >
        <view
          style="
            color: #fff;
            position: absolute;
            top: 6rpx;
            width: 182rpx;
            line-height: 52rpx;
            background: #498ef5;
            border-radius: 30rpx;
            background: #498ef5;
            right: 0;
            text-align: center;
            font-size: 28rpx;
          "
        >
          分享给好友
        </view>
      </div>
    </button>
    <view style="padding: 0 15rpx">
      以下是科目{{ subjectMap[query.subject] }}的“<text style="color: red"
        >考试知识点</text
      >”和“<text style="color: red">答题技巧</text
      >”，考试知识点可以直接学习，答题技巧需配合《财仝驾助》软件中的语音技巧同步学习，建议先使用软件学完所有技巧考试前1-2天再将以下知识点和文字技巧快速过一遍加以巩固!
    </view>
    <view style="font-weight: bold; padding: 0 15rpx"
      >祝所有学员逢考必过 早日取得驾照</view
    >
    <div style="text-align: center">
      <div :key="index" v-for="(item, index) in imgList">
        <img style="width: 750rpx" mode="widthFix" :src="item.url" />
        <ad
          v-if="index > 1 && index % 5 == 0"
          ad-type="video"
          :ad-intervals="100"
          unit-id="adunit-173f2958099a2b25"
        ></ad>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api";
import request from "@/api/request";
export default {
  data() {
    return {
      imgList: [],
      touchCount: 0,
      query: {
        subject: "1",
      },
      subjectMap: ["科目零", "科目一", "科目二", "科目三", "科目四"],
    };
  },
  onLoad(query) {
    this.query = query;
  },
  methods: {
    touchCountWxAd(e) {
      let that = this;
      this.touchCount = this.touchCount + 1;
      if (this.touchCount % 5 == 0 && this.touchCount !== 0) {
        // 在页面中定义插屏广告
        let interstitialAd = null;
        // 在页面onLoad回调事件中创建插屏广告实例
        if (uni.createInterstitialAd) {
          interstitialAd = uni.createInterstitialAd({
            adUnitId: "adunit-cb696895e6fdcfb7",
          });
          interstitialAd.onLoad(() => {
            console.log("ad load");
          });
          interstitialAd.onError((err) => {
            console.error(err);
            that.touchCount = 0;
          });
          interstitialAd.onClose(() => {
            that.touchCount = 0;
          });
        }
        // 在适合的场景显示插屏广告
        if (interstitialAd) {
          interstitialAd
            .show()
            .then(() => {
              that.touchCount = 0;
            })
            .catch((err) => {
              that.touchCount = 0;
              console.log(err);
            });
        }
      }
    },
  },
  onShareAppMessage(res) {
    if (res.from === "button") {
      // 来自页面内分享按钮
      console.log(res.target);
    }
    return {
      title: "科目一四宝典",
      imageUrl: "https://ndata.zzxcx.net/ctjk/mp-wx/textCheatsList/share_cover@2x.jpg",
      path: `/pages/textCheatsList/index`,
    };
  },
  mounted() {
    request({
      url: "https://nbjk1.zzxcx.net/nbjk-admin/open-api/wx/material/list",
      method: "GET",
      headers: {
        isLogin: "1",
      },
      params: {
        subject: this.query.subject,
        status: 1,
      },
    }).then((res) => {
      this.imgList = res.rows;
      // console.log(res)
    });
  },
};
</script>

<style lang="scss" scoped>
.bg {
  background-color: #fff;
  width: 100vw;
  min-height: 100vh;
  .share1 {
    display: flex;
    flex-wrap: wrap;
    width: 720rpx;
    margin: 0 auto;
    height: 108rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    border: 2rpx solid #e8e8e8;
    background-color: #fff;
    position: relative;

    .headImg {
      width: 68rpx;
      height: 68rpx;
      position: absolute;
      left: 0;
    }
  }
}
</style>