xiangqinxiangmu/LiangZhiYUMao/pages/plaza/detail.vue

<template>
	<view class="detail-page">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-background">
				<view class="feather feather-small">🪶</view>
			</view>
			<view class="navbar-left" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="navbar-title">
				<text class="main-title">💕 爱的故事</text>
				<text class="sub-title">两只羽毛的浪漫时光</text>
			</view>
			<view class="navbar-right" @click="showMoreMenu">
				<text class="more-icon">⋯</text>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<scroll-view 
			class="content-scroll" 
			scroll-y
			:scroll-into-view="scrollIntoView"
			scroll-with-animation
		>
			<!-- 动态内容 -->
			<view v-if="dynamic" class="dynamic-detail">
				<!-- 用户信息 -->
				<view class="user-section">
					<image 
						:src="getAvatar(dynamic)" 
						class="avatar"
						mode="aspectFill"
					></image>
					<view class="user-info">
						<text class="nickname">{{ getNickname(dynamic) }}</text>
						<text class="time">{{ formatTime(dynamic.createdAt) }}</text>
					</view>
				</view>
				
				<!-- 动态内容 -->
				<view class="content-section">
					<text class="content-text">{{ dynamic.content }}</text>
				</view>
				
				<!-- 媒体内容 -->
				<view v-if="dynamic.mediaUrls && dynamic.mediaUrls.length > 0" class="media-section">
					<view class="image-grid">
						<image 
							v-for="(url, index) in dynamic.mediaUrls" 
							:key="index"
							:src="url" 
							class="media-image"
							mode="aspectFill"
							@click="previewImage(dynamic.mediaUrls, index)"
						></image>
					</view>
				</view>
				
				<!-- 互动数据 -->
				<view class="stats-section">
					<text class="stat-item">{{ dynamic.likeCount || 0 }} 点赞</text>
					<text class="stat-item">{{ dynamic.commentCount || 0 }} 评论</text>
					<text class="stat-item">{{ dynamic.favoriteCount || 0 }} 收藏</text>
					<text class="stat-item">{{ dynamic.viewCount || 0 }} 浏览</text>
				</view>
			</view>
			
			<!-- 评论区域 -->
			<view id="comment-section" class="comment-section">
				<view class="section-title">
					<text class="title-text">评论区</text>
					<text class="title-count">{{ getCommentCount() }}</text>
				</view>
				
				<!-- 评论列表 -->
				<view v-if="commentList.length > 0" class="comment-list">
					<view v-for="comment in commentList" 
						:key="comment.commentId" 
						class="comment-item"
					>
						<image 
							:src="getCommentAvatar(comment)" 
							class="comment-avatar"
						></image>
						<view class="comment-content">
							<text class="comment-nickname">{{ getCommentNickname(comment) }}</text>
							
							<text class="comment-text">{{ comment.content }}</text>
							
							<!-- 评论图片 -->
							<view v-if="getCommentImages(comment).length > 0" class="comment-images">
								<image 
									v-for="(imgUrl, imgIndex) in getCommentImages(comment)" 
									:key="imgIndex"
									:src="imgUrl" 
									class="comment-image"
									mode="aspectFill"
									@click="previewCommentImage(getCommentImages(comment), imgIndex)"
								/>
							</view>
							
							<!-- 子回复（一级展示） -->
							<view class="reply-list" v-if="comment.replies && comment.replies.length > 0">
								<view class="reply-item" v-for="reply in comment.replies" :key="'r-'+reply.commentId">
									<image :src="getCommentAvatar(reply)" class="reply-avatar" />
									<view class="reply-info">
										<text class="reply-nickname">{{ getCommentNickname(reply) }}：</text>
										<text class="reply-text">{{ reply.content }}</text>
										<text class="reply-time">{{ formatTime(reply.createdAt) }}</text>
									</view>
								</view>
							</view>
							
							<view class="comment-footer">
								<text class="comment-time">{{ formatTime(comment.createdAt) }}</text>
								<view class="comment-actions">
									<text class="action" @click="toggleCommentLike(comment)">{{ (comment.isLiked ? '❤️' : '🤍') + ' ' + (comment.likeCount || 0) }}</text>
									<text class="action" @click="openReply(comment)">回复</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 暂无评论 -->
				<view v-else class="empty-comment">
					<view class="feather-decoration">
						<text class="feather-small">🪶</text>
						<text class="feather-small">🪶</text>
					</view>
					<text class="empty-icon">💕</text>
					<text class="empty-text">还没有人留下爱的足迹</text>
					<text class="empty-hint">成为第一个点赞这份美好的人吧～</text>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="input-area" @click="showCommentInput">
				<text class="love-prefix">💕</text>
				<text class="input-placeholder">留下你的爱意表达...</text>
			</view>
			
			<view class="action-buttons">
				<view class="action-btn" @click="handleLike">
					<text :class="['action-icon', dynamic && dynamic.isLiked ? 'active' : '']">
						{{ dynamic && dynamic.isLiked ? '❤️' : '🤍' }}
					</text>
					<text class="action-label">{{ (dynamic && dynamic.likeCount) ? dynamic.likeCount : 0 }}</text>
				</view>
				
				<view class="action-btn" @click="handleFavorite">
					<text :class="['action-icon', dynamic && dynamic.isFavorited ? 'active' : '']">
						{{ dynamic && dynamic.isFavorited ? '⭐' : '☆' }}
					</text>
					<text class="action-label">{{ (dynamic && dynamic.favoriteCount) ? dynamic.favoriteCount : 0 }}</text>
				</view>
			</view>
		</view>
		
		<!-- 更多菜单弹窗 -->
		<view v-if="showMenu" class="menu-popup">
			<view class="menu-mask" @click="hideMoreMenu"></view>
			<view class="menu-content">
				<!-- 如果是自己的动态，显示编辑和删除 -->
				<template v-if="isMyDynamic">
					<view class="menu-item" @click="handleEdit">
						<text class="menu-icon">✏️</text>
						<text class="menu-text">编辑动态</text>
					</view>
					<view class="menu-item" @click="handleDelete">
						<text class="menu-icon">🗑️</text>
						<text class="menu-text">删除动态</text>
					</view>
				</template>
				<!-- 如果不是自己的动态，显示举报 -->
				<template v-else>
					<view class="menu-item" @click="handleReport">
						<text class="menu-icon">🚩</text>
						<text class="menu-text">举报</text>
					</view>
				</template>
				<view class="menu-item cancel" @click="hideMoreMenu">
					<text class="menu-text">取消</text>
				</view>
			</view>
		</view>
		
		<!-- 评论输入弹窗 -->
		<view v-if="showInput" class="comment-popup">
			<view class="popup-mask" @click="hideCommentInput"></view>
			<view class="popup-content">
				<textarea 
					v-model="commentText"
					placeholder="输入评论内容..."
					class="comment-textarea"
					:focus="showInput"
					maxlength="500"
				/>
				
				<!-- 图片选择区域 -->
				<view class="image-section">
					<view class="image-list">
						<view v-for="(img, index) in commentImages" :key="index" class="image-item">
							<image :src="img" mode="aspectFill" class="preview-image"/>
							<text class="remove-image" @click="removeCommentImage(index)">×</text>
						</view>
						<view v-if="commentImages.length < 3" class="add-image" @click="chooseCommentImage">
							<text class="add-icon">📷</text>
							<text class="add-text">添加图片</text>
						</view>
					</view>
				</view>
				
				<view class="popup-footer">
					<text class="char-count">{{ commentText.length }}/500</text>
					<button class="submit-btn" @click="submitComment">发送</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/utils/api.js'

