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

<template>
  <div class="content">
    <div class="tab">
      <ContentTab
        :current="current"
        :showRefresh="!current"
        :text="['为你推荐', '专栏']"
        @changeTab="changeTab"
        @handleRefresh="handleRefresh"
      />
    </div>
    <div
      class="list"
      :style="{ opacity: current == 0 ? 1 : 0 }"
      v-if="current == 0"
    >
      <div
        class="card-item"
        v-for="item in recommendList"
        @click="toDetail(item.datum_id, item.id)"
      >
        <InformationRecommendCard :info="item" />
      </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"
          :show_second="false"
          v-if="cateTree.length"
          @changeCurrent="changeCurrent"
        />
      </div>
      <div class="sort">
        <Sort :current="listParams.sort_type" @changeSort="changeSort" />
      </div> -->
      <div class="card-box">
        <div
          class="card-item"
          v-for="item in allList"
          @click="toDetail(item.id)"
        >
          <InformationAllCard :info="item" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { DatumService } 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 InformationRecommendCard from "@/components/information/information-recommend-card.vue";
import InformationAllCard from "@/components/information/information-all-card.vue";

export default {
  name: "Content",
  components: {
    ContentTab,
    InformationRecommendCard,
    Screen,
    Sort,
    InformationAllCard,
  },
  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();
    if (this.$store.state.userInfo)
      this.$store.dispatch("getMarkNum", "information");
  },
  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() : this.getInformationList();
    },
    // 刷新
    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.getInformationList();
    },
    // 更改排序方式
    changeSort(type) {
      this.listParams.sort_type = type;
      this.listParams.page = 1;
      this.loading = false;
      this.finished = false;
      this.getInformationList();
    },
    // 触底
    TouchBottom() {
      if (!this.finished) {
        this.current == 0 ? this.getRecommendList() : this.getInformationList();
      }
    },
    // 获取推荐数据
    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)",
        });
      }
      DatumService.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() {
      DatumService.getDatumCate({ type: 2 }).then(({ data }) => {
        data.list.forEach((item) => {
          item.children = item.datum_list;
        });
        this.cateTree = data.list;
      });
    },
    // 获取所有数据
    getInformationList() {
      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)",
        });
      }
      DatumService.getDatumList(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(datum_id, id) {
      !this.current
        ? this.$router.push({
            path: "/information-detail",
            query: {
              id,
              datum_id,
            },
          })
        : this.$router.push({
            path: "/information-collection",
            query: {
              id: datum_id,
            },
          });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-width: 900px;
  margin: 0 auto;
  .tab {
    margin-bottom: 20px;
  }
  .list {
    min-width: 900px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 15px;
    .card-item {
      width: calc((100% - 40px) / 2);
      margin: 10px 0;
    }
  }
  .all {
    min-width: 1000px;
    padding: 15px;
    box-sizing: border-box;
    .screen {
    }
    .sort {
      margin: 30px 0;
    }
    .card-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      .card-item {
        width: calc((100% - 20px) / 2);
        margin: 10px 0;
      }
    }
  }
  .loading {
    height: 40px;
  }
  .empty {
    margin-top: 40px;
  }
}
</style>