chenwu/PetCommunity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
chenwu
2026-06-05 17:46:51 +08:00
commit c04c890186
96 changed files with 6477 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
miniprogram/pages/post-detail/post-detail.json Normal file
View File

@@ -0,0 +1 @@
{ "navigationStyle": "custom", "usingComponents": {} }

117
miniprogram/pages/post-detail/post-detail.ts Normal file
View File

@@ -0,0 +1,117 @@
import { api } from '../../utils/api'
import { formatTime, getAvatarGradient } from '../../utils/format'
const app = getApp<{ userInfo: any }>()
Page({
data: {
statusBarHeight: 0,
postId: '',
post: null as any,
comments: [] as any[],
avatarGradient: '',
timeText: '',
likeCount: 0,
commentText: '',
focusInput: false,
},
onLoad(query: { id?: string; focus?: string }) {
const info = wx.getSystemInfoSync()
this.setData({ statusBarHeight: info.statusBarHeight, postId: query.id || '' })
this.loadPost(query.id || '')
if (query.focus === 'comment') {
this.setData({ focusInput: true })
}
},
async loadPost(id: string) {
if (!id) return
try {
const res = await wx.cloud.callFunction({
name: 'getPost',
data: { postId: id },
}) as any
const post = res.result?.data
if (!post) return
this.setData({
post,
avatarGradient: getAvatarGradient(post.authorId),
timeText: formatTime(post.createdAt),
likeCount: post.likeCount,
})
this.loadComments(id)
} catch {}
},
async loadComments(postId: string) {
try {
const res = await api.getComments(postId)
const comments = res.list.map((c: any) => ({
...c,
gradient: getAvatarGradient(c.authorId),
timeText: formatTime(c.createdAt),
}))
this.setData({ comments })
} catch {}
},
async onLike() {
const post = this.data.post
if (!post) return
const was = post.isLiked
this.setData({ 'post.isLiked': !was, likeCount: was ? this.data.likeCount - 1 : this.data.likeCount + 1 })
try {
const res = await api.likePost(post._id)
this.setData({ likeCount: res.count, 'post.isLiked': res.liked })
} catch {
this.setData({ 'post.isLiked': was, likeCount: post.likeCount })
}
},
onCommentInput(e: WechatMiniprogram.CustomEvent) {
this.setData({ commentText: e.detail.value })
},
async onSend() {
const text = this.data.commentText.trim()
if (!text || !this.data.postId) return
this.setData({ commentText: '' })
try {
await api.addComment(this.data.postId, text)
const comments = await api.getComments(this.data.postId)
this.setData({
comments: comments.list.map((c: any) => ({
...c,
gradient: getAvatarGradient(c.authorId),
timeText: formatTime(c.createdAt),
})),
})
} catch {
wx.showToast({ title: '发送失败', icon: 'none' })
}
},
focusComment() {
this.setData({ focusInput: true })
},
onAuthorTap() {
const post = this.data.post
if (post?.authorId) wx.navigateTo({ url: `/pages/pet-detail/pet-detail?userId=${post.authorId}` })
},
onImgTap(e: WechatMiniprogram.CustomEvent) {
const post = this.data.post
wx.previewImage({ current: post.images[e.currentTarget.dataset.idx], urls: post.images })
},
onMore() {
wx.showActionSheet({
itemList: ['举报'],
success: () => wx.showToast({ title: '已提交举报', icon: 'success' }),
})
},
onBack() { wx.navigateBack() },
})

104
miniprogram/pages/post-detail/post-detail.wxml Normal file
View File

