1387 lines
30 KiB
Vue
1387 lines
30 KiB
Vue
<template>
|
||
<view class="post-detail-page">
|
||
<!-- 加载中状态 -->
|
||
<view class="loading-container" v-if="isLoading">
|
||
<view class="loading-spinner"></view>
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
|
||
<!-- 内容区域 -->
|
||
<scroll-view class="content-scroll" scroll-y v-else>
|
||
<!-- 视频播放器区域（优先显示） -->
|
||
<view class="video-player-section" v-if="postData.videoUrl">
|
||
<video
|
||
class="video-player"
|
||
:src="postData.videoUrl"
|
||
:poster="postData.images && postData.images.length > 0 ? postData.images[0] : ''"
|
||
controls
|
||
objectFit="contain"
|
||
show-center-play-btn
|
||
enable-play-gesture
|
||
></video>
|
||
<!-- 餐次标签 -->
|
||
<view class="meal-tag" v-if="postData.mealType">
|
||
<text class="meal-icon">{{ getMealIcon(postData.mealType) }}</text>
|
||
<text class="meal-text">{{ postData.mealType }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 图片轮播区域（无视频时显示） -->
|
||
<view class="image-carousel" v-else-if="postData.images && postData.images.length > 0">
|
||
<swiper
|
||
class="swiper"
|
||
:indicator-dots="postData.images.length > 1"
|
||
:autoplay="false"
|
||
:current="currentImageIndex"
|
||
@change="onImageChange"
|
||
indicator-color="rgba(255,255,255,0.5)"
|
||
indicator-active-color="#ffffff"
|
||
>
|
||
<swiper-item v-for="(image, index) in postData.images" :key="index">
|
||
<image class="carousel-image" :src="image" mode="aspectFill" @click="previewImage(index)"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
<!-- 餐次标签 -->
|
||
<view class="meal-tag" v-if="postData.mealType">
|
||
<text class="meal-icon">{{ getMealIcon(postData.mealType) }}</text>
|
||
<text class="meal-text">{{ postData.mealType }}</text>
|
||
</view>
|
||
<!-- 图片页码 -->
|
||
<view class="image-counter" v-if="postData.images.length > 1">
|
||
{{ currentImageIndex + 1 }} / {{ postData.images.length }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 帖子内容区域 -->
|
||
<view class="post-content-section">
|
||
<!-- 无图片时显示类型标签 -->
|
||
<view class="type-tag-row" v-if="!postData.images || postData.images.length === 0">
|
||
<view class="type-tag">{{ postData.mealType || '分享' }}</view>
|
||
</view>
|
||
|
||
<!-- 标题和分数 -->
|
||
<view class="title-row">
|
||
<view class="post-title">{{ postData.title }}</view>
|
||
<view class="score-badge" v-if="postData.score > 0">
|
||
<text>{{ postData.score }}分</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 帖子描述 -->
|
||
<view class="post-description" v-if="postData.description">
|
||
<text>{{ postData.description }}</text>
|
||
</view>
|
||
|
||
<!-- 标签列表 -->
|
||
<view class="tag-list" v-if="postData.tags && postData.tags.length > 0">
|
||
<view
|
||
class="tag-item"
|
||
v-for="(tag, index) in postData.tags"
|
||
:key="index"
|
||
>
|
||
{{ tag }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 作者信息 -->
|
||
<view class="author-section">
|
||
<view class="author-info">
|
||
<view class="author-avatar">
|
||
<image
|
||
v-if="postData.author.avatar && postData.author.avatar.startsWith('http')"
|
||
class="avatar-img"
|
||
:src="postData.author.avatar"
|
||
mode="aspectFill"
|
||
></image>
|
||
<text v-else class="avatar-icon">👤</text>
|
||
</view>
|
||
<view class="author-details">
|
||
<view class="author-name">{{ postData.author.name }}</view>
|
||
<view class="post-time">{{ postData.author.time }}</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="follow-btn"
|
||
:class="{ followed: isFollowed }"
|
||
@click="toggleFollow"
|
||
>
|
||
<text>{{ isFollowed ? '已关注' : '+ 关注' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 营养统计卡片 -->
|
||
<view class="nutrition-stats-card" v-if="postData.nutritionStats && postData.nutritionStats.length > 0">
|
||
<view class="stats-header">
|
||
<view class="stats-title">
|
||
<text class="title-icon">📊</text>
|
||
<text class="title-text">营养统计</text>
|
||
</view>
|
||
<view class="stats-unit">
|
||
<text>基于100g</text>
|
||
</view>
|
||
</view>
|
||
<view class="stats-grid">
|
||
<view class="stat-item" v-for="(stat, index) in postData.nutritionStats" :key="index">
|
||
<view class="stat-value">{{ stat.value }}</view>
|
||
<view class="stat-label">{{ stat.label }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- AI营养师点评 -->
|
||
<view class="ai-comment-card" v-if="postData.aiComment">
|
||
<view class="ai-header">
|
||
<view class="ai-avatar">AI</view>
|
||
<view class="ai-info">
|
||
<view class="ai-name-row">
|
||
<text class="ai-name">营养师点评</text>
|
||
<text class="ai-verified">已认证</text>
|
||
</view>
|
||
<view class="ai-comment-text">
|
||
{{ postData.aiComment }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 一键借鉴打卡按钮 -->
|
||
<view class="copy-checkin-btn" @click="handleCopyCheckin">
|
||
<text class="btn-icon">🎬</text>
|
||
<text class="btn-text">一键借鉴打卡</text>
|
||
</view>
|
||
|
||
<!-- 分隔线 -->
|
||
<view class="divider"></view>
|
||
|
||
<!-- 评论区域 -->
|
||
<view class="comments-section">
|
||
<view class="comments-header">
|
||
<text class="comments-icon">💬</text>
|
||
<text class="comments-title">全部评论 {{ postData.comments.length }}</text>
|
||
</view>
|
||
<view class="comments-list">
|
||
<view
|
||
class="comment-item"
|
||
v-for="(comment, index) in postData.comments"
|
||
:key="index"
|
||
>
|
||
<view class="comment-avatar">
|
||
<text>{{ comment.avatar }}</text>
|
||
</view>
|
||
<view class="comment-content">
|
||
<view class="comment-header">
|
||
<text class="comment-name">{{ comment.name }}</text>
|
||
<text class="comment-time">{{ comment.time }}</text>
|
||
</view>
|
||
<view class="comment-text">{{ comment.text }}</view>
|
||
<view class="comment-actions">
|
||
<view class="like-btn" @click="toggleCommentLike(comment, index)">
|
||
<text class="like-icon">❤️</text>
|
||
<text class="like-count">{{ comment.likeCount }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 相关推荐 -->
|
||
<view class="related-section">
|
||
<view class="related-header">
|
||
<text class="related-icon">✨</text>
|
||
<text class="related-title">相关推荐</text>
|
||
</view>
|
||
<view class="related-list">
|
||
<view
|
||
class="related-item"
|
||
v-for="(item, index) in relatedPosts"
|
||
:key="index"
|
||
@click="goToRelatedPost(item)"
|
||
>
|
||
<image class="related-image" :src="item.image" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部安全距离 -->
|
||
<view class="safe-bottom"></view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部操作栏 -->
|
||
<view class="bottom-bar">
|
||
<view class="input-box" @click="focusInput">
|
||
<text class="input-placeholder">说点什么...</text>
|
||
</view>
|
||
<view class="action-buttons">
|
||
<view class="action-btn-item" @click="toggleLike">
|
||
<text class="action-icon">❤️</text>
|
||
<text class="action-count">{{ postData.likeCount }}</text>
|
||
</view>
|
||
<view class="action-btn-item" @click="toggleFavorite">
|
||
<text class="action-icon">⭐</text>
|
||
<text class="action-count">{{ postData.favoriteCount }}</text>
|
||
</view>
|
||
<!-- <view class="action-btn-item" @click="handleShare">
|
||
<text class="action-icon">📤</text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getCommunityDetail,
|
||
toggleLike as apiToggleLike,
|
||
toggleCollect,
|
||
toggleFollow as apiToggleFollow,
|
||
getCommentList,
|
||
addComment,
|
||
getCommunityList
|
||
} from '@/api/tool.js'
|
||
import { checkLogin, toLogin } from '@/libs/login.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
postId: null,
|
||
currentImageIndex: 0,
|
||
isLoading: true,
|
||
isFollowed: false,
|
||
isLiked: false,
|
||
isCollected: false,
|
||
postData: {
|
||
id: null,
|
||
images: [],
|
||
mealType: '',
|
||
title: '',
|
||
score: 0,
|
||
description: '',
|
||
tags: [],
|
||
author: {
|
||
id: null,
|
||
avatar: '👤',
|
||
name: '',
|
||
time: ''
|
||
},
|
||
nutritionStats: [],
|
||
aiComment: '',
|
||
comments: [],
|
||
likeCount: 0,
|
||
favoriteCount: 0,
|
||
commentCount: 0,
|
||
videoUrl: null,
|
||
videoStatus: null,
|
||
hasVideo: false
|
||
},
|
||
relatedPosts: [],
|
||
commentPage: 1,
|
||
commentLimit: 10,
|
||
hasMoreComments: true,
|
||
isLoadingComments: false,
|
||
showCommentInput: false,
|
||
commentText: ''
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options.id) {
|
||
this.postId = options.id
|
||
this.loadPostData(options.id)
|
||
}
|
||
},
|
||
methods: {
|
||
// 加载帖子详情
|
||
async loadPostData(id) {
|
||
this.isLoading = true
|
||
|
||
try {
|
||
const res = await getCommunityDetail(id)
|
||
const data = res.data || res
|
||
|
||
// 格式化帖子数据
|
||
this.formatPostData(data)
|
||
|
||
// 同步状态
|
||
this.isLiked = data.isLiked || false
|
||
this.isCollected = data.isCollected || false
|
||
this.isFollowed = data.isFollowed || false
|
||
|
||
// 加载评论
|
||
this.loadComments()
|
||
|
||
// 加载相关推荐
|
||
this.loadRelatedPosts()
|
||
|
||
} catch (error) {
|
||
console.error('加载帖子详情失败:', error)
|
||
uni.showToast({
|
||
title: '加载失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
} finally {
|
||
this.isLoading = false
|
||
}
|
||
},
|
||
|
||
// 格式化帖子数据
|
||
formatPostData(data) {
|
||
// 解析图片
|
||
let images = []
|
||
if (data.imagesJson) {
|
||
try {
|
||
images = typeof data.imagesJson === 'string'
|
||
? JSON.parse(data.imagesJson)
|
||
: data.imagesJson
|
||
} catch (e) {
|
||
images = []
|
||
}
|
||
}
|
||
if (data.coverImage && !images.includes(data.coverImage)) {
|
||
images.unshift(data.coverImage)
|
||
}
|
||
|
||
// 解析标签
|
||
let tags = []
|
||
if (data.tagsJson) {
|
||
try {
|
||
const parsedTags = typeof data.tagsJson === 'string'
|
||
? JSON.parse(data.tagsJson)
|
||
: data.tagsJson
|
||
tags = parsedTags.map(tag => {
|
||
if (typeof tag === 'string') {
|
||
return tag.startsWith('#') ? tag : '#' + tag
|
||
}
|
||
return tag.name ? '#' + tag.name : ''
|
||
}).filter(t => t)
|
||
} catch (e) {
|
||
tags = []
|
||
}
|
||
}
|
||
|
||
// 如果没有标签，从内容中提取关键字
|
||
if (tags.length === 0 && data.content) {
|
||
const keywordMatch = data.content.match(/关键字[：:]\s*([^<\n]+)/i)
|
||
if (keywordMatch && keywordMatch[1]) {
|
||
const keywords = keywordMatch[1].split(/[,，、]/).map(k => k.trim()).filter(k => k)
|
||
tags = keywords.slice(0, 4).map(k => '#' + k)
|
||
}
|
||
}
|
||
|
||
// 解析营养数据
|
||
let nutritionStats = []
|
||
if (data.nutritionDataJson) {
|
||
try {
|
||
const nutritionData = typeof data.nutritionDataJson === 'string'
|
||
? JSON.parse(data.nutritionDataJson)
|
||
: data.nutritionDataJson
|
||
nutritionStats = [
|
||
{ value: nutritionData.calories || '-', label: '热量(kcal)' },
|
||
{ value: nutritionData.protein ? nutritionData.protein + 'g' : '-', label: '蛋白质' },
|
||
{ value: nutritionData.potassium ? nutritionData.potassium + 'mg' : '-', label: '钾' },
|
||
{ value: nutritionData.phosphorus ? nutritionData.phosphorus + 'mg' : '-', label: '磷' }
|
||
]
|
||
} catch (e) {
|
||
nutritionStats = []
|
||
}
|
||
}
|
||
|
||
// 提取纯文本内容
|
||
let description = ''
|
||
if (data.content) {
|
||
description = this.stripHtml(data.content)
|
||
// 移除关键字和简介标记
|
||
description = description
|
||
.replace(/关键字[：:][^简介]*/i, '')
|
||
.replace(/简介[：:]/i, '')
|
||
.trim()
|
||
}
|
||
|
||
this.postData = {
|
||
id: data.id || data.postId,
|
||
images: images.length > 0 ? images : [],
|
||
mealType: data.mealType || '分享',
|
||
title: data.title || '',
|
||
score: data.score || 0,
|
||
description: description,
|
||
tags: tags,
|
||
author: {
|
||
id: data.userId,
|
||
avatar: data.userAvatar || '👤',
|
||
name: data.userName || '匿名用户',
|
||
time: this.formatTime(data.createdAt)
|
||
},
|
||
nutritionStats: nutritionStats,
|
||
aiComment: data.aiComment || '',
|
||
comments: [],
|
||
likeCount: data.likeCount || 0,
|
||
favoriteCount: data.collectCount || 0,
|
||
commentCount: data.commentCount || 0,
|
||
checkInRecordId: data.checkInRecordId,
|
||
videoUrl: data.videoUrl || null,
|
||
videoStatus: data.videoStatus,
|
||
hasVideo: data.hasVideo || false
|
||
}
|
||
},
|
||
|
||
// 移除HTML标签
|
||
stripHtml(html) {
|
||
if (!html) return ''
|
||
return html
|
||
.replace(/<br\s*\/?>/gi, '\n')
|
||
.replace(/<hr\s*\/?>/gi, '\n')
|
||
.replace(/<[^>]+>/g, '')
|
||
.replace(/ /g, ' ')
|
||
.replace(/</g, '<')
|
||
.replace(/>/g, '>')
|
||
.replace(/&/g, '&')
|
||
.replace(/"/g, '"')
|
||
.replace(/'/g, "'")
|
||
.replace(/\s+/g, ' ')
|
||
.trim()
|
||
},
|
||
|
||
// 格式化时间
|
||
formatTime(timeStr) {
|
||
if (!timeStr) return ''
|
||
|
||
const date = new Date(timeStr.replace(/-/g, '/'))
|
||
const now = new Date()
|
||
const diff = now - date
|
||
|
||
const minute = 60 * 1000
|
||
const hour = 60 * minute
|
||
const day = 24 * hour
|
||
|
||
if (diff < minute) {
|
||
return '刚刚'
|
||
} else if (diff < hour) {
|
||
return Math.floor(diff / minute) + '分钟前'
|
||
} else if (diff < day) {
|
||
return Math.floor(diff / hour) + '小时前'
|
||
} else if (diff < 7 * day) {
|
||
return Math.floor(diff / day) + '天前'
|
||
} else {
|
||
const month = date.getMonth() + 1
|
||
const dayOfMonth = date.getDate()
|
||
return `${month}月${dayOfMonth}日`
|
||
}
|
||
},
|
||
|
||
// 加载评论列表
|
||
async loadComments() {
|
||
if (this.isLoadingComments || !this.hasMoreComments) return
|
||
|
||
this.isLoadingComments = true
|
||
|
||
try {
|
||
const res = await getCommentList(this.postId, {
|
||
page: this.commentPage,
|
||
limit: this.commentLimit
|
||
})
|
||
|
||
const list = res.data?.list || res.data || []
|
||
const formattedComments = list.map(item => ({
|
||
id: item.id,
|
||
avatar: item.userAvatar || '👤',
|
||
name: item.userName || '匿名用户',
|
||
time: this.formatTime(item.createdAt),
|
||
text: item.content,
|
||
likeCount: item.likeCount || 0,
|
||
isLiked: item.isLiked || false,
|
||
userId: item.userId
|
||
}))
|
||
|
||
if (this.commentPage === 1) {
|
||
this.postData.comments = formattedComments
|
||
} else {
|
||
this.postData.comments = [...this.postData.comments, ...formattedComments]
|
||
}
|
||
|
||
this.hasMoreComments = list.length >= this.commentLimit
|
||
|
||
} catch (error) {
|
||
console.error('加载评论失败:', error)
|
||
} finally {
|
||
this.isLoadingComments = false
|
||
}
|
||
},
|
||
|
||
// 加载相关推荐
|
||
async loadRelatedPosts() {
|
||
try {
|
||
const res = await getCommunityList({
|
||
tab: 'recommend',
|
||
page: 1,
|
||
limit: 4
|
||
})
|
||
|
||
const list = res.data?.list || res.data || []
|
||
this.relatedPosts = list
|
||
.filter(item => item.id !== this.postData.id)
|
||
.slice(0, 2)
|
||
.map(item => {
|
||
let coverImage = item.coverImage || ''
|
||
if (!coverImage && item.imagesJson) {
|
||
try {
|
||
const images = typeof item.imagesJson === 'string'
|
||
? JSON.parse(item.imagesJson)
|
||
: item.imagesJson
|
||
coverImage = images[0] || ''
|
||
} catch (e) {}
|
||
}
|
||
return {
|
||
id: item.id || item.postId,
|
||
image: coverImage,
|
||
title: item.title
|
||
}
|
||
})
|
||
} catch (error) {
|
||
console.error('加载相关推荐失败:', error)
|
||
}
|
||
},
|
||
|
||
onImageChange(e) {
|
||
this.currentImageIndex = e.detail.current
|
||
},
|
||
|
||
// 关注/取消关注
|
||
async toggleFollow() {
|
||
if (!checkLogin()) {
|
||
uni.showToast({ title: '请先登录', icon: 'none' })
|
||
setTimeout(() => toLogin(), 1000)
|
||
return
|
||
}
|
||
|
||
const newFollowState = !this.isFollowed
|
||
this.isFollowed = newFollowState
|
||
|
||
try {
|
||
await apiToggleFollow(this.postData.author.id, newFollowState)
|
||
uni.showToast({
|
||
title: newFollowState ? '已关注' : '取消关注',
|
||
icon: 'none'
|
||
})
|
||
} catch (error) {
|
||
this.isFollowed = !newFollowState
|
||
uni.showToast({
|
||
title: '操作失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
|
||
// 一键借鉴打卡
|
||
handleCopyCheckin() {
|
||
if (!checkLogin()) {
|
||
uni.showToast({ title: '请先登录', icon: 'none' })
|
||
setTimeout(() => toLogin(), 1000)
|
||
return
|
||
}
|
||
|
||
const recordId = this.postData.checkInRecordId || this.postData.id
|
||
uni.navigateTo({
|
||
url: `/pages/tool/checkin-publish?sourcePostId=${this.postData.id}&sourceType=learn`
|
||
})
|
||
},
|
||
|
||
// 评论点赞
|
||
async toggleCommentLike(comment, index) {
|
||
if (!checkLogin()) {
|
||
uni.showToast({ title: '请先登录', icon: 'none' })
|
||
setTimeout(() => toLogin(), 1000)
|
||
return
|
||
}
|
||
|
||
const newLikeState = !comment.isLiked
|
||
const newLikeCount = newLikeState ? comment.likeCount + 1 : comment.likeCount - 1
|
||
|
||
// 乐观更新UI
|
||
this.$set(this.postData.comments, index, {
|
||
...comment,
|
||
isLiked: newLikeState,
|
||
likeCount: newLikeCount
|
||
})
|
||
|
||
// 调用评论点赞API（复用帖子点赞接口，传入评论ID）
|
||
try {
|
||
await apiToggleLike(comment.id, newLikeState)
|
||
} catch (error) {
|
||
// 回滚
|
||
this.$set(this.postData.comments, index, {
|
||
...comment,
|
||
isLiked: !newLikeState,
|
||
likeCount: comment.likeCount
|
||
})
|
||
uni.showToast({
|
||
title: '操作失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
|
||
// 帖子点赞
|
||
async toggleLike() {
|
||
if (!checkLogin()) {
|
||
uni.showToast({ title: '请先登录', icon: 'none' })
|
||
setTimeout(() => toLogin(), 1000)
|
||
return
|
||
}
|
||
|
||
const newLikeState = !this.isLiked
|
||
const newLikeCount = newLikeState
|
||
? this.postData.likeCount + 1
|
||
: this.postData.likeCount - 1
|
||
|
||
// 乐观更新
|
||
this.isLiked = newLikeState
|
||
this.postData.likeCount = newLikeCount
|
||
|
||
try {
|
||
await apiToggleLike(this.postId, newLikeState)
|
||
} catch (error) {
|
||
// 回滚
|
||
this.isLiked = !newLikeState
|
||
this.postData.likeCount = newLikeState
|
||
? newLikeCount - 1
|
||
: newLikeCount + 1
|
||
uni.showToast({
|
||
title: '操作失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
|
||
// 收藏
|
||
async toggleFavorite() {
|
||
if (!checkLogin()) {
|
||
uni.showToast({ title: '请先登录', icon: 'none' })
|
||
setTimeout(() => toLogin(), 1000)
|
||
return
|
||
}
|
||
|
||
const newCollectState = !this.isCollected
|
||
const newCollectCount = newCollectState
|
||
? this.postData.favoriteCount + 1
|
||
: this.postData.favoriteCount - 1
|
||
|
||
// 乐观更新
|
||
this.isCollected = newCollectState
|
||
this.postData.favoriteCount = newCollectCount
|
||
|
||
try {
|
||
await toggleCollect(this.postId, newCollectState)
|
||
uni.showToast({
|
||
title: newCollectState ? '已收藏' : '取消收藏',
|
||
icon: 'none'
|
||
})
|
||
} catch (error) {
|
||
// 回滚
|
||
this.isCollected = !newCollectState
|
||
this.postData.favoriteCount = newCollectState
|
||
? newCollectCount - 1
|
||
: newCollectCount + 1
|
||
uni.showToast({
|
||
title: '操作失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
|
||
handleShare() {
|
||
uni.showShareMenu({
|
||
withShareTicket: true
|
||
})
|
||
},
|
||
|
||
// 点击评论输入框
|
||
focusInput() {
|
||
if (!checkLogin()) {
|
||
uni.showToast({ title: '请先登录', icon: 'none' })
|
||
setTimeout(() => toLogin(), 1000)
|
||
return
|
||
}
|
||
|
||
// 显示评论输入弹窗
|
||
uni.showModal({
|
||
title: '发表评论',
|
||
editable: true,
|
||
placeholderText: '说点什么...',
|
||
success: async (res) => {
|
||
if (res.confirm && res.content) {
|
||
await this.submitComment(res.content)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// 提交评论
|
||
async submitComment(content) {
|
||
if (!content.trim()) {
|
||
uni.showToast({ title: '请输入评论内容', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
uni.showLoading({ title: '发送中...' })
|
||
|
||
try {
|
||
await addComment({
|
||
postId: this.postId,
|
||
content: content.trim()
|
||
})
|
||
|
||
uni.hideLoading()
|
||
uni.showToast({ title: '评论成功', icon: 'success' })
|
||
|
||
// 刷新评论列表
|
||
this.commentPage = 1
|
||
this.hasMoreComments = true
|
||
this.loadComments()
|
||
|
||
// 更新评论数
|
||
this.postData.commentCount++
|
||
|
||
} catch (error) {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: error.message || '评论失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
|
||
previewImage(index) {
|
||
if (this.postData.images && this.postData.images.length > 0) {
|
||
uni.previewImage({
|
||
current: index,
|
||
urls: this.postData.images
|
||
})
|
||
}
|
||
},
|
||
|
||
getMealIcon(type) {
|
||
const map = {
|
||
'早餐': '🌅',
|
||
'午餐': '☀️',
|
||
'晚餐': '🌙',
|
||
'加餐': '🍪',
|
||
'breakfast': '🌅',
|
||
'lunch': '☀️',
|
||
'dinner': '🌙',
|
||
'snack': '🍪'
|
||
}
|
||
return map[type] || '🍽️'
|
||
},
|
||
|
||
goToRelatedPost(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/tool/post-detail?id=${item.id}`
|
||
})
|
||
},
|
||
|
||
// 格式化数量显示
|
||
formatCount(count) {
|
||
if (!count) return '0'
|
||
if (count >= 10000) {
|
||
return (count / 10000).toFixed(1) + 'w'
|
||
} else if (count >= 1000) {
|
||
return (count / 1000).toFixed(1) + 'k'
|
||
}
|
||
return String(count)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.post-detail-page {
|
||
min-height: 100vh;
|
||
background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 内容滚动区域 */
|
||
.content-scroll {
|
||
flex: 1;
|
||
margin-bottom: 120rpx;
|
||
}
|
||
|
||
/* 视频播放器区域 */
|
||
.video-player-section {
|
||
width: 100%;
|
||
height: 750rpx;
|
||
position: relative;
|
||
background: #000000;
|
||
|
||
.video-player {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.meal-tag {
|
||
position: absolute;
|
||
left: 32rpx;
|
||
top: 32rpx;
|
||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||
border: 1rpx solid rgba(255, 255, 255, 0.8);
|
||
border-radius: 50rpx;
|
||
padding: 8rpx 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
|
||
z-index: 10;
|
||
|
||
.meal-icon {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.meal-text {
|
||
font-size: 28rpx;
|
||
color: #3e5481;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 图片轮播区域 */
|
||
.image-carousel {
|
||
width: 100%;
|
||
height: 750rpx;
|
||
position: relative;
|
||
background: #f4f5f7;
|
||
|
||
.swiper {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.carousel-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.meal-tag {
|
||
position: absolute;
|
||
left: 32rpx;
|
||
top: 32rpx;
|
||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||
border: 1rpx solid rgba(255, 255, 255, 0.8);
|
||
border-radius: 50rpx;
|
||
padding: 8rpx 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.meal-icon {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.meal-text {
|
||
font-size: 28rpx;
|
||
color: #3e5481;
|
||
}
|
||
}
|
||
|
||
.image-counter {
|
||
position: absolute;
|
||
right: 32rpx;
|
||
bottom: 32rpx;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
border-radius: 50rpx;
|
||
padding: 8rpx 16rpx;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
|
||
/* 帖子内容区域 */
|
||
.post-content-section {
|
||
padding: 32rpx;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.title-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 24rpx;
|
||
margin-bottom: 24rpx;
|
||
|
||
.post-title {
|
||
flex: 1;
|
||
font-size: 36rpx;
|
||
color: #2e3e5c;
|
||
line-height: 1.4;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.score-badge {
|
||
background: linear-gradient(135deg, #ff8c5a 0%, #ff6b35 50%, #e85a2a 100%);
|
||
border-radius: 50rpx;
|
||
padding: 8rpx 20rpx;
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.post-description {
|
||
font-size: 28rpx;
|
||
color: #3e5481;
|
||
line-height: 1.6;
|
||
margin-bottom: 32rpx;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.tag-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.tag-item {
|
||
background: linear-gradient(135deg, #fff5f0 0%, #ffe8dc 100%);
|
||
border: 1rpx solid rgba(255, 136, 68, 0.3);
|
||
border-radius: 50rpx;
|
||
padding: 8rpx 24rpx;
|
||
font-size: 24rpx;
|
||
color: #ff7722;
|
||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.author-section {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-top: 32rpx;
|
||
border-top: 1rpx solid #d0dbea;
|
||
}
|
||
|
||
.author-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.author-avatar {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: linear-gradient(135deg, #fff5f0 0%, #ffe8dc 100%);
|
||
border: 2rpx solid #ff7722;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.avatar-icon {
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
|
||
.author-details {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
|
||
.author-name {
|
||
font-size: 28rpx;
|
||
color: #2e3e5c;
|
||
}
|
||
|
||
.post-time {
|
||
font-size: 24rpx;
|
||
color: #9fa5c0;
|
||
}
|
||
}
|
||
|
||
.follow-btn {
|
||
background: linear-gradient(135deg, #ff8c5a 0%, #ff6b35 100%);
|
||
border-radius: 50rpx;
|
||
padding: 16rpx 32rpx;
|
||
box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.3);
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
/* 营养统计卡片 */
|
||
.nutrition-stats-card {
|
||
margin: 10rpx 32rpx;
|
||
padding: 32rpx;
|
||
background: linear-gradient(135deg, #fff5f0 0%, #ffe8dc 50%, #ffffff 100%);
|
||
border: 2rpx solid rgba(255, 136, 68, 0.3);
|
||
border-radius: 32rpx;
|
||
box-shadow: 0 16rpx 60rpx rgba(255, 136, 68, 0.15);
|
||
}
|
||
|
||
.stats-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.stats-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
|
||
.title-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
background: linear-gradient(135deg, #ff9966 0%, #ff8844 100%);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.title-text {
|
||
font-size: 28rpx;
|
||
color: #2e3e5c;
|
||
}
|
||
}
|
||
|
||
.stats-unit {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
border: 1rpx solid rgba(255, 136, 68, 0.3);
|
||
border-radius: 50rpx;
|
||
padding: 8rpx 20rpx;
|
||
font-size: 24rpx;
|
||
color: #ff7722;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.stat-item {
|
||
flex: 1;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
border: 1rpx solid rgba(255, 136, 68, 0.2);
|
||
border-radius: 24rpx;
|
||
padding: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.stat-value {
|
||
font-size: 32rpx;
|
||
color: #2e3e5c;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 24rpx;
|
||
color: #9fa5c0;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
/* AI营养师点评 */
|
||
.ai-comment-card {
|
||
margin: 32rpx;
|
||
padding: 32rpx;
|
||
background: #ffffff;
|
||
border: 1rpx solid #d0dbea;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
.ai-header {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.ai-avatar {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
background: #ff6b35;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.ai-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.ai-name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
.ai-name {
|
||
font-size: 28rpx;
|
||
color: #2e3e5c;
|
||
}
|
||
|
||
.ai-verified {
|
||
font-size: 24rpx;
|
||
color: #9fa5c0;
|
||
}
|
||
}
|
||
|
||
.ai-comment-text {
|
||
font-size: 28rpx;
|
||
color: #3e5481;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 一键借鉴打卡按钮 */
|
||
.copy-checkin-btn {
|
||
margin: 22rpx;
|
||
height: 94rpx;
|
||
background: linear-gradient(135deg, #ff8844 0%, #ff6611 50%, #ff7722 100%);
|
||
border-radius: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16rpx;
|
||
box-shadow: 0 16rpx 60rpx rgba(255, 107, 53, 0.3);
|
||
|
||
.btn-icon {
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.btn-text {
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
/* 分隔线 */
|
||
.divider {
|
||
height: 16rpx;
|
||
background: #f4f5f7;
|
||
}
|
||
|
||
/* 评论区域 */
|
||
.comments-section {
|
||
padding: 32rpx;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.comments-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
margin-bottom: 32rpx;
|
||
|
||
.comments-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
background: linear-gradient(135deg, #ff9966 0%, #ff8844 100%);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.comments-title {
|
||
font-size: 28rpx;
|
||
color: #2e3e5c;
|
||
}
|
||
}
|
||
|
||
.comments-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 32rpx;
|
||
}
|
||
|
||
.comment-item {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.comment-avatar {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
background: linear-gradient(135deg, #fff5f0 0%, #ffe8dc 100%);
|
||
border: 1rpx solid rgba(255, 136, 68, 0.3);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.comment-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.comment-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
.comment-name {
|
||
font-size: 28rpx;
|
||
color: #2e3e5c;
|
||
}
|
||
|
||
.comment-time {
|
||
font-size: 24rpx;
|
||
color: #9fa5c0;
|
||
}
|
||
}
|
||
|
||
.comment-text {
|
||
font-size: 28rpx;
|
||
color: #3e5481;
|
||
line-height: 1.6;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.comment-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.like-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.like-icon {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.like-count {
|
||
font-size: 24rpx;
|
||
color: #9fa5c0;
|
||
}
|
||
}
|
||
|
||
/* 相关推荐 */
|
||
.related-section {
|
||
padding: 32rpx;
|
||
background: linear-gradient(180deg, #fafafa 0%, #f4f5f7 100%);
|
||
}
|
||
|
||
.related-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
margin-bottom: 32rpx;
|
||
|
||
.related-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
background: linear-gradient(135deg, #ff8c5a 0%, #ff6b35 100%);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.related-title {
|
||
font-size: 28rpx;
|
||
color: #2e3e5c;
|
||
}
|
||
}
|
||
|
||
.related-list {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.related-item {
|
||
flex: 1;
|
||
height: 440rpx;
|
||
background: #ffffff;
|
||
border: 1rpx solid #d0dbea;
|
||
border-radius: 32rpx;
|
||
overflow: hidden;
|
||
|
||
.related-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
/* 底部安全距离 */
|
||
.safe-bottom {
|
||
height: 40rpx;
|
||
}
|
||
|
||
/* 底部操作栏 */
|
||
.bottom-bar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 120rpx;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-top: 1rpx solid rgba(0, 0, 0, 0.1);
|
||
padding: 0 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 24rpx;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.input-box {
|
||
flex: 1;
|
||
height: 72rpx;
|
||
background: #f4f5f7;
|
||
border-radius: 50rpx;
|
||
padding: 0 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.input-placeholder {
|
||
font-size: 28rpx;
|
||
color: #9fa5c0;
|
||
}
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.action-btn-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
|
||
.action-icon {
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.action-count {
|
||
font-size: 24rpx;
|
||
color: #9fa5c0;
|
||
}
|
||
}
|
||
</style>
|
||
|