856 lines
18 KiB
Vue
856 lines
18 KiB
Vue
|
<template>
|
|||
|
|
<view class="community-page">
|
|||
|
|
<!-- 顶部Tab导航 -->
|
|||
|
|
<view class="tab-nav">
|
|||
|
|
<view
|
|||
|
|
class="tab-item"
|
|||
|
|
:class="{ active: currentTab === 'recommend' }"
|
|||
|
|
@click="switchTab('recommend')"
|
|||
|
|
>
|
|||
|
|
<!-- <text class="tab-icon">📊</text> -->
|
|||
|
|
<text class="tab-text">推荐</text>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="tab-item"
|
|||
|
|
:class="{ active: currentTab === 'latest' }"
|
|||
|
|
@click="switchTab('latest')"
|
|||
|
|
>
|
|||
|
|
<!-- <text class="tab-icon">🕐</text> -->
|
|||
|
|
<text class="tab-text">最新</text>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="tab-item"
|
|||
|
|
:class="{ active: currentTab === 'follow' }"
|
|||
|
|
@click="switchTab('follow')"
|
|||
|
|
>
|
|||
|
|
<!-- <text class="tab-icon">👥</text> -->
|
|||
|
|
<text class="tab-text">关注</text>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="tab-item"
|
|||
|
|
:class="{ active: currentTab === 'hot' }"
|
|||
|
|
@click="switchTab('hot')"
|
|||
|
|
>
|
|||
|
|
<!-- <text class="tab-icon">🔥</text> -->
|
|||
|
|
<text class="tab-text">热门</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 加载中状态 -->
|
|||
|
|
<view class="loading-container" v-if="isLoading && postList.length === 0">
|
|||
|
|
<view class="loading-spinner"></view>
|
|||
|
|
<text class="loading-text">加载中...</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 空状态 -->
|
|||
|
|
<view class="empty-container" v-else-if="isEmpty">
|
|||
|
|
<text class="empty-icon">📭</text>
|
|||
|
|
<text class="empty-text">暂无内容</text>
|
|||
|
|
<text class="empty-hint" v-if="currentTab === 'follow'">关注更多用户，查看他们的打卡动态</text>
|
|||
|
|
<text class="empty-hint" v-else>快来发布第一条打卡动态吧</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 打卡卡片网格 -->
|
|||
|
|
<view class="post-grid" v-else>
|
|||
|
|
<view
|
|||
|
|
class="post-card"
|
|||
|
|
:class="{ 'no-image': !item.image }"
|
|||
|
|
v-for="(item, index) in postList"
|
|||
|
|
:key="item.id"
|
|||
|
|
@click="goToPostDetail(item)"
|
|||
|
|
>
|
|||
|
|
<!-- 图片区域（有图片时显示） -->
|
|||
|
|
<view class="post-image" v-if="item.image">
|
|||
|
|
<image :src="item.image" mode="aspectFill" lazy-load></image>
|
|||
|
|
<!-- 类型标签 -->
|
|||
|
|
<view class="meal-tag">{{ item.mealType }}</view>
|
|||
|
|
<!-- 视频标记 -->
|
|||
|
|
<view class="video-badge" v-if="item.hasVideo || item.videoUrl">
|
|||
|
|
<text class="badge-icon">🎬</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 内容区域 -->
|
|||
|
|
<view class="post-content">
|
|||
|
|
<!-- 无图片时显示类型标签 -->
|
|||
|
|
<view class="type-tag" v-if="!item.image">{{ item.mealType }}</view>
|
|||
|
|
|
|||
|
|
<!-- 标题 -->
|
|||
|
|
<view class="post-title">{{ item.title }}</view>
|
|||
|
|
|
|||
|
|
<!-- 内容摘要（无图片时显示更多内容） -->
|
|||
|
|
<view class="post-summary" v-if="item.content && !item.image">
|
|||
|
|
{{ item.content }}
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 话题标签 -->
|
|||
|
|
<view class="tag-list" v-if="item.tags && item.tags.length > 0">
|
|||
|
|
<view
|
|||
|
|
class="tag-item"
|
|||
|
|
v-for="(tag, tagIndex) in item.tags.slice(0, 2)"
|
|||
|
|
:key="tagIndex"
|
|||
|
|
>
|
|||
|
|
{{ formatTag(tag) }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 用户信息和互动数据 -->
|
|||
|
|
<view class="post-footer">
|
|||
|
|
<view class="user-info">
|
|||
|
|
<image
|
|||
|
|
v-if="item.userIcon && item.userIcon.startsWith('http')"
|
|||
|
|
class="user-avatar"
|
|||
|
|
:src="item.userIcon"
|
|||
|
|
mode="aspectFill"
|
|||
|
|
></image>
|
|||
|
|
<text v-else class="user-icon">👤</text>
|
|||
|
|
<text class="user-name">{{ item.userName }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="interaction-info">
|
|||
|
|
<view class="like-info" @click.stop="toggleLike(item, index)">
|
|||
|
|
<text class="like-icon" :class="{ liked: item.isLiked }">{{ item.isLiked ? '❤️' : '🤍' }}</text>
|
|||
|
|
<text class="like-count">{{ formatCount(item.likeCount) }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 发布时间 -->
|
|||
|
|
<view class="post-time" v-if="item.createTimeText">
|
|||
|
|
<text>{{ item.createTimeText }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 加载更多 -->
|
|||
|
|
<view class="load-more" v-if="postList.length > 0">
|
|||
|
|
<view v-if="isLoadingMore" class="loading-more">
|
|||
|
|
<view class="loading-spinner small"></view>
|
|||
|
|
<text>加载中...</text>
|
|||
|
|
</view>
|
|||
|
|
<text v-else-if="hasMore" @click="loadMore">上拉加载更多</text>
|
|||
|
|
<text v-else class="no-more">- 没有更多了 -</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 底部安全距离 -->
|
|||
|
|
<view class="safe-bottom"></view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getCommunityList, toggleLike as apiToggleLike } from '@/api/tool.js'
|
|||
|
|
import { checkLogin, toLogin } from '@/libs/login.js'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
currentTab: 'recommend',
|
|||
|
|
postList: [],
|
|||
|
|
page: 1,
|
|||
|
|
limit: 10,
|
|||
|
|
isLoading: false,
|
|||
|
|
isLoadingMore: false,
|
|||
|
|
hasMore: true,
|
|||
|
|
isEmpty: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
// 页面加载时获取数据
|
|||
|
|
this.loadPostList()
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
// 页面显示时刷新数据（从详情页返回可能有变化）
|
|||
|
|
if (this.postList.length > 0) {
|
|||
|
|
this.refreshList()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onPullDownRefresh() {
|
|||
|
|
// 下拉刷新
|
|||
|
|
this.refreshList()
|
|||
|
|
},
|
|||
|
|
onReachBottom() {
|
|||
|
|
// 触底加载更多
|
|||
|
|
this.loadMore()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 切换Tab
|
|||
|
|
switchTab(tab) {
|
|||
|
|
if (this.currentTab === tab) return
|
|||
|
|
|
|||
|
|
// 关注Tab需要登录
|
|||
|
|
if (tab === 'follow' && !checkLogin()) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请先登录查看关注内容',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
toLogin()
|
|||
|
|
}, 1000)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.currentTab = tab
|
|||
|
|
this.page = 1
|
|||
|
|
this.hasMore = true
|
|||
|
|
this.postList = []
|
|||
|
|
this.loadPostList()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 刷新列表
|
|||
|
|
async refreshList() {
|
|||
|
|
this.page = 1
|
|||
|
|
this.hasMore = true
|
|||
|
|
await this.loadPostList(true)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 加载帖子列表
|
|||
|
|
async loadPostList(isRefresh = false) {
|
|||
|
|
if (this.isLoading) return
|
|||
|
|
|
|||
|
|
this.isLoading = true
|
|||
|
|
if (!isRefresh) {
|
|||
|
|
this.isEmpty = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const res = await getCommunityList({
|
|||
|
|
tab: this.currentTab,
|
|||
|
|
page: this.page,
|
|||
|
|
limit: this.limit
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const list = res.data?.list || res.data || []
|
|||
|
|
const formattedList = this.formatPostList(list)
|
|||
|
|
|
|||
|
|
if (isRefresh || this.page === 1) {
|
|||
|
|
this.postList = formattedList
|
|||
|
|
} else {
|
|||
|
|
this.postList = [...this.postList, ...formattedList]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 判断是否还有更多
|
|||
|
|
this.hasMore = list.length >= this.limit
|
|||
|
|
this.isEmpty = this.postList.length === 0
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载社区列表失败:', error)
|
|||
|
|
// 如果是首次加载失败，显示空状态
|
|||
|
|
if (this.page === 1) {
|
|||
|
|
this.isEmpty = true
|
|||
|
|
}
|
|||
|
|
uni.showToast({
|
|||
|
|
title: error.message || '加载失败，请重试',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
} finally {
|
|||
|
|
this.isLoading = false
|
|||
|
|
uni.stopPullDownRefresh()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 格式化帖子数据
|
|||
|
|
formatPostList(list) {
|
|||
|
|
return list.map(item => {
|
|||
|
|
// 解析图片JSON
|
|||
|
|
let images = []
|
|||
|
|
if (item.imagesJson) {
|
|||
|
|
try {
|
|||
|
|
images = typeof item.imagesJson === 'string'
|
|||
|
|
? JSON.parse(item.imagesJson)
|
|||
|
|
: item.imagesJson
|
|||
|
|
} catch (e) {
|
|||
|
|
images = []
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 解析标签JSON
|
|||
|
|
let tags = []
|
|||
|
|
if (item.tagsJson) {
|
|||
|
|
try {
|
|||
|
|
tags = typeof item.tagsJson === 'string'
|
|||
|
|
? JSON.parse(item.tagsJson)
|
|||
|
|
: item.tagsJson
|
|||
|
|
} catch (e) {
|
|||
|
|
tags = []
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果没有标签，尝试从content中提取关键字
|
|||
|
|
if (tags.length === 0 && item.content) {
|
|||
|
|
const keywordMatch = item.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, 3) // 最多取3个关键字
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 从HTML内容中提取纯文本摘要
|
|||
|
|
let contentText = ''
|
|||
|
|
if (item.content) {
|
|||
|
|
contentText = this.stripHtml(item.content)
|
|||
|
|
// 移除关键字和简介标记
|
|||
|
|
contentText = contentText
|
|||
|
|
.replace(/关键字[：:][^简介]*/i, '')
|
|||
|
|
.replace(/简介[：:]/i, '')
|
|||
|
|
.trim()
|
|||
|
|
.substring(0, 120) // 截取前120字符
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取封面图片
|
|||
|
|
const coverImage = item.coverImage || (images.length > 0 ? images[0] : '')
|
|||
|
|
|
|||
|
|
// 判断内容类型（根据checkInRecordId判断是否为打卡记录）
|
|||
|
|
const isCheckin = !!item.checkInRecordId
|
|||
|
|
const mealType = isCheckin ? '打卡' : '分享'
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
id: item.id || item.postId,
|
|||
|
|
postId: item.postId || item.id,
|
|||
|
|
image: coverImage,
|
|||
|
|
images: images,
|
|||
|
|
mealType: item.mealType || mealType,
|
|||
|
|
title: item.title || '',
|
|||
|
|
content: contentText,
|
|||
|
|
tags: tags,
|
|||
|
|
userIcon: item.userAvatar || '',
|
|||
|
|
userName: item.userName || '匿名用户',
|
|||
|
|
userId: item.userId,
|
|||
|
|
likeCount: item.likeCount || 0,
|
|||
|
|
isLiked: item.isLiked || false,
|
|||
|
|
commentCount: item.commentCount || 0,
|
|||
|
|
collectCount: item.collectCount || 0,
|
|||
|
|
shareCount: item.shareCount || 0,
|
|||
|
|
viewCount: item.viewCount || 0,
|
|||
|
|
createdAt: item.createdAt,
|
|||
|
|
createTimeText: this.formatTime(item.createdAt),
|
|||
|
|
isCheckin: isCheckin,
|
|||
|
|
hasVideo: item.hasVideo || false,
|
|||
|
|
videoUrl: item.videoUrl || '',
|
|||
|
|
enableAIVideo: item.enableAIVideo || false
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 移除HTML标签并解析实体
|
|||
|
|
stripHtml(html) {
|
|||
|
|
if (!html) return ''
|
|||
|
|
return html
|
|||
|
|
.replace(/<br\s*\/?>/gi, ' ') // 换行转空格
|
|||
|
|
.replace(/<hr\s*\/?>/gi, ' ') // 分隔线转空格
|
|||
|
|
.replace(/<[^>]+>/g, '') // 移除HTML标签
|
|||
|
|
.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, '/')) // 兼容iOS
|
|||
|
|
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 loadMore() {
|
|||
|
|
if (!this.hasMore || this.isLoadingMore || this.isLoading) return
|
|||
|
|
|
|||
|
|
this.isLoadingMore = true
|
|||
|
|
this.page++
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const res = await getCommunityList({
|
|||
|
|
tab: this.currentTab,
|
|||
|
|
page: this.page,
|
|||
|
|
limit: this.limit
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const list = res.data?.list || res.data || []
|
|||
|
|
const formattedList = this.formatPostList(list)
|
|||
|
|
|
|||
|
|
this.postList = [...this.postList, ...formattedList]
|
|||
|
|
this.hasMore = list.length >= this.limit
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载更多失败:', error)
|
|||
|
|
this.page-- // 失败时回退页码
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '加载失败，请重试',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
} finally {
|
|||
|
|
this.isLoadingMore = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 跳转到帖子详情
|
|||
|
|
goToPostDetail(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)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 格式化标签显示
|
|||
|
|
formatTag(tag) {
|
|||
|
|
if (!tag) return ''
|
|||
|
|
// 如果标签已经以#开头，直接返回
|
|||
|
|
if (typeof tag === 'string' && tag.startsWith('#')) {
|
|||
|
|
return tag
|
|||
|
|
}
|
|||
|
|
// 如果是对象，取name属性
|
|||
|
|
if (typeof tag === 'object' && tag.name) {
|
|||
|
|
return '#' + tag.name
|
|||
|
|
}
|
|||
|
|
return '#' + String(tag)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 点赞/取消点赞
|
|||
|
|
async toggleLike(item, index) {
|
|||
|
|
// 检查登录状态
|
|||
|
|
if (!checkLogin()) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请先登录后点赞',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
toLogin()
|
|||
|
|
}, 1000)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const newLikeState = !item.isLiked
|
|||
|
|
const newLikeCount = newLikeState ? item.likeCount + 1 : item.likeCount - 1
|
|||
|
|
|
|||
|
|
// 乐观更新UI
|
|||
|
|
this.$set(this.postList, index, {
|
|||
|
|
...item,
|
|||
|
|
isLiked: newLikeState,
|
|||
|
|
likeCount: newLikeCount
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await apiToggleLike(item.id, newLikeState)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('点赞失败:', error)
|
|||
|
|
// 失败时回滚
|
|||
|
|
this.$set(this.postList, index, {
|
|||
|
|
...item,
|
|||
|
|
isLiked: !newLikeState,
|
|||
|
|
likeCount: item.likeCount
|
|||
|
|
})
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '操作失败，请重试',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.community-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-color: #f4f5f7;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Tab导航 */
|
|||
|
|
.tab-nav {
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-bottom: 1rpx solid #d0dbea;
|
|||
|
|
display: flex;
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
height: 88rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
position: sticky;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: 100;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: 72rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.tab-icon {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #9fa5c0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
.tab-text {
|
|||
|
|
color: #ff6b35;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 4rpx;
|
|||
|
|
background: #ff6b35;
|
|||
|
|
border-radius: 2rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 打卡卡片网格 */
|
|||
|
|
.post-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 32rpx;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.post-card {
|
|||
|
|
background: #ffffff;
|
|||
|
|
border: 1rpx solid #d0dbea;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1), 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
|
|||
|
|
&.no-image {
|
|||
|
|
.post-content {
|
|||
|
|
padding-top: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.post-title {
|
|||
|
|
-webkit-line-clamp: 3;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.post-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 436rpx;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.meal-tag {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 16rpx;
|
|||
|
|
top: 16rpx;
|
|||
|
|
background: #ff6b35;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
padding: 4rpx 16rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-badge {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 16rpx;
|
|||
|
|
top: 16rpx;
|
|||
|
|
background: rgba(0, 0, 0, 0.7);
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
padding: 8rpx 12rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
backdrop-filter: blur(8rpx);
|
|||
|
|
|
|||
|
|
.badge-icon {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.score-tag {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 16rpx;
|
|||
|
|
top: 16rpx;
|
|||
|
|
background: #ff9800;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
padding: 4rpx 16rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4rpx;
|
|||
|
|
|
|||
|
|
.score-icon {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.score-text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.post-content {
|
|||
|
|
padding: 24rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.type-tag {
|
|||
|
|
display: inline-block;
|
|||
|
|
background: #ff6b35;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
padding: 4rpx 16rpx;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
align-self: flex-start;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.post-title {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #2e3e5c;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
font-weight: 400;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.post-summary {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #9fa5c0;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 3;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tag-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tag-item {
|
|||
|
|
background: #fff5f0;
|
|||
|
|
border: 1rpx solid rgba(255, 107, 53, 0.3);
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
padding: 4rpx 16rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #ff6b35;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.post-footer {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.user-avatar {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-icon {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-name {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #9fa5c0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.interaction-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.like-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
|
|||
|
|
.like-icon {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
|
|||
|
|
&.liked {
|
|||
|
|
animation: likeAnimation 0.3s;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.like-count {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #9fa5c0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.post-time {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #c0c5d0;
|
|||
|
|
margin-top: 4rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes likeAnimation {
|
|||
|
|
0% {
|
|||
|
|
transform: scale(1);
|
|||
|
|
}
|
|||
|
|
50% {
|
|||
|
|
transform: scale(1.3);
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
transform: scale(1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 加载中状态 */
|
|||
|
|
.loading-container {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 100rpx 0;
|
|||
|
|
|
|||
|
|
.loading-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #9fa5c0;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-spinner {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
border: 4rpx solid #f0f0f0;
|
|||
|
|
border-top-color: #ff6b35;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
animation: spin 0.8s linear infinite;
|
|||
|
|
|
|||
|
|
&.small {
|
|||
|
|
width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
border-width: 3rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes spin {
|
|||
|
|
to {
|
|||
|
|
transform: rotate(360deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 空状态 */
|
|||
|
|
.empty-container {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 120rpx 60rpx;
|
|||
|
|
|
|||
|
|
.empty-icon {
|
|||
|
|
font-size: 100rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-text {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #2e3e5c;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-hint {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #9fa5c0;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 加载更多 */
|
|||
|
|
.load-more {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
color: #9fa5c0;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
|
|||
|
|
.loading-more {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.no-more {
|
|||
|
|
color: #d0dbea;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部安全距离 */
|
|||
|
|
.safe-bottom {
|
|||
|
|
height: 40rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|