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>
|
|||
|
|
|
|||
|
|
|