<template>
|
<el-dialog
|
v-model="visible"
|
title="产品订单"
|
width="900px"
|
destroy-on-close
|
class="order-status-dialog"
|
:before-close="onClose"
|
>
|
<div v-loading="loading">
|
<template v-if="order">
|
<!-- 顶部步骤条 -->
|
<div class="steps-wrapper">
|
<el-steps :active="activeStep" align-center finish-status="success" process-status="process">
|
<el-step title="提交申请" :description="order.submitTime" />
|
<el-step title="待授权" />
|
<el-step title="交易确认" />
|
<el-step title="评价" />
|
</el-steps>
|
</div>
|
|
<!-- 提示语 -->
|
<div class="result-text">
|
您的产品订购申请已成功提交， 请等待授权
|
</div>
|
|
<!-- 订单信息 -->
|
<el-card class="order-info-card" shadow="never">
|
<div class="order-info-title">订单信息</div>
|
<table class="order-info-table">
|
<tbody>
|
<tr>
|
<td class="label">订单编号：</td>
|
<td class="value">{{ order.id }}</td>
|
<td class="label">申请时间：</td>
|
<td class="value">{{ order.applyTime }}</td>
|
</tr>
|
<tr>
|
<td class="label">产品名称：</td>
|
<td class="value">{{ order.productName }}</td>
|
<td class="label">提供者：</td>
|
<td class="value">{{ order.provider }}</td>
|
</tr>
|
<tr>
|
<td class="label">订单状态：</td>
|
<td class="value">{{ statusText(order.status) }}</td>
|
<td></td>
|
<td class="value link">
|
<el-link type="primary" @click="viewOrder">查看订单信息</el-link>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</el-card>
|
</template>
|
<el-empty v-else description="未找到订单信息" />
|
</div>
|
|
<template #footer>
|
<el-button type="primary" @click="onClose">关闭</el-button>
|
</template>
|
</el-dialog>
|
|
</template>
|
|
<script setup lang="ts">
|
import { ref, computed, watch } from 'vue'
|
|
interface Props {
|
modelValue: boolean
|
orderId?: string | number
|
}
|
|
type OrderStatus = 'SUBMITTED' | 'AUTHORIZED' | 'CONFIRMED' | 'EVALUATED'
|
|
interface OrderDetail {
|
id: string
|
productName: string
|
provider: string
|
status: OrderStatus
|
submitTime: string
|
applyTime: string
|
}
|
|
const props = withDefaults(defineProps<Props>(), { modelValue: false, orderId: '' })
|
const emit = defineEmits<{ (e: 'update:modelValue', v: boolean): void }>()
|
|
const visible = computed({
|
get: () => props.modelValue,
|
set: (v: boolean) => emit('update:modelValue', v)
|
})
|
|
const loading = ref(false)
|
const order = ref<OrderDetail | null>(null)
|
|
// 模拟订单数据
|
const mockOrders: Record<string, OrderDetail> = {
|
'4348442557619205545': {
|
id: '4348442557619205545',
|
productName: '中交方远智能实测实量管理系统',
|
provider: '中交建筑集团第一工程有限公司',
|
status: 'SUBMITTED',
|
submitTime: '2025-05-25 12:07:12',
|
applyTime: '2025-05-21 10:00:00'
|
}
|
}
|
|
const statusText = (s: OrderStatus) => {
|
const map: Record<OrderStatus, string> = {
|
SUBMITTED: '待授权',
|
AUTHORIZED: '已授权，待确认交易',
|
CONFIRMED: '交易已确认，待评价',
|
EVALUATED: '已完成'
|
}
|
return map[s]
|
}
|
|
const activeStep = computed(() => {
|
switch (order.value?.status) {
|
case 'SUBMITTED':
|
return 1
|
case 'AUTHORIZED':
|
return 2
|
case 'CONFIRMED':
|
return 3
|
case 'EVALUATED':
|
return 4
|
default:
|
return 1
|
}
|
})
|
|
const fetchOrderDetail = async (id: string) => {
|
loading.value = true
|
try {
|
await new Promise(resolve => setTimeout(resolve, 500))
|
order.value = mockOrders[id] || null
|
} finally {
|
loading.value = false
|
}
|
}
|
|
watch(
|
() => [visible.value, props.orderId],
|
() => {
|
if (visible.value && props.orderId) {
|
fetchOrderDetail(String(props.orderId))
|
}
|
},
|
{ immediate: true }
|
)
|
|
const onClose = () => {
|
visible.value = false
|
}
|
|
const viewOrder = () => {
|
// 仅演示
|
window.alert('这里可跳转到订单详情页（示例）')
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.order-status-dialog {
|
:deep(.el-dialog__title) {
|
font-size: 16px;
|
font-weight: 600;
|
}
|
:deep(.el-dialog__body) {
|
max-height: 70vh;
|
overflow-y: auto;
|
}
|
}
|
|
.steps-wrapper {
|
padding: 6px 8px 0 8px;
|
}
|
|
.result-text {
|
text-align: center;
|
margin: 18px 0 12px;
|
font-size: 18px;
|
color: #303133;
|
}
|
|
.order-info-card {
|
:deep(.el-card__body) {
|
padding: 0;
|
}
|
}
|
|
.order-info-title {
|
background: #f5f7fa;
|
padding: 12px 16px;
|
font-weight: 600;
|
border-bottom: 1px solid #ebeef5;
|
}
|
|
.order-info-table {
|
width: 100%;
|
border-collapse: collapse;
|
td {
|
padding: 12px 16px;
|
border-bottom: 1px solid #ebeef5;
|
}
|
.label { width: 120px; color: #606266; }
|
.value { color: #303133; }
|
.link { text-align: right; }
|
}
|
</style>
|
