soul-yongping/miniprogram/pages/purchases/purchases.wxml

<!--订单页-->
<view class="page">
  <view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
    <view class="nav-back" bindtap="goBack"><icon name="chevron-left" size="44" color="rgba(255,255,255,0.8)" customClass="back-icon"></icon></view>
    <text class="nav-title">我的订单</text>
    <view class="nav-placeholder"></view>
  </view>
  <view style="height: {{statusBarHeight + 44}}px;"></view>

  <view class="content">
    <view class="loading" wx:if="{{loading}}">
      <view class="skeleton"></view>
      <view class="skeleton"></view>
      <view class="skeleton"></view>
    </view>

    <view class="order-history-card" wx:elif="{{displayRows.length > 0}}">
      <view class="order-history-head">
        <image class="order-history-icon" src="/assets/icons/unlock-muted-teal.svg" mode="aspectFit"/>
      </view>
      <view class="oh-list">
        <view
          class="oh-row"
          wx:for="{{displayRows}}"
          wx:key="rowKey"
          bindtap="onOrderRowTap"
          data-index="{{index}}"
        >
          <view class="oh-left">
            <text class="oh-index">{{index + 1}}</text>
            <view class="oh-text-wrap">
              <text class="oh-title">{{item.title}}</text>
              <text class="oh-sub" wx:if="{{item.subLine}}">{{item.subLine}}</text>
            </view>
          </view>
          <text class="oh-link">{{item.actionLabel}}</text>
        </view>
      </view>
      <view
        class="oh-expand"
        wx:if="{{allRows.length > 5 && !historyExpanded}}"
        bindtap="expandHistory"
        hover-class="oh-expand-hover"
        hover-stay-time="80"
      >
        <view class="oh-triangle"></view>
      </view>
    </view>

    <view class="empty" wx:else>
      <icon name="package" size="80" color="#3a3a3c" customClass="empty-icon"></icon>
      <text class="empty-text">暂无订单</text>
    </view>
  </view>
</view>