feat(survey): 优化问卷列表页面

- 添加搜索功能,用户可以按项目名称搜索问卷
- 调整问卷列表项的样式,优化布局
- 移除多余的 padding 样式
- 更新 base.scss 中的变量定义
This commit is contained in:
陈昱达
2025-03-18 13:52:51 +08:00
parent 4ffde6cc5c
commit 1a9383840f
3 changed files with 32 additions and 10 deletions

View File

@@ -21,6 +21,7 @@
--van-cascader-active-color: var(--primary-color);
--status-bar-height: 20px;
--sticky-top-height: calc(var(--status-bar-height) + calc(var(--van-nav-bar-height) + 13px));
--van-radius-sm: 16px;
}
/* semantic color variables for this project */

View File

@@ -5,7 +5,7 @@
}
.van-cell {
padding: 8px !important;
//padding: 8px !important;
}
.van-divider {

View File

@@ -1,6 +1,13 @@
<template>
<div class="survey-search">
<van-search class="theme-background" :border="false" background="#71b73c"></van-search>
<van-search
class="theme-background"
:border="false"
background="#71b73c"
v-model="searchValue"
@blur="blurs"
@search="blurs"
></van-search>
</div>
<div class="new-survey-container container">
<van-list
@@ -103,9 +110,18 @@ const loading = ref(false);
const finished = ref(false);
const form = ref({
page: 0,
pageSize: 10
pageSize: 10,
project_name: ''
});
const searchValue = ref('');
const blurs = () => {
form.value.page = 1;
form.value.project_name = searchValue.value;
survey.value = [];
fetchSurveys();
};
const onLoad = () => {
// 异步更新数据
setTimeout(() => {
@@ -117,7 +133,8 @@ const fetchSurveys = async() => {
const params = {
page: form.value.page,
per_page: form.value.pageSize,
group_id: 0
group_id: 0,
project_name: searchValue.value
};
const res = await getSurveysPage(params);
if (res.data.code === 0) {
@@ -259,12 +276,12 @@ onMounted(() => {
.new-survey-container {
//min-height: calc(100vh - 100px);
padding: 1px;
//padding: 1px;
//background: linear-gradient(to bottom, $theme-color 200px, #f2f2f2 300px);
.new-survey_item {
margin: 10px;
margin: 0 10px 10px 10px;
padding: 10px 0 8px 7px;
border-radius: 8px;
background-color: white;
@@ -354,5 +371,9 @@ onMounted(() => {
}
}
}
.new-survey_item + .new-survey_item {
margin: 0 10px 10px 10px;
}
}
</style>