104 lines
3.6 KiB
Vue
104 lines
3.6 KiB
Vue
<template>
|
||
<div class="order-detail-page">
|
||
<h2 class="title">订单详情</h2>
|
||
<div v-if="loading" class="loading">加载中...</div>
|
||
<div v-else>
|
||
<el-card class="section">
|
||
<div class="row"><span class="label">订单ID：</span><span class="value mono">{{ order.id || '—' }}</span></div>
|
||
<div class="row"><span class="label">订单号：</span><span class="value mono">{{ order.orderNumber || '—' }}</span></div>
|
||
<div class="row"><span class="label">状态：</span><span class="value">{{ order.status }}</span></div>
|
||
<div class="row"><span class="label">金额(USDT)：</span><span class="value strong">{{ order.totalPrice }}</span></div>
|
||
<div class="row"><span class="label">创建时间：</span><span class="value">{{ formatDateTime(order.createTime) }}</span></div>
|
||
</el-card>
|
||
|
||
<el-card class="section" style="margin-top:12px;">
|
||
<div class="sub-title">机器列表</div>
|
||
<el-table :data="items" border size="small" style="width:100%"
|
||
:header-cell-style="{ textAlign: 'left' }" :cell-style="{ textAlign: 'left' }">
|
||
<el-table-column prop="productMachineId" label="机器ID" min-width="120" />
|
||
<el-table-column prop="name" label="名称" min-width="160" />
|
||
<el-table-column prop="payCoin" label="币种" min-width="100" />
|
||
<el-table-column prop="leaseTime" label="租赁天数" min-width="100" />
|
||
<el-table-column prop="price" label="单价(USDT)" min-width="120" />
|
||
<el-table-column prop="address" label="收款地址" min-width="240" />
|
||
</el-table>
|
||
</el-card>
|
||
|
||
<div class="actions">
|
||
<el-button @click="$router.back()">返回</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getOrdersByIds } from '../../api/order'
|
||
|
||
export default {
|
||
name: 'AccountOrderDetail',
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
order: {},
|
||
items: []
|
||
}
|
||
},
|
||
created() {
|
||
this.load()
|
||
},
|
||
methods: {
|
||
async load() {
|
||
const id = this.$route.params.id
|
||
if (!id) {
|
||
this.$message({
|
||
message: '订单ID缺失',
|
||
type: 'error',
|
||
showClose: true
|
||
})
|
||
return
|
||
}
|
||
try {
|
||
this.loading = true
|
||
const res = await getOrdersByIds({ orderId: id })
|
||
const payload = (res && res.data) != null ? res.data : res
|
||
let one = {}
|
||
if (Array.isArray(payload) && payload.length) one = payload[0]
|
||
else if (payload && typeof payload === 'object') one = payload
|
||
else if (Array.isArray(res && res.rows) && res.rows.length) one = res.rows[0]
|
||
this.order = one || {}
|
||
this.items = Array.isArray(one && one.orderItemDtoList) ? one.orderItemDtoList : []
|
||
} catch (e) {
|
||
console.log('获取订单详情失败')
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
}
|
||
,
|
||
formatDateTime(value) {
|
||
if (!value) return '—'
|
||
try {
|
||
const str = String(value)
|
||
return str.includes('T') ? str.replace('T', ' ') : str
|
||
} catch (e) {
|
||
return String(value)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.order-detail-page { padding: 12px; }
|
||
.title { margin: 0 0 12px 0; font-weight: 600; color: #2c3e50; }
|
||
.sub-title { font-weight: 600; margin-bottom: 8px; }
|
||
.section { margin-bottom: 12px; }
|
||
.row { display: flex; gap: 8px; line-height: 1.8; }
|
||
.label { color: #666; }
|
||
.value { color: #333; }
|
||
.value.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; word-break: break-all; }
|
||
.value.strong { font-weight: 700; color: #e74c3c; }
|
||
.actions { margin-top: 12px; }
|
||
</style>
|
||
|
||
|