gaoyixia-pc/src/views/image-text/children/my-like.vue

<template>
  <div class="wrap">
    <div class="wrap-title">
      <TitleControl
        title="我的点赞"
        :showSearch="!!type"
        @handleChange="handleSearch"
      >
        <div slot="control" class="control-btn">
          <div class="manage" @click="manageType = true" v-if="!manageType">
            管理
          </div>
          <div class="manage cancel" @click="manageType = false" v-else>
            取消
          </div>
        </div>
        <div slot="bottom" class="switch-box">
          <div class="btn" :class="{ select: !type }" @click="changeType(0)">
            图文
          </div>
          <div class="btn" :class="{ select: !!type }" @click="changeType(1)">
            评论
          </div>
        </div>
      </TitleControl>
    </div>
    <div class="wrap-content">
      <div class="del-box" v-if="manageType">
        <div class="radio">
          <el-checkbox
            v-model="allChecked"
            @change="changeAllChecked"
          ></el-checkbox>
        </div>
        <div
          class="btn"
          @click="
            handleDelete(
              list.filter((item) => item.checked),
              0
            )
          "
        >
          取消点赞
        </div>
      </div>
      <div class="list" v-if="!type">
        <div class="list-item" v-for="item in list" :key="item.id">
          <div class="radio" v-if="manageType">
            <el-checkbox v-model="item.checked"></el-checkbox>
          </div>
          <div
            class="card"
            :style="manageType ? { width: 'calc(100% - 60px)' } : ''"
          >
            <MyLikeImageTextCard
              :info="item"
              :manageType="manageType"
              :option="comment_option"
              @handleForward="handleForward(item)"
              @handleComment="handleComment(item)"
              @handleLike="handleLike(item)"
              @handleCollect="handleCollect(item)"
              @handleDelete="handleDelete([item])"
              @handleToDetail="
                handleToDetail(item, {
                  id: 'item_id',
                  article_id: 'article_id',
                })
              "
            />
          </div>
        </div>
        <el-empty v-if="finished" description="没有更多数据"></el-empty>
      </div>
      <div class="list" v-else>
        <div class="list-item" v-for="item in list" :key="item.id">
          <div class="radio" v-if="manageType">
            <el-checkbox v-model="item.checked"></el-checkbox>
          </div>
          <div
            class="card"
            :style="manageType ? { width: 'calc(100% - 60px)' } : ''"
          >
            <MyLikeCommentCard
              :info="item"
              :manageType="manageType"
              @reply="showReply(item)"
              @handleDelete="handleDelete([item])"
              @handleToDetail="
                handleToDetail(item, {
                  id: 'item_id',
                  article_id: 'article_id',
                })
              "
            />
          </div>
        </div>
        <el-empty v-if="finished" description="没有更多数据"></el-empty>
      </div>
    </div>
    <CommentAll
      v-model="commentVisible"
      :info="info"
      :option="comment_option"
      :reportType="8"
    />
    <Reply v-model="replyVisible" :info="info" @handleReply="handleReply" />
  </div>
</template>

