feat: 整体页面优化，删除无用svg
This commit is contained in:
Blizzard
+60
-13
@@ -13,7 +13,9 @@ Page({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
hasMore: true,
|
||||
userInfo: null
|
||||
userInfo: null,
|
||||
scrollTop: 0,
|
||||
isRefreshing: false
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
@@ -33,9 +35,16 @@ Page({
|
||||
}
|
||||
},
|
||||
|
||||
// Called by create post page
|
||||
// Called by create post page or Pull Down
|
||||
onRefresh() {
|
||||
this.fetchPosts(true);
|
||||
this.setData({ isRefreshing: true });
|
||||
this.fetchPosts(true).then(() => {
|
||||
this.setData({ isRefreshing: false });
|
||||
});
|
||||
},
|
||||
|
||||
onTabItemTap() {
|
||||
this.setData({ scrollTop: Math.random() * 0.01 });
|
||||
},
|
||||
|
||||
onPullDownRefresh() {
|
||||
@@ -60,7 +69,7 @@ Page({
|
||||
|
||||
try {
|
||||
// Correct API Endpoint and Params
|
||||
const res = await request.post('/post/page', { current, pageSize });
|
||||
const res = await request.post('/post/page', { current, pageSize, hasReviewed: 1 });
|
||||
|
||||
// Handle response structure: { code: 200, data: { list: [], ... } }
|
||||
// OR if request.js unwraps it: { list: [], ... }
|
||||
@@ -79,14 +88,16 @@ Page({
|
||||
content: item.content,
|
||||
images: (item.imgList || []).map(img => img.url),
|
||||
time: item.createdAtStr || '刚刚',
|
||||
likes: (item.likeList || []).map(l => l.liker ? (l.liker.nickName || l.liker.name) : '花友'),
|
||||
likes: item.hasLiked === 1 ? ['我'] : [],
|
||||
comments: (item.commentList || []).map(c => ({
|
||||
id: c.id,
|
||||
user: c.commentator ? (c.commentator.nickName || c.commentator.name) : '花友',
|
||||
content: c.content
|
||||
})),
|
||||
likedByMe: item.hasLiked === 1,
|
||||
isFavorited: item.hasStar === 1,
|
||||
likeCount: item.likeCount || 0,
|
||||
stars: (item.starList || []).map(s => s.starer ? (s.starer.nickName || s.starer.name) : '花友'),
|
||||
commentCount: item.commentCount || 0,
|
||||
isExpanded: false
|
||||
};
|
||||
@@ -125,12 +136,7 @@ Page({
|
||||
// Preview image in full screen
|
||||
previewImage(e) {
|
||||
const { url, urls } = e.currentTarget.dataset;
|
||||
const resolvedUrls = urls.map(img => {
|
||||
if (img.indexOf('http') === 0 || img.indexOf('wxfile') === 0) {
|
||||
return img;
|
||||
}
|
||||
return `/assets/${img}`;
|
||||
});
|
||||
const resolvedUrls = urls.map(img => img);
|
||||
|
||||
wx.previewImage({
|
||||
current: url,
|
||||
@@ -169,10 +175,15 @@ Page({
|
||||
try {
|
||||
await request.get('/post/like', { id: postId, type });
|
||||
|
||||
// Optimistic Update: Only toggle button state. Do NOT modify likes list text.
|
||||
// Optimistic Update
|
||||
const updatedPosts = this.data.posts.map(p => {
|
||||
if (p.id === postId) {
|
||||
return { ...p, likedByMe: !p.likedByMe };
|
||||
const liked = !p.likedByMe;
|
||||
return {
|
||||
...p,
|
||||
likedByMe: liked,
|
||||
likes: liked ? ['我'] : []
|
||||
};
|
||||
}
|
||||
return p;
|
||||
});
|
||||
@@ -192,6 +203,42 @@ Page({
|
||||
}
|
||||
},
|
||||
|
||||
// Collect post
|
||||
async collectPost(e) {
|
||||
const postId = e.currentTarget.dataset.id;
|
||||
const post = this.data.posts.find(p => p.id === postId);
|
||||
if (!post) return;
|
||||
|
||||
const type = post.isFavorited ? 2 : 1; // 1: Collect, 2: Cancel
|
||||
|
||||
try {
|
||||
await request.get('/post/star', { id: postId, type });
|
||||
|
||||
// Optimistic Update
|
||||
const updatedPosts = this.data.posts.map(p => {
|
||||
if (p.id === postId) {
|
||||
return { ...p, isFavorited: !p.isFavorited };
|
||||
}
|
||||
return p;
|
||||
});
|
||||
|
||||
this.setData({
|
||||
posts: updatedPosts,
|
||||
displayedPosts: updatedPosts,
|
||||
activePostId: null
|
||||
});
|
||||
|
||||
// Refresh list to sync detailed data (like IDs if needed)
|
||||
this.fetchPosts(true);
|
||||
|
||||
wx.showToast({ title: type === 1 ? '已收藏' : '已取消', icon: 'success' });
|
||||
|
||||
} catch (err) {
|
||||
console.error('Collect failed', err);
|
||||
wx.showToast({ title: '操作失败', icon: 'none' });
|
||||
}
|
||||
},
|
||||
|
||||
// Show comment input bar
|
||||
showCommentInput(e) {
|
||||
const postId = e.currentTarget.dataset.id;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"navigationBarTitleText": "植友动态",
|
||||
"navigationBarTitleText": "花友动态",
|
||||
"usingComponents": {
|
||||
"t-avatar": "tdesign-miniprogram/avatar/avatar",
|
||||
"t-image": "tdesign-miniprogram/image/image",
|
||||
|
||||
@@ -15,6 +15,11 @@
|
||||
enhanced="{{true}}"
|
||||
show-scrollbar="{{false}}"
|
||||
bindtap="hideActionPopup"
|
||||
scroll-top="{{scrollTop}}"
|
||||
bindscrolltolower="onReachBottom"
|
||||
refresher-enabled="{{true}}"
|
||||
bindrefresherrefresh="onRefresh"
|
||||
refresher-triggered="{{isRefreshing}}"
|
||||
>
|
||||
<block wx:if="{{displayedPosts.length > 0}}">
|
||||
<view wx:for="{{displayedPosts}}" wx:key="id" class="moment-post">
|
||||
@@ -49,10 +54,15 @@
|
||||
<!-- WeChat Style Popup -->
|
||||
<view class="action-popup {{activePostId === item.id ? 'show' : ''}}" catchtap="stopPropagation">
|
||||
<view class="popup-btn like-btn" catchtap="likePost" data-id="{{item.id}}">
|
||||
<t-icon name="heart" size="32rpx" color="#fff" />
|
||||
<t-icon name="{{item.likedByMe ? 'heart-filled' : 'heart'}}" size="32rpx" color="{{item.likedByMe ? '#FA5151' : '#fff'}}" />
|
||||
<text>{{item.likedByMe ? '取消' : '赞'}}</text>
|
||||
</view>
|
||||
<view class="popup-divider"></view>
|
||||
<view class="popup-btn fav-btn" catchtap="collectPost" data-id="{{item.id}}">
|
||||
<t-icon name="{{item.isFavorited ? 'star-filled' : 'star'}}" size="32rpx" color="{{item.isFavorited ? '#FFC107' : '#fff'}}" />
|
||||
<text>{{item.isFavorited ? '取消' : '收藏'}}</text>
|
||||
</view>
|
||||
<view class="popup-divider"></view>
|
||||
<view class="popup-btn comment-btn" catchtap="showCommentInput" data-id="{{item.id}}">
|
||||
<t-icon name="chat" size="32rpx" color="#fff" />
|
||||
<text>评论</text>
|
||||
@@ -68,17 +78,26 @@
|
||||
</view>
|
||||
|
||||
<!-- Likes & Comments Box -->
|
||||
<view wx:if="{{item.likes.length > 0 || item.comments.length > 0}}" class="likes-comments-box">
|
||||
<!-- Likes -->
|
||||
<view wx:if="{{item.likes.length > 0}}" class="likes-section">
|
||||
<t-icon name="heart-filled" size="28rpx" color="#FA5151" />
|
||||
<view class="likes-list">
|
||||
<text wx:for="{{item.likes}}" wx:for-item="liker" wx:key="*this" class="like-name">{{liker}}{{index < item.likes.length - 1 ? '，' : ''}}</text>
|
||||
</view>
|
||||
<view wx:if="{{item.likes.length > 0 || item.isFavorited || item.comments.length > 0}}" class="likes-comments-box">
|
||||
<!-- Likes & Stars Combined -->
|
||||
<view wx:if="{{item.likes.length > 0 || item.isFavorited}}" class="likes-section" style="flex-wrap: wrap;">
|
||||
<block wx:if="{{item.likes.length > 0}}">
|
||||
<t-icon name="{{item.likedByMe ? 'heart-filled' : 'heart'}}" size="28rpx" color="{{item.likedByMe ? '#FA5151' : '#576b95'}}" />
|
||||
<view class="likes-list" style="flex: unset; margin-right: 24rpx;">
|
||||
<text wx:for="{{item.likes}}" wx:for-item="liker" wx:key="*this" class="like-name">{{liker}}{{index < item.likes.length - 1 ? '，' : ''}}</text>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block wx:if="{{item.isFavorited}}">
|
||||
<t-icon name="star-filled" size="28rpx" color="#FFC107" />
|
||||
<view class="likes-list" style="flex: unset;">
|
||||
<text class="like-name">我</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- Divider -->
|
||||
<view wx:if="{{item.likes.length > 0 && item.comments.length > 0}}" class="divider"></view>
|
||||
<view wx:if="{{(item.likes.length > 0 || item.isFavorited) && item.comments.length > 0}}" class="divider"></view>
|
||||
|
||||
<!-- Comments -->
|
||||
<view wx:if="{{item.comments.length > 0}}" class="comments-section">
|
||||
|
||||
Reference in New Issue
Block a user