From a154b3fa39e2ae79eeac31aa9e4b3605649f77fb Mon Sep 17 00:00:00 2001
From: tone <3341154833@qq.com>
Date: Sat, 31 Aug 2024 14:57:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=89=8D=E7=AB=AF=E5=8D=9A?=
 =?UTF-8?q?=E5=AE=A2=E8=AF=84=E8=AE=BA=E5=B1=95=E7=A4=BA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tonecn/src/components/Blog/BlogComment.vue | 87 ++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 tonecn/src/components/Blog/BlogComment.vue

diff --git a/tonecn/src/components/Blog/BlogComment.vue b/tonecn/src/components/Blog/BlogComment.vue
new file mode 100644
index 0000000..4ff3d2e
--- /dev/null
+++ b/tonecn/src/components/Blog/BlogComment.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { request } from '@/lib/request';
+import { computed, onMounted, reactive, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { timestampToString } from '@/lib/timestampToString';
+const route = useRoute()
+const bloguuid = route.params.uuid;
+const blogCommentList = reactive([]);
+const loadStatus = ref(0)// 0加载中 1已加载全部评论 -1加载失败
+onMounted(async () => {
+    await loadComment();
+})
+
+const getStatusText = computed(() => {
+    switch (loadStatus.value) {
+        case 0:
+            return '加载中，请稍后...'
+        case 1:
+            return '已加载全部评论'
+        case -1:
+            return '加载失败，刷新后重试'
+    }
+})
+
+const loadComment = async () => {
+    try {
+        let commentRes = await request.get(`/blogComment?bloguuid=${bloguuid}`);
+        if (commentRes.code == 0) {
+            blogCommentList.push(...commentRes.data);
+            loadStatus.value = 1;
+        } else {
+            throw new Error(commentRes.message);
+        }
+    } catch (error) {
+        console.log(error)
+        loadStatus.value = -1;
+    }
+}
+</script>
+<template>
+    <el-divider></el-divider>
+    <div class="blogcomment-container">
+        <div class="title">评论</div>
+        <div class="comment" v-for="blogcomment of blogCommentList">
+            <div class="name">{{ blogcomment.name }}</div>
+            <div style="font-size: 12px;color: #888;">IP属地：{{ blogcomment.ip_address }}</div>
+            <div class="time">{{ timestampToString(blogcomment.time) }}</div>
+            <div class="content">{{ blogcomment.content }}</div>
+        </div>
+        <div class="status">—— {{ getStatusText }} ——</div>
+    </div>
+</template>
+<style scoped>
+.blogcomment-container .title {
+    border-left: 4px solid #ccc;
+    font-size: 18px;
+    padding-left: 15px;
+    margin-bottom: 10px;
+    color: #444;
+    cursor: default;
+}
+
+.blogcomment-container .comment {
+    margin: 10px 0px;
+}
+
+.blogcomment-container .comment .name {
+    color: #555;
+}
+
+.blogcomment-container .comment .time {
+    font-size: 12px;
+    color: #888;
+}
+
+.blogcomment-container .comment .content {
+    color: #333;
+    padding: 10px 0px;
+    border-bottom: 1px solid #ddd;
+}
+
+.blogcomment-container .status {
+    margin: 15px 0px;
+    color: #666;
+    font-size: 14px;
+}
+</style>
\ No newline at end of file