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>