YouTuan_wxapp/compone/order/order.wxml

<!-- 商品数量不为1 -->
<view class="orders-one" wx:if="{{orderData.commodity.length>1}}">
  <view class="o-one">
    <view class="orders-top">
      <view class="o-top-left">
        <van-image round width="60rpx" style="margin-top: 8rpx;" fit="cover" height="60rpx" src="{{orderData.user_info.headimg}}" />
        <view class="o-top-left-name">
          <p style="color: #3F3F3F; font-size: 24rpx;font-weight: 600;">{{orderData.user_info.name}}</p>
          <p style="color:#878787; font-size:20rpx;">{{orderData.create_time}}</p>
        </view>
      </view>
      <view class="o-top-right">
        <image wx:if="{{orderData.order_status == 1}}" src="/images/erweima.png"></image>
        <p wx:if="{{orderData.order_status === 0}}" style="font-size: 28rpx;color: #FF874E;">待支付</p>
        <p wx:if="{{orderData.order_status === 1}}" style="font-size: 28rpx;color: #FF874E;">待取货</p>
        <p wx:if="{{orderData.order_status === 2}}" style="font-size: 28rpx;color: #FF874E;">交易完成</p>
        <p wx:if="{{orderData.order_status === 3}}" style="font-size: 28rpx;color: #FF874E;">已取消</p>
        <p wx:if="{{orderData.order_status === 4}}" style="font-size: 28rpx;color: #FF874E;">申请退款</p>
        <p wx:if="{{orderData.order_status === 5}}" style="font-size: 28rpx;color: #FF874E;">退款成功</p>
      </view>
    </view>
    <view class="orders-body">
      <view class="o-body-scroll">
        <scroll-view scroll-x="true" class="o-body-scrolls">
          <van-image width="77" class="o-b-s-img" height="77" wx:for="{{orderData.commodity}}" wx:key="index" src="{{item.commodity_img}}" />
        </scroll-view>
        <view class="o-body-go">
          共{{orderData.commodity.length}}件<image src="/images/go.png"></image>
        </view>
      </view>
    </view>
    <view class="orders-price">
      <p class="o-p-he">合计： </p>
      <p class="o-p-bi">C$ </p>
      <p class="o-p-ge">{{orderData.payment_amount}}</p>
    </view>
    <view class="orders-foot">
      <button class="orders-share" open-type="share" catchtap="shareOrder">
        <image src="/images/share.png"></image>
        分享
      </button>
      <view class="orders-right">
        <button class="orders-pay" wx:if="{{orderData.order_status === 0}}">立即支付</button>
        <button class="orders-rel" catchtap="callHead">联系团长</button>
      </view>
    </view>
  </view>
</view>
<!-- 商品数量为1 -->
<view class="order" wx:else>
  <view class="o-one">
    <view class="orders-top">
      <view class="o-top-left">
        <van-image round width="60rpx" style="margin-top: 8rpx;" fit="cover" height="60rpx" src="{{orderData.user_info.headimg}}" />
        <view class="o-top-left-name">
          <p style="color: #3F3F3F; font-size: 24rpx;font-weight: 600;">{{orderData.user_info.name}}</p>
          <p style="color:#878787; font-size:20rpx;">{{orderData.create_time}}</p>
        </view>
      </view>
      <view class="o-top-right">
        <image wx:if="{{orderData.order_status == 1}}" src="/images/erweima.png"></image>
        <p wx:if="{{orderData.order_status === 0}}" style="font-size: 28rpx;color: #FF874E;">待支付</p>
        <p wx:if="{{orderData.order_status === 1}}" style="font-size: 28rpx;color: #FF874E;">待取货</p>
        <p wx:if="{{orderData.order_status === 2}}" style="font-size: 28rpx;color: #FF874E;">交易完成</p>
        <p wx:if="{{orderData.order_status === 3}}" style="font-size: 28rpx;color: #FF874E;">已取消</p>
        <p wx:if="{{orderData.order_status === 4}}" style="font-size: 28rpx;color: #FF874E;">申请退款</p>
        <p wx:if="{{orderData.order_status === 5}}" style="font-size: 28rpx;color: #FF874E;">退款成功</p>
      </view>
    </view>
    <view class="order-body">
      <van-image radius="10" width="76" class="o-b-s-img" height="76" src="{{orderData.commodity[0].commodity_img}}" />
      <view class="order-title">
        <view class="titinfo">
          <p>{{orderData.commodity[0].commodity_name}}</p>
          <p>C${{orderData.commodity[0].price}}</p>
        </view>
        <view class="guiinfo">
          <view wx:if="{{orderData.commodity[0].specifications}}">
            <p class="guige">规格：{{orderData.commodity[0].specifications[0].title}}</p>
            <p>/份</p>
          </view>
          <view wx:else>
            <p>暂无规格</p>
          </view>
          <p>共{{orderData.commodity.length}}份</p>
        </view>
      </view>
    </view>
    <view class="orders-price">
      <p class="o-p-he">合计： </p>
      <p class="o-p-bi">C$ </p>
      <p class="o-p-ge">{{orderData.payment_amount}}</p>
    </view>
    <view class="orders-foot">
      <view class="orders-share" catchtap="shareOrder">
        <image src="/images/share.png"></image>
        分享
      </view>
      <view class="orders-right">
        <button class="orders-pay" wx:if="{{orderData.order_status === 0}}">立即支付</button>
        <button class="orders-rel" catchtap="callHead">联系团长</button>
      </view>
    </view>
  </view>
</view>