132 lines
2.9 KiB
Vue
132 lines
2.9 KiB
Vue
<template>
|
|
<view class="order-list">
|
|
<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>
|
|
<text class="order-card__status" :class="`status--${order.status}`">{{ statusLabel(order.status) }}</text>
|
|
</view>
|
|
<view class="order-card__body">
|
|
<text class="order-card__price">¥{{ order.totalPrice }}</text>
|
|
<text class="order-card__time">{{ order.createdAt }}</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 STATUS_MAP: Record<string, string> = {
|
|
pending: '待支付',
|
|
paid: '已支付',
|
|
shipped: '已发货',
|
|
cancelled: '已取消',
|
|
}
|
|
|
|
function statusLabel(status: OrderStatus) {
|
|
return STATUS_MAP[status] || status
|
|
}
|
|
|
|
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;
|
|
}
|
|
.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__status {
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
}
|
|
.status--pending { color: #faad14; }
|
|
.status--paid { color: #52c41a; }
|
|
.status--shipped { color: #1890ff; }
|
|
.status--cancelled { color: #999; }
|
|
.order-card__body {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.order-card__price {
|
|
font-size: 32rpx;
|
|
color: #e4393c;
|
|
font-weight: bold;
|
|
}
|
|
.order-card__time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
.empty-tip,
|
|
.loading-tip {
|
|
text-align: center;
|
|
padding: 120rpx 0;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
}
|
|
</style>
|