ch-tgr/src/views/Tabbars/Home.vue

<template>
  <div class="index-page">
    <van-swipe v-if="data && data.Carousel" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in data.Carousel">
        <a @click="item.link ? $openUrl(item.Url) : ''"><img :src="$file(item.img) || '/img/avatar.png'"
            width="100%"></a>
      </van-swipe-item>
    </van-swipe>

    <div class="mx-auto">

      <div class="data">
        <div class="_d">
          <p>{{ new Date().getDate() }}</p>
          {{ month }}月
        </div>
        <van-swipe vertical v-bind:touchable="false" class="notice-swipe" style="height: 12vw" :autoplay="3000"
          v-bind:show-indicators="false">
          <van-swipe-item class="v" style="height: 12vw; line-height: 6vw" v-for="(group, index) in trendsGrouped"
            :key="index">
            <template v-for="item in group">
              <a @click="$navigate(`/Column?pid=2`)">
                <span></span>{{ item.name }}
              </a>
            </template>
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="column3_part">
        <div class="p1" @click="$navigate('/ColumnDetail?id=1')">
          <img src="/img/index-column-i1.png">
          <span>平台介绍</span>
          <p>了解泰古润</p>
        </div>
        <div class="p2" @click="$navigate('/Business_School')">
          <img src="/img/index-column-i2.png">
          <span>商学院</span>
          <p>学习知识</p>
        </div>
        <!-- <div @click="$navigate('/ColumnDetail?id=2')">
          <img src="/img/index-column-i3.png">
          <span>招商合作</span>
        </div> -->
        <div class="p3" @click="$navigate('/Column?pid=3')">
          <img src="/img/index-column-i4.png">
          <span>平台动态</span>
          <p>最新动态资讯</p>
        </div>
      </div>

      <div class="tomall">
        <div class="base_box left" @click="$navigate('Gift')">
          <div class="top">
            <b>升级礼包</b>
            <span>购买即可升级</span>
            <!-- <p>购买即可升级</p> -->
          </div>
          <img src="/img/tomall_i1.png" alt="">
        </div>

        <div class="base_box right" @click="$navigate('Mall')">
          <div class="top">
            <b>官方商城</b>
            <span>享受更多优惠</span>
            <!-- <p>大家都在买</p> -->
          </div>
          <img src="/img/tomall_i2.png" alt="">
        </div>
      </div>

      <div class="k">
        <div class="tit mx-auto">
          <span style="margin-bottom: 3.467vw;">
            <!-- <font></font> -->
            宣传视频
          </span>
          <p></p>
        </div>

        <div class="video_box">
          <video v-if="data.video" :src="$file(data.video.contents)" :poster="data.video.filecover" controls></video>

          <button @click="$navigate('/ColumnDetail?id=1')">了解我们</button>
        </div>
      </div>

      <div class="k">

        <div class="tit">
          <span>
            <!-- <font>保供</font>动态 -->
            平台动态
          </span>
          <p></p>
          <a @click="$navigate('Column?id=Trends')">
            更多<van-icon name="arrow"></van-icon>
          </a>
        </div>

        <div class="news">
          <div class="c">
            <a @click.stop="$navigate('ColumnDetail?id=' + item.id)" class="list" v-for="item in data.News"
              :key="item.id">
              <img :src="$file(item.img)" />

              <div>
                <div class="titname">{{ item.name }}</div>
                <div class="lab">{{ item.description }}</div>
                <div class="times">{{ $formatGMT(item.addtime, 'yyyy-MM-dd') }}</div>
              </div>
            </a>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import date from "../../utils/date.js"

export default {
  name: 'Home',
  mounted() {
    this.init();
  },
  data() {
    return {
      data: {},
      month: date.getMonth_C(),
    }
  },
  computed: {
    trendsGrouped() {
      if (!this.data.Trends) return [];
      const result = [];
      for (let i = 0; i < this.data.Trends.length; i += 2) {
        result.push(this.data.Trends.slice(i, i + 2));
      }
      return result;
    }
  },
  methods: {
    init() {
      Promise.all([
        this.$get('/v1/client/CNewsClient', { page: 1, pageSize: 3, pid: 3 }).then(data => {
          this.data.News = data.data.items;
        }),
        this.$get('/v1/client/CNewsClient?pid=2').then(data => {
          this.data.Trends = data.data.items;
        }),
        this.$get('/v1/client/CSlidesClient?pid=1').then(data => {
          this.data.Carousel = data.data;
        }),
        this.$get('/v1/client/CDatadicsClient/code_sp').then(data => {
          this.data.video = data.data;
        })
      ]).catch(err => {
        this.$showFailToast(err.message || '数据加载失败');
      });
    },
  }
}
</script>