64 lines
2.2 KiB
Vue
64 lines
2.2 KiB
Vue
<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>
|