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

<wxs src="../../utils/tools.wxs" module="tools" />
<view class="plant-detail">
  <!-- Header -->
  <view class="detail-header">
    <view class="settings-btn-detail" bindtap="handleOpenEditModal">
      <t-icon name="setting" size="44rpx" color="#263238" />
    </view>
    
    <view class="header-gallery">
      <t-swiper
        current="{{activeImageIndex}}"
        autoplay="{{false}}"
        navigation="{{ { type: '' } }}"
        list="{{swiperImages}}"
        bind:change="onSwiperChange"
        height="500rpx"
      />
      <view class="header-gradient"></view>
      
      <!-- Image Counter -->
      <view class="carousel-counter" wx:if="{{swiperImages.length > 0}}">
        <text>{{activeImageIndex + 1}} / {{swiperImages.length}}</text>
      </view>
    </view>
    
    <view class="header-info">
      <text class="header-title">{{currentPlant.name}}</text>
    </view>
  </view>

  <!-- Content -->
  <view class="detail-content">
    <!-- Custom Tabs -->
    <view class="pd-tabs">
      <view class="pd-tab-btn {{activeTab === 'info' ? 'active' : ''}}" bindtap="switchTab" data-tab="info">
        基础档案
      </view>
      <view class="pd-tab-btn {{activeTab === 'care' ? 'active' : ''}}" bindtap="switchTab" data-tab="care">
        养护记录
      </view>
      <view class="pd-tab-btn {{activeTab === 'growth' ? 'active' : ''}}" bindtap="switchTab" data-tab="growth">
        成长档案
      </view>
    </view>

    <!-- Info Tab Scroll View -->
    <scroll-view 
      scroll-y="{{!showGrowthModal}}" 
      class="pd-content" 
      enhanced="{{true}}" 
      show-scrollbar="{{false}}"
      hidden="{{activeTab !== 'info'}}"
    >
      <view class="archive-view fadeIn">
        <view class="archive-identity-card">
          <view class="aic-header">
            <view class="aic-badge">{{currentPlant.ageBadge.icon || '🌱'}} {{currentPlant.ageBadge.title || '植物新人'}}</view>
            <view class="aic-location">
              <t-icon name="location" size="28rpx" color="#388E3C" />
              <text>{{currentPlant.location || '位置未定'}}</text>
            </view>
          </view>
          <view class="aic-desc-box">
            <text>{{currentPlant.ageBadge.desc}}</text>
          </view>
          <view class="aic-stats">
            <view class="aic-stat-item">
              <text class="label">入家时间</text>
              <text class="value">{{currentPlant.adoptionDate || '未知'}}</text>
            </view>
            <view class="aic-stat-item">
              <text class="label">入住天数</text>
              <text class="value">{{currentPlant.daysPlanted}} 天</text>
            </view>

          </view>

          <!-- New detail fields -->
          <view class="aic-extra-info">
            <view wx:if="{{currentPlant.potMaterial}}" class="aic-info-row">
              <text class="label">花园材质：</text>
              <text class="value">{{currentPlant.potMaterial}}</text>
            </view>
            <view wx:if="{{currentPlant.potSize}}" class="aic-info-row">
              <text class="label">花园大小：</text>
              <text class="value">{{currentPlant.potSize}}</text>
            </view>
            <view wx:if="{{currentPlant.sunlight}}" class="aic-info-row">
              <text class="label">光照条件：</text>
              <text class="value">{{currentPlant.sunlight}}</text>
            </view>
            <view wx:if="{{currentPlant.plantingMaterial}}" class="aic-info-row">
              <text class="label">植料土壤：</text>
              <text class="value">{{currentPlant.plantingMaterial}}</text>
            </view>
          </view>
        </view>

        <view class="delete-plant-box" bindtap="handleDeletePlant">
          <t-icon name="delete" size="32rpx" color="#EF5350" />
          <text class="delete-text">删除植物</text>
        </view>
      </view>
    </scroll-view>

    <!-- Care Tab Scroll View -->
    <scroll-view 
      scroll-y="{{!showGrowthModal}}" 
      class="pd-content" 
      enhanced="{{true}}" 
      show-scrollbar="{{false}}"
      hidden="{{activeTab !== 'care'}}"
    >
      <view class="care-view fadeIn">
        <view class="section-title">
          <text class="h3">养护记录</text>
        </view>
        
        <view class="care-log-list">
          <block wx:if="{{displayCareLogs && displayCareLogs.length > 0}}">
            <view wx:for="{{displayCareLogs}}" wx:key="id" class="care-log-item">
              <view class="log-left">
                <view class="log-date-v">
                  <text class="l-day">{{item.day}}</text>
                  <text class="l-month">{{item.month}}月</text>
                </view>
                <view class="log-type-icon" style="background-color: {{item.iconBgColor || '#EFEBE9'}};">
                  <t-icon name="{{item.taskIcon}}" size="36rpx" color="{{item.iconColor || '#8D6E63'}}" />
                </view>
                <view class="log-info">
                  <view class="log-header-row">
                    <text class="log-type-name">{{item.typeLabel}}</text>
                    <text class="log-time">{{item.time}}</text>
                  </view>
                  <text wx:if="{{item.remark}}" class="log-remark">{{item.remark}}</text>
                </view>
              </view>
            </view>
          </block>
          <view wx:else class="plant-empty-state">
            <view class="plant-empty-text">
              <text>暂无养护记录</text>
              <text>快去给它浇浇水吧~ 💧</text>
            </view>
          </view>
        </view>
        
        <block wx:if="{{careLogs.length > displayCareLimit}}">
          <view class="load-more-btn" bindtap="toggleCareLimit">
            <text>加载更多 ({{displayCareLogs.length}}/{{careLogs.length}})</text>
            <t-icon name="chevron-down" size="32rpx" />
          </view>
        </block>
      </view>
    </scroll-view>

    <!-- Growth Tab Scroll View -->
    <scroll-view 
      scroll-y="{{!showGrowthModal}}" 
      class="pd-content" 
      enhanced="{{true}}" 
      show-scrollbar="{{false}}"
      hidden="{{activeTab !== 'growth'}}"
    >
      <view class="archive-view fadeIn">

        <view class="section-header">
          <text class="h3">成长记录</text>
          <view class="add-btn" bindtap="openGrowthModal">
            <t-icon name="edit" size="28rpx" color="#FFF" />
            <text>记录</text>
          </view>
        </view>

        <block wx:if="{{displayRecords && displayRecords.length > 0}}">
          <view class="archive-timeline">
            <view wx:for="{{displayRecords}}" wx:key="id" class="timeline-item">
              <view class="timeline-dot"></view>
              <text class="timeline-date">{{item.date}}</text>
              <view class="timeline-content-box">
                <view class="timeline-title">
                  <t-icon wx:if="{{item.type === 'growth'}}" name="thumb-up" size="32rpx" color="#4CAF50" />
                  <t-icon wx:elif="{{item.type === 'repot'}}" name="swap" size="32rpx" color="#FF9800" />
                  <t-icon wx:elif="{{item.type === 'pest'}}" name="error-circle" size="32rpx" color="#F44336" />
                  <t-icon wx:else name="file" size="32rpx" color="#2196F3" />
                  <text>{{item.title}}</text>
                </view>
                <text class="timeline-desc">{{item.content}}</text>
                <image 
                  wx:if="{{item.image}}" 
                  src="{{item.image}}" 
                  mode="aspectFill" 
                  style="width: 220rpx; height: 220rpx; border-radius: 16rpx; margin-top: 16rpx;"
                  class="timeline-img" 
                  bindtap="handlePreviewRecordImage" 
                  data-src="{{item.image}}" 
                />
              </view>
            </view>
          </view>
        </block>
        <view wx:else class="plant-empty-state">
          <view class="plant-empty-text">
            <text>暂无成长记录</text>
            <text>记录下它的每一个精彩瞬间吧 📸</text>
          </view>
        </view>
        
        <block wx:if="{{records.length > displayRecordLimit}}">
          <view class="load-more-btn" bindtap="toggleRecordLimit">
            <text>加载更多 ({{displayRecords.length}}/{{records.length}})</text>
            <t-icon name="chevron-down" size="32rpx" />
          </view>
        </block>
      </view>
    </scroll-view>
  </view>
  

</view>