feat: 调整样式

2026-02-14 11:31:44 +08:00
parent cbbe82ef63
commit d6f781a666
42 changed files with 827 additions and 293 deletions
@@ -2,33 +2,146 @@ import request from '../../../utils/request';

 Page({
    data: {
-        favTab: 'all',
+        favTab: 'all', // 'all', 'plant', 'post'
        favorites: [],
-        filteredFavorites: []
+        current: 1,
+        pageSize: 10,
+        hasMore: true,
+        isLoading: false
    },

    onLoad() {
-        this.loadFavorites();
-    },
-
-    loadFavorites() {
-        // TODO: Call API
-        this.filterFavorites();
+        this.fetchFavorites(true);
    },

    onFavTabChange(e) {
        const val = e.currentTarget.dataset.value;
+        if (val === this.data.favTab) return;
        this.setData({ favTab: val }, () => {
-            this.filterFavorites();
+            this.fetchFavorites(true);
        });
    },

-    filterFavorites() {
-        const { favorites, favTab } = this.data;
-        const filtered = favorites.filter(item => {
-            if (favTab === 'all') return true;
-            return item.type === favTab;
+    fetchFavorites(reset = false) {
+        if (this.data.isLoading) return;
+        if (!reset && !this.data.hasMore) return;
+
+        this.setData({ isLoading: true });
+
+        const current = reset ? 1 : this.data.current;
+        let classType = 0;
+        if (this.data.favTab === 'plant') classType = 1;
+        if (this.data.favTab === 'post') classType = 2;
+
+        request.post('/profile/star', {
+            current,
+            pageSize: this.data.pageSize,
+            class: classType
+        }).then(res => {
+            const list = res.list || [];
+            const total = res.total || 0;
+
+            const mappedList = list.map(wrapper => {
+                const type = wrapper.type; // 1=Wiki, 2=Post
+                const isPlant = type === 1;
+                const entity = isPlant ? wrapper.wiki : wrapper.post;
+
+                if (!entity) return null;
+
+                // Image Extraction
+                let image = '';
+                if (entity.imgList && entity.imgList.length > 0) {
+                    image = entity.imgList[0].url;
+                }
+
+                if (isPlant) {
+                    return {
+                        id: entity.id,
+                        type: 'plant',
+                        name: entity.name,
+                        latinName: entity.latinName,
+                        difficultyLabel: this.getDifficultyLabel(entity.difficulty),
+                        image: image
+                    };
+                } else {
+                    // Post
+                    return {
+                        id: entity.id,
+                        type: 'post',
+                        content: entity.content,
+                        postImage: image,
+                        avatar: entity.publisher && entity.publisher.avatar ? entity.publisher.avatar : '', // Publisher is null in sample
+                        nickname: entity.publisher && entity.publisher.nickname ? entity.publisher.nickname : '花友',
+                        time: wrapper.createdAtStr
+                    };
+                }
+            }).filter(item => item !== null);
+
+            if (reset) {
+                this.setData({
+                    favorites: mappedList,
+                    current: 2,
+                    hasMore: mappedList.length < total,
+                    isLoading: false
+                });
+            } else {
+                this.setData({
+                    favorites: [...this.data.favorites, ...mappedList],
+                    current: current + 1,
+                    hasMore: (this.data.favorites.length + mappedList.length) < total,
+                    isLoading: false
+                });
+            }
+        }).catch(err => {
+            console.error('Fetch favorites failed', err);
+            this.setData({ isLoading: false });
        });
-        this.setData({ filteredFavorites: filtered });
+    },
+
+    getDifficultyLabel(level) {
+        const labels = { 1: '简单', 2: '中等', 3: '较难', 4: '困难', 5: '专家' };
+        return labels[level] || '未知';
+    },
+
+    onSwipeClick(e) {
+        // Handle Delete
+        // Data item is bound to the swipe-cell or passed via dataset
+        // If bind:click is on swipe-cell, e.target might not have the item if not set.
+        // We set data-item on swipe-cell.
+        const item = e.currentTarget.dataset.item;
+        const { id, type } = item;
+
+        const apiPath = type === 'plant' ? '/wiki/star' : '/post/star';
+
+        wx.showModal({
+            title: '提示',
+            content: '确定要取消收藏吗？',
+            success: (modRes) => {
+                if (modRes.confirm) {
+                    request.get(apiPath, { id, type: 2 }).then(() => {
+                        wx.showToast({ title: '已删除', icon: 'success' });
+                        // Remove from list
+                        const newList = this.data.favorites.filter(i => i.id !== id);
+                        this.setData({ favorites: newList });
+                    }).catch(err => {
+                        console.error('Delete favorite failed', err);
+                        wx.showToast({ title: '删除失败', icon: 'none' });
+                    });
+                }
+            }
+        });
+    },
+
+    goToDetail(e) {
+        const item = e.currentTarget.dataset.item;
+        if (item.type === 'plant') {
+            wx.navigateTo({ url: `/pages/wiki/detail/index?id=${item.id}` });
+        } else {
+            wx.showToast({ title: '暂不支持查看动态详情', icon: 'none' });
+        }
+    },
+
+    onReachBottom() {
+        this.fetchFavorites(false);
    }
 });
@@ -2,6 +2,10 @@
    "navigationBarTitleText": "我的收藏",
    "usingComponents": {
        "t-icon": "tdesign-miniprogram/icon/icon",
-        "t-image": "tdesign-miniprogram/image/image"
+        "t-image": "tdesign-miniprogram/image/image",
+        "t-swipe-cell": "tdesign-miniprogram/swipe-cell/swipe-cell",
+        "t-tag": "tdesign-miniprogram/tag/tag",
+        "t-avatar": "tdesign-miniprogram/avatar/avatar",
+        "t-loading": "tdesign-miniprogram/loading/loading"
    }
 }
@@ -1,27 +1,73 @@
 <view class="favorites-page">
    <view class="category-filter">
      <view class="filter-chip {{favTab === 'all' ? 'active' : ''}}" bindtap="onFavTabChange" data-value="all">全部</view>
-      <view class="filter-chip {{favTab === 'plant' ? 'active' : ''}}" bindtap="onFavTabChange" data-value="plant">植物</view>
-      <view class="filter-chip {{favTab === 'article' ? 'active' : ''}}" bindtap="onFavTabChange" data-value="article">文章</view>
+      <view class="filter-chip {{favTab === 'plant' ? 'active' : ''}}" bindtap="onFavTabChange" data-value="plant">百科</view>
+      <view class="filter-chip {{favTab === 'post' ? 'active' : ''}}" bindtap="onFavTabChange" data-value="post">动态</view>
    </view>

-    <scroll-view scroll-y class="fav-scroll" enhanced show-scrollbar="{{false}}">
-      <view wx:if="{{filteredFavorites.length > 0}}" class="fav-grid">
-        <view wx:for="{{filteredFavorites}}" wx:key="id" class="fav-card">
-          <t-image src="{{item.image}}" mode="aspectFill" width="100%" height="240rpx" class="fav-img" />
-          <view class="fav-info">
-            <text class="fav-name">{{item.name}}</text>
-            <view class="fav-meta-row">
-              <t-icon name="{{item.type === 'plant' ? 'heart' : 'book'}}" size="28rpx" color="#90A4AE" />
-              <text class="fav-type">{{item.meta}}</text>
+    <scroll-view 
+        scroll-y 
+        class="fav-scroll" 
+        enhanced 
+        show-scrollbar="{{false}}"
+        bindscrolltolower="onReachBottom"
+    >
+      <view wx:if="{{favorites.length > 0}}" class="fav-list">
+        <t-swipe-cell wx:for="{{favorites}}" wx:key="id">
+            <view class="fav-item" bindtap="goToDetail" data-item="{{item}}">
+            
+            <!-- Render Wiki Plant -->
+            <block wx:if="{{item.type === 'plant'}}">
+                <t-image src="{{item.image}}" mode="aspectFill" class="fav-img plant-img" width="160rpx" height="160rpx" />
+                <view class="fav-info">
+                    <text class="fav-title">{{item.name}}</text>
+                    <text class="fav-subtitle">{{item.latinName}}</text>
+                    <view class="fav-meta">
+                        <t-tag size="small" variant="light" theme="success">植物百科</t-tag>
+                        <text wx:if="{{item.difficultyLabel}}" class="meta-diff">难度: {{item.difficultyLabel}}</text>
+                    </view>
+                </view>
+            </block>
+
+            <!-- Render Community Post -->
+            <block wx:else>
+                <t-image 
+                    src="{{item.postImage || item.avatar}}" 
+                    mode="aspectFill" 
+                    class="fav-img post-img" 
+                    width="160rpx" height="160rpx"
+                />
+                <view class="fav-info">
+                    <text class="fav-title post-title">{{item.content || '无标题'}}</text>
+                    <view class="fav-user-row">
+                        <t-avatar image="{{item.avatar}}" size="small" />
+                        <text class="user-nickname">{{item.nickname}}</text>
+                    </view>
+                    <view class="fav-meta">
+                        <t-tag size="small" variant="light" theme="primary">社区动态</t-tag>
+                        <text class="meta-time">{{item.time}}</text>
+                    </view>
+                </view>
+            </block>
            </view>
-          </view>
-        </view>
+            <view slot="right" class="delete-btn" catchtap="onSwipeClick" data-item="{{item}}">
+                <text>删除</text>
+            </view>
+        </t-swipe-cell>
      </view>
-      <view wx:else class="empty-state">
+      
+      <!-- Empty State -->
+      <view wx:elif="{{!isLoading}}" class="empty-state">
        <t-icon name="star" size="80rpx" color="#E0E0E0" style="margin-bottom: 24rpx;" />
        <text class="empty-text">暂无收藏内容</text>
      </view>
+      
+      <!-- Loading State -->
+      <view class="loading-footer" wx:if="{{isLoading}}">
+          <t-loading theme="circular" size="40rpx" text="加载中..." />
+      </view>
+      <view wx:if="{{!hasMore && favorites.length > 0}}" class="no-more-text">没有更多了</view>
+      
      <view style="height: 60rpx;"></view>
    </scroll-view>
 </view>
@@ -12,6 +12,7 @@
    display: flex;
    gap: 16rpx;
    margin-bottom: 24rpx;
+    flex-shrink: 0;
 }

 .filter-chip {
@@ -26,10 +27,10 @@
 }

 .filter-chip.active {
-    background: #333;
+    background: #558B2F; 
    color: #fff;
    font-weight: 600;
-    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
+    box-shadow: 0 4rpx 12rpx rgba(85, 139, 47, 0.2);
 }

 .fav-scroll { 
@@ -38,47 +39,91 @@
    width: 100%;
 }

-.fav-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 20rpx;
-}
-
-.fav-card {
-    background: white;
-    border-radius: 20rpx;
-    overflow: hidden;
-    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
+.fav-list {
    display: flex;
    flex-direction: column;
+    gap: 24rpx;
+}
+
+.fav-item {
+    background: white;
+    border-radius: 20rpx;
+    padding: 24rpx;
+    display: flex;
+    gap: 24rpx;
+    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.02);
+}
+
+.fav-item:active {
+    background: #fafafa;
 }

 .fav-img {
+    width: 160rpx;
+    height: 160rpx;
+    border-radius: 16rpx;
+    flex-shrink: 0;
    background: #f0f0f0;
 }

 .fav-info {
-    padding: 16rpx 20rpx;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    min-width: 0;
+    height: 160rpx;
 }

