From 2fb1c184cf5addc245efda0752dd3e6eaa82171f Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Tue, 22 Jul 2025 14:11:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/comment-item.vue  | 108 +++++++++++++++++++++++++++++++++++
 components/footer_common.vue |  74 ++++++++++++++++++++++++
 components/header_common.vue |  91 +++++++++++++++++++++++++++++
 3 files changed, 273 insertions(+)
 create mode 100644 components/comment-item.vue
 create mode 100644 components/footer_common.vue
 create mode 100644 components/header_common.vue

diff --git a/components/comment-item.vue b/components/comment-item.vue
new file mode 100644
index 0000000..77c3f67
--- /dev/null
+++ b/components/comment-item.vue
@@ -0,0 +1,108 @@
+<template>
+  <!-- 限制递归深度 -->
+  <view v-if="level <= maxLevel" class="comment-item" :style="{'margin-left': level * 15 + 'px'}">
+    <view class="comment-content">
+      <view class="comment-header">
+        <image class="comment-avatar" :src="comment.pusherPortrait" mode="aspectFill"></image>
+        <view class="comment-info">
+          <text class="comment-username">{{ comment.pusherName }}</text>
+          <text class="comment-time">{{ formatTime(comment.createdAt) }}</text>
+        </view>
+        <view class="comment-actions">
+          <text class="reply-btn" @tap="handleReply">回复</text>
+        </view>
+      </view>
+      <view class="comment-text">
+        <text>{{ comment.content }}</text>
+      </view>
+    </view>
+
+    <!-- 回复输入框 -->
+    <view v-if="replyingTo === comment.id" class="reply-input-container">
+      <input
+        class="reply-input"
+        v-model="replyContent"
+        :placeholder="`回复@${comment.pusherName}`"
+      />
+      <button class="reply-btn" @tap="submitReply">发送</button>
+      <button class="cancel-btn" @tap="cancelReply">取消</button>
+    </view>
+
+    <!-- 子评论（限制递归） -->
+    <view class="children-comments">
+      <comment-item
+        v-for="child in comment.children"
+        :key="child.id"
+        :comment="child"
+        :level="level + 1"
+        :max-level="maxLevel"
+        :replying-to="replyingTo"
+        @reply="$emit('reply', $event)"
+        @submit-reply="$emit('submit-reply', $event)"
+        @cancel-reply="$emit('cancel-reply')"
+      ></comment-item>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "CommentItem",
+  props: {
+    comment: Object,
+    level: { type: Number, default: 0 },
+    maxLevel: { type: Number, default: 3 }, // 限制最大嵌套层级
+    replyingTo: String
+  },
+  data() {
+    return {
+      replyContent: ""
+    };
+  },
+  methods: {
+    handleReply() {
+      this.$emit("reply", this.comment.id);
+    },
+    submitReply() {
+      if (!this.replyContent.trim()) return;
+      this.$emit("submit-reply", {
+        parentId: this.comment.id,
+        content: this.replyContent
+      });
+      this.replyContent = "";
+    },
+    cancelReply() {
+      this.$emit("cancel-reply");
+    },
+    formatTime(time) {
+      // 简化时间格式化（小程序兼容）
+      return new Date(time).toLocaleString();
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 使用px单位 */
+.comment-item {
+  margin-bottom: 15px;
+  border-left: 2px solid #eee;
+  padding-left: 10px;
+}
+
+.comment-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.reply-input-container {
+  display: flex;
+  margin-top: 10px;
+}
+.reply-input {
+  flex: 1;
+  border: 1px solid #ddd;
+  padding: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/components/footer_common.vue b/components/footer_common.vue
new file mode 100644
index 0000000..aaf6a53
--- /dev/null
+++ b/components/footer_common.vue
@@ -0,0 +1,74 @@
+<template>
+	<view class="bottom-nav">
+		<view class="nav-item" @click="navigateTo('index')">
+			<image src="/static/imgs/footer/home.png" mode="aspectFit"></image>
+			<text>首页</text>
+		</view>
+		<!-- <view class="nav-item" @click="navigateTo('neighbor')">
+			<image src="/static/imgs/footer/service.png" mode="aspectFit"></image>
+			<text>服务中心</text>
+		</view> -->
+		<view class="nav-item" @click="navigateTo('chat')">
+			<image src="/static/imgs/footer/ai.png" mode="aspectFit" ></image>
+			<text>AI助手</text>
+		</view>
+<!-- 		<view class="nav-item" @click="navigateTo('service')">
+			<image src="/static/imgs/footer/chat.png" mode="aspectFit"></image>
+			<text>邻里圈</text>
+		</view> -->
+		<view class="nav-item" @click="navigateTo('mine')">
+			<image src="/static/imgs/footer/mine.png" mode="aspectFit"></image>
+			<text>我的</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		methods: {
+			navigateTo(page) {
+				uni.redirectTo({
+					url: `/pages/${page}/index`,
+					success: () => {},
+					fail: () => {},
+					complete: () => {}
+				});
+				console.log(page)
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.bottom-nav {
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		background-color: #f8f8f8;
+		position: fixed;
+		// padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
+		bottom: 0;
+		padding-bottom:40rpx;
+		left: 0;
+		right: 0;
+		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
+		z-index: 999;
+
+		.nav-item {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			flex: 1;
+			text-align: center;
+			color: #4F4F4F;
+			font-size: 24rpx;
+
+			image {
+				width: 46rpx;
+				height: 46rpx;
+				margin: 12rpx 0 6rpx 0;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/components/header_common.vue b/components/header_common.vue
new file mode 100644
index 0000000..f9ae805
--- /dev/null
+++ b/components/header_common.vue
@@ -0,0 +1,91 @@
+<template>
+	<view class="header">
+		<view class="header-content">
+			<view class="left" @click="goBack">
+				<u-icon name="arrow-left" color="#fff" size="36rpx"></u-icon>
+			</view>
+			<view class="center">
+				<text class="title">{{ title }}</text>
+			</view>
+			<view class="right">
+				<!-- 右侧占位 -->
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			title: {
+				type: String,
+				default: '标题'
+			}
+		},
+		methods: {
+			goBack() {
+				let  pages = getCurrentPages(); // 获取页面栈
+				console.log("-----pages",pages)
+				if (pages.length > 1) {
+					// 如果页面栈深度大于 1，说明可以返回上一页
+					uni.navigateBack({
+						delta: 1
+					});
+				} else {
+					// 如果已经是首页，可以选择跳转到某个指定页面或不做任何操作
+					uni.showToast({
+						title: '已经是首页了',
+						icon: 'none'
+					});
+				}
+
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.header {
+		background-color: transparent;
+		/* 蓝色背景 */
+		padding: 20rpx 30rpx;
+		position: fixed;
+		top: 90rpx;
+		left: 0;
+		right: 0;
+		z-index: 999;
+
+		.header-content {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.left {
+				flex: 1;
+				display: flex;
+				align-items: center;
+
+				.back-icon {
+					width: 40rpx;
+					height: 40rpx;
+				}
+			}
+
+			.center {
+				flex: 2;
+				text-align: center;
+
+				.title {
+					color: #2e2e2e;
+					font-size: 36rpx;
+					// font-weight: bold;
+				}
+			}
+
+			.right {
+				flex: 1;
+				text-align: right;
+			}
+		}
+	}
+</style>
\ No newline at end of file