gaoyixia-pc/src/views/forum/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>
        <div slot="bottom" class="switch-box">
          <div class="btn" :class="{ select: !type }" @click="changeType(0)">
            问题
            <div class="mark" v-if="!!forumMarkNum.reply_forum">
              {{
                forumMarkNum.reply_forum > 99 ? "99+" : forumMarkNum.reply_forum
              }}
            </div>
          </div>
          <div class="btn" :class="{ select: !!type }" @click="changeType(1)">
            回答
            <div class="mark" v-if="!!forumMarkNum.reply_answer">
              {{
                forumMarkNum.reply_answer > 99
                  ? "99+"
                  : forumMarkNum.reply_answer
              }}
            </div>
          </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="
            handleDelete(
              list
                .filter((item) => item.checked)
                .map((item) => item.id)
                .join(','),
              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"
              :cardType="type ? 'answer' : 'question'"
              @reply="showReply(item)"
              @handleDelete="handleDelete(item.id)"
              @handleRead="handleRead([item], 1 - item.is_read)"
              @handleToDetail="
                (type) =>
                  handleToDetail(item, type, {
                    forum_id: 'forum_id',
                    reply_id: 'reply_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 { ForumService } from "@/common/service";
import { mapState } from "vuex";
import ReplyMyCard from "@/components/card/forum/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: {},
      // 当前选中类型
      type: 0,
      // 搜索
      list_copy: "",
    };
  },
  computed: {
    ...mapState({
      forumMarkNum: (state) => state.mark_num.forumMarkNum,
    }),
  },
  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));
    },
    // 切换数据类型
    changeType(type) {
      this.type = type;
      this.finished = false;
      this.list = [];
      this.params.page = 1;
      this.manageType = false;
      this.getList();
    },
    // 获取数据
    getList() {
      ForumService.getReplyComment({
        type: this.type ? 2 : 1,
        ...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(() => {
          ForumService.batchesDel({ id: val, type: 3 }).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;
      ForumService.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", "forum");
      });
    },
    // 跳转详情
    handleToDetail(
      item,
      type = "question",
      key = { forum_id: "forum_id", reply_id: "id" }
    ) {
      if (Object.keys(item).includes("is_normal") && !item.is_normal)
        return this.$message.error("该问题已失效");
      this.$router
        .push({
          path:
            type == "question"
              ? "/forum-question-details"
              : "/forum-answer-item",
          query: {
            forum_id: item[key.forum_id],
            reply_id: item[key.reply_id],
          },
        })
        .catch(() => {});
    },
    // 显示回复框
    showReply(item) {
      this.replyVisible = true;
      this.info = item;
    },
    // 回复
    handleReply(val) {
      this.replyVisible = false;
      ForumService.forumSecondComment({ 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 = "";
      }
    },
  },
};
</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;
  }
}
.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;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    .mark {
      width: 36px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      transform: scale(0.7);
      font-size: 10px;
      font-weight: 400;
      color: #ffffff;
      background: #ff5143;
      border-radius: 8px;
      position: absolute;
      top: -10px;
      right: -10px;
    }
  }
  .select {
    background: #2a63f3;
    color: #ffffff;
  }
}
</style>