-.fav-name {
-    display: block;
-    font-size: 28rpx;
+.fav-title {
+    font-size: 30rpx;
    font-weight: 600;
    color: #1F2937;
-    margin-bottom: 8rpx;
+    margin-bottom: 4rpx;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    line-height: 1.4;
 }

-.fav-meta-row {
+.fav-subtitle {
+    font-size: 24rpx;
+    color: #9CA3AF;
+    font-style: italic;
+    margin-bottom: auto; /* Push meta down */
+    display: block;
+}
+
+.fav-user-row {
    display: flex;
    align-items: center;
-    gap: 8rpx;
+    gap: 12rpx;
+    margin-bottom: auto; /* Push meta down */
+    margin-top: 8rpx;
 }

-.fav-type {
+.user-nickname {
+    font-size: 24rpx;
+    color: #6B7280;
+}
+
+.fav-meta {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+    margin-top: 12rpx;
+}
+
+.meta-diff {
+    font-size: 22rpx;
+    color: #F59E0B;
+    background: #FFFBEB;
+    padding: 4rpx 12rpx;
+    border-radius: 8rpx;
+}
+
+.meta-time {
    font-size: 22rpx;
    color: #9CA3AF;
 }
@@ -96,3 +141,30 @@
    color: #9CA3AF;
    margin-top: 16rpx;
 }
+
+.loading-footer {
+    padding: 32rpx;
+    display: flex;
+    justify-content: center;
+}
+
+.no-more-text {
+    text-align: center;
+    padding: 32rpx;
+    color: #ccc;
+    font-size: 24rpx;
+}
+
+.delete-btn {
+    background-color: #EF4444;
+    color: white;
+    width: 140rpx;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28rpx;
+    font-weight: 500;
+    border-top-right-radius: 20rpx;
+    border-bottom-right-radius: 20rpx;
+}