JewelryMall/miniprogram/pages/order/list.vue

<template>
  <view class="order-list">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="custom-navbar__content" :style="{ height: navBarHeight + 'px' }">
        <image class="custom-navbar__back" src="/static/ic_back.png" mode="aspectFit" @click="goBack" />
        <text class="custom-navbar__title">我的订单</text>
        <view class="custom-navbar__placeholder" />
      </view>
    </view>
    <view :style="{ height: (statusBarHeight + navBarHeight) + 'px' }" />
    <view v-if="orders.length === 0 && !loading" class="empty-tip">
      <text>暂无订单</text>
    </view>

    <view
      v-for="order in orders"
      :key="order.id"
      class="order-card"
      @click="goDetail(order.id)"
    >
      <view class="order-card__header">
        <text class="order-card__no">订单号：{{ order.orderNo }}</text>
      </view>
      <view class="order-card__body">
        <text class="order-card__time">{{ formatTime(order.createdAt) }}</text>
        <text class="order-card__price">¥{{ order.totalPrice }}</text>
      </view>
    </view>

    <view v-if="loading" class="loading-tip">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
// @ts-ignore - uni-app 页面生命周期
import { onShow } from '@dcloudio/uni-app'
import type { Order, OrderStatus } from '../../types'
import { getOrderList } from '../../api/order'
import { useOrderStore } from '../../store/order'

const orderStore = useOrderStore()
const orders = ref<Order[]>([])
const loading = ref(false)

const statusBarHeight = ref(20)
const navBarHeight = ref(44)
try {
  const sysInfo = uni.getSystemInfoSync()
  statusBarHeight.value = sysInfo.statusBarHeight || 20
  // #ifdef MP-WEIXIN
  const menuBtn = uni.getMenuButtonBoundingClientRect()
  navBarHeight.value = (menuBtn.top - (sysInfo.statusBarHeight || 20)) * 2 + menuBtn.height
  // #endif
} catch { /* fallback */ }

function goBack() {
  uni.navigateBack({ delta: 1 })
}

const STATUS_MAP: Record<string, string> = {
  pending: '待支付',
  paid: '已支付',
  shipped: '已发货',
  cancelled: '已取消',
}

function statusLabel(status: OrderStatus) {
  return STATUS_MAP[status] || status
}

function formatTime(iso: string): string {
  const d = new Date(iso)
  const Y = d.getFullYear()
  const M = String(d.getMonth() + 1).padStart(2, '0')
  const D = String(d.getDate()).padStart(2, '0')
  const h = String(d.getHours()).padStart(2, '0')
  const m = String(d.getMinutes()).padStart(2, '0')
  return `${Y}-${M}-${D} ${h}:${m}`
}

function goDetail(id: number) {
  uni.navigateTo({ url: `/pages/order/detail?id=${id}` })
}

async function loadOrders() {
  loading.value = true
  try {
    const data = await getOrderList()
    orders.value = data
    orderStore.setOrders(data)
  } catch {
    uni.showToast({ title: '加载订单失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

// 页面首次加载
onMounted(() => {
  loadOrders()
})

// 页面每次显示时刷新（从详情页返回、后台修改后重新进入）
onShow(() => {
  loadOrders()
})
</script>

<style scoped>
.order-list {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 16rpx;
}
.custom-navbar {
  background: linear-gradient(to right, #FFCFDE, #FFA6C4);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.custom-navbar__content {
  display: flex;
  align-items: center;
  padding: 0 24rpx;
}
.custom-navbar__back {
  width: 44rpx;
  height: 44rpx;
}
.custom-navbar__title {
  flex: 1;
  text-align: center;
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}
.custom-navbar__placeholder {
  width: 44rpx;
}
.order-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
}
.order-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.order-card__no {
  font-size: 26rpx;
  color: #666;
}
.order-card__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-card__time {
  font-size: 24rpx;
  color: #999;
}
.order-card__price {
  font-size: 32rpx;
  color: #e4393c;
  font-weight: bold;
}
.empty-tip,
.loading-tip {
  text-align: center;
  padding: 120rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>