feat: complete phase 5 merchant delivery

2026-09-01 14:24:00 +08:00
parent 47fdb67bb1
commit 159b1053a2
9 changed files with 698 additions and 8 deletions
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ArrowLeft } from '@lucide/vue'
+import dayjs from 'dayjs'
+import { getDeliveryOrder, type DeliveryOrderDetail, type DeliveryOrderItem } from '../api/deliveryOrders'
+
+const props = defineProps<{ deliveryNo: string }>()
+const router = useRouter()
+const loading = ref(false)
+const errorMessage = ref('')
+const detail = ref<DeliveryOrderDetail | null>(null)
+
+const items = computed<DeliveryOrderItem[]>(() => {
+  const value = detail.value?.items
+  if (!value) return []
+  return Array.isArray(value) ? value : value.records
+})
+
+function display(value: string | number | null | undefined) {
+  return value === null || value === undefined || value === '' ? '—' : String(value)
+}
+
+function formatDateTime(value: string | null | undefined) {
+  return value ? dayjs(value).format('YYYY-MM-DD HH:mm') : '—'
+}
+
+function formatQuantity(value: number | null | undefined, unit: string) {
+  return value === null || value === undefined ? '—' : `${value} ${unit}`
+}
+
+async function loadDetail() {
+  loading.value = true
+  errorMessage.value = ''
+  try {
+    detail.value = await getDeliveryOrder(props.deliveryNo)
+  } catch (error) {
+    detail.value = null
+    errorMessage.value = error instanceof Error ? error.message : '派送单详情加载失败，请重试'
+  } finally {
+    loading.value = false
+  }
+}
+
+function backToList() {
+  void router.push({ name: 'orders-delivery' })
+}
+
+onMounted(loadDetail)
+</script>
+
+<template>
+  <section class="delivery-page" aria-labelledby="delivery-detail-title">
+    <button type="button" class="delivery-back" @click="backToList"><ArrowLeft :size="16" />返回派送单列表</button>
+    <div class="delivery-heading"><div><h2 id="delivery-detail-title">派送单详情</h2><p>{{ display(detail?.deliveryNo || deliveryNo) }}</p></div></div>
+
+    <div v-if="errorMessage" class="delivery-card delivery-state delivery-state--error" role="alert"><p>{{ errorMessage }}</p><el-button @click="loadDetail">重试</el-button></div>
+    <div v-else v-loading="loading" class="delivery-detail-content">
+      <template v-if="detail">
+        <section class="delivery-card delivery-section">
+          <h3>订单信息</h3>
+          <div class="delivery-detail-grid">
+            <div><span>派送单号</span><strong>{{ display(detail.deliveryNo) }}</strong></div>
+            <div><span>排车单号</span><strong>{{ display(detail.dispatchNo) }}</strong></div>
+            <div><span>出库单号</span><strong>{{ display(detail.outboundNo) }}</strong></div>
+            <div><span>状态</span><strong>{{ display(detail.status) }}</strong></div>
+            <div><span>海外仓</span><strong>{{ display(detail.overseasWarehouseName) }}</strong></div>
+            <div><span>派送方式</span><strong>{{ display(detail.deliveryMethod) }}</strong></div>
+            <div><span>提货方式</span><strong>{{ display(detail.pickupMethod) }}</strong></div>
+            <div><span>装载类型</span><strong>{{ display(detail.loadingType) }}</strong></div>
+            <div><span>托盘数</span><strong>{{ formatQuantity(detail.palletCount, '托') }}</strong></div>
+            <div><span>箱数</span><strong>{{ formatQuantity(detail.packageCount, '箱') }}</strong></div>
+            <div><span>总重量</span><strong>{{ formatQuantity(detail.totalWeightKg, 'kg') }}</strong></div>
+            <div><span>总体积</span><strong>{{ formatQuantity(detail.totalVolumeCbm, 'm³') }}</strong></div>
+          </div>
+        </section>
+
+        <section class="delivery-card delivery-section">
+          <h3>运输与预约</h3>
+          <div class="delivery-detail-grid">
+            <div><span>运单号</span><strong>{{ display(detail.waybillNo) }}</strong></div>
+            <div><span>承运商</span><strong>{{ display(detail.carrierName) }}</strong></div>
+            <div><span>车型</span><strong>{{ display(detail.vehicleType) }}</strong></div>
+            <div><span>车辆尺寸</span><strong>{{ display(detail.vehicleSize) }}</strong></div>
+            <div><span>车牌号</span><strong>{{ display(detail.vehiclePlate) }}</strong></div>
+            <div><span>司机姓名</span><strong>{{ display(detail.driverName) }}</strong></div>
+            <div><span>司机电话</span><strong>{{ display(detail.driverPhone) }}</strong></div>
+            <div><span>预约账号</span><strong>{{ display(detail.appointmentAccount) }}</strong></div>
+            <div><span>卖家名称</span><strong>{{ display(detail.sellerName) }}</strong></div>
+            <div><span>计划派送</span><strong>{{ formatDateTime(detail.plannedDeliveryAt) }}</strong></div>
+            <div><span>预计到达</span><strong>{{ formatDateTime(detail.expectedArrivalAt) }}</strong></div>
+            <div><span>签收时间</span><strong>{{ formatDateTime(detail.signedAt) }}</strong></div>
+            <div><span>创建时间</span><strong>{{ formatDateTime(detail.createdAt) }}</strong></div>
+            <div><span>更新时间</span><strong>{{ formatDateTime(detail.updatedAt) }}</strong></div>
+            <div class="delivery-span-all"><span>备注</span><strong>{{ display(detail.remark) }}</strong></div>
+          </div>
+        </section>
+
+        <section class="delivery-card delivery-section">
+          <h3>货物明细</h3>
+          <el-table :data="items" empty-text="暂无货物明细">
+            <el-table-column prop="palletNo" label="托盘码" min-width="150"><template #default="{ row }">{{ display(row.palletNo) }}</template></el-table-column>
+            <el-table-column prop="inboundCode" label="入仓码" min-width="150"><template #default="{ row }">{{ display(row.inboundCode) }}</template></el-table-column>
+            <el-table-column prop="skuCode" label="SKU" min-width="140"><template #default="{ row }">{{ display(row.skuCode) }}</template></el-table-column>
+            <el-table-column prop="productName" label="品名" min-width="180"><template #default="{ row }">{{ display(row.productName) }}</template></el-table-column>
+            <el-table-column prop="packageCount" label="箱数" width="100"><template #default="{ row }">{{ display(row.packageCount) }}</template></el-table-column>
+            <el-table-column prop="weightKg" label="重量(kg)" width="120"><template #default="{ row }">{{ display(row.weightKg) }}</template></el-table-column>
+            <el-table-column prop="volumeCbm" label="体积(m³)" width="120"><template #default="{ row }">{{ display(row.volumeCbm) }}</template></el-table-column>
+          </el-table>
+        </section>
+
+        <section class="delivery-card delivery-section">
+          <h3>费用明细</h3>
+          <el-table :data="detail.fees || []" empty-text="暂无费用明细">
+            <el-table-column prop="feeType" label="费用类型" min-width="180"><template #default="{ row }">{{ display(row.feeType) }}</template></el-table-column>
+            <el-table-column prop="currency" label="币种" width="110"><template #default="{ row }">{{ display(row.currency) }}</template></el-table-column>
+            <el-table-column prop="amount" label="金额" width="140"><template #default="{ row }">{{ display(row.amount) }}</template></el-table-column>
+            <el-table-column prop="remark" label="备注" min-width="220"><template #default="{ row }">{{ display(row.remark) }}</template></el-table-column>
+          </el-table>
+        </section>
+      </template>
+    </div>
+  </section>
+</template>
+
+<style scoped src="./deliveryOrders.css"></style>