export default {
	data() {
		return {
			dynamicId: null,
			dynamic: null,
			commentList: [],
			commentTotal: 0,
			showInput: false,
			showMenu: false,
			commentText: '',
			commentImages: [],
			scrollIntoView: '',
			currentUserId: 1,
			defaultAvatar: 'http://115.190.125.125:9001/static-images/default-avatar.svg',
			isLiking: false,
			isFavoriting: false,
			replyingToComment: null,
		}
	},
	
	computed: {
		isMyDynamic() {
			if (!this.dynamic || !this.currentUserId) return false
			return this.dynamic.userId === this.currentUserId ||
			       (this.dynamic.user && this.dynamic.user.userId === this.currentUserId)
		}
	},

	onLoad(options) {
		// 统一处理动态ID
		this.dynamicId = options.id || options.dynamicId
		
		if (this.dynamicId) {
			// 获取当前用户ID
			this.getCurrentUserId()
			// 加载数据
			this.loadDynamicDetail()
			this.loadComments()

			// 滚动到评论区
			if (options.scrollToComment === 'true') {
				this.$nextTick(() => {
					setTimeout(() => {
						this.scrollIntoView = 'comment-section'
					}, 500)
				})
			}
		}
	},
	
	methods: {
		// 获取当前用户ID
		getCurrentUserId() {
			const storedUserId = uni.getStorageSync('userId')
			if (storedUserId !== null && storedUserId !== undefined && storedUserId !== '') {
				this.currentUserId = parseInt(storedUserId)
			} else {
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo && (userInfo.userId || userInfo.id || userInfo.user_id)) {
					this.currentUserId = parseInt(userInfo.userId || userInfo.id || userInfo.user_id)
				} else {
					this.currentUserId = null
				}
			}
		},
		
		// 获取用户头像
		getAvatar(item) {
			if (item && item.user && item.user.avatarUrl) {
				return item.user.avatarUrl
			}
			return this.defaultAvatar
		},
		
		// 获取用户昵称
		getNickname(item) {
			if (item && item.user && item.user.nickname) {
				return item.user.nickname
			}
			return '匿名用户'
		},
		
		// 获取评论头像
		getCommentAvatar(comment) {
			if (comment && comment.user && comment.user.avatarUrl) {
				return comment.user.avatarUrl
			}
			if (comment && comment.$orig && comment.$orig.user && comment.$orig.user.avatarUrl) {
				return comment.$orig.user.avatarUrl
			}
			return this.defaultAvatar
		},
		
		// 获取评论昵称
		getCommentNickname(comment) {
			if (comment && comment.user && comment.user.nickname) {
				return comment.user.nickname
			}
			if (comment && comment.$orig && comment.$orig.user && comment.$orig.user.nickname) {
				return comment.$orig.user.nickname
			}
			return '匿名用户'
		},
		
		// 获取评论图片列表
		getCommentImages(comment) {
			if (!comment) return []
			
			const pickFirstAvailable = (obj) => {
				if (!obj) return null
				return obj.imageUrls || obj.images || obj.image_list || obj.imageList || null
			}
			const raw = pickFirstAvailable(comment)
			if (!raw) return []
			
			const isLikelyImage = (u) => {
				if (typeof u !== 'string' || !u.trim()) return false
				const url = u.trim()
				const hasExt = /(\.png|\.jpg|\.jpeg|\.gif|\.webp|\.bmp)(\?|$)/i.test(url)
				const isHttp = /^https?:\/\//i.test(url)
				const isMinio = url.includes('dynamic-comments/')
				return hasExt || (isHttp && isMinio)
			}
			
			try {
				if (Array.isArray(raw)) {
					return raw.filter(isLikelyImage)
				}
				if (typeof raw === 'string') {
					const s = raw.trim()
					if (s.startsWith('[')) {
						const arr = JSON.parse(s)
						return Array.isArray(arr) ? arr.filter(isLikelyImage) : []
					}
					return s.split(',')
							.map(x => x.trim().replace(/^\[|\]$/g, '').replace(/^['\"]|['\"]$/g, ''))
							.filter(isLikelyImage)
				}
			} catch (e) {
				console.error('解析评论图片失败:', e)
			}
			return []
		},
		
		// 预览评论图片
		previewCommentImage(urls, current) {
			uni.previewImage({
				urls: urls,
				current: current
			})
		},
		
		// 加载动态详情
		async loadDynamicDetail() {
			uni.showLoading({ title: '加载中...' })
			
			try {
				const res = await api.dynamic.getDetail(this.dynamicId, this.currentUserId)
				if (res) {
					this.dynamic = {
						...res,
						isLiked: Boolean(res.isLiked === true || res.isLiked === 1 || res.isLiked === 'true' || res.isLiked === '1'),
						isFavorited: Boolean(res.isFavorited === true || res.isFavorited === 1 || res.isFavorited === 'true' || res.isFavorited === '1')
					}
				}
			} catch (error) {
				console.error('加载详情失败：', error)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		// 处理点赞
		async handleLike() {
			if (!this.dynamic || this.isLiking) return
			
			try {
				this.isLiking = true
				const isLiked = this.dynamic.isLiked
				const originalCount = this.dynamic.likeCount || 0
				
				// 乐观更新UI
				this.dynamic.isLiked = !isLiked
				this.dynamic.likeCount = isLiked ? Math.max(0, originalCount - 1) : originalCount + 1
				
				// 发送请求
				if (isLiked) {
					await api.dynamic.unlike(this.dynamic.dynamicId)
				} else {
					await api.dynamic.like(this.dynamic.dynamicId)
				}
				
				// 通知列表页同步状态
				uni.$emit('dynamic-updated', {
					dynamicId: this.dynamic.dynamicId,
					isLiked: this.dynamic.isLiked,
					likeCount: this.dynamic.likeCount,
					isFavorited: this.dynamic.isFavorited,
					favoriteCount: this.dynamic.favoriteCount
				})
			} catch (error) {
				console.error('点赞失败：', error)
				// 恢复原状态
				const currentIsLiked = this.dynamic.isLiked
				this.dynamic.isLiked = !currentIsLiked
				this.dynamic.likeCount = !currentIsLiked ? (this.dynamic.likeCount || 0) + 1 : Math.max(0, (this.dynamic.likeCount || 0) - 1)
				uni.showToast({
					title: '操作失败，请重试',
					icon: 'none'
				})
			} finally {
				setTimeout(() => {
					this.isLiking = false
				}, 300)
			}
		},
		
		// 处理收藏
		async handleFavorite() {
			if (!this.dynamic || this.isFavoriting) return
			
			try {
				this.isFavoriting = true
				const isFavorited = this.dynamic.isFavorited
				const originalCount = this.dynamic.favoriteCount || 0
				
				// 乐观更新UI
				this.dynamic.isFavorited = !isFavorited
				this.dynamic.favoriteCount = isFavorited ? Math.max(0, originalCount - 1) : originalCount + 1
				
				if (isFavorited) {
					await api.dynamic.unfavorite(this.dynamic.dynamicId)
				} else {
					await api.dynamic.favorite(this.dynamic.dynamicId)
					uni.showToast({
						title: '收藏成功',
						icon: 'success'
					})
				}
				
				// 通知列表页同步状态
				uni.$emit('dynamic-updated', {
					dynamicId: this.dynamic.dynamicId,
					isLiked: this.dynamic.isLiked,
					likeCount: this.dynamic.likeCount,
					isFavorited: this.dynamic.isFavorited,
					favoriteCount: this.dynamic.favoriteCount
				})
			} catch (error) {
				console.error('收藏失败：', error)
				// 恢复原状态
				const currentIsFavorited = this.dynamic.isFavorited
				this.dynamic.isFavorited = !currentIsFavorited
				this.dynamic.favoriteCount = !currentIsFavorited ? (this.dynamic.favoriteCount || 0) + 1 : Math.max(0, (this.dynamic.favoriteCount || 0) - 1)
				uni.showToast({
					title: '操作失败，请重试',
					icon: 'none'
				})
			} finally {
				setTimeout(() => {
					this.isFavoriting = false
				}, 300)
			}
		},
		
		// 显示评论输入
		showCommentInput() {
			this.showInput = true
		},
		
		// 隐藏评论输入
		hideCommentInput() {
			this.showInput = false
			this.commentText = ''
			this.commentImages = []
			this.replyingToComment = null
		},
		
		// 选择评论图片
		async chooseCommentImage() {
			uni.chooseImage({
				count: 3 - this.commentImages.length,
				sizeType: ['compressed'],
				success: async (res) => {
					const filePaths = res.tempFilePaths || []
					if (filePaths.length === 0) return
					
					this.commentImages.push(...filePaths)
					uni.showLoading({ title: `正在上传图片...` })
					
					try {
						for (let i = 0; i < filePaths.length; i++) {
							const filePath = filePaths[i]
							try {
								const url = await api.dynamic.uploadSingle(filePath)
								const localIndex = this.commentImages.indexOf(filePath)
								if (localIndex !== -1) {
									this.commentImages.splice(localIndex, 1, url)
								}
							} catch(error) {
								const localIndex = this.commentImages.indexOf(filePath)
								if (localIndex !== -1) {
									this.commentImages.splice(localIndex, 1)
								}
							}
						}
						uni.hideLoading()
					} catch(e) {
						uni.hideLoading()
						uni.showToast({ title: '图片上传失败', icon: 'none' })
					}
				},
				fail: () => {
					uni.showToast({ title: '选择图片失败', icon: 'none' })
				}
			})
		},
		
		// 移除评论图片
		removeCommentImage(index) {
			this.commentImages.splice(index, 1)
		},
		
		// 加载评论（核心修复：子评论嵌套）
		async loadComments() {
			try {
				uni.showLoading({ title: '加载评论...', mask: false })
				const res = await api.dynamic.getComments(this.dynamicId, 1, 20)
				const allComments = Array.isArray(res?.records) ? res.records : []
				
				// 1. 分离父评论和子评论
				const parentComments = allComments.filter(c => {
					const parentId = c.parentCommentId || 0
					return parentId === 0 || parentId === null || parentId === undefined
				})
				
				const childComments = allComments.filter(c => {
					const parentId = c.parentCommentId || 0
					return parentId !== 0 && parentId !== null && parentId !== undefined
				})
				
				// 2. 将子评论嵌套到对应的父评论中
				parentComments.forEach(parent => {
					// 初始化replies数组
					parent.replies = parent.replies || []
					// 匹配子评论
					const matchedReplies = childComments.filter(child => {
						return child.parentCommentId === parent.commentId
					})
					// 赋值子评论
					if (matchedReplies.length > 0) {
						parent.replies = matchedReplies
					}
				})
				
				// 3. 更新数据
				this.commentList = parentComments
				this.commentTotal = res.total !== undefined ? res.total : parentComments.length
				
				// 同步更新动态的评论数
				if (this.dynamic) {
					this.dynamic.commentCount = this.commentTotal
				}
				
				console.log('评论数据加载完成:', {
					total: this.commentTotal,
					parentCount: parentComments.length,
					childCount: childComments.length
				})
			} catch (e) {
				console.error('加载评论失败:', e)
				this.commentList = []
				this.commentTotal = 0
				uni.showToast({
					title: '评论加载失败',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		// 获取评论数
		getCommentCount() {
			if (this.commentTotal > 0) {
				return this.commentTotal
			}
			if (this.commentList && this.commentList.length > 0) {
				return this.commentList.length
			}
			return this.dynamic ? (this.dynamic.commentCount || 0) : 0
		},

		// 提交评论
		async submitComment() {
			if (!this.commentText.trim()) {
				uni.showToast({
					title: '请输入评论内容',
					icon: 'none'
				})
				return
			}
			
			try {
				const imageUrls = this.commentImages.length > 0 ? this.commentImages.join(',') : ''
				const parentCommentId = this.replyingToComment ? this.replyingToComment.commentId : 0
				
				await api.dynamic.addComment(this.dynamicId, this.commentText, imageUrls, parentCommentId)
				
				// 重置状态
				this.commentText = ''
				this.commentImages = []
				this.hideCommentInput()
				
				// 乐观更新评论数
				this.commentTotal = (this.commentTotal || 0) + 1
				if (this.dynamic) {
					this.dynamic.commentCount = (this.dynamic.commentCount || 0) + 1
				}
				
				// 重新加载评论
				this.loadComments()
				
				uni.showToast({ title: '评论发布成功', icon: 'success' })
			} catch (e) {
				console.error('提交评论失败:', e)
				uni.showToast({ title: '发布失败，请重试', icon: 'none' })
			}
		},

		// 评论点赞/取消
		async toggleCommentLike(comment) {
			try {
				if (comment.isLiked) {
					await api.dynamic.unlikeComment(comment.commentId)
					comment.isLiked = false
					comment.likeCount = Math.max(0, (comment.likeCount || 0) - 1)
				} else {
					await api.dynamic.likeComment(comment.commentId)
					comment.isLiked = true
					comment.likeCount = (comment.likeCount || 0) + 1
				}
			} catch (e) {
				console.error('评论点赞失败:', e)
			}
		},

		// 打开回复框
		openReply(comment) {
			this.replyingToComment = comment
			this.showInput = true
			this.scrollIntoView = ''
			// 滚动到评论区（可选）
			this.$nextTick(() => {
				this.scrollIntoView = 'comment-section'
			})
		},
		
		// 显示更多菜单
		showMoreMenu() {
			this.showMenu = true
		},
		
		// 隐藏更多菜单
		hideMoreMenu() {
			this.showMenu = false
		},
		
		// 处理编辑
		handleEdit() {
			this.hideMoreMenu()
			if (!this.dynamic || !this.dynamicId) {
				uni.showToast({
					title: '动态信息不存在',
					icon: 'none'
				})
				return
			}
			
			const mediaUrls = Array.isArray(this.dynamic.mediaUrls)
				? this.dynamic.mediaUrls
				: (this.dynamic.mediaUrls ? JSON.parse(this.dynamic.mediaUrls) : [])
				
			uni.navigateTo({
				url: `/pages/plaza/publish?edit=true&dynamicId=${this.dynamicId}&content=${encodeURIComponent(this.dynamic.content || '')}&mediaUrls=${encodeURIComponent(JSON.stringify(mediaUrls))}&mediaType=${this.dynamic.mediaType || 0}&visibility=${this.dynamic.visibility || 1}`
			})
		},

		// 处理删除
		handleDelete() {
			this.hideMoreMenu()
			if (!this.dynamicId) {
				uni.showToast({
					title: '动态ID不存在',
					icon: 'none'
				})
				return
			}

			uni.showModal({
				title: '确认删除',
				content: '确定要删除这条动态吗？删除后无法恢复。',
				confirmText: '删除',
				confirmColor: '#E91E63',
				success: async (res) => {
					if (res.confirm) {
						try {
							if (!this.currentUserId) {
								uni.showToast({
									title: '请先登录',
									icon: 'none'
								})
								return
							}

							uni.showLoading({
								title: '删除中...'
							})

							await api.dynamic.deleteUserDynamic(this.dynamicId, this.currentUserId)

							uni.hideLoading()
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})

							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						} catch (error) {
							uni.hideLoading()
							console.error('删除动态失败:', error)
							uni.showToast({
								title: error.message || '删除失败',
								icon: 'none'
							})
						}
					}
				}
			})
		},

		// 处理举报
		handleReport() {
			this.hideMoreMenu()
			if (!this.dynamicId) {
				uni.showToast({
					title: '动态ID不存在',
					icon: 'none'
				})
				return
			}
			uni.navigateTo({
				url: `/pages/plaza/report?id=${this.dynamicId}`
			})
		},
		
		// 预览图片
		previewImage(urls, current) {
			uni.previewImage({
				urls: urls,
				current: current
			})
		},
		
		// 格式化时间
		formatTime(timeStr) {
			if (!timeStr) return ''
			
			const time = new Date(timeStr)
			if (isNaN(time.getTime())) return ''
			
			const now = new Date()
			const diff = now - time
			
			if (diff < 60000) return '刚刚'
			if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前'
			if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前'
			if (diff < 604800000) return Math.floor(diff / 86400000) + '天前'
			
			const year = time.getFullYear()
			const month = String(time.getMonth() + 1).padStart(2, '0')
			const day = String(time.getDate()).padStart(2, '0')
			const hour = String(time.getHours()).padStart(2, '0')
			const minute = String(time.getMinutes()).padStart(2, '0')
			
			if (year === now.getFullYear()) {
				return `${month}-${day} ${hour}:${minute}`
			}
			return `${year}-${month}-${day}`
		},
		
		// 返回
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.detail-page {
	min-height: 100vh;
	background: #FFF0F5;

	// 自定义导航栏
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background: transparent;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		padding-top: 0;
		z-index: 1000;
		box-shadow: none;
		overflow: visible;
		position: relative;

		.navbar-background {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			.feather-small {
				position: absolute;
				font-size: 40rpx;
				opacity: 0.15;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%) rotate(25deg);
				animation: float 4s ease-in-out infinite;
			}
		}

		.navbar-left,
		.navbar-right {
			width: 100rpx;
			z-index: 1;
		}

		.navbar-left {
			.back-icon {
				font-size: 40rpx;
				color: #E91E63;
				text-shadow: none;
			}
		}

		.navbar-title {
			flex: 1;
			text-align: center;
			z-index: 1;

			.main-title {
				display: block;
				font-size: 30rpx;
				font-weight: 700;
				color: #D81B60;
				text-shadow: none;
				margin-bottom: 2rpx;
			}

			.sub-title {
				display: block;
				font-size: 20rpx;
				color: #AD1457;
				letter-spacing: 1rpx;
			}
		}

		.navbar-right {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.more-icon {
				font-size: 48rpx;
				color: #E91E63;
				font-weight: bold;
				line-height: 1;
				transform: rotate(90deg);
			}
		}
	}

	// 内容滚动区域
	.content-scroll {
		margin-top: 88rpx;
		height: calc(100vh - 88rpx - 128rpx);
		padding-bottom: 16rpx;

		// 动态详情
		.dynamic-detail {
			background: #FFFFFF;
			padding: 24rpx;
			margin: 12rpx 12rpx 10rpx 12rpx;
			border-radius: 20rpx;
			box-shadow: 0 6rpx 18rpx rgba(233, 30, 99, 0.08);
			border: 2rpx solid rgba(255, 182, 193, 0.25);
			position: relative;
			overflow: hidden;

			.user-section {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.user-info {
					flex: 1;

					.nickname {
						display: block;
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
						margin-bottom: 8rpx;
					}

					.time {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}

			.content-section {
				margin-bottom: 30rpx;

				.content-text {
					font-size: 30rpx;
					line-height: 1.8;
					color: #333333;
					word-wrap: break-word;
				}
			}

			.media-section {
				margin-bottom: 16rpx;

				.image-grid {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					gap: 10rpx;

					.media-image {
						width: 100%;
						height: 200rpx;
						border-radius: 12rpx;
					}
				}
			}

			.stats-section {
				display: flex;
				padding-top: 30rpx;
				border-top: 1rpx solid #F0F0F0;

				.stat-item {
					flex: 1;
					text-align: center;
					font-size: 26rpx;
					color: #666666;
				}
			}
		}

		// 评论区域
		.comment-section {
			background: #FFFFFF;
			padding: 24rpx;
			margin: 0 12rpx 12rpx 12rpx;
			border-radius: 20rpx;
			box-shadow: 0 6rpx 18rpx rgba(233, 30, 99, 0.08);
			border: 2rpx solid rgba(255, 182, 193, 0.25);
			position: relative;

			.section-title {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				.title-text {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					margin-right: 10rpx;
				}

				.title-count {
					font-size: 24rpx;
					color: #999999;
				}
			}

			.comment-list {
				.comment-item {
					display: flex;
					margin-bottom: 18rpx;
					padding-bottom: 18rpx;
					border-bottom: 1rpx solid #f8f8f8;

					&:last-child {
						border-bottom: none;
						margin-bottom: 0;
						padding-bottom: 0;
					}

					.comment-avatar {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin-right: 20rpx;
						flex-shrink: 0;
					}

					.comment-content {
						flex: 1;

						.comment-nickname {
							display: block;
							font-size: 26rpx;
							color: #666666;
							margin-bottom: 6rpx;
							font-weight: 500;
						}

						.comment-text {
							display: block;
							font-size: 28rpx;
							line-height: 1.55;
							color: #333333;
							margin-bottom: 8rpx;
						}

						.comment-images {
							display: flex;
							flex-wrap: wrap;
							gap: 10rpx;
							margin: 12rpx 0;

							.comment-image {
								width: 150rpx;
								height: 150rpx;
								border-radius: 12rpx;
								overflow: hidden;
							}
						}

						// 子评论样式（核心优化）
						.reply-list {
							margin-top: 12rpx;
							margin-left: 20rpx;
							padding-left: 16rpx;
							border-left: 2rpx solid #f8f8f8;

							.reply-item {
								display: flex;
								align-items: flex-start;
								margin-bottom: 10rpx;
								padding: 10rpx;
								background: #fafafa;
								border-radius: 12rpx;

								.reply-avatar {
									width: 40rpx;
									height: 40rpx;
								}}

								.reply-info {
									flex: 1;
									min-width: 0; // 防止文字溢出

									.reply-nickname {
										font-size: 24rpx;
										color: #999;
										font-weight: 500;
									}

									.reply-text {
										font-size: 26rpx;
										color: #333;
										line-height: 1.4;
										margin: 4rpx 0;
									}

									.reply-time {
										font-size: 20rpx;
										color: #ccc;
										display: block;
									}
								}
							}
						}

						.comment-footer {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 12rpx;

							.comment-time {
								font-size: 22rpx;
								color: #999;
							}

							.comment-actions {
								display: flex;
								gap: 20rpx;

								.action {
									font-size: 24rpx;
									color: #666;
									padding: 4rpx 8rpx;
									border-radius: 8rpx;
									transition: background-color 0.2s;

									&:active {
										background-color: #f0f0f0;
									}
								}
							}
						}
					}
				}

				.empty-comment {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 100rpx 0;

					.feather-decoration {
						display: flex;
						gap: 16rpx;
						margin-bottom: 20rpx;

						.feather-small {
							font-size: 40rpx;
							opacity: 0.3;
						}
					}

					.empty-icon {
						font-size: 100rpx;
						margin-bottom: 20rpx;
					}

					.empty-text {
						font-size: 26rpx;
						color: #999;
						margin-bottom: 8rpx;
					}

					.empty-hint {
						font-size: 22rpx;
						color: #ccc;
					}
				}
			}
		}

		// 更多菜单弹窗
		.menu-popup {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 9999;

			.menu-mask {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.5);
			}

			.menu-content {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: #FFFFFF;
				border-radius: 30rpx 30rpx 0 0;
				padding: 20rpx 30rpx;
				padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
				padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
				animation: slideUp 0.3s ease;

				.menu-item {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 12rpx;
					margin-bottom: 16rpx;
					transition: background-color 0.3s ease;

					&:not(.cancel) {
						background: #FFF5F7;

						&:active {
							background: #FFE8EC;
						}
					}

					&.cancel {
						background: #F5F5F5;
						margin-top: 8rpx;

						&:active {
							background: #EEEEEE;
						}
					}

					.menu-icon {
						font-size: 36rpx;
						margin-right: 12rpx;
					}

					.menu-text {
						font-size: 30rpx;
						color: #333333;
						font-weight: 500;
					}
				}
			}
		}

		// 底部操作栏
		.bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #FFFFFF;
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.input-area {
				flex: 1;
				height: 70rpx;
				background-color: #F5F5F5;
				border-radius: 35rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				.love-prefix {
					font-size: 28rpx;
					margin-right: 8rpx;
				}

				.input-placeholder {
					font-size: 26rpx;
					color: #999999;
				}
			}

			.action-buttons {
				display: flex;
				gap: 20rpx;

				.action-btn {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 12rpx 16rpx;
					border-radius: 24rpx;
					background: rgba(255, 182, 193, 0.1);
					transition: all 0.3s ease;

					&:active {
						transform: scale(0.95);
						background: rgba(233, 30, 99, 0.2);
					}

					.action-icon {
						font-size: 48rpx;
						margin-bottom: 4rpx;

						&.active {
							color: #E91E63;
							animation: heartbeat 0.6s ease-in-out;
						}
					}

					.action-label {
						font-size: 22rpx;
						color: #666;
						font-weight: 500;
					}
				}
			}
		}

		// 评论输入弹窗
		.comment-popup {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 9999;

			.popup-mask {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.5);
			}

			.popup-content {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: #FFFFFF;
				border-radius: 30rpx 30rpx 0 0;
				padding: 30rpx;
				padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
				padding-bottom: calc(30rpx + env(safe-area-inset-bottom));

				.comment-textarea {
					width: 100%;
					min-height: 200rpx;
					max-height: 400rpx;
					padding: 20rpx;
					background-color: #F5F5F5;
					border-radius: 12rpx;
					font-size: 28rpx;
					line-height: 1.6;
					margin-bottom: 20rpx;
					border: none;
					outline: none;
				}

				.image-section {
					margin-bottom: 20rpx;

					.image-list {
						display: flex;
						flex-wrap: wrap;
						gap: 16rpx;
					}

					.image-item {
						position: relative;
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
						overflow: hidden;

						.preview-image {
							width: 100%;
							height: 100%;
						}

						.remove-image {
							position: absolute;
							top: 8rpx;
							right: 8rpx;
							width: 32rpx;
							height: 32rpx;
							background: rgba(0,0,0,0.6);
							color: white;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;
							font-weight: bold;
						}
					}

					.add-image {
						width: 120rpx;
						height: 120rpx;
						background: #F5F5F5;
						border: 2rpx dashed #CCCCCC;
						border-radius: 12rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.add-icon {
							font-size: 32rpx;
							margin-bottom: 8rpx;
						}

						.add-text {
							font-size: 20rpx;
							color: #999999;
						}
					}
				}

				.popup-footer {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.char-count {
						font-size: 24rpx;
						color: #999999;
					}

					.submit-btn {
						padding: 15rpx 50rpx;
						background: linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%);
						color: #FFFFFF;
						border: none;
						border-radius: 50rpx;
						font-size: 28rpx;
						transition: transform 0.2s;

						&:active {
							transform: scale(0.95);
						}
					}
				}
			}
		}
	}

	// 全局动画
	@keyframes slideUp {
		from {
			transform: translateY(100%);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	@keyframes heartbeat {
		0%, 100% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.2);
		}
	}

	@keyframes float {
		0%, 100% {
			transform: translate(-50%, -50%) rotate(25deg);
		}
		50% {
			transform: translate(-50%, -60%) rotate(25deg);
		}
	}
</style>