97 lines
3.5 KiB
Vue
97 lines
3.5 KiB
Vue
<template>
|
||
<div class="card">
|
||
<div class="flex flex-col gap-y-4">
|
||
<!-- 标题部分 -->
|
||
<div class="flex items-center justify-between">
|
||
<span class="text-lg font-bold text-gray-800">车辆过户信息</span>
|
||
<van-tag :type="getStatusType" round>{{ getStatusText }}</van-tag>
|
||
</div>
|
||
|
||
<!-- 过户次数显示 -->
|
||
<div class="flex items-center justify-center py-6">
|
||
<div class="text-center">
|
||
<div class="text-5xl font-bold" :class="getTextColorClass">
|
||
{{ data.transferNum }}
|
||
</div>
|
||
<div class="text-gray-500 mt-2">历史过户次数</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 风险提示 -->
|
||
<div class="bg-gray-50 p-4 rounded-lg">
|
||
<div class="flex items-start gap-2">
|
||
<van-icon name="info-o" class="text-blue-500 mt-0.5" />
|
||
<div class="flex-1">
|
||
<div class="text-sm text-gray-600">风险提示</div>
|
||
<div class="text-sm text-gray-500 mt-1">
|
||
{{ getRiskTip }}
|
||
</div>
|
||
<div v-if="data.transferDate && data.transferFlag === '1'" class="text-sm text-gray-500 mt-2">
|
||
最近过户时间：{{ data.transferDate }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 说明信息 -->
|
||
<div class="text-xs text-gray-400 mt-2">
|
||
注：过户次数仅供参考，建议您在购车时详细了解车辆历史信息
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue';
|
||
import { Icon as VanIcon, Tag as VanTag } from 'vant';
|
||
|
||
const props = defineProps({
|
||
data: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
params: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
});
|
||
|
||
// 根据是否过户标识返回对应的状态类型
|
||
const getStatusType = computed(() => {
|
||
const transferFlag = props.data.transferFlag;
|
||
const transferNum = Number(props.data.transferNum) || 0;
|
||
if (transferFlag === '0') return 'success';
|
||
if (transferNum <= 2) return 'warning';
|
||
return 'danger';
|
||
});
|
||
|
||
// 根据是否过户标识和过户次数返回对应的状态文本
|
||
const getStatusText = computed(() => {
|
||
const transferFlag = props.data.transferFlag;
|
||
const transferNum = Number(props.data.transferNum) || 0;
|
||
if (transferFlag === '0') return '无过户记录';
|
||
if (transferNum <= 2) return '正常范围';
|
||
return '频繁过户';
|
||
});
|
||
|
||
// 根据过户次数返回对应的文字颜色
|
||
const getTextColorClass = computed(() => {
|
||
const transferNum = Number(props.data.transferNum) || 0;
|
||
if (transferNum === 0) return 'text-green-500';
|
||
if (transferNum <= 2) return 'text-orange-500';
|
||
return 'text-red-500';
|
||
});
|
||
|
||
// 根据过户标识和过户次数返回对应的风险提示
|
||
const getRiskTip = computed(() => {
|
||
const transferFlag = props.data.transferFlag;
|
||
const transferNum = Number(props.data.transferNum) || 0;
|
||
if (transferFlag === '0' || transferNum === 0) {
|
||
return '该车辆无过户记录，为首任车主，风险较低。';
|
||
} else if (transferNum <= 2) {
|
||
return '该车辆过户次数在正常范围内，建议核实每次过户原因。';
|
||
} else {
|
||
return '该车辆过户频繁，请谨慎考虑并详细了解车况。';
|
||
}
|
||
});
|
||
</script> |