team/qncV4uni-app
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

f

Browse Source
This commit is contained in:
Mrx
2026-05-18 13:54:57 +08:00
parent 03de10f800
commit 02a2bfd0a9
5 changed files with 513 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
src/pages/index.vue
View File

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