zhangsiye/mini/pages/index/components/EpisodeBox.vue

<template>
  <view class="episode-box">
    <view class="header-box main-between cross-center">
      <text class="title">{{ title }}</text>
      <view class="refresh main-left cross-center" @click="handleRefresh">
        <text>换一批</text>
        <view class="icon">
          <u-icon name="reload" size="32rpx" bold />
        </view>
      </view>
    </view>
    <view
      class="container dir-left-wrap"
      :class="{
        loading: loading,
        'main-center':loading,
        'cross-center': loading
      }"
    >
      <u-loading-icon :show="loading" vertical />
      <template v-if="episodes.length && !loading">
        <episode
          v-for="(episode,index) in episodes"
          :key="index"
          :episode="episode"
          :guess="episode.guess"
          :recent="episode.recent"
          :rank="episode.rank"
          :custom-style="{
            marginRight: ((index+1) % 3 !== 0 ? '20rpx' :''),
          }"
        />
      </template>
    </view>
  </view>
</template>

<script>
import Episode from '../../../components/Episode/index'
export default {
  name: 'EpisodeBox',
  components: { Episode },
  props: {
    title: {
      type: String,
      required: true
    },
    type: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      episodes: []
    }
  },
  computed: {},
  created() {
    this.handleRefresh()
  },
  methods: {
    getRecommend() {
      this.loading = true
      this.$api.episode.recommend().then(res => {
        this.loading = false
        this.episodes = res.data
      })
    },
    getTodayRecommend() {
      this.loading = true
      this.$api.episode.todayRecommend().then(res => {
        this.loading = false
        this.episodes = res.data
      })
    },
    getNews() {
      this.loading = true
      this.$api.episode.news().then(res => {
        this.loading = false
        this.episodes = res.data
      })
    },
    getRank() {
      this.loading = true
      this.$api.episode.rank().then(res => {
        this.loading = false
        this.episodes = res.data
      })
    },
    handleRefresh() {
      this.type === 'recommend' && this.getRecommend()
      this.type === 'todayRecommend' && this.getTodayRecommend()
      this.type === 'news' && this.getNews()
      this.type === 'rank' && this.getRank()
    }
  }
}
</script>

<style lang="scss" scoped>
    .episode-box {
      margin-top: 30rpx;
      .header-box{
        .title{
          font-size: 32rpx;
          color: #ffffff;
        }
        .refresh{
          text{
            color: $info-color;
            font-size: 24rpx;
            line-height: 22rpx;
            margin-right: 4rpx;
          }
        }
      }
      .container{
        margin-top: 30rpx;
        min-height: 458rpx;
        &.loading{
        }
      }
    }
</style>