daoyou_manage_web/src/components/commentRows/index.vue

<!-- 评论列表 -->
<template>
  <div>
    <div class="commentList">
      <div v-for="comment in commentListData" :key="comment.id" class="comment-item">
        <div class="user-info">
          <!-- <img :src="comment.avatar" alt="用户昵称" class="avatar"> -->
          <image-preview :src="comment.avatar" :width="25" :height="25" />
          <div class="username">
            <div style="margin-right: 5px;">
              {{ comment.nickName }}
            </div>
            <!-- <div v-if="comment.parentId" class="reply-to"></div>
            <div v-if="comment.parentId" class="reply-to-username">{{ comment.replyNickName }}</div> -->
          </div>
        </div>
        <div class="user-details">
          <div class="comment-content">{{ comment.content }}</div>
          <div class="comment-info">
            <span class="comment-time">{{ comment.createTime }}</span>
            <span class="ip-address">IP: {{ comment.address?comment.address:'未知' }}</span>
          </div>
        </div>
        <div v-if="comment.daList && comment.daList.length" class="replies">
          <div v-for="reply in comment.daList" :key="reply.id" class="reply-item">
            <div class="user-info">
              <!-- <img :src="reply.avatar" alt="" class="avatar"> -->
              <image-preview :src="reply.avatar" :width="25" :height="25" />
              <div class="">
                <div class="username">
                  <span>{{ reply.nickName }}</span>
                  <div class="reply-to"></div>
                  <span>{{ reply.replyNickName }}</span>
                </div>
                <div class="comment-content" style="margin-left: 10px;">{{ reply.content }}</div>
                <div class="comment-info" style="margin-left: 10px;">
                  <span class="comment-time">{{ reply.createTime }}</span>
                  <span class="ip-address">IP: {{ reply.address?reply.address:'未知' }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <pagination v-show="total > 0" id="table_page" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getCommentList" />
  </div>
</template>

<script setup lang="ts" name="commentList">
import { ref, reactive, onMounted, nextTick } from 'vue';
import {commentList } from '@/api/manage/scenic';

//导入父组件传递的值
const props = defineProps({
  bizId:{
    type: Number,
    default: null,
  }
});
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  bizId: null,
  status: 0,
});
// 监听父组件传递的tagIds,当tagIds发生变化时，重新获取数据
watch(
  () => props.bizId,
  (newVal, oldVal) => {
    console.log(newVal);
    queryParams.bizId = newVal;
    if (newVal) {
      //获取数据
      nextTick(() => {
        getCommentList();
      });
    }
  },
  { immediate: true }
);
const total=ref(0)
const loading = ref(false);
const commentListData = ref([]);
// 导入父组件定义的函数
const emit = defineEmits(['hideDialog']);
/**
 * 获取评论列表
 */
const getCommentList = async () => {
  loading.value = true;
  let res=await commentList(queryParams).finally(() => (loading.value = false));
  console.log('评论列表：',res);
  total.value=res.total;
  commentListData.value = res.rows;
}
</script>
<style lang="scss" scoped>
.commentList {
  height: 500px;
  overflow-y: auto;

  .comment-item {
    padding: 10px 0px;

    .user-info {
      display: flex;

      .username {
        display: flex;

        color: #000;
        font-weight: bold;
        margin-left: 10px;
        vertical-align: super;

        .reply-to {
          width: 0;
          height: 0;
          border-top: 6px solid transparent;
          /* 上边框透明 */
          border-bottom: 6px solid transparent;
          /* 下边框透明 */
          border-left: 6px solid #999;
          /* 左边框为箭头颜色，这里设为黑色，可按需更改 */

          margin: 0px 8px;
          margin-top: 5px;
        }

        .reply-to-username {
          margin-left: 5px;
        }
      }
    }

    .user-details {
      margin-left: 35px;
    }

    .comment-content {
      color: #000;
      font-size: 16px;
      padding: 3px 0px;
    }
  }
}


.ip-address {
  margin-left: 15px;
}

.replies {
  margin-left: 35px;

  .reply-item {
    margin-top: 5px;
    padding: 5px 0px;
  }
}

#table_page {
  height: 50px !important;
  margin-top: 10px !important;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
}
</style>