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

first commit

Browse Source
This commit is contained in:
Mrx
2026-05-16 15:47:07 +08:00
commit 03de10f800
146 changed files with 33663 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

508
src/pages/index.vue Normal file
View File

@@ -0,0 +1,508 @@
<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
}
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 reviewList = ref<ReviewItem[]>([
{
id: '1',
name: '陈先生',
content: '查完车况再成交，心里更踏实，避免了重大事故车。',
},
{
id: '2',
name: '周女士',
content: '报告内容很详细，维保、出险一目了然，值得推荐。',
},
])
function reviewInitial(name: string) {
return name.slice(0, 1) || '?'
}
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="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-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>
<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;
}
.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>