@@ -0,0 +1,104 @@
<view class="page">
<view class="safe-top" style="height: {{statusBarHeight}}px"></view>
<view class="nav">
<view class="nav-back" bindtap="onBack">‹</view>
<view class="nav-title">动态详情</view>
<view class="nav-more" bindtap="onMore">⋯</view>
</view>
<scroll-view scroll-y="true" class="scroll" enhanced="true" show-scrollbar="false">
<!-- 帖子主体 -->
<view wx:if="{{post}}" class="post-wrap">
<!-- 作者 -->
<view class="post-header" bindtap="onAuthorTap">
<view class="avatar" style="background: {{avatarGradient}}">
<text>{{post.author.nickName[0]}}</text>
</view>
<view class="meta">
<text class="uname">{{post.author.nickName}}</text>
<text class="utime">{{timeText}}</text>
</view>
</view>
<!-- 文字 -->
<text class="content">{{post.content}}</text>
<!-- 图片 -->
<view wx:if="{{post.images.length > 0}}" class="images">
<image
wx:for="{{post.images}}"
wx:key="index"
class="img {{post.images.length === 1 ? 'img-full' : 'img-grid'}}"
src="{{item}}"
mode="aspectFill"
lazy-load="true"
bindtap="onImgTap"
data-idx="{{index}}"
/>
</view>
<!-- 标签行 -->
<view class="tags-row">
<text wx:for="{{post.hashtags}}" wx:key="index" class="hashtag">{{item}}</text>
<view wx:if="{{post.location}}" class="loc-tag">📍{{post.location.name}}</view>
<view wx:if="{{post.mood}}" class="mood-tag">{{post.mood}}</view>
</view>
<!-- 操作 -->
<view class="actions">
<view class="action-btn {{post.isLiked ? 'liked' : ''}}" bindtap="onLike">
<text>{{post.isLiked ? '❤️' : '🤍'}}</text>
<text class="act-count">{{likeCount}}</text>
</view>
<view class="action-btn" bindtap="focusComment">
<text>💬</text>
<text class="act-count">{{comments.length}}</text>
</view>
</view>
</view>
<!-- 评论区 -->
<view class="divider"></view>
<view class="comments-section">
<text class="comments-title">评论 {{comments.length}}</text>
<view wx:if="{{comments.length === 0}}" class="no-comment">
<text>还没有评论，来说第一句话吧 🐾</text>
</view>
<view
wx:for="{{comments}}"
wx:key="_id"
class="comment-item"
>
<view class="c-avatar" style="background: {{item.gradient}}">
<text>{{item.author.nickName[0]}}</text>
</view>
<view class="c-body">
<text class="c-name">{{item.author.nickName}}</text>
<text class="c-text">{{item.content}}</text>
<text class="c-time">{{item.timeText}}</text>
</view>
</view>
</view>
<view style="height: 160rpx;"></view>
</scroll-view>
<!-- 评论输入框 -->
<view class="input-bar">
<input
class="comment-input"
id="commentInput"
value="{{commentText}}"
bindinput="onCommentInput"
placeholder="写下你的想法..."
confirm-type="send"
bindconfirm="onSend"
adjust-position="true"
cursor-spacing="20"
/>
<view class="send-btn {{commentText ? '' : 'send-off'}}" bindtap="onSend">发送</view>
</view>
</view>

46
miniprogram/pages/post-detail/post-detail.wxss Normal file
View File

