Initial commit: 商品售卖网站
This commit is contained in:
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="orders-page">
|
||||
<BackNav />
|
||||
<div class="table-card">
|
||||
<el-table :data="orders">
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="total_amount" :label="$t('order.totalAmount')" width="120">
|
||||
<template #default="{ row }">¥{{ row.total_amount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" :label="$t('order.status')" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="statusType(row.status)">{{ statusText(row.status) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" width="180">
|
||||
<template #default="{ row }">{{ formatDate(row.created_at) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('common.edit')" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click="$router.push(`/orders/${row.id}`)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { orderApi } from '../../api'
|
||||
import BackNav from '../../components/BackNav.vue'
|
||||
|
||||
const orders = ref<any[]>([])
|
||||
|
||||
const statusMap: Record<string, string> = {
|
||||
pending_payment: '待支付', pending_confirm: '待确认', pending_ship: '待发货',
|
||||
shipped: '已发货', completed: '已完成', refunding: '退款中', refunded: '已退款', cancelled: '已取消',
|
||||
}
|
||||
const statusTypeMap: Record<string, string> = {
|
||||
pending_payment: 'warning', pending_confirm: 'info', pending_ship: 'info',
|
||||
shipped: 'primary', completed: 'success', refunding: 'danger', refunded: 'danger', cancelled: 'info',
|
||||
}
|
||||
function statusText(s: string) { return statusMap[s] || s }
|
||||
function statusType(s: string) { return statusTypeMap[s] || 'info' }
|
||||
|
||||
function formatDate(date: string) {
|
||||
if (!date) return '-'
|
||||
const d = new Date(date)
|
||||
const year = d.getFullYear()
|
||||
const month = String(d.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getDate()).padStart(2, '0')
|
||||
const hours = String(d.getHours()).padStart(2, '0')
|
||||
const minutes = String(d.getMinutes()).padStart(2, '0')
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}`
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const res: any = await orderApi.list()
|
||||
orders.value = res.data || []
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.orders-page { padding: 0; }
|
||||
.table-card { background: #2d2d44; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 20px; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user