qncV4uni-app/src/pages/index.vue

<script setup lang="ts">
import { computed, ref } from 'vue'
import { getInquireCategoryConfig, getInquiryItemIconUrl } from '@/config/inquireCategories'
import { toolboxCategories, getCategoryHotTools } from '@/config/toolboxRegistry'

definePage({
  style: {
    navigationBarTitleText: '全能查',
    navigationStyle: 'default',
    navigationBarBackgroundColor: '#ffffff',
    navigationBarTextStyle: 'black',
  },
})

interface CaseItem {
  id: string
  tag: string
  vin: string
  model: string
}

interface ReviewItem {
  id: string
  name: string
  content: string
}

type QuerySection = 'free' | 'paid'

const caseList = ref<CaseItem[]>([
  {
    id: '1',
    tag: '新能源电池查询',
    vin: 'LBV8********0981',
    model: '某品牌新能源车型',
  },
  {
    id: '2',
    tag: '里程异常检测',
    vin: 'LSGN********3389',
    model: '凯迪拉克 XT5',
  },
])

const vehicleItems = computed(() => getInquireCategoryConfig('vehicle')?.items ?? [])
const freeToolboxCategories = computed(() => toolboxCategories)
const activeQuerySection = ref<QuerySection>('paid')

const reviewList = ref<ReviewItem[]>([
  {
    id: '1',
    name: '陈先生',
    content: '查完车况再成交，心里更踏实，避免了重大事故车。',
  },
  {
    id: '2',
    name: '周女士',
    content: '报告内容很详细，维保、出险一目了然，值得推荐。',
  },
])

function reviewInitial(name: string) {
  return name.slice(0, 1) || '?'
}

function switchQuerySection(section: QuerySection) {
  activeQuerySection.value = section
}

function goInquireFeature(feature: string) {
  uni.navigateTo({
    url: `/pages/inquire/index?feature=${encodeURIComponent(feature)}`,
  })
}

/** 左侧大图：车辆出险详版查询 */
function goVinClaim() {
  goInquireFeature('toc_VehicleClaimDetail')
}

/** 右上小图：车辆维保详细版查询 */
function goVinMaintain() {
  goInquireFeature('toc_VehicleMaintenanceDetail')
}

function goEvHealth() {
  uni.showToast({ title: '功能开发中', icon: 'none' })
}

function goToolboxItem(key: string) {
  uni.navigateTo({
    url: `/pages/toolbox/query?key=${encodeURIComponent(key)}`,
  })
}

function goCategory(categoryKey: string) {
  uni.navigateTo({
    url: `/pages/toolbox/category?category=${encodeURIComponent(categoryKey)}`,
  })
}
</script>

