165 lines
3.7 KiB
Vue
165 lines
3.7 KiB
Vue
<script setup>
|
||
import { computed } from 'vue'
|
||
import { getVehicleModuleTitle } from '@/config/vehicleReportRegistry'
|
||
import VehicleReportBlock from './VehicleReportBlock.vue'
|
||
|
||
const props = defineProps({
|
||
productName: { type: String, default: '' },
|
||
queryParams: { type: Object, default: () => ({}) },
|
||
rows: { type: Array, default: () => [] },
|
||
/** 示例 / 正式 */
|
||
mode: { type: String, default: 'example' },
|
||
})
|
||
|
||
const modeText = computed(() => (props.mode === 'detail' ? '查询报告' : '示例报告'))
|
||
|
||
const paramLines = computed(() => {
|
||
const p = props.queryParams
|
||
if (!p || typeof p !== 'object')
|
||
return []
|
||
return Object.entries(p).map(([k, v]) => `${k}：${String(v ?? '')}`)
|
||
})
|
||
|
||
function blockTitle(row) {
|
||
return getVehicleModuleTitle(row.apiId, row.featureName)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="shell">
|
||
<view class="head-card">
|
||
<view class="head-title">
|
||
{{ props.productName || '报告' }}
|
||
</view>
|
||
<view class="head-badge">
|
||
免责声明：
|
||
</view>
|
||
<view class="head-sub">
|
||
|
||
本平台所提供车辆信息报告，仅作个人参考使用，不构成任何投资、交易及法律依据；数据来源于正规合规接口，仅供自查比对，严禁用于商用、倒卖及其他违规用途；因用户私自滥用数据造成的一切后果，均由使用者自行承担，本平台不承担任何法律责任。
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view v-if="paramLines.length" class="card params-card">
|
||
<view class="section-head">
|
||
<view class="accent" />
|
||
<text class="section-t">查询条件</text>
|
||
</view>
|
||
<view v-for="(line, idx) in paramLines" :key="idx" class="param-line">
|
||
{{ line }}
|
||
</view>
|
||
</view> -->
|
||
|
||
<view v-for="(row, idx) in props.rows" :key="`${row.apiId}-${idx}`" class="card block-card">
|
||
<view class="block-head">
|
||
<text class="block-title">{{ blockTitle(row) }}</text>
|
||
<text v-if="row.apiId && row.apiId !== '__UNLABELED__'" class="block-id">{{ row.apiId }}</text>
|
||
</view>
|
||
<VehicleReportBlock
|
||
:block-title="blockTitle(row)"
|
||
:api-id="row.apiId"
|
||
:payload="row.payload"
|
||
:query-params="props.queryParams"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.shell {
|
||
width: 100%;
|
||
}
|
||
|
||
.head-card {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 28rpx 24rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 0 24rpx rgba(63, 63, 63, 0.06);
|
||
}
|
||
|
||
.head-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #1d2129;
|
||
text-align: center;
|
||
padding-bottom: 12rpx;
|
||
border-bottom: 1rpx solid #e5e6eb;
|
||
}
|
||
|
||
.head-badge {
|
||
margin-top: 12rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #1768ff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.head-sub {
|
||
margin-top: 12rpx;
|
||
text-align: center;
|
||
font-size: 22rpx;
|
||
color: #86909c;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.card {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 0 24rpx rgba(63, 63, 63, 0.06);
|
||
}
|
||
|
||
.section-head {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.accent {
|
||
width: 6rpx;
|
||
height: 28rpx;
|
||
border-radius: 4rpx;
|
||
background: linear-gradient(180deg, #1768ff 0%, #1556d6 100%);
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.section-t {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #1d2129;
|
||
}
|
||
|
||
.param-line {
|
||
font-size: 24rpx;
|
||
color: #4e5969;
|
||
line-height: 1.55;
|
||
padding: 6rpx 0;
|
||
}
|
||
|
||
.block-head {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
padding-bottom: 12rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.block-title {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #1d2129;
|
||
}
|
||
|
||
.block-id {
|
||
font-size: 20rpx;
|
||
color: #86909c;
|
||
font-family: ui-monospace, monospace;
|
||
flex-shrink: 0;
|
||
}
|
||
</style>
|