qncV4uni-app/src/components/report/blocks/VehicleBlockQCXG4I1Z.vue

<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>