f

src/ui/vehicle/VehiclePlateList.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { computed } from 'vue'
+import { plateColorLabel, vehicleTypeLabel } from '@/utils/vehicleReportBlockMaps'
+import { useVehiclePayload } from '@/composables/useVehiclePayload'
+
+const props = defineProps({
+  data: Object,
+  params: Object,
+  apiId: { type: String, default: '' },
+  index: { type: Number, default: 0 },
+  notifyRiskStatus: { type: Function, default: () => {} },
+  title: { type: String, default: '个人名下车辆' },
+})
+
+const { obj } = useVehiclePayload(props)
+
+const vehicleCount = computed(() => {
+  const n = obj.value.vehicleCount ?? obj.value.carNum
+  if (n === '' || n == null)
+    return null
+  const num = Number(n)
+  return Number.isFinite(num) ? num : null
+})
+
+const vehicleList = computed(() => {
+  const list = obj.value.list
+  return Array.isArray(list) ? list : []
+})
+</script>
+
+<template>
+  <div class="card bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+    <div class="flex justify-between items-center mb-4 pb-4 border-b border-gray-100">
+      <div class="text-lg font-semibold text-gray-900">{{ title }}</div>
+      <div class="bg-blue-50 text-blue-700 px-4 py-2 rounded-full text-sm font-medium">
+        共 {{ vehicleCount != null ? vehicleCount : '—' }} 辆
+      </div>
+    </div>
+
+    <div v-if="vehicleList.length" class="space-y-3">
+      <div
+        v-for="(vehicle, index) in vehicleList"
+        :key="index"
+        class="bg-gray-50 rounded-lg p-4 border border-gray-200"
+      >
+        <div class="text-xl font-bold text-gray-900 font-mono tracking-wider">
+          {{ vehicle.plateNum ?? '—' }}
+        </div>
+        <div class="flex items-center gap-3 mt-2 flex-wrap">
+          <span class="inline-flex items-center px-3 py-1 rounded text-sm font-medium text-white bg-blue-500">
+            {{ plateColorLabel(vehicle.plateColor) }}
+          </span>
+          <span class="text-sm text-gray-600">
+            车辆类型：<span class="font-medium text-gray-900">{{ vehicleTypeLabel(vehicle.vehicleType) }}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div v-else class="text-center py-12 text-gray-500">
+      <div class="text-lg font-medium mb-1">暂无车辆信息</div>
+    </div>
+  </div>
+</template>