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

<template>
  <div class="wrap">
    <div class="wrap-title">
      <TitleControl title="回复我的" @handleChange="handleSearch">
        <div slot="control" class="control-btn">
          <div
            class="is-read"
            v-if="!manageType"
            @click="
              (_) => {
                $message.success('已将所有信息标为已读');
                handleRead(list, 1);
              }
            "
          >
            <img src="@/assets/icon/read.png" alt="" />
            <span>全部已读</span>
          </div>
          <div class="manage" @click="manageType = true" v-if="!manageType">
            管理
          </div>
          <div class="manage cancel" @click="manageType = false" v-else>
            取消
          </div>
        </div>
      </TitleControl>
    </div>
    <div class="wrap-content">
      <div class="read-box" v-if="manageType">
        <div class="radio">
          <el-checkbox
            v-model="allChecked"
            @change="changeAllChecked"
          ></el-checkbox>
        </div>
        <div
          class="btn is-read"
          @click="
            handleRead(
              list.filter((item) => item.checked),
              1
            )
          "
        >
          已读
        </div>
        <div
          class="btn un-read"
          @click="
            handleRead(
              list.filter((item) => item.checked),
              0
            )
          "
        >
          未读
        </div>
      </div>
      <div class="list">
        <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"
            :ref="'card-' + item.id"
            :style="manageType ? { width: 'calc(100% - 60px)' } : ''"
            @click="handleRead([item], 1)"
          >
            <ReplyMyCard
              :info="item"
              :manageType="manageType"
              @reply="showReply(item)"
              @handleDelete="handleDelete(item)"
              @handleRead="handleRead([item], 1 - item.is_read)"
              @handleToDetail="
                handleToDetail(item, {
                  id: 'item_id',
                  article_id: 'article_id',
                })
              "
            />
          </div>
        </div>
        <el-empty v-if="finished" description="没有更多数据"></el-empty>
      </div>
    </div>
    <Reply v-model="replyVisible" :info="info" @handleReply="handleReply" />
    <ToNext @toNext="toNext" v-if="!manageType" />
  </div>
</template>

<script>
import { ArticleService } from "@/common/service";
import ReplyMyCard from "@/components/card/image-text/reply-my-card.vue";
import TitleControl from "@/components/module/title-control.vue";
import Reply from "@/components/module/reply.vue";
import ToNext from "@/components/module/to-next.vue";
export default {
  components: { ReplyMyCard, TitleControl, Reply, ToNext },
  data() {
    return {
      list: [],
      params: {
        page: 1,
        page_num: 20,
        sort_type: 1,
      },
      // 是否无数据
      finished: false,
      // 是否点击管理按钮
      manageType: false,
      // 是否选中所有
      allChecked: false,
      // 回复框显示状态
      replyVisible: false,
      // 回复详情
      info: {},
      // 搜索
      list_copy: "",
    };
  },
  watch: {
    manageType(val) {
      !val ? (this.allChecked = false) : "";
      this.list.forEach((item) => (item.checked = false));
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 触底
    TouchBottom() {
      if (!this.finished) {
        this.getList();
      }
    },
    // 选择全部
    changeAllChecked(type) {
      this.list.map((item) => (item.checked = type));
    },
    // 获取数据
    getList() {
      ArticleService.getReplyComment(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(val) {
      let that = this;
      this.showConfirmPopup("确定要删除该信息？")
        .then(() => {
          ArticleService.batchesDel({ id: val.id, type: 10 }).then(
            ({ data }) => {
              that.list.splice(
                that.list.findIndex((item) => item.id == val.id),
                1
              );
              this.$message.success("删除成功！");
            }
          );
        })
        .catch((_) => {});
    },
    // 更改阅读状态
    handleRead(arr, is_read) {
      let params = {
        id: "",
        type: 2,
        is_read,
      };
      params.id = arr.map((item) => item.id).join(",");
      if (!params.id) return;
      ArticleService.unreadChange(params).then((res) => {
        this.list.forEach((item) => {
          params.id.split(",").includes(item.id + "")
            ? (item.is_read = params.is_read)
            : "";
        });
        this.manageType = false;
        this.$store.dispatch("getMarkNum", "imageText");
      });
    },
    // 跳转详情
    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-detail",
        query: {
          id: item[key.id],
          article_id: item[key.article_id],
        },
      });
    },
    // 显示回复框
    showReply(item) {
      this.replyVisible = true;
      this.info = item;
    },
    // 回复
    handleReply(val) {
      this.replyVisible = false;
      ArticleService.secondCommend({ id: this.info.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 = "";
      }
    },
    // 下一条未读
    toNext() {
      let current_index, next;
      current_index = 0;
      this.list.forEach((item, index) => {
        let { top } = this.$refs["card-" + item.id][0].getBoundingClientRect();
        if (top > -170 && top <= 100) {
          current_index = index;
          return;
        }
      });
      if (current_index == this.list.length - 1 || !this.list.length)
        return this.$message.info("没有下一条未读消息！");
      next = this.list.slice(current_index + 1).find((item) => !item.is_read);
      if (!next) return this.$message.info("没有下一条未读消息！");
      window.scrollTo(
        0,
        window.scrollY +
          this.$refs["card-" + next.id][0].getBoundingClientRect().top -
          100
      );
    },
  },
};
</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;
    .read-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;
      }
      .is-read {
        background: #0054f7;
      }
      .un-read {
        background: #ff9f18;
        margin-left: 10px;
      }
    }
    .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;
  }
}
</style>