hz/ylst-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善搜索功能：

Browse Source 
1. 添加搜索方法实现，支持关键词搜索
2. 实现取消搜索功能，清空搜索结果
3. 添加搜索结果展示组件
4. 优化搜索结果样式，使用Element Plus风格
5. 添加搜索输入验证，防止空搜索
This commit is contained in:
Huangzhe
2025-05-12 14:18:06 +08:00
parent d10ab302d5
commit a648ef27fc
23 changed files with 385 additions and 12833 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/views/Home/components/MineTask/Index.vue
View File

@@ -2,7 +2,7 @@
import { ref, useTemplateRef } from 'vue';
import { showToast } from 'vant';
import { useSetPieChart } from '@/hooks/chart/usePieChart';
import { getSurveysPage } from "@/api/home"
// 饼图 dom 结构
const pieChart = useTemplateRef<HTMLSpanElement>('pieChart');
@@ -24,10 +24,26 @@ const taskData = ref({
// 图表数据
const chartData = ref([
{ name: '选项1', value: 66.77, color: '#F56C6C' },
{ name: '选项2', value: 33.33, color: '#F7BA2A' },
{ name: '选项3', value: 0, color: '#67C23A' },
{ name: '选项4', value: 0, color: '#409EFF' }
{
name: '选项1',
value: 66.77,
color: '#F56C6C'
},
{
name: '选项2',
value: 33.33,
color: '#F7BA2A'
},
{
name: '选项3',
value: 0,
color: '#67C23A'
},
{
name: '选项4',
value: 0,
color: '#409EFF'
}
]);
// 导航按钮点击事件
@@ -38,6 +54,14 @@ const handlePrev = () => {
const handleNext = () => {
showToast('点击了下一个问题');
};
getSurveysPage({
page: 1,
per_page: 3,
group_id: 0
}).then(res => {
console.log(res)
})
</script>
<template>
@@ -50,9 +74,9 @@ const handleNext = () => {
<!-- 标题部分 -->
<template #title>
<van-space>
<span style="font-size: 18px; font-weight: bold">{{ taskData.title }}</span>
<span style="color: #409eff">{{ taskData.progress }}%</span>
<span style="color: #606266; font-size: 14px">| {{ taskData.deadline }}</span>
<span style=" font-size: 18px; font-weight: bold">{{ taskData.title }}</span>
<span style=" color: #409eff">{{ taskData.progress }}%</span>
<span style=" color: #606266; font-size: 14px">| {{ taskData.deadline }}</span>
</van-space>
</template>
@@ -71,43 +95,43 @@ const handleNext = () => {
<!-- 卡片内容 -->
<template #bottom>
<van-space direction="vertical" fill style="width: 100%; padding-top: 16px">
<van-space direction="vertical" fill style=" width: 100%; padding-top: 16px">
<!-- 任务统计 -->
<van-grid :column-num="3">
<van-grid-item>
<van-space direction="vertical" fill>
<span style="color: #67c23a; font-size: 18px; font-weight: bold">{{
<span style=" color: #67c23a; font-size: 18px; font-weight: bold">{{
taskData.responseCount
}}</span>
<span style="font-size: 14px; color: #909399">回收数量</span>
}}</span>
<span style=" font-size: 14px; color: #909399">回收数量</span>
</van-space>
</van-grid-item>
<van-grid-item>
<van-space direction="vertical" fill>
<span style="color: #67c23a; font-size: 18px; font-weight: bold">{{
<span style=" color: #67c23a; font-size: 18px; font-weight: bold">{{
taskData.responseRate
}}</span>
<span style="font-size: 14px; color: #909399">回收数量进度</span>
}}</span>
<span style=" font-size: 14px; color: #909399">回收数量进度</span>
</van-space>
</van-grid-item>
<van-grid-item>
<van-space direction="vertical" fill>
<span style="color: #67c23a; font-size: 18px; font-weight: bold">{{
<span style=" color: #67c23a; font-size: 18px; font-weight: bold">{{
taskData.submissionRate
}}</span>
<span style="font-size: 14px; color: #909399">投放时间进度</span>
}}</span>
<span style=" font-size: 14px; color: #909399">投放时间进度</span>
</van-space>
</van-grid-item>
</van-grid>
<!-- 问题部分 -->
<van-divider />
<van-divider/>
<p>1. 能描述您为自己或家人购买这款产品A的可能性吗？（单选）</p>
<!-- 图表部分 -->
<div style="display: flex; justify-content: center; margin: 16px 0">
<span ref="pieChart" style="width: 100%; height: 300px"></span>
<div style=" display: flex; justify-content: center; margin: 16px 0">
<span ref="pieChart" style=" width: 100%; height: 300px"></span>
</div>
<!-- 选项列表 -->