feat: 百科页面

pages/wiki/index.wxml

@@ -1,4 +1,13 @@
 <!--pages/wiki/index.wxml-->
+<wxs module="tools">
+  var diffLabels = { '1': '简单', '2': '中等', '3': '较难', '4': '困难', '5': '专家' };
+  module.exports = {
+    getDifficulty: function(level) {
+      return diffLabels['' + level] || '未知';
+    }
+  };
+</wxs>
+
 <view class="wiki-page">
 
   <scroll-view 
@@ -12,45 +21,78 @@
         <t-search placeholder="搜索植物名称，如：龟背竹" value="{{searchQuery}}" bind:change="onSearchInput" shape="round" />
     </view>
 
+    <!-- Dynamic Categories from API -->
     <view class="category-scroll">
        <t-tag 
-            wx:for="{{['全部', '观叶', '观花', '多肉']}}" 
-            wx:key="*this"
-            variant="{{activeCategory === item ? 'dark' : 'outline'}}" 
-            theme="{{activeCategory === item ? 'primary' : 'default'}}" 
+            variant="{{activeCategory === 'all' ? 'dark' : 'outline'}}" 
+            theme="{{activeCategory === 'all' ? 'primary' : 'default'}}" 
             shape="mark"
             size="medium"
             style="margin-right: 16rpx;"
             bind:tap="setCategory" 
-            data-cat="{{item}}"
+            data-cat="all"
         >
-            {{item}}
+            全部
+        </t-tag>
+       <t-tag 
+            wx:for="{{categories}}" 
+            wx:key="id"
+            variant="{{activeCategory === item.id ? 'dark' : 'outline'}}" 
+            theme="{{activeCategory === item.id ? 'primary' : 'default'}}" 
+            shape="mark"
+            size="medium"
+            style="margin-right: 16rpx;"
+            bind:tap="setCategory" 
+            data-cat="{{item.id}}"
+        >
+            {{item.name}}
         </t-tag>
     </view>
 
     <view class="wiki-list">
        <view wx:for="{{displayedList}}" wx:key="id" class="wiki-card" bindtap="goToDetail" data-item="{{item}}">
           <view class="wiki-image">
-             <t-image src="/assets/{{item.images[0]}}" mode="aspectFill" width="100%" height="100%" lazy />
+             <image wx:if="{{item.image}}" src="{{item.image}}" mode="aspectFill" style="width: 100%; height: 100%; display: block;" lazy-load />
+             <view wx:else class="wiki-image-placeholder">
+               <t-icon name="image" size="48rpx" color="#ccc" />
+             </view>
           </view>
           <view class="wiki-info">
              <view class="wiki-top">
                 <text class="wiki-name">{{item.name}}</text>
-                <text class="scientific-name">{{item.scientificName}}</text>
+                <text class="scientific-name">{{item.latinName}}</text>
              </view>
              
              <!-- Tags Row -->
              <view class="tags-row">
                 <t-tag 
-                    wx:for="{{item.tags}}" 
+                    wx:for="{{item.classes}}" 
                     wx:key="*this" 
-                    wx:for-item="tag"
+                    wx:for-item="cls"
                     size="small" 
                     variant="light" 
                     theme="primary"
                     style="margin-right: 8rpx; margin-bottom: 8rpx;"
                 >
-                    {{tag}}
+                    {{cls}}
+                </t-tag>
+                <t-tag 
+                    wx:if="{{item.difficulty}}"
+                    size="small" 
+                    variant="light" 
+                    theme="{{item.difficulty <= 2 ? 'success' : (item.difficulty <= 3 ? 'warning' : 'danger')}}"
+                    style="margin-right: 8rpx; margin-bottom: 8rpx;"
+                >
+                    {{tools.getDifficulty(item.difficulty)}}
+                </t-tag>
+                <t-tag 
+                    wx:if="{{item.isHot}}"
+                    size="small" 
+                    variant="light" 
+                    theme="danger"
+                    style="margin-right: 8rpx; margin-bottom: 8rpx;"
+                >
+                    热门
                 </t-tag>
              </view>
           </view>