qingcheng-xiaochengxu/pages/course/courseOrderList/courseOrderList.wxml

<!-- pages/course/courseOrderList/courseOrderList.wxml -->
<view class="page">

<!-- 列表滚动区 -->
<scroll-view scroll-y class="content no-scrollbar">

  <!-- 空状态（可选） -->
  <view wx:if="{{ !orderList || orderList.length === 0 }}" class="empty">
    <image class="empty-img" src="./image/empty.png" mode="aspectFit" />
    <text class="empty-text">暂无订单</text>
  </view>

  <!-- 订单卡片列表 -->
  <view wx:for="{{ orderList }}"
        wx:for-item="item"
        wx:for-index="index"
        wx:key="item.id"
        class="card order-item"
        bind:tap="gotoOrderDetail"
        data-id="{{ item.id }}">

    <!-- 顶部：订单号 + 状态徽标 -->
    <view class="topline">
      <text class="order-no">订单号：{{ item.orderNumber }}</text>
      <view class="status-badge {{ item.orderStatus === '待支付' ? 'status-pending' : (item.orderStatus === '已支付' || item.orderStatus === '交易成功' ? 'status-success' : 'status-default') }}">
        <text class="status-text">{{ item.orderStatus }}</text>
      </view>
    </view>

    <!-- 课程名称 -->
    <text class="course-name ellipsis-2">{{ item.name }}</text>

    <!-- 价格 + 倒计时（仅待支付显示） -->
    <view class="price-line">
      <text class="amount">￥{{ item.totalAmount }}</text>
      <view wx:if="{{ item.orderStatus === '待支付' }}" class="countdown-pill">
        <text class="countdown-text">请在 {{ item.countDownStr }} 内完成支付</text>
      </view>
    </view>

    <!-- 底部：下单时间 + 操作按钮（仅待支付显示） -->
    <view class="bottomline">
      <text class="ctime">{{ item.createTime }}</text>
      <view class="actions" wx:if="{{ item.orderStatus === '待支付' }}">
        <view class="btn btn-ghost" catch:tap="cancelOrder" data-id="{{ item.id }}">取消订单</view>
        <view class="btn btn-primary" catch:tap="showIsPayModal" data-order-id="{{ item.id }}">支付</view>
      </view>
    </view>
  </view>

</scroll-view>

<!-- 遮罩 -->
<view wx:if="{{ isMaskVisible }}" class="page-mask"></view>
</view>