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>
      
      <!-- Custom Carousel Indicators -->
      <view class="carousel-indicators">
        <view wx:for="{{swiperImages}}" wx:key="index" class="carousel-dot {{index === activeImageIndex ? 'active' : ''}}"></view>
      </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 === 'care' ? 'active' : ''}}" bindtap="switchTab" data-tab="care">
        养护记录
      </view>
      <view class="pd-tab-btn {{activeTab === 'archive' ? 'active' : ''}}" bindtap="switchTab" data-tab="archive">
        植物档案
      </view>
    </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>

    <!-- Archive Tab Scroll View -->
    <scroll-view 
      scroll-y="{{!showGrowthModal}}" 
      class="pd-content" 
      enhanced="{{true}}" 
      show-scrollbar="{{false}}"
      hidden="{{activeTab !== 'archive'}}"
    >
      <view class="archive-view fadeIn">
        <view class="archive-identity-card">
          <view class="aic-header">
            <view class="aic-badge">🏆 元老级植物</view>
            <view class="aic-location">
              <t-icon name="location" size="28rpx" color="#388E3C" />
              <text>{{currentPlant.location || '位置未定'}}</text>
            </view>
          </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 class="aic-stat-item">
              <text class="label">养护次数</text>
              <text class="value">{{careLogs.length || 0}} 次</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="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>
                <t-image 
                  wx:if="{{item.image}}" 
                  src="{{item.image}}" 
                  mode="widthFix" 
                  width="100%" 
                  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>
  
  <!-- Growth Record Popup -->
  <t-popup visible="{{showGrowthModal}}" bind:visible-change="onGrowthPopupVisibleChange" placement="center" prevent-scroll-through>
    <view class="edit-modal">
      <view class="modal-header" catchtouchmove="preventTouchMove">
        <text class="modal-title">添加成长记录</text>
        <view class="close-btn" bindtap="closeGrowthModal">
          <t-icon name="close" size="40rpx" color="#666" />
        </view>
      </view>
      
      <view class="modal-body">
        <!-- Record Type -->
        <view class="form-group">
          <text class="form-label">记录类型</text>
          <view class="chip-group">
            <view class="chip {{newRecordType === 'growth' ? 'active' : ''}}" bindtap="setRecordTypeByTap" data-type="growth">
              <t-icon name="thumb-up" size="28rpx" />
              <text>生长</text>
            </view>
            <view class="chip {{newRecordType === 'repot' ? 'active' : ''}}" bindtap="setRecordTypeByTap" data-type="repot">
              <t-icon name="swap" size="28rpx" />
              <text>换盆</text>
            </view>
            <view class="chip {{newRecordType === 'pest' ? 'active' : ''}}" bindtap="setRecordTypeByTap" data-type="pest">
              <t-icon name="error-circle" size="28rpx" />
              <text>病虫害</text>
            </view>
            <view class="chip {{newRecordType === 'other' ? 'active' : ''}}" bindtap="setRecordTypeByTap" data-type="other">
              <t-icon name="file" size="28rpx" />
              <text>其他</text>
            </view>
          </view>
        </view>

        <!-- Content -->
        <view class="form-group">
          <text class="form-label">备注</text>
          <textarea 
            class="form-textarea" 
            placeholder="记录这一刻的变化..." 
            value="{{newRecordContent}}" 
            bindinput="onRecordContentInput"
            auto-height
          />
        </view>

        <!-- Image Upload -->
        <view class="form-group">
          <text class="form-label">添加照片</text>
          <view class="record-image-upload">
            <view wx:if="{{newRecordImage}}" class="uploaded-image-box">
              <t-image src="{{newRecordImage}}" mode="aspectFill" width="160rpx" height="160rpx" shape="round" />
              <view class="remove-img-btn" bindtap="handleRemoveRecordImage">
                <t-icon name="close" size="24rpx" color="#FFF" />
              </view>
            </view>
            <view wx:else class="upload-add-btn" bindtap="handleChooseRecordImage">
              <t-icon name="add" size="48rpx" color="#999" />
            </view>
          </view>
        </view>
      </view>
      
      <view class="modal-footer" catchtouchmove="preventTouchMove">
        <view class="submit-btn" bindtap="handleAddRecord">
          <text>保存记录</text>
        </view>
      </view>
    </view>
  </t-popup>
</view>