添加营销配置、评论列表及优化部分字段类型

2024-12-23 13:56:37 +08:00
parent 5071d63dcb
commit 7b63f708e6
9 changed files with 850 additions and 61 deletions
@@ -0,0 +1,154 @@
+<!-- 评论列表 -->
+<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.replies && comment.replies.length" class="replies">
+          <div v-for="reply in comment.replies" :key="reply.id" class="reply-item">
+            <div class="user-info">
+              <img :src="reply.avatar" alt="回复用户昵称" class="avatar">
+              <div class="user-details">
+                <div class="username">回复 {{ reply.username }}</div>
+                <div class="comment-content">{{ reply.content }}</div>
+                <div class="comment-info">
+                  <span class="comment-time">{{ reply.time }}</span>
+                  <span class="ip-address">IP: {{ reply.ipAddress }}</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;
+          margin-top: 5px;
+          border-top: 6px solid transparent;
+          /* 上边框透明 */
+          border-bottom: 6px solid transparent;
+          /* 下边框透明 */
+          border-left: 6px solid #999;
+          /* 左边框为箭头颜色，这里设为黑色，可按需更改 */
+        }
+
+        .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;
+}
+
+#table_page {
+  height: 50px !important;
+  margin-top: 10px !important;
+  padding-bottom: 0px !important;
+  margin-bottom: 0px !important;
+}
+</style>