Fuelwx/components/orderItem/orderItem.wxml

<!--components/orderItem/orderItem.wxml-->
<view class="orderItemContainer">
  <!-- 时间 -->
  <view class="dateTime">
    <text style="margin-left: 3%;color: #a7a7a7;font-size: smaller;">{{order.date}}</text>
    <view style="margin-right: 3%;" class="timeAndStatus">
      <text style="font-weight: 600;">{{order.time}}</text>
      <text style="color: {{statusColor}};">{{order.status}}</text>
    </view>
  </view>

  <!-- 中间订单信息 -->
  <view class="middle">
    <image src="../../images/oil.svg" mode="aspectFit"></image>
    <view class="orderInfo">
      <text style="font-weight: 800;">{{order.oilName}}</text>
      <view class="nozzleAndVolume">
        <text class="nozzle">{{order.nozzleNum}}号枪</text>
        <text class="volume">{{order.volume}}</text>
        <text style="color: #ff4e0e;font-size: small;">升</text>
      </view>
    </view>
    <text>倒计时 {{countdown}} 秒</text>
  </view>

  <!-- 底部金额及按钮-->  
  <view class="bottom">
    <view class="amount">
      <text>金额</text>
      <text>￥</text>
      <text>{{order.amount}}</text>
    </view>
    <button style="color: {{buttonColor1}};">{{buttonMessage1}}</button>
    <button style="color: {{buttonColor2}};">{{buttonMessage2}}</button>
  </view>
</view>