first commit
This commit is contained in:
239
src/components/report/blocks/VehicleBlockQCXG4I1Z.vue
Normal file
239
src/components/report/blocks/VehicleBlockQCXG4I1Z.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
/** 车辆过户详版（与 H5 CQCXG4I1Z：data.retdata[]） */
|
||||
const props = defineProps({
|
||||
blockTitle: { type: String, default: '' },
|
||||
apiId: { type: String, default: '' },
|
||||
payload: { default: null },
|
||||
queryParams: { type: Object, default: () => ({}) },
|
||||
})
|
||||
|
||||
const rawList = computed(() => {
|
||||
const p = props.payload
|
||||
if (!p || typeof p !== 'object')
|
||||
return []
|
||||
return Array.isArray(p.retdata) ? p.retdata : []
|
||||
})
|
||||
|
||||
const transfers = computed(() =>
|
||||
rawList.value.map((item) => {
|
||||
const changeMonth = item.changeMonth
|
||||
let changeMonthFormatted = '-'
|
||||
if (changeMonth === '近一年内过户') {
|
||||
changeMonthFormatted = '近一年内过户'
|
||||
}
|
||||
else if (typeof changeMonth === 'string' && changeMonth.length === 6) {
|
||||
const y = changeMonth.slice(0, 4)
|
||||
const m = changeMonth.slice(4, 6)
|
||||
changeMonthFormatted = `${y}年${m}月`
|
||||
}
|
||||
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 ?? ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="root">
|
||||
<view class="head">
|
||||
<text class="title">{{ props.blockTitle || '车辆过户详版查询' }}</text>
|
||||
<text class="sub">按时间轴展示过户与车牌变更</text>
|
||||
<view v-if="totalTimes" class="tag">
|
||||
<text class="tag-l">总过户次数</text>
|
||||
<text class="tag-v">{{ totalTimes }} 次</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="transfers.length" class="list">
|
||||
<view v-for="(item, index) in transfers" :key="index" class="item">
|
||||
<view class="item-h">
|
||||
<text class="date">{{ item.changeMonthFormatted }}</text>
|
||||
<text class="cnt">第 {{ item.transTimeSum }} 次过户</text>
|
||||
</view>
|
||||
<view class="plates">
|
||||
<view class="plate">
|
||||
<text class="lab">过户前车牌</text>
|
||||
<text class="num">{{ item.oldCp || '未知' }}</text>
|
||||
<text v-if="item.cityBefore" class="city">所在城市：{{ item.cityBefore }}</text>
|
||||
</view>
|
||||
<text class="arrow">→</text>
|
||||
<view class="plate">
|
||||
<text class="lab">过户后车牌</text>
|
||||
<text class="num">{{ item.newCp || '未知' }}</text>
|
||||
<text v-if="item.cityAfter" class="city">所在城市：{{ item.cityAfter }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="gap">距上次过户：{{ item.intervalText }}</text>
|
||||
<text class="vin">VIN：{{ item.vin || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty">
|
||||
<text class="t">暂无过户明细</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.root {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.head {
|
||||
background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #312e81;
|
||||
}
|
||||
|
||||
.sub {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #4338ca;
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin-top: 12rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 12rpx;
|
||||
padding: 12rpx 16rpx;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tag-l {
|
||||
font-size: 22rpx;
|
||||
color: #86909c;
|
||||
}
|
||||
|
||||
.tag-v {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #312e81;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: #f7f8fa;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
border: 1rpx solid #e5e6eb;
|
||||
}
|
||||
|
||||
.item-h {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1d2129;
|
||||
}
|
||||
|
||||
.cnt {
|
||||
font-size: 24rpx;
|
||||
color: #86909c;
|
||||
}
|
||||
|
||||
.plates {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.plate {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 12rpx;
|
||||
border: 1rpx solid #e5e6eb;
|
||||
}
|
||||
|
||||
.lab {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
color: #86909c;
|
||||
}
|
||||
|
||||
.num {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1d2129;
|
||||
}
|
||||
|
||||
.city {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: #4e5969;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
align-self: center;
|
||||
font-size: 28rpx;
|
||||
color: #1768ff;
|
||||
}
|
||||
|
||||
.gap {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #4e5969;
|
||||
}
|
||||
|
||||
.vin {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #1d2129;
|
||||
font-family: ui-monospace, monospace;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 26rpx;
|
||||
color: #86909c;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user