f

2026-05-18 13:54:57 +08:00
parent 03de10f800
commit 02a2bfd0a9
5 changed files with 513 additions and 311 deletions
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -25,6 +25,8 @@ interface ReviewItem {
  content: string
 }

+type QuerySection = 'free' | 'paid'
+
 const caseList = ref<CaseItem[]>([
  {
    id: '1',
@@ -41,6 +43,8 @@ const caseList = ref<CaseItem[]>([
 ])

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

 const reviewList = ref<ReviewItem[]>([
  {
@@ -59,6 +63,10 @@ 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)}`,
@@ -104,89 +112,130 @@ function goCategory(categoryKey: string) {
          />
        </view>

-        <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
-          v-for="cat in toolboxCategories"
-          :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>
-
-        <view class="card">
+        <view class="card query-zone">
          <view class="card-header">
            <text class="card-title">
-              车辆查询
+              查询专区
            </text>
            <text class="card-sub">
-              请选择查询类型
+              免费工具 / 付费车况
            </text>
          </view>
-          <view class="inq-grid">
+          <view class="query-section-grid">
            <view
-              v-for="item in vehicleItems"
-              :key="item.feature"
-              class="inq-cell"
-              @tap="goInquireFeature(item.feature)"
+              class="query-section-card"
+              :class="{ active: activeQuerySection === 'free' }"
+              @tap="switchQuerySection('free')"
            >
-              <image
-                class="inq-icon"
-                :src="getInquiryItemIconUrl(item)"
-                mode="aspectFit"
-              />
-              <text class="inq-name">{{ item.name }}</text>
+              <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">
@@ -277,6 +326,44 @@ function goCategory(categoryKey: string) {
  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;
--- a/src/pages/inquire/index.vue
+++ b/src/pages/inquire/index.vue
@@ -3,7 +3,7 @@ import { onLoad } from '@dcloudio/uni-app'
 import { computed, onUnmounted, ref } from 'vue'
 import { getProductByEn, getUserDetail, postAuthSendSmsQuery, postPayPayment, postQueryService, postUploadImage } from '@/api'
 import { productHasSmsCode, useInquireForm } from '@/composables/useInquireForm'
-import { aesEncrypt, QUERY_PAYLOAD_AES_HEX_KEY } from '@/utils/crypto'
+import { aesEncrypt, QUERY_PAYLOAD_AES_HEX_KEY } from '@/utils/crypto.js'

 definePage({
  style: {
--- a/src/pages/toolbox/query.vue
+++ b/src/pages/toolbox/query.vue
@@ -167,6 +167,21 @@ const resultList = computed(() => {
  return list
 })

+const subResultList = computed(() => {
+  if (!result.value || !tool.value?.subResultKey || !tool.value?.subResultLabels)
+    return []
+  const sub = result.value[tool.value.subResultKey]
+  if (!Array.isArray(sub))
+    return []
+  return sub
+})
+
+const subResultLabelEntries = computed(() => {
+  if (!tool.value?.subResultLabels)
+    return []
+  return Object.entries(tool.value.subResultLabels)
+})
+
 const listLabelEntries = computed(() => {
  if (!tool.value?.resultLabels)
    return []
@@ -188,9 +203,22 @@ const listLabelEntries = computed(() => {
            <view v-for="field in tool.fields" :key="field.key" class="field">
              <text class="field-label">{{ field.label }}</text>

+              <!-- 按钮切换 (Radio) -->
+              <view v-if="field.type === 'radio'" class="field-radio-group">
+                <view
+                  v-for="opt in field.options"
+                  :key="opt.value"
+                  class="radio-item"
+                  :class="{ active: (form[field.key] ?? field.default) === opt.value }"
+                  @tap="form[field.key] = opt.value"
+                >
+                  {{ opt.label }}
+                </view>
+              </view>
+
              <!-- 选择框 -->
              <picker
-                v-if="field.type === 'select'"
+                v-else-if="field.type === 'select'"
                mode="selector"
                :range="field.options.map(opt => opt.label)"
                :value="getSelectIndex(field, form[field.key])"
@@ -286,6 +314,31 @@ const listLabelEntries = computed(() => {
            </view>
          </view>

+          <!-- 结果展示 - 子列表型 (如油价明细) -->
+          <view v-if="subResultList.length > 0" class="result-area">
+            <view class="result-title">详细列表</view>
+            <view class="result-card-list">
+              <view
+                v-for="(item, idx) in subResultList"
+                :key="idx"
+                class="result-card-item"
+              >
+                <view
+                  v-for="([fieldKey, fieldLabel], fIdx) in subResultLabelEntries"
+                  :key="fieldKey"
+                  class="card-item-row"
+                >
+                  <template v-if="item[fieldKey] !== undefined && item[fieldKey] !== ''">
+                    <text v-if="fIdx === 0" class="card-item-index">{{ idx + 1 }}</text>
+                    <text v-else class="card-item-index-placeholder" />
+                    <text class="card-item-field-label">{{ typeof fieldLabel === 'object' ? fieldLabel.label : fieldLabel }}</text>
+                    <text class="card-item-field-value">{{ item[fieldKey] }}</text>
+                  </template>
+                </view>
+              </view>
+            </view>
+          </view>
+
          <!-- 结果展示 - 列表型 -->
          <view v-if="resultList.length > 0" class="result-area">
            <view class="result-title">查询结果</view>
@@ -386,6 +439,34 @@ const listLabelEntries = computed(() => {
  box-sizing: border-box;
 }

+.field-radio-group {
+  display: flex;
+  gap: 16rpx;
+  flex-wrap: wrap;
+}
+
+.radio-item {
+  flex: 1;
+  min-width: 140rpx;
+  height: 72rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f7f8fa;
+  border: 1rpx solid #e5e6f0;
+  border-radius: 12rpx;
+  font-size: 26rpx;
+  color: #4e5969;
+  transition: all 0.2s;
+}
+
+.radio-item.active {
+  background: #e8f3ff;
+  border-color: #1768ff;
+  color: #1768ff;
+  font-weight: 500;
+}
+
 .field-picker {
  display: flex;
  align-items: center;