gaoyixia-pc/src/views/image-text/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="card-item"
        v-for="item in recommendList"
        @click="toDetail(item.article_id, item.id)"
      >
        <ImageTextRecommendCard
          :info="item"
          style="width: 100%"
          v-if="item.images_arr.length < 3"
          @handleLike="handleLike(item)"
          @handleCollect="handleCollect(item)"
          @handleForward="handleForward(item)"
        />
        <ImageTextRecommendImageCard v-else :info="item" style="width: 100%" />
      </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)">
        <ImageTextAllCard :info="item" />
      </div>
    </div>
  </div>
</template>

<script>
import { ArticleService } 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 ImageTextRecommendCard from "@/components/image-text/image-text-recommend-card.vue";
import ImageTextRecommendImageCard from "@/components/image-text/image-text-recommend-image-card.vue";
import ImageTextAllCard from "@/components/image-text/image-text-all-card.vue";

export default {
  name: "Content",
  components: {
    ContentTab,
    ImageTextRecommendCard,
    ImageTextRecommendImageCard,
    Screen,
    Sort,
    ImageTextAllCard,
  },
  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", "imageText");
  },
  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.getArticleList();
    },
    // 刷新
    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.getArticleList();
    },
    // 更改排序方式
    changeSort(type) {
      this.listParams.sort_type = type;
      this.listParams.page = 1;
      this.loading = false;
      this.finished = false;
      this.getArticleList();
    },
    // 触底
    TouchBottom() {
      if (!this.finished) {
        this.current == 0 ? this.getRecommendList() : this.getArticleList();
      }
    },
    // 获取推荐数据
    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)",
        });
      }
      ArticleService.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.recommendList.length == data.total_count
          ) {
            this.finished = true;
          } else {
            this.recommendParams.page++;
          }
        })
        .catch(() => {
          this.finished = true;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取分类树
    getCateTree() {
      ArticleService.getArticleCate({ type: 2 }).then(({ data }) => {
        this.cateTree = data.list;
      });
    },
    // 获取所有数据
    getArticleList() {
      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)",
        });
      }
      ArticleService.getArticleList(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++;
        }
      });
    },
    // 点赞
    handleLike(item) {
      ArticleService.articleTags({ item_id: item.id }).then(({ data, msg }) => {
        item.is_like = data.tags;
        item.like_num = data.tags
          ? Number(item.like_num) + 1
          : Number(item.like_num) - 1;
        this.$message.success(msg);
      });
    },
    // 收藏
    handleCollect(item) {
      ArticleService.articleCollect({
        article_id: item.article_id,
        item_id: item.id,
      }).then(({ data, msg }) => {
        item.is_collect = data.status;
        item.collect_num = data.status
          ? Number(item.collect_num) + 1
          : Number(item.collect_num) - 1;
        this.$message.success(msg);
      });
    },
    // 分享
    handleForward(item) {
      ArticleService.articleTransmit({ item_id: item.id });
    },
    // 跳转详情
    toDetail(article_id, id) {
      !this.current
        ? this.$router.push({
            path: "/image-text-detail",
            query: {
              id,
              article_id,
            },
          })
        : this.$router.push({
            path: "/image-text-collection",
            query: {
              id: article_id,
            },
          });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: calc(100% - 10vw);
  margin: 0 5vw;
  min-width: 750px;
  padding-left: 10px;
  .tab {
    margin-bottom: 20px;
  }
  .list {
    padding: 15px 0;
    padding-right: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    .card-item {
      width: 100%;
      margin: 10px 0;
    }
  }
  .all {
    padding: 15px;
    box-sizing: border-box;
    .screen {
    }
    .sort {
      margin: 30px 0;
    }
    .card-item {
      margin-bottom: 20px;
    }
  }
  .loading {
    height: 40px;
  }
  .empty {
    margin-top: 40px;
  }
}
</style>