pc--vr/src/components/Comments/index.vue

<script setup name="Comments">
import { ref, watch, onMounted } from "vue";
import { placeholderPic } from "~/utils/util";
import CommentRow from "./row.vue";
import { useUser } from "~/store/user";

import { ArrowDown } from "@element-plus/icons-vue";
//评论接口
import * as commentApi from "~/api/comment";

const User = useUser();

const currentCommentType = ref("hot"); // hot, new

const total = ref(); // 评论数量

const Props = defineProps({
  type: {
    //article.文章, info.资讯, video.视频, post.帖子
    type: String,
  },
  id: {
    // article.文章, info.资讯, video.视频, post.帖子
    type: Number,
  },
  comment_count: {
    type: Number,
  },
});
console.log("tupe", Props.type);
const source_type = ref();
if (Props.type == "articles") {
  source_type.value = "article";
} else if (Props.type == "video") {
  source_type.value = "video";
} else if (Props.type == "info") {
  source_type.value = "info";
} else if (Props.type == "post") {
  source_type.value = "post";
}
//回复
const textarea = ref();
const replace1 = async () => {
  try {
    const { data } = await commentApi.collect({
      source_type: source_type.value,
      source_id: Props.id,
      content: textarea.value,
    });
    textarea.value = "";
    __list__(parent_id);
  } catch (error) {}
};

//评论列表
let commentList = ref([]);
const __list__ = async () => {
  try {
    const { data } = await commentApi.list({
      source_type: source_type.value,
      source_id: Props.id,
      order_type: "desc",
      order: currentCommentType.value == "hot" ? "like_count" : "id",
    });
    commentList.value = data.slice(0, 5);
  } catch (error) {}
};
const __childList__ = async (parent_id) => {
  try {
    const { data } = await commentApi.list({
      source_type: source_type.value,
      source_id: Props.id,
      order_type: "desc",
      order: currentCommentType.value == "hot" ? "like_count" : "id",
      top_parent_id: parent_id,
    });
    commentList.value.forEach((item) => {
      if (item.id == parent_id) {
        item.children = data;
      }
    });
  } catch (error) {}
};
const showa = ref(true);
const tomore = async () => {
  try {
    const { data } = await commentApi.list({
      source_type: source_type.value,
      source_id: Props.id,
      order_type: "desc",
      order: currentCommentType.value == "hot" ? "like_count" : "id",
    });
    commentList.value = data;
    showa.value = false;
  } catch (error) {}
};

onMounted(__list__);
watch(currentCommentType, () => {
  console.log(currentCommentType.value);
});

const end = ref(2);
const childshow = ref(true);
//更多
const childmore = (parent_id, num) => {
  end.value = num;
  childshow.value = ref(false);
  __childList__(parent_id);
};

const change = (type) => {
  currentCommentType.value = type;
  __list__();
};

//评论列表
</script>

<template>
  <div class="comment-container">
    <div class="comment-header flex-row flex-aic flex-jc-sb">
      <!-- TODO: 标题位置根据类型更改 -->
      <div class="total">{{ Props.comment_count }}条评论</div>
      <div class="btns">
        <el-button
          :type="currentCommentType === 'hot' ? 'primary' : ''"
          @click="change('hot')"
          >最热</el-button
        >
        <el-button
          :type="currentCommentType === 'new' ? 'primary' : ''"
          @click="change('new')"
          >最新</el-button
        >
      </div>
    </div>
    <!-- TODO: 书写评论与登录 -->
    <div
      style="margin-top: 10px"
      class="comment-wrapper flex-row flex-aic flex-jc-sb"
    >
      <div class="avatar">
        <!-- <img class="circle" :src="commentList.user.avatar" alt="" /> -->
      </div>
      <div class="comment-wrapper__main">
        <el-input placeholder="发表一下你的想法吧" v-model="textarea" />
      </div>
      <div class="comment-wrapper__btn">
        <el-button type="primary" @click="replace1">评论</el-button>
      </div>
    </div>
    <!-- TODO: 评论列表 -->
    <div class="comment-list">
      <dl v-for="(item, idx) in commentList" :key="idx">
        <dt>
          <CommentRow
            :source_type="source_type"
            :name="item.user.username"
            reply=""
            :descs="item.content"
            :like_count="item.like_count"
            :comment_count="item.comment_count"
            :parent_id="item.id"
            :source_id="Props.id"
            :crateTime="item.created_at"
            :is_like="item.is_like"
            :avatar="item.user.avatar"
            :author_id = "item.author_id"
            :user_id = "item.user_id"
            @list="__list__"
          />
        </dt>
        <dd v-for="(child, index) in item.children" :key="index">
          <CommentRow
            :source_type="source_type"
            :crateTime="child.created_at"
            :reply="child.parent_user.username"
            :name="child.user.username"
            :descs="child.content"
            :like_count="child.like_count"
            :comment_count="child.comment_count"
            :parent_id="child.id"
            :source_id="Props.id"
            :is_like="child.is_like"
            :avatar="child.user.avatar"
            :author_id = "child.author_id"
            :user_id = "child.user_id"
            @list="__list__"
          />
        </dd>
        <dd v-if="item.children.length <= 2 && item.children.length != 0">
          <span
            class="comment-list-more"
            @click="childmore(item.children[0].parent_id, item.children.length)"
          >
            查看全部回复<el-icon>
              <ArrowDown></ArrowDown>
            </el-icon>
          </span>
        </dd>
      </dl>
    </div>
    <!-- TODO: see more -->
    <div v-if="commentList.length > 2 && showa == true" class="comment-morebox">
      <span style="cursor: pointer" @click="tomore">更多评论</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.comment {
  &-header {
    .total {
      font-size: 20px;
      font-weight: 600;
      color: #222222;
    }
  }

  &-wrapper {
    &__main {
      width: 0;
      margin: 0 10px;
      flex: 1;
    }
  }

  &-morebox {
    text-align: center;
    height: 50px;
    line-height: 50px;
    background: #f4f4f4;
    border-radius: 6px;

    span {
      font-size: 16px;
      font-weight: 400;
      color: #444444;
    }
  }

  &-list {
    dl {
      margin-bottom: 16px;
    }

    dt {
      margin-bottom: 25px;
    }

    dd {
      margin-bottom: 20px;
      margin-inline-start: 56px;
    }

    &-more {
      display: inline-block;
      line-height: 30px;
      font-size: 15px;
      font-weight: 400;
      padding: 0 10px;
      color: #444444;
      background: #f4f4f4;
      user-select: none;
      cursor: pointer;

      .el-icon {
        vertical-align: middle;
      }
    }
  }
}
</style>