gaoyixia-pc/src/views/image-text/image-text-collection.vue

<template>
  <div class="wrap">
    <div class="back" @click="$router.back()">
      <img src="@/assets/icon/back.png" /><span>返回</span>
    </div>
    <div class="collection">
      <Collection
        :title="info.title"
        :follow_switch="!!info.follow_switch"
        :num="`共${info.item_list ? info.item_list.length : 0}篇文章`"
        @handleSwitch="handleSwitch"
      />
    </div>
    <div class="sort">
      <Sort
        :current="sort_type"
        :list="[
          { label: '正序', type: 2 },
          { label: '倒序', type: 3 },
        ]"
        @changeSort="changeSort"
      />
    </div>
    <div class="list">
      <div
        class="list-item"
        v-for="item in info.item_list"
        @click="toDetail(item.article_id, item.id)"
      >
        <ImageTextCollectionCard :info="item" />
      </div>
    </div>
  </div>
</template>

<script>
import { ArticleService, GeneralService } from "@/common/service";
import Collection from "@/components/module/collection.vue";
import Sort from "@/components/module/sort.vue";
import ImageTextCollectionCard from "@/components/image-text/image-text-collection-card.vue";

export default {
  components: { Collection, Sort, ImageTextCollectionCard },
  data() {
    return {
      info: {},
      sort_type: 1,
    };
  },
  mounted() {
    const option = this.$route.query;
    this.info.id = option.id;
    this.getDetail();
  },
  methods: {
    // 更改排序方式
    changeSort(type) {
      this.sort_type = type;
      this.getDetail();
    },
    // 获取系列详情
    getDetail() {
      ArticleService.getArticleDetail({
        id: this.info.id,
        sort_type: this.sort_type,
      }).then(({ data }) => {
        this.info = data.detail;
      });
    },
    // 订阅
    handleSwitch() {
      GeneralService.switchSet({ id: this.info.id, type: 3 }).then(
        ({ data, msg }) => {
          this.info.follow_switch = data.status;
          this.$message.success(msg);
        }
      );
    },
    // 跳转详情
    toDetail(article_id, id) {
      this.$router.push({
        path: "/image-text-detail",
        query: {
          id,
          article_id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: calc(100% - 240px);
  max-width: 1200px;
  margin: 0 auto;
  .back {
    width: 100px;
    height: 50px;
    line-height: 50px;
    margin-top: 20px;
    font-size: 22px;
    font-weight: 400;
    color: #222222;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 4px;
    cursor: pointer;
    img {
      width: 12px;
      height: 20px;
      margin-right: 5px;
    }
  }
  .collection {
    background: #ffffff;
    border-radius: 10px;
    margin-top: 20px;
  }
  .sort {
    margin-top: 20px;
  }
  .list {
    margin-top: 20px;
    .list-item {
      margin-bottom: 15px;
    }
  }
}
</style>