no message
This commit is contained in:
hajimi
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<view class="my-posts-page">
|
||||
<scroll-view scroll-y class="my-posts-list" style="height: 100vh" @scrolltolower="loadMore">
|
||||
<view v-if="loading && list.length === 0" class="my-posts-loading">
|
||||
<u-loading mode="circle" />
|
||||
</view>
|
||||
|
||||
<view v-for="post in list" :key="post.id" class="post-card" @tap="goDetail(post.id)">
|
||||
<view class="post-card__content">
|
||||
<text>{{ post.content_short || post.content }}</text>
|
||||
</view>
|
||||
<view v-if="post.tags && post.tags.length > 0" class="post-card__tags">
|
||||
<text v-for="(t, i) in post.tags" :key="i" class="post-card__tag">#{{ t }}</text>
|
||||
</view>
|
||||
<view class="post-card__footer">
|
||||
<text class="post-card__time">{{ formatTime(post.create_time) }}</text>
|
||||
<view class="post-card__stats">
|
||||
<text>浏览 {{ post.view_count || 0 }}</text>
|
||||
<text>评论 {{ post.comment_count || 0 }}</text>
|
||||
<text>点赞 {{ post.like_count || 0 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="!loading && list.length === 0" class="my-posts-empty">
|
||||
<u-empty text="暂无帖子" mode="data" />
|
||||
</view>
|
||||
|
||||
<view v-if="loadingMore" class="my-posts-loadmore">
|
||||
<u-loading mode="circle" size="28" />
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
<view v-if="finished && list.length > 0" class="my-posts-loadmore">
|
||||
<text>没有更多了</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { getCommunityPosts } from '@/api/community'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
const { userInfo } = storeToRefs(useUserStore())
|
||||
const list = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
const loadingMore = ref(false)
|
||||
const finished = ref(false)
|
||||
const page = ref(1)
|
||||
const pageSize = 15
|
||||
|
||||
onShow(() => {
|
||||
page.value = 1
|
||||
finished.value = false
|
||||
fetchPosts(true)
|
||||
})
|
||||
|
||||
const fetchPosts = async (reset = false) => {
|
||||
if (reset) { page.value = 1; finished.value = false }
|
||||
if (finished.value) return
|
||||
page.value === 1 ? (loading.value = true) : (loadingMore.value = true)
|
||||
|
||||
try {
|
||||
const res = await getCommunityPosts({
|
||||
page_no: page.value,
|
||||
page_size: pageSize,
|
||||
user_id: userInfo.value?.id
|
||||
})
|
||||
const items = res?.lists || []
|
||||
if (reset || page.value === 1) {
|
||||
list.value = items
|
||||
} else {
|
||||
list.value.push(...items)
|
||||
}
|
||||
if (items.length < pageSize) finished.value = true
|
||||
} catch (e) {
|
||||
// ignore
|
||||
} finally {
|
||||
loading.value = false
|
||||
loadingMore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadMore = () => {
|
||||
if (finished.value || loadingMore.value) return
|
||||
page.value++
|
||||
fetchPosts()
|
||||
}
|
||||
|
||||
const goDetail = (id: number) => {
|
||||
uni.navigateTo({ url: `/packages_community/pages/post_detail?id=${id}` })
|
||||
}
|
||||
|
||||
const formatTime = (ts: any) => {
|
||||
if (!ts) return ''
|
||||
let timestamp: number
|
||||
if (typeof ts === 'string') {
|
||||
timestamp = new Date(ts.replace(/-/g, '/')).getTime() / 1000
|
||||
} else {
|
||||
timestamp = ts
|
||||
}
|
||||
if (isNaN(timestamp)) return ''
|
||||
const now = Date.now() / 1000
|
||||
const diff = now - timestamp
|
||||
if (diff < 60) return '刚刚'
|
||||
if (diff < 3600) return Math.floor(diff / 60) + '分钟前'
|
||||
if (diff < 86400) return Math.floor(diff / 3600) + '小时前'
|
||||
if (diff < 2592000) return Math.floor(diff / 86400) + '天前'
|
||||
const d = new Date(timestamp * 1000)
|
||||
return `${d.getMonth() + 1}-${d.getDate()}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-posts-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.my-posts-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
|
||||
.my-posts-empty {
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
|
||||
.my-posts-loadmore {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
padding: 24rpx 0 48rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.my-posts-list {
|
||||
padding: 16rpx 24rpx;
|
||||
}
|
||||
|
||||
.post-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 28rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&__content {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 16rpx;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
&__tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
&__tag {
|
||||
font-size: 22rpx;
|
||||
color: #2979ff;
|
||||
background: #e8f0fe;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 16rpx;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
&__time {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&__stats {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user