gaoyixia-pc/src/views/video/components/content.vue

<template>
  <div class="content">
    <div class="tab">
      <ContentTab
        :current="current"
        :showRefresh="!current"
        @changeTab="changeTab"
        @handleRefresh="handleRefresh"
      />
    </div>
    <div
      class="list"
      :style="{ opacity: current == 0 ? 1 : 0 }"
      v-if="current == 0"
    >
      <div
        class="list-item"
        v-for="item in recommendList"
        @click="toDetail(item.video_id, item.id)"
      >
        <VideoRecommendCard :info="item" style="width: 500px; height: 380px" />
      </div>
    </div>
    <div class="loading" v-if="loading">
      <el-col :span="24" v-loading="loading"></el-col>
    </div>
    <div class="empty">
      <el-empty
        v-if="current == 0 && finished"
        description="没有更多数据"
      ></el-empty>
    </div>
    <div
      class="all"
      :style="{ opacity: current == 1 ? 1 : 0 }"
      v-if="current == 1"
    >
      <div class="screen">
        <Screen
          :list="cateTree"
          v-if="cateTree.length"
          @changeCurrent="changeCurrent"
        />
      </div>
      <div class="sort">
        <Sort :current="listParams.sort_type" @changeSort="changeSort" />
      </div>
      <div
        class="card-item"
        v-for="item in allList"
        @click="toDetail(item.id, item.video_arr[0].id)"
      >
        <VideoAllCard :info="item" />
      </div>
    </div>
  </div>
</template>

<script>
import { VideoService } from "@/common/service";
import ContentTab from "@/components/module/content-tab.vue";
import Screen from "@/components/module/screen.vue";
import Sort from "@/components/module/sort.vue";
import VideoRecommendCard from "@/components/video/video-recommend-card.vue";
import VideoAllCard from "@/components/video/video-all-card.vue";

export default {
  name: "Content",
  components: { ContentTab, VideoRecommendCard, Screen, Sort, VideoAllCard },
  data() {
    return {
      current: 0,
      recommendParams: {
        page: 1, // 页数
        page_num: 10, // 每页数
      },
      recommendList: [],
      loading: false,
      finished: false,
      cateTree: [],
      listParams: {
        first_classify: 0, // 一级分类
        second_classify: 0, // 二级分类
        page: 1, // 页数
        page_num: 10, // 每页数
        sort_type: 1, // 排序方式
      },
      allList: [], //全部数据
    };
  },
  mounted() {
    this.getRecommendList();
    this.getCateTree();
  },
  methods: {
    // tab切换
    changeTab(i) {
      this.current = i;
      this.loading = false;
      this.finished = false;
      this.recommendParams.page = 1;
      this.listParams.page = 1;
      this.recommendList = [];
      this.allList = [];
      i == 0 ? this.getRecommendList() : "";
    },
    // 刷新
    handleRefresh() {
      this.loading = false;
      this.finished = false;
      this.recommendParams.page = 1;
      this.getRecommendList();
    },
    // 更改筛选条件
    changeCurrent(first, second) {
      this.listParams.first_classify = first.id;
      this.listParams.second_classify = second.id;
      this.listParams.page = 1;
      this.loading = false;
      this.finished = false;
      this.getVideoList();
    },
    // 更改排序方式
    changeSort(type) {
      this.listParams.sort_type = type;
      this.listParams.page = 1;
      this.loading = false;
      this.finished = false;
      this.getVideoList();
    },
    // 触底
    TouchBottom() {
      if (!this.finished) {
        this.current == 0 ? this.getRecommendList() : this.getVideoList();
      }
    },
    // 获取推荐数据
    getRecommendList() {
      this.loading = true;
      let loadingFullscreen = "";
      if (this.recommendParams.page == 1) {
        loadingFullscreen = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
      }
      VideoService.getRecommendList(this.recommendParams)
        .then(({ data }) => {
          const list = data.list;
          loadingFullscreen ? loadingFullscreen.close() : "";
          this.recommendList =
            this.recommendParams.page === 1
              ? list
              : [...this.recommendList, ...list];
          if (list.length < this.recommendParams.page_num) {
            this.finished = true;
          } else {
            this.recommendParams.page++;
          }
        })
        .catch(() => {
          this.finished = true;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取分类树
    getCateTree() {
      VideoService.getCateTree({ type: 2 }).then(({ data }) => {
        this.cateTree = data.list;
      });
    },
    // 获取所有数据
    getVideoList() {
      let loadingFullscreen = "";
      if (this.listParams.page == 1) {
        loadingFullscreen = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
      }
      VideoService.getVideoList(this.listParams).then(({ data }) => {
        const list = data.list;
        loadingFullscreen ? loadingFullscreen.close() : "";
        this.allList =
          this.listParams.page === 1 ? list : [...this.allList, ...list];
        if (list.length < this.listParams.page_num) {
          this.finished = true;
        } else {
          this.listParams.page++;
        }
      });
    },
    // 跳转详情
    toDetail(id, videoArrId) {
      this.$router.push({
        path: "/video-detail",
        query: {
          id,
          videoArrId,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: calc(100% - 100px);
  max-width: 1600px;
  margin: 0 auto;
  .tab {
    margin-bottom: 20px;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    @media (min-width: 1900px) {
      .list-item {
        margin: 10px calc((100% - 1500px) / 6);
      }
    }
    @media (min-width: 1400px) and (max-width: 1900px) {
      .list-item {
        margin: 10px calc((100% - 1000px) / 4);
      }
    }
    @media (max-width: 1400px) {
      .list-item {
        margin: 10px auto;
      }
    }
  }
  .all {
    .screen {
    }
    .sort {
      margin: 30px 0;
    }
    .card-item {
      margin-bottom: 20px;
    }
  }
  .loading {
    height: 40px;
  }
  .empty {
    margin-top: 40px;
  }
}
</style>