quickapp_front/src/views/Ad/index.ux

<template>
  <div class="ad-main">
    <stack>
      <div class="weclome">

      </div>
      <div class="ad-page" style="{{ styleObj }}" if="{{hasBanner}}" @click="goActivity">
        <div class="top-timer">
          <text class="number" @click="skep">跳过{{time}}</text>
        </div>
        <div class="bottom-line">
          <image src="../../assets/imgs/logo.png"></image>
          <div class="desc">
            <text class="title"> 追书云</text>
            <text class="more"> 给你极致的阅读体验</text>
          </div>
        </div>
      </div>
    </stack>

  </div>
</template>

<script>
import storage from "@system.storage";
import router from '@system.router';
import { userOptions } from '../../api/index.js';
export default {
  protected: {
    name: null,
    icon: null
  },
  private: {
    time: 6,
    timer: null,
    hasBanner: false,
    open_alert: null,
    styleObj: {
      backgroundImage: ""
    }
  },
  onInit() {


    this.timer = setInterval(() => {
      if (this.time > 0) {
        this.time = this.time - 1;
      } else {
        router.back();
      }

    }, 1000);

    setTimeout(async () => {
      let option = this.$app.getAppData('options');
      let position;
      if (!option) {
        let data = await userOptions();
        this.$app.setAppData('options', data);
        position = data.position;
        if (position.open_alert) {
          this.open_alert = position.open_alert[0];
          this.styleObj.backgroundImage = this.open_alert.img;
          this.hasBanner = true;


        } else {
          setTimeout(() => {
            router.back();
          }, 1500)

        }
      } else {
        position = option['position'];
        if (position && position.open_alert && position.open_alert.length > 0) {
          this.open_alert = position.open_alert[0];
          this.styleObj.backgroundImage = this.open_alert.img;
          this.hasBanner = true;
        } else {
          setTimeout(() => {
            router.back();
          }, 1500)
        }
      }
    }, 500)


  },
  onDestroy() {
    clearInterval(this.timer);
  },
  skep() {
    clearInterval(this.timer);
    router.back();
  },
  goActivity() {
    router.replace({
      uri: '/views/Activity',
      params: this.open_alert.params
    })
  }

}
</script>
<style lang="less">
.weclome {
  background-image: url("https://cdn-novel.91duke.com/quickapp/static/20201224165231.jpg");
  background-size: cover;
  width: 100%;
  height: 100%;
}
.ad-page {
  background-size: cover;
  width: 100%;
  height: 100%;
  flex-direction: column;
  position: relative;
  justify-content: space-between;
  .top-timer {
    display: flex;
    justify-content: flex-end;
    padding-top: 30px;
    padding-right: 30px;
    .number {
      width: 120px;
      height: 60px;
      line-height: 60px;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-size: 25px;
      text-align: center;
      border-radius: 30px;
    }
  }
  .bottom-line {
    width: 100%;
    height: 200px;
    background-color: #fff;
    align-items: center;
    justify-content: center;
    image {
      width: 110px;
      height: 110px;
      margin-right: 15px;
    }
    .desc {
      flex-direction: column;
      .title {
        font-size: 36px;
        font-weight: bold;
        line-height: 200%;
      }
    }
  }
}
</style>