<!-- 爱心明细页面 -->
<view class="page-container">
  <!-- 顶部导航栏 -->
  <view class="nav-container">
    <view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
    <view class="nav-bar" style="height: {{navBarHeight}}px;">
      <view class="nav-back" bindtap="goBack">
        <image src="/images/icon-chevron-left.png" class="back-icon" mode="aspectFit"></image>
      </view>
      <view class="nav-title">爱心值明细</view>
    </view>
  </view>

  <!-- 内容区域 -->
  <scroll-view scroll-y class="content-scroll" style="padding-top: {{totalNavHeight}}px;" enhanced show-scrollbar="{{false}}">
    <!-- 爱心值卡片 -->
    <view class="love-card">
      <!-- 背景装饰 -->
      <view class="love-card-bg"></view>
      <view class="love-card-gradient"></view>
      
      <!-- 内容 -->
      <view class="love-card-content">
        <!-- 左侧信息 -->
        <view class="love-info">
          <view class="love-header">
            <view class="love-icon-wrap">
              <image src="/images/icon-heart.png" class="love-icon" mode="aspectFit"></image>
            </view>
            <text class="love-label">我的爱心</text>
          </view>
          <text class="love-value">{{balance}}</text>
        </view>
        
        <!-- 右侧装饰图标 -->
        <view class="love-decoration">
          <image src="/images/icon-gift.png" class="decoration-icon" mode="aspectFit"></image>
        </view>
      </view>
    </view>

    <!-- 明细记录区域 -->
    <view class="records-section">
      <view class="records-header">
        <text class="records-title">明细记录</text>
      </view>

      <!-- 记录列表 -->
      <view wx:if="{{transactions.length > 0}}" class="records-list">
        <view wx:for="{{transactions}}" wx:key="id" class="record-item">
          <view class="record-left">
            <text class="record-title">{{item.description === '首次注册赠送100爱心值' ? '新客平台赠送奖励' : (item.description || formatSource(item.source))}}</text>
            <text class="record-time">{{formatTime(item.created_at)}}</text>
          </view>
          <view class="record-right">
            <text class="record-amount {{item.amount > 0 ? 'add' : 'minus'}}">
              {{item.amount > 0 ? '+' : ''}}{{item.amount}}
            </text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view wx:else class="empty-state">
        <text class="empty-text">暂无记录</text>
      </view>
    </view>
  </scroll-view>
</view>
