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

<!-- pages/course/courseOrderList/courseOrderList.wxml -->
<view class="flex-col justify-start page">
  <view class="flex-col group_1">
    <view 
      class="flex-col list-item mt-17" 
      wx:for="{{orderList}}" 
      wx:for-item="item" 
      wx:for-index="index" 
      wx:key="item"
      bind:tap="gotoOrderDetail"
      data-id="{{ item.id }}"
    >
      <view class="flex-row self-stretch group">
        <text class="font text">订单号：{{item.orderNumber}}</text>
        <text class="font_2">{{ item.orderStatus }}</text>
      </view>

      <text class="self-stretch font_3 text_2">{{ item.name }}</text>
      <text class="self-end font_4 text_3">￥{{ item.totalAmount }}</text>

      <!-- 倒计时，只在“待支付”时显示 -->
      <text wx:if="{{ item.orderStatus === '待支付' }}" class="self-end font_5 text_4">
        请在 {{ item.countDownStr }} 内完成支付
      </text>

      <view class="flex-row justify-between items-center self-stretch group_2">
        <text class="font_6 text_5">{{ item.createTime }}</text>
        <view class="flex-row">
          <!-- 仅待支付时可操作 -->
          <view wx:if="{{ item.orderStatus === '待支付' }}" class="flex-col justify-start items-center text-wrapper" catch:tap="cancelOrder" data-id="{{ item.id }}">
            <text class="font_7">取消订单</text>
          </view>
          <view wx:if="{{ item.orderStatus === '待支付' }}" class="flex-col justify-start items-center text-wrapper_2 ml-11" catch:tap="showIsPayModal"
          data-order-id="{{ item.id }}">
            <text class="font_8">支付</text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view wx:if="{{isMaskVisible}}" class="page-mask"></view>
</view>