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}}"
  >
    <view class="search-section">
        <t-search placeholder="搜索植物名称，如：龟背竹" value="{{searchQuery}}" bind:change="onSearchInput" shape="round" />
    </view>

    <!-- Dynamic Categories from API -->
    <view class="category-scroll">
       <t-tag 
            variant="{{activeCategory === 'all' ? 'dark' : 'outline'}}" 
            theme="{{activeCategory === 'all' ? 'primary' : 'default'}}" 
            shape="mark"
            size="medium"
            style="margin-right: 16rpx;"
            bind:tap="setCategory" 
            data-cat="all"
        >
            全部
        </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">
             <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>
          <t-icon name="chevron-right" size="48rpx" color="#ccc" />
       </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>

  <t-fab icon="scan" text="植物识别" bind:click="openIdentifyModal" aria-label="植物识别"></t-fab>

  <!-- 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>