gaoyixia-pc/src/components/module/comment.vue

<template>
  <div class="comment">
    <div class="title">评论&nbsp;{{ total_num }}</div>
    <div class="send">
      <img class="headimg" :src="userInfo.headimg" />
      <div class="send-box" :class="{ expand: expand }">
        <textarea
          class="sendText"
          placeholder="发布一条友善的评论"
          v-model="content"
          @focus="expand = false"
          @blur="hideSendBox"
        >
        </textarea>
        <div
          class="sendBtn"
          :style="{ opacity: !!content ? '1' : '0.3' }"
          @click="
            (_) => {
              isSend = true;
              !!content ? handlePost() : '';
            }
          "
        >
          发布
        </div>
      </div>
    </div>
    <div class="switch">
      <div
        class="switch-btn"
        :class="{ select: params.sort_type == 2 }"
        @click="changeSwitch(2)"
      >
        最热
      </div>
      <div
        class="switch-btn"
        :class="{ select: params.sort_type == 1 }"
        @click="changeSwitch(1)"
      >
        最新
      </div>
    </div>
    <div class="list">
      <div
        class="list-item"
        v-for="item in list"
        :ref="'comment' + item.id"
        :key="'comment' + item.id"
      >
        <CommentDetailCard
          :comment="item"
          :option="option"
          :reportType="option.reportType"
          @jump="handleJump"
          @reply="handleReply"
          @delete="handleDelete"
        />
      </div>
    </div>
    <div class="loadmore" v-if="!finished" @click="getList()">
      点击查看更多评论
    </div>
    <div class="empty">
      <el-empty v-if="finished" description="没有更多数据"></el-empty>
    </div>
  </div>
</template>

<script>
import CommentDetailCard from "@/components/card/comment-detail-card.vue";
export default {
  name: "Comment",
  components: { CommentDetailCard },
  props: ["box"],
  data() {
    return {
      // 输入框聚焦
      expand: true,
      isSend: false,
      // 输入框内容
      content: "",

      // 获取评论列表参数
      params: {
        // 页码
        page: 1,
        // 条目
        page_num: 10,
        // 排序方式
        sort_type: 2,
      },

      // 交互配置
      option: {
        // 列表api
        listApi: (_) => {},
        // 点赞api
        likeApi: (_) => {},
        // 评论api
        postApi: (_) => {},
        // 回复api
        postReplyApi: (_) => {},
        // 删除api
        delApi: (_) => {},
        // 举报类型
        reportType: 0,
      },

      // 数据列表
      list: [],
      // 数据总条目
      total_num: 0,
      // 无更多
      finished: false,
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  mounted() {},
  methods: {
    // 初始化
    init(option) {
      this.option = option;
      this.getList();
    },
    // 隐藏发送区域
    hideSendBox() {
      setTimeout((_) => {
        this.expand = this.isSend ? false : true;
        this.isSend = false;
      }, 100);
    },
    // 更换排序方式
    changeSwitch(type) {
      this.params.page = 1;
      this.params.sort_type = type;
      this.getList();
    },
    // 获取评论列表
    getList() {
      this.option.listApi(this.params).then(({ data }) => {
        this.total_num = data.total_num;
        this.list =
          this.params.page == 1 ? data.list : this.list.concat(data.list);
        this.params.page++;
        this.finished = data.list.length < this.params.page_num;
      });
    },
    // 评论
    handlePost() {
      this.option
        .postApi({ content: this.content }, this.comment)
        .then(({ data, msg }) => {
          this.$message.success(msg);
          this.content = "";
          this.send = false;
          let comment_detail = {
            is_like: 0,
            like_num: 0,
            can_delete: 1,
            ...data.detail,
          };
          this.params.sort_type == 1
            ? this.list.unshift(comment_detail)
            : this.list.push(comment_detail);
        });
    },
    // 跳转
    handleJump(item) {
      if (!this.$refs["comment" + item.id]) return;
      if (!this.box) {
        window.scrollTo(0, this.$refs["comment" + item.id][0].offsetTop);
      } else {
        this.$emit("handleJump", this.$refs["comment" + item.id][0].offsetTop);
      }
    },
    // 回复
    handleReply(item) {
      let comment_detail = {
        is_like: 0,
        like_num: 0,
        can_delete: 1,
        ...item,
      };
      this.params.sort_type == 1
        ? this.list.unshift(comment_detail)
        : this.list.push(comment_detail);
    },
    // 删除
    handleDelete(item) {
      this.list = this.list.filter((i) => {
        i.children =
          i.children &&
          i.children.filter((j) => {
            return j.id != item.id;
          });
        return i.id != item.id;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.comment {
  padding-bottom: 100px;
  .title {
    font-size: 38px;
    font-weight: 600;
    color: #151625;
  }
  .send {
    display: flex;
    align-items: flex-start;
    margin-top: 20px;

    .headimg {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    .send-box {
      height: 200px;
      margin-left: 15px;
      width: calc(100% - 80px);
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      background: #f4f4f4;
      .sendText {
        width: 100%;
        height: 140px;
        outline: none;
        border: none;
        resize: none;
        padding: 20px 15px;
        background: #f4f4f4;
        font-size: 18px;
        font-weight: 400;
        box-sizing: border-box;
      }
      .sendText::placeholder {
        font-size: 18px;
        font-weight: 400;
        color: #999999;
      }
      .sendBtn {
        width: 90px;
        height: 45px;
        text-align: center;
        line-height: 45px;
        background-color: #2a63f3;
        border-radius: 23px;
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        // position: absolute;
        // top: 125px;
        // right: 10px;
        float: right;
        transform: translate(-20px, 5px);
        cursor: pointer;
      }
    }
    .expand {
      height: 60px;
    }
  }
  .switch {
    display: flex;
    align-items: center;
    margin-top: 20px;
    .switch-btn {
      width: 75px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 22px;
      font-weight: 400;
      font-size: 14px;
      background: #f4f4f4;
      color: #646464;
      margin-right: 10px;
      cursor: pointer;
    }
    .select {
      background: #2a63f3;
      color: #f3f3f3;
    }
  }
  .list {
    margin-top: 20px;
    .list-item {
      margin-top: 10px;
    }
  }
  .loadmore {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: #f4f4f4;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    margin-top: 40px;
    cursor: pointer;
  }
  .empty {
    margin-top: 40px;
  }
}
</style>