@@ -0,0 +1,46 @@
.page { display: flex; flex-direction: column; min-height: 100vh; background: linear-gradient(180deg, #fff8f2 0%, #f5f0ff 100%); }
.nav { display: flex; align-items: center; padding: 14rpx 28rpx; gap: 16rpx; }
.nav-back { font-size: 60rpx; color: #272235; font-weight: 300; line-height: 1; padding-right: 10rpx; }
.nav-title { flex: 1; font-size: 32rpx; font-weight: 900; color: #272235; text-align: center; }
.nav-more { font-size: 36rpx; color: #9b8fa8; }
.scroll { flex: 1; }
.post-wrap { margin: 0 28rpx; background: rgba(255,255,255,0.90); border-radius: 48rpx; border: 1rpx solid rgba(255,255,255,0.72); padding: 28rpx; box-shadow: 0 18rpx 40rpx rgba(95,49,104,0.10); }
.post-header { display: flex; align-items: center; gap: 20rpx; margin-bottom: 20rpx; }
.avatar { width: 80rpx; height: 80rpx; border-radius: 28rpx; display: flex; align-items: center; justify-content: center; font-size: 34rpx; font-weight: 800; color: rgba(39,34,53,0.72); flex-shrink: 0; }
.meta { flex: 1; }
.uname { display: block; font-size: 28rpx; font-weight: 800; color: #272235; }
.utime { display: block; font-size: 22rpx; color: #9b8fa8; margin-top: 4rpx; }
.content { display: block; font-size: 30rpx; color: #272235; line-height: 1.65; margin-bottom: 20rpx; }
.images { display: flex; flex-wrap: wrap; gap: 8rpx; margin-bottom: 20rpx; border-radius: 24rpx; overflow: hidden; }
.img-full { width: 100%; height: 360rpx; border-radius: 24rpx; background: #f0eef5; }
.img-grid { width: calc(50% - 4rpx); height: 240rpx; background: #f0eef5; }
.tags-row { display: flex; gap: 10rpx; flex-wrap: wrap; margin-bottom: 20rpx; }
.hashtag { font-size: 22rpx; font-weight: 800; color: #8b3cff; background: #f0e8ff; border-radius: 999rpx; padding: 6rpx 14rpx; }
.loc-tag { font-size: 22rpx; color: #9b8fa8; background: rgba(255,255,255,0.80); border: 1rpx solid rgba(43,37,61,0.10); border-radius: 999rpx; padding: 6rpx 14rpx; }
.mood-tag { font-size: 22rpx; color: #6f4b00; background: #fff0a8; border-radius: 999rpx; padding: 6rpx 14rpx; }
.actions { display: flex; gap: 16rpx; padding-top: 20rpx; border-top: 1rpx solid rgba(43,37,61,0.07); }
.action-btn { display: flex; align-items: center; gap: 8rpx; font-size: 24rpx; font-weight: 800; color: #6a6178; background: #f7f3ff; border-radius: 999rpx; padding: 10rpx 18rpx; }
.action-btn.liked { color: #ff4f91; background: #ffe5f0; }
.act-count { font-size: 24rpx; }
.divider { height: 16rpx; background: rgba(43,37,61,0.04); margin: 16rpx 0; }
.comments-section { padding: 0 28rpx; }
.comments-title { display: block; font-size: 26rpx; font-weight: 900; color: #9b8fa8; margin-bottom: 20rpx; }
.no-comment { text-align: center; font-size: 26rpx; color: #9b8fa8; padding: 40rpx 0; }
.comment-item { display: flex; gap: 16rpx; margin-bottom: 24rpx; }
.c-avatar { width: 64rpx; height: 64rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 800; color: rgba(39,34,53,0.72); flex-shrink: 0; }
.c-body { flex: 1; background: rgba(255,255,255,0.80); border-radius: 24rpx; padding: 16rpx 20rpx; }
.c-name { display: block; font-size: 24rpx; font-weight: 800; color: #272235; margin-bottom: 6rpx; }
.c-text { display: block; font-size: 26rpx; color: #272235; line-height: 1.5; margin-bottom: 8rpx; }
.c-time { display: block; font-size: 20rpx; color: #9b8fa8; }
.input-bar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14rpx; padding: 16rpx 28rpx; padding-bottom: calc(16rpx + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.92); border-top: 1rpx solid rgba(43,37,61,0.08); z-index: 100; }
.comment-input { flex: 1; height: 80rpx; background: rgba(255,255,255,0.80); border: 1rpx solid rgba(43,37,61,0.12); border-radius: 999rpx; padding: 0 24rpx; font-size: 28rpx; color: #272235; }
.send-btn { background: linear-gradient(135deg, #ff4f91, #ff9f1c); color: #fff; border-radius: 999rpx; padding: 18rpx 30rpx; font-size: 28rpx; font-weight: 800; flex-shrink: 0; }
.send-off { background: #e8e4f0; color: #9b8fa8; }