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"
		>
			<!-- 动态内容 -->
			<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 class="comment-section">
				<view class="section-title">
					<text class="title-text">评论区</text>
					<text class="title-count">{{ dynamic ? dynamic.commentCount || 0 : commentList.length }}</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="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 class="reply-list" v-if="comment.replies && comment.replies.length">
								<view class="reply-item" v-for="reply in comment.replies" :key="'r-'+reply.commentId">
									<text class="reply-nickname">{{ getCommentNickname(reply) }}：</text>
									<text class="reply-text">{{ reply.content }}</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">
				<view class="menu-item" @click="handleReport">
					<text class="menu-icon">🚩</text>
					<text class="menu-text">举报</text>
				</view>
				<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: [],
			showInput: false,
			showMenu: false, // 显示更多菜单
			commentText: '',
            commentImages: [],
			scrollIntoView: '',
			currentUserId: 1,
			defaultAvatar: '/static/default-avatar.png',
			isLiking: false,  // 正在点赞中，防止重复点击
			isFavoriting: false  // 正在收藏中，防止重复点击
		}
	},
	
	onLoad(options) {
		if (options.id) {
			this.dynamicId = options.id
            this.loadDynamicDetail()
            this.loadComments()
		}
	},
	
	methods: {
        // 兼容WXML：获取头像
        getAvatar(item) {
            if (item && item.user && item.user.avatarUrl) {
                return item.user.avatarUrl
            }
            return this.defaultAvatar
        },
        // 兼容WXML：获取昵称
        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 '匿名用户'
        },
		
        // 获取评论图片列表（兼容字符串JSON、逗号分隔、数组等多种格式）
        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()
                    // JSON数组字符串: ["url1", "url2"]
                    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) {
                // ignore parse error
            }
            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
				}
			} catch (error) {
				console.error('加载详情失败：', error)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		// 处理点赞
		async handleLike() {
			if (!this.dynamic) return
			// 防止重复点击
			if (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
                })
			} catch (error) {
				console.error('点赞失败：', error)
				// 请求失败，恢复原状态
				this.dynamic.isLiked = !this.dynamic.isLiked
				this.dynamic.likeCount = this.dynamic.isLiked ? (this.dynamic.likeCount || 0) + 1 : Math.max(0, (this.dynamic.likeCount || 0) - 1)
				uni.showToast({
					title: '操作失败，请重试',
					icon: 'none'
				})
			} finally {
				// 延迟300毫秒后释放锁，防止快速点击
				setTimeout(() => {
					this.isLiking = false
				}, 300)
			}
		},
		
		// 处理收藏
		async handleFavorite() {
			if (!this.dynamic) return
			// 防止重复点击
			if (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,
                    isFavorited: this.dynamic.isFavorited,
                    favoriteCount: this.dynamic.favoriteCount
                })
			} catch (error) {
				console.error('收藏失败：', error)
				// 请求失败，恢复原状态
				this.dynamic.isFavorited = !this.dynamic.isFavorited
				this.dynamic.favoriteCount = this.dynamic.isFavorited ? (this.dynamic.favoriteCount || 0) + 1 : Math.max(0, (this.dynamic.favoriteCount || 0) - 1)
				uni.showToast({
					title: '操作失败，请重试',
					icon: 'none'
				})
			} finally {
				// 延迟300毫秒后释放锁，防止快速点击
				setTimeout(() => {
					this.isFavoriting = false
				}, 300)
			}
		},
		
		// 处理分享
		handleShare() {
			uni.showToast({
				title: '分享功能开发中',
				icon: 'none'
			})
		},
		
		// 显示评论输入
		showCommentInput() {
			this.showInput = true
		},
		
		// 隐藏评论输入
		hideCommentInput() {
			this.showInput = false
			this.commentText = ''
			this.commentImages = []
		},
		
		// 选择评论图片
		async chooseCommentImage() {
			uni.chooseImage({
				count: 3 - this.commentImages.length, // 最多3张
				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)
								// 替换本地路径为在线URL
								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 {
                const res = await api.dynamic.getComments(this.dynamicId, 1, 20)
                this.commentList = res.records || []
            } catch (e) {
                console.error('加载评论失败', e)
            }
        },

        // 提交评论
        async submitComment() {
			if (!this.commentText.trim()) {
				uni.showToast({
					title: '请输入评论内容',
					icon: 'none'
				})
				return
			}
            try {
				// 构造图片URL字符串
				const imageUrls = this.commentImages.length > 0 ? this.commentImages.join(',') : ''
                await api.dynamic.addComment(this.dynamicId, this.commentText, imageUrls)
                this.commentText = ''
                this.commentImages = []
                this.hideCommentInput()
                this.loadComments()
				
				// 更新评论数量
				if (this.dynamic) {
					this.dynamic.commentCount = (this.dynamic.commentCount || 0) + 1
				}
				
                uni.showToast({ title: '已发布', icon: 'success' })
            } catch (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) {
                // ignore
            }
        },

        // 打开回复框（设置parentCommentId）
        openReply(comment) {
            this.showInput = true
            this.scrollIntoView = ''
            // 简化：当前接口不区分parent，作为后续扩展
        },
		
		// 显示更多菜单
		showMoreMenu() {
			this.showMenu = true
		},
		
		// 隐藏更多菜单
		hideMoreMenu() {
			this.showMenu = false
		},
		
		// 处理举报
		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)
			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;
					
					.comment-avatar {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
					
                    .comment-content {
						flex: 1;
						
                        .comment-nickname {
                            display: block;
                            font-size: 26rpx;
                            color: #666666;
                            margin-bottom: 6rpx;
						}
						
                        .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;
							}
						}
						
						.comment-footer {
							display: flex;
							justify-content: space-between;
							
							.comment-time,
							.comment-like {
								font-size: 22rpx;
								color: #999999;
							}
						}
					}
				}
			}
			
			.empty-comment {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 100rpx 0;
				
				.empty-icon {
					font-size: 100rpx;
					margin-bottom: 20rpx;
				}
				
				.empty-text {
					font-size: 26rpx;
					color: #999999;
				}
			}
		}
	}
	
	// 更多菜单弹窗
	.menu-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9998;
		
		.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;
			
			.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: 6rpx;
					
					&.active {
						animation: heartbeat 0.6s ease-in-out;
					}
				}
				
				.action-label {
					font-size: 22rpx;
					color: #8B5A96;
					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;
			}
			
			.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;
				}
			}
		}
	}
}

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

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}
</style>