mall-web-ssr/components/main/count/Box.vue

<template>
  <div class="count-box">
    <div class="swiper-container" v-swiper:swiper="swiperOption">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(c, index) in list1" :key="index">
          <count-item class="item" :title="c.item" :value="c.count"></count-item>
        </div>
        <div class="swiper-slide" v-for="(c, index) in list2" :key="index">
          <count-item class="item" :title="c.item" :value="c.count"></count-item>
        </div>
        <div class="swiper-slide" v-for="(c, index) in list2" :key="index">
          <count-item class="item" :title="c.item" :value="c.count"></count-item>
        </div>
        <div class="swiper-slide" v-for="(c, index) in list3" :key="index">
          <count-item class="item" :title="c.item" :value="c.count"></count-item>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import CountItem from './Item.vue'
  export default {
    name: 'count-box',
    components: {
      CountItem
    },
    data () {
      return {
        swiperOption: {
          autoplay: 5000,
          speed: 500,
          direction: 'vertical',
          slidesPerView: 2,
          slidesPerGroup: 2
        }
      }
    },
    computed: {
      counts () {
        return this.$store.state.product.common.counts
      },
      list1 () {
        return this.counts.data.slice(1, 2)
      },
      list2 () {
        return this.counts.data.slice(2, 3)
      },
      list3 () {
        return this.counts.data.slice(3, 4)
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.loadCounts()
        // 刷新统计信息
        setInterval(() => {
          this.loadCounts()
        }, 30000)
      })
    },
    methods: {
      loadCounts () {
        this.$store.dispatch('loadProductCounts', { _status: 'actived' })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .count-box {
    position: relative;
    top: 15px;
    float: right;
    width: 300px;
    height: 60px;
    overflow: hidden;

    .swiper-container {
      height: 100%;
    }
  }
</style>