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

<view class="flex-col page">
  <view class="flex-col group">
    <view class="flex-col section">
      <!-- 订单状态 + 倒计时 -->
      <view class="flex-row justify-between self-stretch group_2">
        <text class="font">订单状态</text>
        <view class="flex-row group_3">
          <text class="font_2 text" wx:if="{{ orderObj.orderStatus === '待支付' }}">请在{{countdown}}内完成支付</text>
          <text class="font_2 text_2 ml-37">{{ orderObj.orderStatus }}</text>
        </view>
      </view>
      <!-- 课程信息 -->
      <view class="flex-row self-stretch group_4 mt-15">
        <image
          class="shrink-0 image"
          src="{{ globalImgUrl + orderObj.image }}"
        />
        <text class="flex-1 self-start font_3 text_3 ml-7">
          {{ orderObj.name }}
        </text>
      </view>
      <!-- 课程价格 -->
      <text class="self-end font_3 text_4 mt-15">￥{{ orderObj.originPrice }}</text>
    </view>

    <!-- 订单详情 -->
    <view class="mt-16 flex-col section_2">
      <view class="self-start group_5">
        <text class="font text_5">订单编号：</text>
        <text class="font_4">{{ orderObj.orderNumber }}</text>
      </view>
      <view class="flex-row items-baseline self-start group_6">
        <text class="shrink-0 font text_6">下单时间：</text>
        <text class="flex-1 font_5 ml-3">{{ orderObj.createTime }}</text>
      </view>
      <view class="flex-col justify-start self-stretch relative group_7">
        <view class="flex-col section_3">
          <view class="self-stretch divider"></view>
          <view class="flex-row self-stretch group_8 mt-17">
            <text class="font text_7">支付方式：</text>
            <text class="ml-8 font text_8">微信支付</text>
          </view>
          <view class="flex-row items-center self-stretch mt-17">
            <text class="font text_9">交易号：</text>
            <!-- TODO -->
            <text class="font_4 ml-23">4002506191307440406460485418</text>
          </view>
          <text class="self-start font text_10 mt-17" wx:if="{{ orderObj.orderStatus === '交易成功' }}">交付时间：</text>
        </view>
        <text class="font_5 text_11 pos" wx:if="{{ orderObj.orderStatus === '交易成功' }}">{{ orderObj.updateTime }}</text>
      </view>
    </view>

    <!-- 价格明细 -->
    <view class="mt-16 flex-col section_4">
      <view class="flex-row justify-between items-center">
        <text class="font text_12">课程价格</text>
        <text class="font_4">￥{{ orderObj.originPrice }}</text>
      </view>
      <view class="flex-row justify-between items-center mt-11">
        <text class="font text_13">价格折扣</text>
        <text class="font_4 text_14">-￥{{ orderObj.originPrice - orderObj.totalAmount }}</text>
      </view>
      <view class="flex-row justify-between items-center group_9 mt-11">
        <text class="font_2 text_15">订单金额</text>
        <text class="font_4 text_16">￥{{ orderObj.totalAmount }}</text>
      </view>
    </view>
  </view>

  <!-- 底部按钮：待支付 -->
  <view class="flex-row bottom-buttons" wx:if="{{ orderObj.orderStatus === '待支付' }}">
    <view class="flex-col justify-start items-center text-wrapper" bindtap="cancelOrder">
      <text class="font_3 text_17">取消</text>
    </view>
    <view class="flex-col justify-start items-center text-wrapper_2" bindtap="showIsPayModal">
      <text class="font_3 text_18">立即支付</text>
    </view>
  </view>

  <!-- 底部按钮：已支付 -->
  <view class="flex-row bottom-buttons" wx:if="{{ orderObj.orderStatus === '已支付' }}">
    <view class="flex-col justify-start items-center text-wrapper_2" bindtap="refundOrder">
      <text class="font_3 text_18">退款</text>
    </view>
  </view>
  <view wx:if="{{isMaskVisible}}" class="page-mask"></view>
</view>