85 lines
3.4 KiB
Vue
85 lines
3.4 KiB
Vue
<script setup>
|
||
import { computed } from 'vue'
|
||
import { useRiskNotifier } from '@/composables/useRiskNotifier'
|
||
import { payloadAsArray } from '@/utils/vehiclePayload'
|
||
|
||
const props = defineProps({
|
||
data: { default: null },
|
||
params: Object,
|
||
apiId: { type: String, default: '' },
|
||
index: { type: Number, default: 0 },
|
||
notifyRiskStatus: { type: Function, default: () => {} },
|
||
})
|
||
|
||
const transfers = computed(() => {
|
||
return payloadAsArray(props.data).map((item) => {
|
||
const changeMonth = item.changeMonth
|
||
let changeMonthFormatted = '-'
|
||
if (changeMonth === '近一年内过户') changeMonthFormatted = changeMonth
|
||
else if (typeof changeMonth === 'string' && changeMonth.length === 6) {
|
||
changeMonthFormatted = `${changeMonth.slice(0, 4)}年${changeMonth.slice(4, 6)}月`
|
||
}
|
||
else if (changeMonth) changeMonthFormatted = String(changeMonth)
|
||
|
||
let intervalText = '-'
|
||
if (item.transYear || item.transMonth) {
|
||
const years = item.transYear ? `${item.transYear}年` : ''
|
||
const months = item.transMonth ? `${item.transMonth}个月` : ''
|
||
intervalText = `${years}${months}` || '-'
|
||
}
|
||
return { ...item, changeMonthFormatted, intervalText }
|
||
})
|
||
})
|
||
|
||
const totalTimes = computed(() => {
|
||
if (!transfers.value.length) return ''
|
||
const last = transfers.value[transfers.value.length - 1]
|
||
return last.transTimeSum ?? ''
|
||
})
|
||
|
||
const riskScore = computed(() => (transfers.value.length > 2 ? 65 : 90))
|
||
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 flex justify-between items-start gap-3">
|
||
<div>
|
||
<h3 class="text-lg font-bold text-sky-900">车辆过户详版查询</h3>
|
||
<p class="text-sm text-sky-700 mt-1">按时间轴展示过户与车牌变更</p>
|
||
</div>
|
||
<div v-if="totalTimes" class="bg-white rounded-lg px-3 py-2 text-right shrink-0">
|
||
<div class="text-xs text-gray-500">总过户次数</div>
|
||
<div class="text-lg font-bold">{{ totalTimes }} 次</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="transfers.length" class="space-y-3">
|
||
<div
|
||
v-for="(item, index) in transfers"
|
||
:key="index"
|
||
class="bg-gray-50 rounded-lg p-4 border border-gray-200"
|
||
>
|
||
<div class="flex justify-between mb-2">
|
||
<span class="font-semibold">{{ item.changeMonthFormatted }}</span>
|
||
<span class="text-sm text-blue-600">第 {{ item.transTimeSum }} 次过户</span>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-3 text-sm">
|
||
<div>
|
||
<div class="text-gray-500 text-xs">过户前车牌</div>
|
||
<div class="font-mono font-medium">{{ item.oldCp || '未知' }}</div>
|
||
<div v-if="item.cityBefore" class="text-xs text-gray-500 mt-1">城市：{{ item.cityBefore }}</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-gray-500 text-xs">过户后车牌</div>
|
||
<div class="font-mono font-medium">{{ item.newCp || '未知' }}</div>
|
||
<div v-if="item.cityAfter" class="text-xs text-gray-500 mt-1">城市：{{ item.cityAfter }}</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="item.intervalText !== '-'" class="text-xs text-gray-500 mt-2">距上次过户：{{ item.intervalText }}</div>
|
||
</div>
|
||
</div>
|
||
<div v-else class="text-center py-10 text-gray-500">暂无过户记录</div>
|
||
</div>
|
||
</template>
|