yingsa/miniprogram/pages/points/order/index.wxml

<!--兑换订单页面 - 浅色高级感设计-->
<view class="page-container">
  <!-- 顶部装饰背景 -->
  <view class="hero-bg">
    <view class="hero-pattern"></view>
  </view>

  <!-- 页面标题 -->
  <view class="page-header">
    <text class="page-title">兑换订单</text>
  </view>

  <!-- 状态筛选标签 -->
  <view class="status-tabs">
    <view 
      class="status-tab {{status === '' ? 'active' : ''}}" 
      bindtap="setStatus" 
      data-status=""
    >全部</view>
    <view 
      class="status-tab {{status === '0' ? 'active' : ''}}" 
      bindtap="setStatus" 
      data-status="0"
    >待核销</view>
    <view 
      class="status-tab {{status === '1' ? 'active' : ''}}" 
      bindtap="setStatus" 
      data-status="1"
    >已完成</view>
  </view>

  <!-- 订单列表 -->
  <view class="order-section">
    <view class="order-list" wx:if="{{orders.length > 0}}">
      <view 
        class="order-card stagger-item" 
        wx:for="{{orders}}" 
        wx:key="id"
        bindtap="viewOrder"
        data-order="{{item}}"
      >
        <view class="order-header">
          <view class="order-no">订单号: {{item.orderNo}}</view>
          <view class="order-status {{item.status === 0 ? 'pending' : item.status === 1 ? 'completed' : 'cancelled'}}">
            {{item.status === 0 ? '待核销' : item.status === 1 ? '已完成' : '已取消'}}
          </view>
        </view>
        <view class="order-content">
          <image class="product-image" src="{{item.productImage || '/images/product-default.svg'}}" mode="aspectFill"></image>
          <view class="order-info">
            <text class="product-name">{{item.productName}}</text>
            <text class="store-name">{{item.storeName}}</text>
            <view class="order-price-row">
              <view class="order-price">
                <text class="price-value">{{item.pointsUsed}}</text>
                <text class="price-unit">积分</text>
              </view>
            </view>
          </view>
        </view>
        <view class="order-footer">
          <text class="order-time">{{item.createdAt}}</text>
          <view class="order-actions">
            <view class="action-btn primary" wx:if="{{item.status === 0}}">查看兑换码</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" wx:else>
      <image class="empty-icon" src="/images/empty-order.svg" mode="aspectFit"></image>
      <text class="empty-title">暂无订单</text>
      <text class="empty-desc">快去积分商城兑换心仪好物吧</text>
      <view class="empty-btn" bindtap="goToMall">去兑换</view>
    </view>
  </view>

  <!-- 加载状态 -->
  <view wx:if="{{loading}}" class="loading-state">
    <text>加载中...</text>
  </view>
  
  <!-- 底部安全区域 -->
  <view class="safe-bottom"></view>
</view>

<!-- 订单详情弹窗 -->
<view class="order-detail-overlay {{showOrderModal ? 'show' : ''}}" bindtap="closeOrderModal">
  <view class="order-detail-modal {{showOrderModal ? 'show' : ''}}" catchtap="">
    <view class="detail-header">
      <text class="detail-title">兑换详情</text>
      <view class="detail-close" bindtap="closeOrderModal">×</view>
    </view>
    
    <view class="detail-content">
      <!-- 商品信息 -->
      <view class="detail-product">
        <image class="detail-product-image" src="{{currentOrder.productImage || '/images/product-default.svg'}}" mode="aspectFill"></image>
        <view class="detail-product-info">
          <text class="detail-product-name">{{currentOrder.productName}}</text>
          <view class="detail-product-price">
            <text class="detail-price-value">{{currentOrder.pointsUsed}}</text>
            <text class="detail-price-unit">积分</text>
          </view>
        </view>
      </view>
      
      <!-- 兑换码 -->
      <view class="qrcode-section" wx:if="{{currentOrder.status === 0}}">
        <view class="qrcode-wrapper">
          <image 
            class="qrcode-image" 
            src="{{currentOrder.qrcodeImage}}" 
            mode="aspectFit"
            wx:if="{{currentOrder.qrcodeImage}}"
          ></image>
          <view class="qrcode-loading" wx:else>
            <text>加载中...</text>
          </view>
        </view>
        <text class="qrcode-code">{{currentOrder.exchangeCode}}</text>
        <text class="qrcode-tip">请出示此码给工作人员核销</text>
      </view>
      
      <!-- 订单信息 -->
      <view class="detail-section">
        <text class="detail-section-title">订单信息</text>
        <view class="detail-row">
          <text class="detail-label">订单编号</text>
          <text class="detail-value">{{currentOrder.orderNo}}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">下单时间</text>
          <text class="detail-value">{{currentOrder.createdAt}}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">订单状态</text>
          <text class="detail-value {{currentOrder.status === 0 ? 'status-pending' : 'status-completed'}}">
            {{currentOrder.status === 0 ? '待核销' : '已完成'}}
          </text>
        </view>
      </view>
      
      <!-- 门店信息 -->
      <view class="detail-section">
        <text class="detail-section-title">领取门店</text>
        <view class="detail-row">
          <text class="detail-label">门店名称</text>
          <text class="detail-value">{{currentOrder.storeName}}</text>
        </view>
        <view class="detail-row" wx:if="{{currentOrder.storeAddress}}">
          <text class="detail-label">门店地址</text>
          <text class="detail-value">{{currentOrder.storeAddress}}</text>
        </view>
      </view>
    </view>
  </view>
</view>