<template>
  <view class="page-root">
    <scroll-view scroll-y class="scrollarea">
      <view class="page">
        <view class="banner">
          <image
            class="banner-img"
            src="/static/home/images/Banner.png"
            mode="widthFix"
          />
        </view>

        <view class="card query-zone">
          <view class="card-header">
            <text class="card-title">
              查询专区
            </text>
            <text class="card-sub">
              免费工具 / 付费车况
            </text>
          </view>
          <view class="query-section-grid">
            <view
              class="query-section-card"
              :class="{ active: activeQuerySection === 'free' }"
              @tap="switchQuerySection('free')"
            >
              <text class="query-section-label">
                免费查询
              </text>
              <text class="query-section-desc">
                点击查看工具分类
              </text>
            </view>
            <view
              class="query-section-card"
              :class="{ active: activeQuerySection === 'paid' }"
              @tap="switchQuerySection('paid')"
            >
              <text class="query-section-label">
                付费查询
              </text>
              <text class="query-section-desc">
                车辆出险 / 维保等
              </text>
            </view>
          </view>
        </view>

        <template v-if="activeQuerySection === 'paid'">
          <view class="main-query">
            <view class="main-left card card-img-wrap" @tap="goVinClaim">
              <image
                class="main-left-img"
                src="/static/home/images/VIN.png"
                mode="widthFix"
              />
            </view>
            <view class="main-right">
              <view class="card card-img-wrap small-card-img" @tap="goVinMaintain">
                <image
                  class="main-right-img"
                  src="/static/home/images/VIN2.png"
                  mode="aspectFill"
                />
              </view>
              <view class="card card-img-wrap small-card-img" @tap="goEvHealth">
                <image
                  class="main-right-img"
                  src="/static/home/images/VIN3.png"
                  mode="aspectFill"
                />
              </view>
            </view>
          </view>

          <view class="card">
            <view class="card-header">
              <text class="card-title">
                车辆查询
              </text>
              <text class="card-sub">
                请选择查询类型
              </text>
            </view>
            <view class="inq-grid">
              <view
                v-for="item in vehicleItems"
                :key="item.feature"
                class="inq-cell"
                @tap="goInquireFeature(item.feature)"
              >
                <image
                  class="inq-icon"
                  :src="getInquiryItemIconUrl(item)"
                  mode="aspectFit"
                />
                <text class="inq-name">{{ item.name }}</text>
              </view>
            </view>
          </view>
        </template>

        <template v-else>
          <view
            v-for="cat in freeToolboxCategories"
            :key="cat.key"
            class="card"
          >
            <view class="card-header">
              <view class="card-header-left">
                <view class="cat-badge" :style="{ background: `${cat.color}15` }">
                  <view :class="['cat-badge-icon', cat.icon]" :style="{ color: cat.color }" />
                </view>
                <text class="card-title">{{ cat.name }}</text>
              </view>
              <text class="card-more-link" @tap="goCategory(cat.key)">
                查看更多
              </text>
            </view>
            <view class="inq-grid">
              <view
                v-for="item in getCategoryHotTools(cat.key)"
                :key="item.key"
                class="inq-cell"
                @tap="goToolboxItem(item.key)"
              >
                <view class="inq-icon-custom" :style="{ color: cat.color }">
                  <view :class="item.icon" />
                </view>
                <text class="inq-name">{{ item.name }}</text>
              </view>
            </view>
          </view>
        </template>

        <view class="card">
          <view class="card-header">
            <text class="card-title">
              查询案例
            </text>
            <text class="card-sub">
              已服务 290000+ 车主
            </text>
          </view>
          <view
            v-for="item in caseList"
            :key="item.id"
            class="case-item"
          >
            <view class="case-line">
              <text class="case-tag">
                {{ item.tag }}
              </text>
              <text class="case-vin">
                {{ item.vin }}
              </text>
              <text class="case-model">
                {{ item.model }}
              </text>
            </view>
          </view>
        </view>

        <view class="card">
          <view class="card-header">
            <text class="card-title">
              客户评价
            </text>
          </view>
          <view
            v-for="item in reviewList"
            :key="item.id"
            class="review-item"
          >
            <view class="review-avatar">
              <text class="review-avatar-text">
                {{ reviewInitial(item.name) }}
              </text>
            </view>
            <view class="review-content">
              <view class="review-name">
                {{ item.name }}
              </view>
              <view class="review-text">
                {{ item.content }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">
.page-root {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f8faff 0%, #f3f5fb 100%);
}

.scrollarea {
  flex: 1;
  min-height: 0;
  height: 0;
}

.page {
  padding: 24rpx 24rpx 40rpx;
  box-sizing: border-box;
}

.banner {
  margin-bottom: 24rpx;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 18rpx 40rpx rgba(15, 35, 52, 0.05);
}

.banner-img {
  width: 100%;
  display: block;
}

.query-zone {
  padding-bottom: 24rpx;
}

.query-section-grid {
  display: flex;
  gap: 16rpx;
}

.query-section-card {
  flex: 1;
  padding: 24rpx 20rpx;
  border-radius: 20rpx;
  background: #f7f8fa;
  border: 2rpx solid transparent;
}

.query-section-card.active {
  background: linear-gradient(145deg, #eef4ff 0%, #f5f8ff 100%);
  border-color: #1768ff;
  box-shadow: 0 12rpx 24rpx rgba(23, 104, 255, 0.08);
}

.query-section-label {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #1d2129;
}

.query-section-desc {
  display: block;
  margin-top: 10rpx;
  font-size: 22rpx;
  color: #86909c;
  line-height: 1.5;
}

.card {
  background: linear-gradient(145deg, #ffffff 0%, #f7f8ff 100%);
  border-radius: 24rpx;
  padding: 24rpx 24rpx 20rpx;
  margin-bottom: 24rpx;
  border: 1rpx solid #e5e6f0;
  box-shadow:
    0 16rpx 40rpx rgba(15, 35, 52, 0.04),
    0 0 0 1rpx rgba(255, 255, 255, 0.5) inset;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.card-header-left {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.cat-badge {
  width: 48rpx;
  height: 48rpx;
  border-radius: 14rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-badge-icon {
  font-size: 28rpx;
}

.card-more-link {
  font-size: 22rpx;
  color: #86909c;
  padding: 8rpx 16rpx;
  background: #f2f3f5;
  border-radius: 20rpx;
}

.card-more-link:active {
  opacity: 0.7;
}

.card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1d2129;
}

.card-sub {
  font-size: 22rpx;
  color: #86909c;
}

.grid-4 {
  display: flex;
  justify-content: space-between;
}

.grid-4-second {
  margin-top: 16rpx;
}

.grid-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8rpx;
}

.icon-svg {
  width: 64rpx;
  height: 64rpx;
  margin-bottom: 8rpx;
}

.grid-text {
  font-size: 24rpx;
  color: #4e5969;
}

.inq-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8rpx;
}

.inq-cell {
  width: 33.333%;
  padding: 8rpx;
  box-sizing: border-box;
}

.inq-icon {
  width: 72rpx;
  height: 72rpx;
  display: block;
  margin: 0 auto 10rpx;
}

.inq-icon-custom {
  width: 72rpx;
  height: 72rpx;
  display: block;
  margin: 0 auto 10rpx;
  font-size: 48rpx;
  color: #1768ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inq-name {
  display: block;
  font-size: 22rpx;
  color: #1d2129;
  text-align: center;
  line-height: 1.35;
  padding: 0 4rpx;
  min-height: 60rpx;
}

.main-query {
  display: flex;
  align-items: stretch;
  margin-bottom: 24rpx;
}

.main-left {
  flex: 1.2;
  margin-right: 16rpx;
  min-width: 0;
}

.card-img-wrap {
  padding: 0;
  overflow: hidden;
}

.main-left-img {
  width: 100%;
  display: block;
}

.main-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 16rpx;
}

.small-card-img {
  flex: 1;
  padding: 0;
  overflow: hidden;
  min-height: 0;
}

.main-right-img {
  width: 100%;
  height: 100%;
  display: block;
}

.case-item + .case-item {
  margin-top: 12rpx;
}

.case-line {
  font-size: 22rpx;
  color: #4e5969;
}

.case-tag {
  color: #1768ff;
  margin-right: 10rpx;
}

.case-vin {
  margin-right: 10rpx;
}

.review-item {
  display: flex;
  margin-top: 16rpx;
}

.review-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 16rpx;
  background: linear-gradient(145deg, #e8f0ff 0%, #d4e4ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-avatar-text {
  font-size: 26rpx;
  font-weight: 600;
  color: #1768ff;
}

.review-content {
  flex: 1;
}

.review-name {
  font-size: 24rpx;
  color: #1d2129;
  margin-bottom: 4rpx;
}

.review-text {
  font-size: 22rpx;
  color: #4e5969;
  line-height: 1.6;
}
</style>