f

src/ui/CQCXG3Y6B.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { computed } from 'vue'
+import { useRiskNotifier } from '@/composables/useRiskNotifier'
+import { formatDateZh, formatMileageKm } 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: () => {} },
+})
+
+const { obj, params } = useVehiclePayload(props)
+
+const records = computed(() => (Array.isArray(obj.value.record) ? obj.value.record : []))
+const hasData = computed(() => Object.keys(obj.value).length > 0)
+const vin = computed(() => (records.value[0]?.vin) || params.value.vin_code || '')
+const lastRecord = computed(() => (records.value.length ? records.value[records.value.length - 1] : null))
+
+const riskScore = computed(() => 95)
+useRiskNotifier(props, riskScore)
+</script>
+
+<template>
+  <div class="card space-y-3">
+    <div class="bg-gradient-to-br from-sky-50 to-blue-50 rounded-lg p-4 border border-sky-100">
+      <h3 class="text-lg font-bold">车辆维保简版查询</h3>
+      <p class="text-sm text-gray-600 mt-1">按时间轴展示维保与材料明细</p>
+    </div>
+
+    <template v-if="hasData">
+      <div class="bg-gray-50 rounded-lg p-4 border text-sm">
+        <div class="font-mono">VIN：{{ vin || '-' }}</div>
+        <div class="text-gray-600 mt-1">维保 {{ records.length }} 条
+          <span v-if="lastRecord"> · 最近 {{ formatDateZh(lastRecord.lastTime) }} · {{ formatMileageKm(lastRecord.mileage) }}</span>
+        </div>
+      </div>
+
+      <div v-if="records.length" class="space-y-3">
+        <div v-for="(item, idx) in records" :key="idx" class="bg-white rounded-lg p-4 border border-gray-200">
+          <div class="flex justify-between font-medium">
+            <span>{{ formatDateZh(item.lastTime) }}</span>
+            <span class="text-blue-600">{{ formatMileageKm(item.mileage) }}</span>
+          </div>
+          <p class="text-sm text-gray-500 mt-1">{{ item.repairType || '维保' }} · VIN {{ item.vin || vin || '-' }}</p>
+          <div v-if="item.details?.length" class="mt-2 text-sm">
+            <div class="text-xs text-gray-500 mb-1">维修项目</div>
+            <div v-for="(det, di) in item.details" :key="di" class="py-1">
+              <span v-if="det.type" class="text-xs bg-blue-50 text-blue-700 px-1 rounded mr-1">{{ det.type }}</span>{{ det.content }}
+            </div>
+          </div>
+          <div v-if="item.materials?.length" class="mt-2 text-sm">
+            <div class="text-xs text-gray-500 mb-1">使用材料</div>
+            <div v-for="(m, mi) in item.materials" :key="mi" class="py-1">
+              <span v-if="m.type" class="text-xs bg-gray-100 px-1 rounded mr-1">{{ m.type }}</span>{{ m.content }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else class="text-center text-gray-500 py-6">暂无维保记录</div>
+    </template>
+    <div v-else class="text-center py-10 text-gray-500">暂无维保数据</div>
+  </div>
+</template>