fix: 修复用户详情页订单列表字段映射错误
Build and Deploy Vue3 / build (push) Successful in 4m30s
Build and Deploy Vue3 / deploy (push) Successful in 50s

- state替代status、CreatedAt替代created_at

- 新增订单类型列(create/renew/upgrade)与到期时间列

- 金额列显示续费价格、详情跳转改用row.id

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
shiran
2026-06-19 21:37:49 +08:00
parent bdf6dd9382
commit a8954bd85d
+36 -15
View File
@@ -181,18 +181,29 @@
</el-tab-pane>
<el-tab-pane label="订单列表" name="3">
<el-table :data="userOrderList" v-loading="orderListLoading" stripe style="width: 100%">
<el-table-column prop="id" label="订单ID" width="100" />
<el-table-column prop="name" label="商品名称" min-width="150" show-overflow-tooltip />
<el-table-column prop="price" label="金额" width="100">
<template #default="{row}">¥{{ (row.price / 100).toFixed(2) }}</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="100">
<el-table-column prop="id" label="订单ID" width="80" />
<el-table-column prop="name" label="商品名称" min-width="180" show-overflow-tooltip />
<el-table-column label="类型" width="80">
<template #default="{row}">
<el-tag :type="getOrderStatusType(row.status)" size="small">{{ getOrderStatusText(row.status) }}</el-tag>
<el-tag :type="getOrderTypeTag(row.type)" size="small">{{ getOrderTypeText(row.type) }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="created_at" label="创建时间" width="160">
<template #default="{row}">{{ formatDate(row.created_at) }}</template>
<el-table-column label="金额" width="120">
<template #default="{row}">
<span>¥{{ (row.price / 100).toFixed(2) }}</span>
<div v-if="row.renewPrice" style="font-size:12px;color:#909399">续费价: ¥{{ (row.renewPrice / 100).toFixed(2) }}</div>
</template>
</el-table-column>
<el-table-column label="状态" width="90">
<template #default="{row}">
<el-tag :type="getOrderStatusType(row.state)" size="small">{{ getOrderStatusText(row.state) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="到期时间" width="160">
<template #default="{row}">{{ row.expireTime ? formatDate(row.expireTime) : '-' }}</template>
</el-table-column>
<el-table-column label="创建时间" width="160">
<template #default="{row}">{{ formatDate(row.CreatedAt) }}</template>
</el-table-column>
<el-table-column label="操作" width="80" fixed="right">
<template #default="scope">
@@ -1017,7 +1028,6 @@ const fetchUserOrderList = async () => {
page: orderListPage.value,
count: orderListPageSize.value
})
console.log('111',res)
if (res.data.code === 200) {
userOrderList.value = res.data.data.list || []
orderListTotal.value = res.data.data.all_count || 0
@@ -1119,14 +1129,25 @@ const fetchUserBalance = async () => {
}
// 订单状态
const getOrderStatusText = (status) => {
const getOrderStatusText = (state) => {
const map = { 0: '待支付', 1: '已支付', 2: '已取消', 3: '已退款', 4: '已完成' }
return map[status] || '未知'
return map[state] || '未知'
}
const getOrderStatusType = (status) => {
const getOrderStatusType = (state) => {
const map = { 0: 'warning', 1: 'success', 2: 'info', 3: 'danger', 4: 'success' }
return map[status] || 'info'
return map[state] || 'info'
}
// 订单类型
const getOrderTypeText = (type) => {
const map = { create: '新购', renew: '续费', upgrade: '升级' }
return map[type] || type || '未知'
}
const getOrderTypeTag = (type) => {
const map = { create: 'primary', renew: 'success', upgrade: 'warning' }
return map[type] || 'info'
}
// 工单状态
@@ -1144,7 +1165,7 @@ const getTicketStatusType = (status) => {
const handleViewOrder = (row) => {
router.push({
path: '/order/list',
query: { order_id: row.order_id }
query: { order_id: row.id }
})
}