f

src/ui/CQCXG4I1Z.vue

@@ -0,0 +1,84 @@
+<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>