sundynix-plant-mp/pages/wiki/index.wxml

<!--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 
    class="wiki-scroll-area" 
    scroll-y 
    bindscrolltolower="onReachBottom"
    enhanced
    show-scrollbar="{{false}}"
    scroll-top="{{scrollTop}}"
  >
    <view class="search-section">
        <view class="search-box-card">
            <t-search placeholder="搜索植物名称，如：龟背竹" value="{{searchQuery}}" bind:change="onSearchInput" shape="round" t-class-input-container="search-input-bg" />
        </view>
    </view>

    <!-- Dynamic Categories from API -->
    <scroll-view class="category-scroll" scroll-x enable-flex show-scrollbar="{{false}}">
       <view 
            class="category-item {{activeCategory === 'all' ? 'active' : ''}}" 
            bindtap="setCategory" 
            data-cat="all"
       >
            <text>全部</text>
       </view>
       <view 
            wx:for="{{categories}}" 
            wx:key="id" 
            class="category-item {{activeCategory === item.id ? 'active' : ''}}" 
            bindtap="setCategory" 
            data-cat="{{item.id}}"
       >
            <text>{{item.name}}</text>
       </view>
       <!-- Right spacer for scroll -->
       <view style="width: 40rpx; flex-shrink: 0;"></view>
    </scroll-view>

    <view class="wiki-list">
       <view wx:for="{{displayedList}}" wx:key="id" class="wiki-card" bindtap="goToDetail" data-item="{{item}}">
          <view class="wiki-image">
             <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.latinName}}</text>
             </view>
             
             <!-- Tags Row -->
             <view class="tags-row">
                <t-tag 
                    wx:for="{{item.classes}}" 
                    wx:key="*this" 
                    wx:for-item="cls"
                    size="small" 
                    variant="light" 
                    theme="primary"
                    style="margin-right: 8rpx; margin-bottom: 8rpx;"
                >
                    {{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>
          
          <!-- Favorite Heart Button -->
          <view class="fav-action-btn" catchtap="toggleFavorite" data-id="{{item.id}}" style="padding: 16rpx; margin-right: -16rpx;">
             <t-icon name="{{item.isFavorited ? 'heart-filled' : 'heart'}}" size="48rpx" color="{{item.isFavorited ? '#FA5151' : '#CCC'}}" />
          </view>
       </view>
    </view>
    
    <!-- Loading / No More Data Footer -->
    <view class="loading-footer">
        <t-loading wx:if="{{isLoading}}" theme="circular" size="40rpx" text="加载中..." inherit-color />
        <text wx:elif="{{!hasMore && displayedList.length > 0}}" class="no-more-text">没有更多了</text>
        <view wx:elif="{{!hasMore && displayedList.length === 0}}" class="empty-state">
            <text>没有找到相关植物</text>
        </view>
    </view>

    <!-- Spacer -->
     <view style="height: 160rpx;"></view>
  </scroll-view>

  <view class="floating-add-btn" bindtap="openIdentifyModal">
    <t-icon name="scan" size="40rpx" color="#FFF" />
    <text>植物识别</text>
  </view>

  <!-- Identify Popup -->
  <t-popup visible="{{showIdentifyModal}}" bind:visible-change="onPopupVisibleChange" placement="bottom">
      <view class="popup-content">
         <view class="popup-header">
            <text class="popup-title">🌿 植物识别</text>
         </view>
         <text class="popup-subtitle">拍照或上传图片，AI 帮你识别植物</text>
         
         <view class="upload-options-grid">
            <view class="upload-opt-item" bindtap="handleIdentify" data-source="camera">
               <view class="opt-icon-circle" style="background: linear-gradient(135deg, #E8F5E9, #C8E6C9);">
                  <t-icon name="camera" size="56rpx" color="#2E7D32" />
               </view>
               <text>拍照识别</text>
            </view>
            <view class="upload-opt-item" bindtap="handleIdentify" data-source="album">
               <view class="opt-icon-circle" style="background: linear-gradient(135deg, #E3F2FD, #BBDEFB);">
                  <t-icon name="image" size="56rpx" color="#1565C0" />
               </view>
               <text>相册选取</text>
            </view>
         </view>

         <view class="popup-footer">
            <view class="cancel-btn" bindtap="closeIdentifyModal">取消</view>
         </view>
      </view>
  </t-popup>
</view>