<!--pages/orders/orders.wxml-->
<view class="dingdan-page">
  
  <!-- 订单状态tab区域 -->
  <scroll-view 
    class="dingdan-tabs-scroll"
    scroll-x="true"
    scroll-with-animation="true"
  >
    <view class="dingdan-tabs-container">
      <block wx:for="{{dingdanZhuangtaiTabs}}" wx:key="key">
        <view 
          class="dingdan-tab-item {{index === xuanzhongTabIndex ? 'tab-active' : ''}}"
          bindtap="switchDingdanTab"
          data-index="{{index}}"
        >
          <text class="tab-text">{{item.name}}</text>
          <view class="tab-active-line" wx:if="{{index === xuanzhongTabIndex}}"></view>
        </view>
      </block>
    </view>
  </scroll-view>
  
  <!-- 订单列表区域 -->
  <view class="dingdan-list-container">
    
    <!-- 页面加载中 -->
    <view class="loading-container" wx:if="{{isLoading}}">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
    
    <!-- 空状态 -->
    <view 
      class="empty-container" 
      wx:if="{{!isLoading && dingdanShuju[currentTabKey].list.length === 0}}"
    >
      <image 
        class="empty-image" 
        src="/images/empty-order.png" 
        mode="aspectFit"
      ></image>
      <text class="empty-text">暂无订单</text>
      <text class="empty-subtext">快去下单体验服务吧</text>
    </view>
    
    <!-- 订单列表 -->
    <block wx:if="{{!isLoading && dingdanShuju[currentTabKey].list.length > 0}}">
      <block wx:for="{{dingdanShuju[currentTabKey].list}}" wx:key="dingdanId">
        <view 
          class="dingdan-card"
          bindtap="goToDingdanXiangqing"
          data-item="{{item}}"
        >
          <!-- 商品图片 -->
          <view class="dingdan-card-left">
            <image 
              class="dingdan-image"
              src="{{item.tupian}}"
              mode="aspectFill"
              binderror="onImageError"
              data-index="{{index}}"
            ></image>
          </view>
          
          <!-- 订单信息 -->
          <view class="dingdan-card-center">
            <view class="dingdan-jieshao">
              {{item.jieshao || '暂无描述'}}
            </view>
          </view>
          
          <!-- 订单状态和价格 -->
          <view class="dingdan-card-right">
            <!-- 订单状态 -->
            <view class="dingdan-zhuangtai">
              {{item.zhuangtaiZh || '未知状态'}}
            </view>
            
            <!-- 订单价格 -->
            <view class="dingdan-jine">
              <text class="jine-symbol">¥</text>
              <text class="jine-number">{{item.jine || '0.00'}}</text>
            </view>
          </view>
        </view>
      </block>
    </block>
    
    <!-- 加载更多提示 -->
    <view 
      class="load-more-container" 
      wx:if="{{xianshiJiazaigengduo && !isLoading && dingdanShuju[currentTabKey].list.length > 0}}"
    >
      <view class="load-more-line"></view>
      <text class="load-more-text">上拉加载更多</text>
      <view class="load-more-line"></view>
    </view>
    
    <!-- 没有更多提示 -->
    <view 
      class="no-more-container" 
      wx:if="{{!xianshiJiazaigengduo && !isLoading && dingdanShuju[currentTabKey].list.length > 0}}"
    >
      <text class="no-more-text">没有更多订单了</text>
    </view>
    
  </view>
  
</view>
<global-notification id="global-notification" />
