f

src/components/report/VehicleReportShell.vue

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