This commit is contained in:
Mrx
2026-05-28 14:54:32 +08:00
parent 00ed30acb1
commit 6e5379080c
8 changed files with 392 additions and 51 deletions

20
project.config.json Normal file
View File

@@ -0,0 +1,20 @@
{
"description": "项目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": false,
"es6": true,
"postcss": false,
"minified": false,
"newFeature": true,
"bigPackageSizeSupport": true
},
"compileType": "miniprogram",
"libVersion": "",
"appid": "touristappid",
"projectname": "qnc-uniapp",
"miniprogramRoot": "dist/dev/mp-weixin/",
"condition": {}
}

7
src/api/app.js Normal file
View File

@@ -0,0 +1,7 @@
import { http } from './http'
/** 获取首页动态展示数据(案例和评价) */
export async function getHomeDynamicData(params = {}) {
const res = await http.get('/app/home/dynamic', { params })
return res.data
}

View File

@@ -1,5 +1,6 @@
export * from './auth'
export { clearAuthStorage, http } from './http'
export * from './app'
export * from './pay'
export * from './product'
export * from './query'

89
src/pages/1.md Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>三行向上滚动(速度不同)</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 30px;
background: #f7f8fa;
}
.container {
max-width: 450px;
margin: 0 auto;
}
.title {
font-size: 18px;
font-weight: bold;
margin-bottom: 12px;
color: #333;
}
.roll-wrap {
background: #fff;
border-radius: 10px;
padding: 10px 14px;
overflow: hidden;
}
.roll-item {
height: 32px;
line-height: 32px;
font-size: 14px;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 动画:第一行最快,第二行中等,第三行最慢 */
.line1 { animation: slideUp 0.3s ease forwards; }
.line2 { animation: slideUp 0.45s ease forwards; }
.line3 { animation: slideUp 0.6s ease forwards; }
@keyframes slideUp {
0% { transform: translateY(30px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
</style>
</head>
<body>
<div class="container">
<div class="title">实时查询案例</div>
<div class="roll-wrap" id="rollBox"></div>
</div>
<script>
const list = [
"✅ 湘A·12345 奔驰GLC 查询成功",
"✅ 粤B·67890 丰田凯美瑞 查询成功",
"✅ 京A·00011 特斯拉ModelY 查询成功",
"✅ 苏E·88888 大众迈腾 查询成功",
"✅ 沪A·87654 宝马325 查询成功",
"✅ 浙A·11223 奥迪A4L 查询成功",
"✅ 川A·33445 本田思域 查询成功"
];
const box = document.getElementById("rollBox");
let idx = 0;
function showThree() {
box.innerHTML = `
<div class="roll-item line1">${list[(idx+0)%list.length]}</div>
<div class="roll-item line2">${list[(idx+1)%list.length]}</div>
<div class="roll-item line3">${list[(idx+2)%list.length]}</div>
`;
idx += 1;
}
// 初始化
showThree();
setInterval(showThree, 2800); // 每2.8秒刷新3条
</script>
</body>
</html>

View File

@@ -1,7 +1,12 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { getHomeDynamicData } from '@/api'
import { getInquireCategoryConfig, getInquiryItemIconUrl } from '@/config/inquireCategories'
import { getToolboxItem } from '@/config/toolboxRegistry'
import { useCaseStore } from '@/stores/case'
const caseStore = useCaseStore()
definePage({
style: {
@@ -20,15 +25,93 @@ interface CaseItem {
}
interface ReviewItem {
id: string
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 lastId = ref(0)
const displayList = ref<any[]>([])
const displayReviews = ref<ReviewItem[]>([])
let fetchTimer: any = null
let displayTimer: any = null
let currentCaseIdx = 0
let currentReviewIdx = 0
// 实时查询案例硬编码数据
const caseList = [
{ id: 'c1', tag: '查询成功', vin: '湘A·12345', model: '奔驰GLC' },
{ id: 'c2', tag: '查询成功', vin: '粤B·67890', model: '丰田凯美瑞' },
{ id: 'c3', tag: '查询成功', vin: '京A·00011', model: '特斯拉ModelY' },
{ id: 'c4', tag: '查询成功', vin: '苏E·88888', model: '大众迈腾' },
{ id: 'c5', tag: '查询成功', vin: '沪A·87654', model: '宝马325' },
{ id: 'c6', tag: '查询成功', vin: '浙A·11223', model: '奥迪A4L' },
{ id: 'c7', tag: '查询成功', vin: '川A·33445', model: '本田思域' },
{ id: 'c8', tag: '查询成功', vin: '鄂A·55667', model: '别克GL8' },
{ id: 'c9', tag: '查询成功', vin: '鲁B·99887', model: '福特蒙迪欧' },
{ id: 'c10', tag: '查询成功', vin: '渝A·77665', model: '马自达CX-5' }
]
const fetchLatestCases = async () => {
// 不再从后端拉取案例,保持空函数或移除调用
}
const startDisplayTimer = () => {
if (displayTimer) return
// 初始填充展示列表
const initDisplay = () => {
// 1. 案例:使用硬编码的 caseList
if (caseList.length >= 3) {
displayList.value = [caseList[0], caseList[1], caseList[2]]
currentCaseIdx = 1
}
// 2. 评价:直接使用本地硬编码的 reviewList
if (reviewList.length >= 3) {
displayReviews.value = [reviewList[0], reviewList[1], reviewList[2]]
currentReviewIdx = 1
}
}
initDisplay()
displayTimer = setInterval(() => {
// 滚动案例 (始终使用本地 caseList)
if (caseList.length >= 3) {
const len = caseList.length
displayList.value = [
caseList[currentCaseIdx % len],
caseList[(currentCaseIdx + 1) % len],
caseList[(currentCaseIdx + 2) % len]
]
currentCaseIdx++
}
// 滚动评价 (始终使用本地 reviewList)
if (reviewList.length >= 3) {
const len = reviewList.length
displayReviews.value = [
reviewList[currentReviewIdx % len],
reviewList[(currentReviewIdx + 1) % len],
reviewList[(currentReviewIdx + 2) % len]
]
currentReviewIdx++
}
}, 2800)
}
onLoad(async () => {
await fetchLatestCases()
fetchTimer = setInterval(fetchLatestCases, 10000) // 缩短为 10 秒拉取一次
startDisplayTimer()
})
onUnload(() => {
if (fetchTimer) clearInterval(fetchTimer)
if (displayTimer) clearInterval(displayTimer)
})
const vehicleItems = computed(() => getInquireCategoryConfig('vehicle')?.items ?? [])
@@ -62,10 +145,38 @@ function refreshDaily() {
dailyKeys.value = pickRandom(dailyPool, 10)
}
const reviewList = ref<ReviewItem[]>([
{ id: '1', name: '先生', content: '查完车况再成交,心里更踏实,避免了重大事故车。' },
{ id: '2', name: '女士', content: '报告内容很详细,维保、出险一目了然,值得推荐。' },
])
const reviewList = [
{ id: '1', name: '先生', content: '查询速度非常快,报告里关于出险的描述非常详细,避坑神器!' },
{ id: '2', name: '女士', content: '买二手车之前查一下真的有必要,帮我发现了一台调表车。' },
{ id: '3', name: '张先生', content: '数据更新很及时4S店的维保记录全都能查到。' },
{ id: '4', name: '赵先生', content: '操作简单,手机号绑定后报告一直保存着,随时可以查看。' },
{ id: '5', name: '王女士', content: '查询结果非常详细,包括车况、维修记录等。' },
{ id: '6', name: '刘先生', content: '比线下查记录便宜太多了,而且几分钟就出结果。' },
{ id: '7', name: '陈女士', content: '维保记录很全,连更换零件的时间点都有显示。' },
{ id: '8', name: '孙先生', content: '报告清晰易懂,小白也能看懂有没有事故。' },
{ id: '9', name: '周女士', content: '帮朋友查了一辆,结果真的有水泡记录,太值了。' },
{ id: '10', name: '吴先生', content: '支持多种车型查询,国产、合资都没问题。' },
{ id: '11', name: '郑女士', content: '界面简洁,没有乱七八糟的广告,体验很好。' },
{ id: '12', name: '冯先生', content: '查完心里踏实多了,买车更有底气了。' },
{ id: '13', name: '褚女士', content: '客服回复很快,解释得很耐心。' },
{ id: '14', name: '卫先生', content: '报告下载方便,手机电脑都能看。' },
{ id: '15', name: '蒋女士', content: '对比了几家平台,这家数据最准。' },
{ id: '16', name: '沈先生', content: '以前不知道还能查保险记录,现在知道了。' },
{ id: '17', name: '韩女士', content: '查完发现是营运车转非营运,果断放弃。' },
{ id: '18', name: '杨先生', content: '查询流程很简单,三步搞定。' },
{ id: '19', name: '朱女士', content: '报告里有公里数变化曲线,很直观。' },
{ id: '20', name: '秦先生', content: '没想到还能查到召回记录,挺意外。' },
{ id: '21', name: '尤女士', content: '比去4S店排队省事多了推荐' },
{ id: '22', name: '许先生', content: '数据来源靠谱,不是瞎编的那种。' },
{ id: '23', name: '何女士', content: '查过两次,结果都很稳定。' },
{ id: '24', name: '吕先生', content: '买车前的必备工具,已经安利给朋友。' },
{ id: '25', name: '施女士', content: '报告里还带了估值参考,挺实用。' },
{ id: '26', name: '张女士', content: '以前买车吃过亏,这次查完才敢付钱。' },
{ id: '27', name: '曹先生', content: '查询失败还能退款,这点很放心。' },
{ id: '28', name: '严女士', content: '车辆档案很完整,历史一目了然。' },
{ id: '29', name: '华先生', content: '凌晨查的,居然也能秒出报告。' },
{ id: '30', name: '金女士', content: '整体体验不错,以后卖车也要先查一下。' }
]
function reviewInitial(name: string) {
return name.slice(0, 1) || '?'
@@ -177,17 +288,18 @@ function goVehicleList() {
</view>
</view>
<!-- 6. 实案例 -->
<!-- 6. 时查询案例 -->
<view class="section">
<view class="section-header">
<text class="title">实查询案例</text>
<text class="sub">已服务 29+ 车主</text>
<text class="title">查询案例</text>
<text class="sub">已服务 33+ 车主</text>
</view>
<view class="case-list">
<view v-for="item in caseList" :key="item.id" class="case-item">
<view class="case-tag">{{ item.tag }}</view>
<view class="case-vin">{{ item.vin }}</view>
<view class="case-model">{{ item.model }}</view>
<view class="roll-wrap">
<view v-for="(item, idx) in displayList" :key="item.id || idx" class="roll-item" :class="'line' + (idx + 1)">
<text class="roll-dot"></text>
<text class="roll-vin">{{ item.vin }}</text>
<text class="roll-model">{{ item.model }}</text>
<text class="roll-status">{{ item.tag }}</text>
</view>
</view>
</view>
@@ -198,7 +310,7 @@ function goVehicleList() {
<text class="title">用户真实评价</text>
</view>
<view class="review-list">
<view v-for="item in reviewList" :key="item.id" class="review-item">
<view v-for="(item, idx) in displayReviews" :key="item.id || idx" class="review-item" :class="'line' + (idx + 1)">
<view class="avatar">{{ reviewInitial(item.name) }}</view>
<view class="review-content">
<view class="username">{{ item.name }}</view>
@@ -520,30 +632,57 @@ page {
}
/* 案例 */
.case-list {
gap: 16rpx;
.roll-wrap {
background: #f7f8fa;
border-radius: 16rpx;
padding: 20rpx 30rpx;
overflow: hidden;
height: 240rpx; /* 32 * 3 * 2.5 左右 */
display: flex;
flex-direction: column;
justify-content: center;
}
.case-item {
padding: 20rpx;
background: #f9fafb;
border-radius: 16rpx;
.roll-item {
height: 60rpx;
line-height: 60rpx;
font-size: 24rpx;
color: #333;
display: flex;
align-items: center;
gap: 12rpx;
}
.roll-dot {
font-size: 20rpx;
}
.roll-vin {
font-family: monospace;
font-weight: 500;
}
.roll-model {
color: #86909c;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.roll-status {
color: #1768ff;
font-size: 22rpx;
}
.case-tag {
color: #1768ff;
font-weight: 600;
margin-right: 12rpx;
}
.case-vin {
color: #333;
margin-right: 12rpx;
}
.case-model {
color: #86909c;
/* 动画:第一行最快,第二行中等,第三行最慢 */
.line1 { animation: slideUp 0.3s ease forwards; }
.line2 { animation: slideUp 0.45s ease forwards; }
.line3 { animation: slideUp 0.6s ease forwards; }
@keyframes slideUp {
0% { transform: translateY(30rpx); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* 评价 */
@@ -551,10 +690,14 @@ page {
display: flex;
flex-direction: column;
gap: 24rpx;
height: 360rpx; /* 固定高度确保 3 条评价展示 */
overflow: hidden;
}
.review-item {
display: flex;
align-items: flex-start;
height: 100rpx; /* 固定高度确保滚动平滑 */
overflow: hidden;
}
.avatar {
width: 60rpx;
@@ -571,6 +714,7 @@ page {
}
.review-content {
flex: 1;
overflow: hidden;
}
.username {
font-size: 24rpx;
@@ -580,6 +724,10 @@ page {
.content {
font-size: 22rpx;
color: #4e5969;
line-height: 1.6;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 最多显示两行 */
overflow: hidden;
}
</style>

View File

@@ -15,7 +15,8 @@ definePage({
interface ReportItem {
id: string
orderId: number
orderId: string
queryState: string
typeText: string
status: string
statusText: string
@@ -80,7 +81,8 @@ function queryStateToUi(state: string): { status: string, statusText: string } {
function mapRow(row: Record<string, unknown>): ReportItem {
const id = row.id != null ? String(row.id) : ''
const orderId = Number(row.order_id)
const orderId = row.order_id != null ? String(row.order_id).trim() : ''
const queryState = typeof row.query_state === 'string' ? row.query_state : ''
const qp = readQueryParams(row)
const vin = pickVin(qp) || '—'
let model = pickModel(qp)
@@ -97,7 +99,7 @@ function mapRow(row: Record<string, unknown>): ReportItem {
)
const time = typeof row.create_time === 'string' ? row.create_time : ''
return { id, orderId, typeText, status, statusText, vin, model, time }
return { id, orderId, queryState, typeText, status, statusText, vin, model, time }
}
async function loadList() {
@@ -137,8 +139,12 @@ function handleReportTap(item: ReportItem) {
uni.showToast({ title: '无法打开报告', icon: 'none' })
return
}
if (item.queryState !== 'success') {
uni.showToast({ title: item.statusText || '报告暂不可查看', icon: 'none' })
return
}
uni.navigateTo({
url: `/pages/report/detail?orderId=${encodeURIComponent(String(item.orderId))}`,
url: `/pages/report/detail?orderId=${encodeURIComponent(item.orderId)}`,
})
}
</script>

View File

@@ -3,6 +3,9 @@ import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getToolboxItem } from '@/config/toolboxRegistry'
import { postToolboxQuery } from '@/api/toolbox'
import { useCaseStore } from '@/stores/case'
const caseStore = useCaseStore()
definePage({
style: {
@@ -234,10 +237,9 @@ async function handleQuery() {
// 调试:打印表单值
console.log('提交的表单数据:', JSON.stringify(form.value))
console.log('验证结果:', tool.value.validate(form.value))
if (!tool.value.validate(form.value)) {
error.value = tool.value.validateMsg
if (tool.value.validate && !tool.value.validate(form.value)) {
error.value = tool.value.validateMsg || '输入校验失败'
return
}
@@ -247,6 +249,15 @@ async function handleQuery() {
if (res.code === 200 && res.data?.result) {
result.value = res.data.result
// 实时推送到首页案例队列 (不经过数据库)
if (tool.value) {
caseStore.addCase({
tag: tool.value.name,
vin: '******',
model: '在线查询成功'
})
}
// 如果是游戏类工具
if (tool.value?.isGame) {
// 成语填字和诗词填空:准备选项
@@ -291,9 +302,10 @@ const resultEntries = computed(() => {
const val = result.value![key]
const display = val === '' || val === null ? '无' : val
if (typeof labelOrObj === 'object' && labelOrObj !== null) {
return { key, label: labelOrObj.label, hidden: !!labelOrObj.hidden, value: display }
const obj = labelOrObj as any
return { key, label: obj.label || '', hidden: !!obj.hidden, value: display }
}
return { key, label: labelOrObj, hidden: false, value: display }
return { key, label: String(labelOrObj), hidden: false, value: display }
})
})
@@ -318,9 +330,10 @@ const resultList = computed(() => {
})
const subResultList = computed(() => {
if (!result.value || !tool.value?.subResultKey || !tool.value?.subResultLabels)
const currentTool = tool.value
if (!result.value || !currentTool?.subResultKey || !currentTool?.subResultLabels)
return []
const sub = result.value[tool.value.subResultKey]
const sub = (result.value as Record<string, any>)[currentTool.subResultKey]
if (!Array.isArray(sub))
return []
return sub
@@ -455,6 +468,18 @@ function handleRestart() {
}
handleQuery()
}
// 辅助函数:安全获取标签和隐藏状态
function getLabel(fieldLabel: any): string {
if (typeof fieldLabel === 'object' && fieldLabel !== null) {
return fieldLabel.label || ''
}
return String(fieldLabel)
}
function isFieldHidden(fieldLabel: any): boolean {
return typeof fieldLabel === 'object' && fieldLabel !== null && !!fieldLabel.hidden
}
</script>
<template>
@@ -811,7 +836,7 @@ function handleRestart() {
<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-label">{{ getLabel(fieldLabel) }}</text>
<text class="card-item-field-value">{{ item[fieldKey] }}</text>
</template>
</view>
@@ -836,9 +861,9 @@ function handleRestart() {
<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-label">{{ getLabel(fieldLabel) }}</text>
<!-- 隐藏字段点击显示/隐藏 -->
<view v-if="typeof fieldLabel === 'object' && fieldLabel.hidden" class="card-item-reveal-wrap">
<view v-if="isFieldHidden(fieldLabel)" class="card-item-reveal-wrap">
<view
v-if="!revealedKeys.has(`${idx}-${fieldKey}`)"
class="card-item-reveal-btn"

45
src/stores/case.js Normal file
View File

@@ -0,0 +1,45 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useCaseStore = defineStore('case', () => {
const caseQueue = ref([])
/**
* 向队列中添加一个案例
* @param {Object} item { id, tag, vin, model }
*/
function addCase(item) {
// 将新案例插入到队列头部,这样下次滚动就能看到
caseQueue.value.unshift({
id: item.id || Date.now(),
tag: item.tag || '查询成功',
vin: item.vin || '******',
model: item.model || '未知工具',
})
// 保持队列长度,防止无限增长
if (caseQueue.value.length > 50) {
caseQueue.value.pop()
}
}
/**
* 批量更新队列(通常用于接口拉取)
*/
function updateQueue(items) {
if (!items || items.length === 0) return
// 将新获取的数据合并到现有队列中
// 过滤掉已存在的 ID
const existingIds = new Set(caseQueue.value.map(c => c.id))
const newItems = items.filter(item => !existingIds.has(item.id))
caseQueue.value.push(...newItems)
}
return {
caseQueue,
addCase,
updateQueue
}
})