<script>
import MyLikeImageTextCard from "@/components/card/image-text/my-like-image-text-card.vue";
import MyLikeCommentCard from "@/components/card/image-text/my-like-comment-card.vue";
import TitleControl from "@/components/module/title-control.vue";
import CommentAll from "@/components/module/comment-all.vue";
import Reply from "@/components/module/reply.vue";
import { ArticleService, CollectService } from "@/common/service";
export default {
  components: {
    MyLikeImageTextCard,
    MyLikeCommentCard,
    TitleControl,
    CommentAll,
    Reply,
  },
  data() {
    return {
      list: [],
      params: {
        page: 1,
        page_num: 20,
        sort_type: 1,
      },
      // 是否无数据
      finished: false,
      // 是否点击管理按钮
      manageType: false,
      // 是否选中所有
      allChecked: false,
      // 当前选中类型
      type: 0,

      // 所有评论弹窗显示状态
      commentVisible: false,
      // 回复框显示状态
      replyVisible: false,
      // 弹窗信息
      info: {},
      // 搜索
      list_copy: "",
    };
  },
  computed: {
    comment_option() {
      return {
        // 列表api
        listApi: (params) =>
          ArticleService.getArticleCommentList({
            ...params,
            article_id: this.info.article_id, // 图文id
            item_id: this.info.item_id, // item_id
          }),
        // 点赞
        likeApi: (comment) =>
          ArticleService.commentTags({
            comment_id: comment.id,
          }),
        // 发布评论
        postApi: (params) =>
          ArticleService.articleComment({
            ...params,
            article_id: this.info.article_id,
            item_id: this.info.item_id,
          }),
        // 回复评论
        postReplyApi: (params, comment) =>
          ArticleService.secondCommend({
            ...params,
            id: comment.id,
          }),
        reportType: 8,
        // 删除评论
        delApi: (params) => ArticleService.delComment({ id: params.id }),
      };
    },
  },
  watch: {
    manageType(val) {
      !val ? (this.allChecked = false) : "";
      this.list.forEach((item) => (item.checked = false));
    },
  },
  mounted() {
    this.getImageTextList();
  },
  methods: {
    // 触底
    TouchBottom() {
      if (!this.finished) {
        !!this.type ? this.getCommentList() : this.getImageTextList();
      }
    },
    // 选择全部
    changeAllChecked(type) {
      this.list.map((item) => (item.checked = type));
    },
    // 切换数据类型
    changeType(type) {
      this.type = type;
      this.list = [];
      this.params.page = 1;
      this.manageType = false;
      !!type ? this.getCommentList() : this.getImageTextList();
    },
    // 获取数据--视频
    getImageTextList() {
      ArticleService.getTagsArticle(this.params).then(({ data }) => {
        const list = data.list.map((item) => {
          return { checked: false, ...item };
        });

        this.list = this.params.page === 1 ? list : [...this.list, ...list];
        if (list.length < this.params.page_num) {
          this.finished = true;
        } else {
          this.params.page++;
        }
      });
    },
    // 获取数据--评论
    getCommentList() {
      ArticleService.getTagsComment(this.params).then(({ data }) => {
        const list = data.list.map((item) => {
          return { checked: false, ...item };
        });
        this.list = this.params.page === 1 ? list : [...this.list, ...list];
        if (list.length < this.params.page_num) {
          this.finished = true;
        } else {
          this.params.page++;
        }
      });
    },
    // 删除记录
    handleDelete(arr) {
      let that = this;
      this.showConfirmPopup("确定要取消点赞？")
        .then(() => {
          let params = {
            id: "",
            type: this.type ? 9 : 8,
          };
          params.id = arr.map((item) => item.id).join(",");
          if (!params.id) return;
          ArticleService.batchesDel(params).then(({ data }) => {
            let list = that.list
              .map((item) => {
                return params.id.split(",").includes(item.id + "") ? "" : item;
              })
              .filter((item) => item);
            that.list = list;
            that.$message.success("取消成功！");
            that.manageType = false;
          });
        })
        .catch((_) => {});
    },
    // 跳转详情
    handleToDetail(item, key = { id: "id", article_id: "article_id" }) {
      if (Object.keys(item).includes("is_normal") && !item.is_normal)
        return this.$message.error("该图文已下架");
      this.$router.push({
        path: "/image-text-details",
        query: {
          item_id: item[key.id],
          id: item[key.article_id],
        },
      });
    },
    // 分享
    handleForward(item) {
      ArticleService.articleTransmit({
        item_id: item.id,
      }).then((_) => (item.transmit_num = Number(item.transmit_num) + 1));
    },
    // 评论
    handleComment(item) {
      this.commentVisible = !this.commentVisible;
      this.info = item;
    },
    // 点赞
    handleLike(item) {
      ArticleService.articleTags({
        item_id: item.item_id,
      }).then(({ data }) => {
        item.is_like = data.tags;
        item.like_num = data.tags
          ? Number(item.like_num) + 1
          : Number(item.like_num) - 1;
      });
    },
    // 收藏
    handleCollect(item) {
      CollectService.userCollect({
        coll_id: item.url_id,
        coll_type: 1,
      }).then(({ data }) => {
        item.is_collect = data.status;
        item.collect_num = data.status
          ? Number(item.collect_num) + 1
          : Number(item.collect_num) - 1;
      });
    },
    // 显示回复框
    showReply(item) {
      this.replyVisible = true;
      this.info = item;
    },
    // 回复
    handleReply(val) {
      this.replyVisible = false;
      ArticleService.secondCommend({
        id: this.info.like_id,
        content: val,
      }).then(({ data }) => {
        this.$message.success("回复成功");
      });
    },
    // 筛选
    handleSearch(val) {
      if (!this.list_copy) this.list_copy = this.list;
      if (val) {
        this.list = this.list_copy.filter((item) => {
          return item.content.includes(val);
        });
      } else {
        this.list = this.list_copy;
        this.list_copy = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .wrap-title {
    width: 80%;
  }
  .wrap-content {
    width: 80%;
    margin-top: 20px;
    .del-box {
      display: flex;
      align-items: center;
      margin: 0px 0 20px;
      .radio {
        width: 45px;
        display: flex;
        justify-content: center;
        margin-right: 20px;
      }
      .btn {
        width: 80px;
        height: 30px;
        border-radius: 17px;
        color: #ffffff;
        font-size: 16px;
        font-weight: 400;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        background: #ff9f18;
      }
    }
    .list {
      .list-item {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: relative;
        .radio {
          width: 45px;
          background-color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          border-radius: 10px;
        }
        .card {
          width: 100%;
        }
      }
    }
  }
}
.control-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  user-select: none;
  .is-read {
    width: 100px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f4;
    border-radius: 17px;
    font-size: 13px;
    font-weight: 400;
    color: #1677ff;
    img {
      width: 15px;
      height: 15px;
      margin-right: 5px;
    }
  }
  .manage {
    width: 70px;
    height: 30px;
    background: #2a63f3;
    border-radius: 17px;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    line-height: 30px;
    color: #ffffff;
    margin-left: 10px;
  }
  .cancel {
    background: transparent;
    color: #1677ff;
  }
}
.switch-box {
  display: flex;
  align-items: center;
  margin-top: 15px;
  .btn {
    width: 100px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    background: #f4f4f4;
    border-radius: 22px;
    cursor: pointer;
    margin-right: 10px;
  }
  .select {
    background: #2a63f3;
    color: #ffffff;
  }
}
</style>