yoe-shop-web/src/views/order/orderManage/detail.vue

<template>
  <div class="order-detail-container">
    <div class="page-header">
      <el-button link @click="handleBack"
        ><el-icon><ArrowLeft /></el-icon><span>返回</span></el-button
      >
      <span class="page-title">订单详情</span>
    </div>
    <div class="page-content">
      <!-- 订单进度 -->
      <div class="progress-section">
        <div class="progress-steps">
          <div
            v-for="(step, index) in progressSteps"
            :key="index"
            :class="['step-item', { active: index <= currentStep, current: index === currentStep }]"
          >
            <div class="step-icon">
              <el-icon :size="24"><component :is="step.icon" /></el-icon>
            </div>
            <div class="step-info">
              <div class="step-title">{{ step.title }}</div>
              <div class="step-desc">{{ step.desc }}</div>
              <div v-if="index <= currentStep" class="step-time">{{ step.time }}</div>
            </div>
            <div v-if="index < progressSteps.length - 1" class="step-line" :class="{ active: index < currentStep }"></div>
          </div>
        </div>
      </div>
      <!-- 商品信息 -->
      <div class="section">
        <div class="section-title"><i class="title-bar"></i>商品信息</div>
        <el-table :data="productList" border style="width: 100%">
          <el-table-column label="商品信息" min-width="300">
            <template #default="{ row }">
              <div class="product-cell">
                <div class="product-image">
                  <el-image :src="row.image" fit="contain"
                    ><template #error
                      ><div class="image-placeholder">
                        <el-icon :size="30" color="#ccc"><Picture /></el-icon></div></template
                  ></el-image>
                </div>
                <div class="product-info">
                  <div class="product-name">{{ row.name }}</div>
                  <div class="product-spec">{{ row.spec1 }} {{ row.spec2 }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价" width="100" align="center"
            ><template #default="{ row }">¥{{ row.price }}</template></el-table-column
          >
          <el-table-column label="数量" width="150" align="center"
            ><template #default="{ row }"><el-input-number v-model="row.quantity" :min="1" size="small" :controls="false" disabled /></template
          ></el-table-column>
          <el-table-column prop="subtotal" label="小计" width="100" align="center"
            ><template #default="{ row }">¥{{ row.subtotal }}</template></el-table-column
          >
          <!-- <el-table-column label="操作" width="80" align="center"
            ><template #default><el-button type="danger" link size="small">清除</el-button></template></el-table-column
          > -->
        </el-table>
        <div class="product-summary">
          共{{ productList.length }}件商品 运费：¥{{ orderInfo.freight }} 共计<span class="total-price">¥{{ orderInfo.totalAmount }}</span>
        </div>
      </div>
      <!-- 收货地址 -->
      <div class="section">
        <div class="section-title"><i class="title-bar"></i>收货地址</div>
        <div class="address-card">
          <div class="address-detail">{{ orderInfo.address }}</div>
          <div class="address-name">{{ orderInfo.receiverName }}</div>
          <div class="address-phone">{{ orderInfo.receiverPhone }}</div>
        </div>
      </div>
      <!-- 其他信息 -->
      <div class="section">
        <div class="section-title"><i class="title-bar"></i>其他信息</div>
        <div class="info-table">
          <div class="info-row">
            <span class="info-label">配送时间</span><span class="info-value">{{ orderInfo.deliveryTime }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">采购事由</span><span class="info-value">{{ orderInfo.purchaseReason || '-' }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">费用类型</span><span class="info-value">{{ orderInfo.costType || '-' }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">订单备注</span><span class="info-value">{{ orderInfo.remark || '-' }}</span>
          </div>
        </div>
      </div>
      <!-- 发票信息 -->
      <div class="section">
        <div class="section-title"><i class="title-bar"></i>发票信息</div>
        <div class="info-table">
          <div class="info-row">
            <span class="info-label">发票类型</span><span class="info-value">{{ invoiceInfo.type || '-' }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">发票抬头</span><span class="info-value">{{ invoiceInfo.title || '-' }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">纳税人识别号</span><span class="info-value">{{ invoiceInfo.taxNo || '-' }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">注册地址</span><span class="info-value">{{ invoiceInfo.registerAddress || '-' }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">注册电话</span><span class="info-value">{{ invoiceInfo.registerPhone || '-' }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">开户银行</span><span class="info-value">{{ invoiceInfo.bankName || '-' }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">银行账号</span><span class="info-value">{{ invoiceInfo.bankAccount || '-' }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ArrowLeft, Document, User, CircleCheck, Picture } from '@element-plus/icons-vue';
import { getOrderInfo, getOrderProducts, getOrderFlowNodes } from '@/api/pc/enterprise/order';
import { getAddressInfo } from '@/api/pc/enterprise/address';
import { getInvoiceList } from '@/api/pc/enterprise/invoice';
import { getContactInfo } from '@/api/pc/organization/index';
import { ElMessage } from 'element-plus';
import type { OrderCustomerFlowNodeLink } from '@/api/pc/enterprise/orderTypes';

const router = useRouter();
const route = useRoute();

// 格式化时间为 "2026/3/17 上午10:49" 格式
const formatTime = (timeStr: string): string => {
  if (!timeStr) return '';
  const date = new Date(timeStr);
  if (isNaN(date.getTime())) return timeStr;
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'numeric',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    hour12: true
  });
};
const orderId = ref<any>(0);
const currentStep = ref(1);
const loading = ref(false);

const progressSteps = ref<{ title: string; icon: any; desc: string; time: string; reviewStatus?: number }[]>([
  { title: '提交订单', icon: Document, desc: '订单已提交', time: '', reviewStatus: 2 },
  { title: '完成', icon: CircleCheck, desc: '交易完成', time: '', reviewStatus: 0 }
]);

// 订单时间信息（用于流程节点时间显示）
const orderTimeInfo = reactive({
  createTime: '', // 订单创建时间（提交订单节点）
  updateTime: ''  // 订单更新时间（完成节点）
});

// 根据 handlerId（逗号分隔的多个ID）解析审批人名称
// 单人：返回姓名；多人：返回"xx或xx审核"
const resolveHandlerName = async (handlerId: string): Promise<string> => {
  if (!handlerId) return '';
  const ids = handlerId.split(',').map((s) => s.trim()).filter(Boolean);
  if (ids.length === 0) return '';
  try {
    const results = await Promise.all(
      ids.map((id) => getContactInfo(String(id)).catch(() => null))
    );
    const names = results
      .map((res: any) => res?.data?.contactName || '')
      .filter(Boolean);
    if (names.length === 0) return '';
    if (names.length === 1) return names[0];
    return names.join('或') + '审核';
  } catch {
    return '';
  }
};


// 加载审批流程节点
const loadFlowNodes = async () => {
  try {
    const res = await getOrderFlowNodes(orderId.value) as any;
    if (res.code === 200) {
      const apiNodes: OrderCustomerFlowNodeLink[] = res.data || [];

      // 提交订单节点：显示订单的 createTime
      const steps: { title: string; icon: any; desc: string; time: string; reviewStatus?: number }[] = [
        { title: '提交订单', icon: Document, desc: '订单已提交', time: formatTime(orderTimeInfo.createTime), reviewStatus: 2 }
      ];

      // 并行解析所有节点的审批人名称
      const handlerNames = await Promise.all(
        apiNodes.map((node) => resolveHandlerName(node.handlerId || node.handlerName || ''))
      );

      apiNodes.forEach((node, idx) => {
        steps.push({
          title: node.nodeName || '审批',
          icon: User,
          desc: handlerNames[idx] || '',
          time: formatTime(node.updateTime || ''),
          reviewStatus: node.reviewStatus ?? 0
        });
      });

      // 完成节点：显示订单的 updateTime
      steps.push({ title: '完成', icon: CircleCheck, desc: '交易完成', time: formatTime(orderTimeInfo.updateTime), reviewStatus: 0 });

      progressSteps.value = steps;

      // 计算当前步骤：找最后一个已处理节点的索引（reviewStatus > 0）
      let lastActiveIndex = 0;
      steps.forEach((step, idx) => {
        if (step.reviewStatus && step.reviewStatus > 0) {
          lastActiveIndex = idx;
        }
      });
      // 若所有中间节点均已完成（reviewStatus === 2），则激活结束节点
      const middleNodes = steps.slice(1, steps.length - 1);
      if (middleNodes.length > 0 && middleNodes.every((s) => s.reviewStatus === 2)) {
        lastActiveIndex = steps.length - 1;
      }
      currentStep.value = lastActiveIndex;
    }
  } catch (error) {
    console.error('加载流程节点失败', error);
  }
};

const productList = ref<any[]>([]);

const orderInfo = reactive({
  freight: '0.00',
  totalAmount: '0.00',
  address: '',
  receiverName: '',
  receiverPhone: '',
  deliveryTime: '',
  purchaseReason: '',
  costType: '',
  remark: ''
});

const invoiceInfo = reactive({
  type: '',
  title: '',
  taxNo: '',
  registerAddress: '',
  registerPhone: '',
  bankName: '',
  bankAccount: ''
});

// 加载订单详情
const loadOrderDetail = async () => {
  try {
    loading.value = true;
    const res = await getOrderInfo(orderId.value);
    if (res.code === 200 && res.data) {
      const order = res.data;
      // 映射订单信息
      orderInfo.freight = order.shippingFee || '0.00';
      orderInfo.totalAmount = order.payableAmount || '0.00';
      orderInfo.deliveryTime = order.expectedDeliveryTime || '';
      orderInfo.purchaseReason = order.purchaseReason || '';
      orderInfo.remark = order.remark || '';

      // 保存订单时间信息（用于流程节点时间显示）
      orderTimeInfo.createTime = order.createTime || '';
      orderTimeInfo.updateTime = order.updateTime || '';
      // 获取商品信息
      const productsRes = await getOrderProducts([orderId.value]);
      if (productsRes.code === 200 && productsRes.rows) {
        productList.value = productsRes.rows.map((p: any) => ({
          id: p.id,
          name: p.productName || '',
          spec1: p.productUnit || '',
          spec2: p.productNo || '',
          price: p.orderPrice || '0.00',
          quantity: p.orderQuantity || 1,
          subtotal: (parseFloat(p.orderPrice || '0') * (p.orderQuantity || 1)).toFixed(2),
          image: p.productImage || ''
        }));
      }

      // 获取收货地址信息
      if (order.shippingAddressId) {
        const addressRes = await getAddressInfo(order.shippingAddressId);
        if (addressRes.code === 200 && addressRes.data) {
          orderInfo.address = addressRes.data.address || '';
          orderInfo.receiverName = addressRes.data.consignee || '';
          orderInfo.receiverPhone = addressRes.data.phone || '';
        }
      }

      // 获取发票信息
      const invoiceRes = await getInvoiceList({ pageNum: 1, pageSize: 1 });
      if (invoiceRes.code === 200 && invoiceRes.rows && invoiceRes.rows.length > 0) {
        const invoice = invoiceRes.rows[0];
        invoiceInfo.type = order.invoiceType || '';
        invoiceInfo.title = order.customerName || '';
        invoiceInfo.taxNo = invoice.taxId || '';
        invoiceInfo.registerAddress = invoice.address || '';
        invoiceInfo.registerPhone = invoice.phone || '';
        invoiceInfo.bankName = invoice.bankName || '';
        invoiceInfo.bankAccount = invoice.bankAccount || '';
      }
    }
  } catch (error) {
    ElMessage.error('加载订单详情失败');
  } finally {
    loading.value = false;
  }
};

onMounted(async () => {
  const paramId = route.query.orderId;
  // 直接使用字符串，不转换为数字，避免精度丢失
  orderId.value = paramId as string;
  if (orderId.value) {
    // 先加载订单详情（获取 createTime/updateTime），再加载流程节点
    await loadOrderDetail();
    loadFlowNodes();
  } else {
    console.error('订单ID无效，无法加载订单详情');
  }
});
const handleBack = () => {
  router.push('/order/orderManage');
};
</script>

<style scoped lang="scss">
.order-detail-container {
  flex: 1;
  background: #f5f5f5;
  min-height: 100%;
}
.page-header {
  background: #fff;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #eee;
  .page-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
}
.page-content {
  padding: 20px;
}
.progress-section {
  background: #fff;
  border-radius: 8px;
  padding: 30px 50px;
  margin-bottom: 15px;
  .progress-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    .step-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      flex: 1;
      .step-icon {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        margin-bottom: 10px;
        position: relative;
        z-index: 1;
      }
      &.active .step-icon {
        background: #e60012;
        color: #fff;
      }
      &.current .step-icon::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #e60012;
      }
      .step-info {
        text-align: center;
        .step-title {
          font-size: 14px;
          color: #999;
          margin-bottom: 5px;
        }
        .step-desc {
          font-size: 12px;
          color: #666;
          margin-bottom: 3px;
        }
        .step-time {
          font-size: 12px;
          color: #999;
        }
      }
      &.active .step-info .step-title {
        color: #333;
      }
      .step-line {
        position: absolute;
        top: 25px;
        left: calc(50% + 30px);
        width: calc(100% - 60px);
        height: 2px;
        background: #eee;
        &.active {
          background: #e60012;
        }
      }
      &:last-child .step-line {
        display: none;
      }
    }
  }
}
.section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  .section-title {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
  }
}
.title-bar {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #e60012;
  border-radius: 2px;
}
.product-cell {
  display: flex;
  align-items: center;
  gap: 15px;
  .product-image {
    width: 80px;
    height: 80px;
    background: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    .el-image {
      width: 100%;
      height: 100%;
    }
    .image-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .product-info {
    .product-name {
      font-size: 14px;
      color: #333;
      margin-bottom: 5px;
      line-height: 1.4;
    }
    .product-spec {
      font-size: 12px;
      color: #999;
    }
  }
}
.product-summary {
  text-align: right;
  padding: 15px 0;
  font-size: 14px;
  color: #666;
  .total-price {
    font-size: 18px;
    font-weight: bold;
    color: #e60012;
    margin-left: 5px;
  }
}
.address-card {
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  .address-detail {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
  }
  .address-name {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
  }
  .address-phone {
    font-size: 14px;
    color: #666;
  }
}
.info-table {
  .info-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    &:last-child {
      border-bottom: none;
    }
    .info-label {
      width: 100px;
      font-size: 14px;
      color: #999;
      flex-shrink: 0;
    }
    .info-value {
      flex: 1;
      font-size: 14px;
      color: #333;
    }
  }
}
</style>