yxe-mp/pages/order/list.vue

<template>
  <view class="order-list-page">
    <view class="page-hero">
      <AppNavbar title="订单列表" show-back/>
    </view>

    <view class="card block">
      <view v-if="loading" class="empty">加载中...</view>
      <view v-else-if="orders.length === 0" class="empty">暂无订单</view>
      <view v-else class="order-list">
        <view class="order-card" v-for="order in orders" :key="order.orderId">
          <view class="order-head">
            <view class="order-no">订单号：{{ getOrderNo(order) }}</view>
            <view class="order-status">{{ statusLabel(order.orderStatus) }}</view>
          </view>
          <view v-if="order.createTime || order.createdAt" class="order-time">
            下单时间：{{ order.createTime || order.createdAt }}
          </view>
          <view class="order-items">
            <view class="order-item" v-for="(item, idx) in getOrderItems(order)" :key="idx">
              <view class="item-name">{{ item.goodsName || item.name || item.title }}</view>
              <view class="item-meta">x {{ item.num || item.qty || 1 }}</view>
              <view class="item-price">¥{{ formatPrice(item.salePrice || item.price || item.amount || 0) }}</view>
            </view>
          </view>
          <view class="order-footer">
            <view class="order-total">合计：¥{{ formatPrice(order.totalAmount || order.amount || order.totalPrice || 0) }}</view>
            <view class="ghost-btn" @tap="goDetail(order)">查看详情</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {orderListReq} from "@/api/goods";
import AppNavbar from "@/components/AppNavbar.vue";

export default {
  components: {AppNavbar},
  data() {
    return {
      orders: [],
      loading: false
    }
  },
  onShow() {
    this.fetchOrders()
  },
  methods: {
    async fetchOrders() {
      this.loading = true
      try {
        const {data} = await orderListReq()
        this.orders = Array.isArray(data) ? data : (data && data.list ? data.list : [])
      } catch (err) {
        uni.showToast({
          title: '订单加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    getOrderItems(order) {
      return order.goodsList || order.items || order.orderItems || []
    },
    getOrderNo(order) {
      return order.orderNo || order.order_no || order.no || order.id || ''
    },
    statusLabel(status) {
      if (status === 1) return '待支付'
      if (status === 2) return '待发货'
      if (status === 3 ) return '已发货'
      if (status === 4 ) return '已完成'
      if (status === 5 ) return '退款中'
      if (status === 6 ) return '退款成功'
      if (status === 7 ) return '退款失败'
      if (status === 0 ) return '已取消'
      return status || '状态未知'
    },
    formatPrice(value) {
      const num = Number(value || 0)
      return num.toFixed(2)
    },
    goDetail(order) {
      console.log(order.orderId)
      uni.navigateTo({
        url: `/pages/order/detail?id=${order.orderId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order-list-page {
  min-height: 100vh;
  //padding: 0 20rpx 40rpx;
  background: #f5f5f5;
}

.page-hero {
  //padding: 30rpx 6rpx 18rpx;
  background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat
    top center / 100% auto;
}

.page-navbar {
  padding: 0 6rpx;
}

.intro-card {
  margin: 18rpx 20rpx 0;
  padding: 20rpx 18rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 12rpx;
  font-size: 28rpx;
  font-weight: 700;
  color: #1f2937;
}

.title-bar {
  width: 6rpx;
  height: 30rpx;
  border-radius: 999rpx;
  background: #2fc6a7;
}

.intro-text {
  margin-top: 12rpx;
  font-size: 26rpx;
  color: #6b7280;
  line-height: 1.6;
}

.block {
  margin: 18rpx 20rpx 0;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 14rpx;
}

.order-card {
  border: 1rpx solid #e7eef8;
  border-radius: 16rpx;
  padding: 16rpx;
  background: #ffffff;
}

.order-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-no {
  color: var(--text-main);
  font-weight: 700;
}

.order-status {
  color: var(--brand-primary);
  font-size: 24rpx;
}

.order-time {
  margin-top: 6rpx;
  color: var(--text-sub);
  font-size: 24rpx;
}

.order-items {
  margin-top: 12rpx;
  border-top: 1rpx dashed #e7eef8;
  padding-top: 12rpx;
}

.order-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6rpx;
  font-size: 24rpx;
}

.order-item:last-child {
  margin-bottom: 0;
}

.item-name {
  color: var(--text-main);
  flex: 1;
}

.item-meta {
  color: var(--text-sub);
  margin: 0 12rpx;
}

.item-price {
  color: #ff3b30;
}

.order-footer {
  margin-top: 12rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-total {
  color: var(--text-main);
  font-weight: 700;
}

.ghost-btn {
  color: var(--brand-primary);
  border: 1rpx solid var(--brand-primary);
  padding: 6rpx 16rpx;
  border-radius: 999rpx;
  font-size: 24rpx;
}

.empty {
  color: var(--text-sub);
  text-align: center;
  padding: 16rpx 0;
}
</style>