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 wx:if="{{order.status != ''}}" style="color: {{statusColor}};font-size: small;">{{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 wx:if="{{countdown != ''}}">倒计时 {{countdown}} 秒</text>
  </view>

  <!-- 底部金额及按钮-->  
  <view class="bottom">
    <view class="amount">
      <text>金额</text>
      <text>￥</text>
      <text>{{order.amount}}</text>
    </view>
    <view class="botton">
      <block wx:if="{{buttonMessage1 != ''}}">
        <button 
        style="color: {{buttonColor1}};"
        bind:tap="buttonClick1">{{buttonMessage1}}</button>
      </block>
      <block wx:else>
        <view style="width: 45%;"></view> <!-- 占位元素 -->
      </block>
      
      <block wx:if="{{buttonMessage2 != ''}}">
        <button 
        style="color: {{buttonColor2}};"
        bind:tap="buttonClick2">{{buttonMessage2}}</button>
      </block>
      <block wx:else>
        <view style="width: 45%;"></view> <!-- 占位元素 -->
      </block>
    </view>
    
  </view>
</view>