136 lines
3.5 KiB
Vue
136 lines
3.5 KiB
Vue
<template>
|
||
<div class="survey-search">
|
||
<nav-search v-model:value="searchValue" @search="handleSearchClick" />
|
||
<!-- <nav-search
|
||
placeholder="请输入关键词"
|
||
v-model:value="searchValue"
|
||
@click="() => $router.push({ name: 'search' })"
|
||
/> -->
|
||
</div>
|
||
<div class="new-survey-container" v-loading="requestLoading">
|
||
<div style="margin-bottom: 80px">
|
||
<van-list @load="handleLoadSurveys" v-model:loading="loading" :finished="finished">
|
||
<template #finished>
|
||
<!-- 如果存在搜索文字的话，显示没有更多了 -->
|
||
<span v-if="searchValue">
|
||
<el-text>无符合要求的结果</el-text>
|
||
</span>
|
||
</template>
|
||
|
||
<div v-for="item in survey" v-if="survey.length > 0" :key="item" class="new-survey_item">
|
||
<survey-item :survey="item" :is-analysis="true" :disable-action-button="false" />
|
||
</div>
|
||
<!-- 如果问卷等于0的话，显示空容器 -->
|
||
<empty-container
|
||
v-if="survey.length === 0 && !searchValue"
|
||
:img-src="emptyImg"
|
||
:show-button="true"
|
||
@handle-click="handleEmptyClick"
|
||
/>
|
||
<NewSurvey v-model:show="showModel" />
|
||
</van-list>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, onUnmounted, ref, watch } from 'vue';
|
||
import NavSearch from '@/components/Search/Index.vue';
|
||
import NewSurvey from '@/views/Home/components/NewSurvey/index.vue';
|
||
import EmptyContainer from '@/views/Survey/components/EmptyContainer.vue';
|
||
import SurveyItem from '@/views/Survey/components/SurveyItem.vue';
|
||
import {
|
||
fetchSurveys,
|
||
loading,
|
||
finished,
|
||
survey,
|
||
requestLoading,
|
||
searchValue,
|
||
clearSurveys
|
||
} from '@/views/Survey/hooks/useSurveyData';
|
||
import emptyImg from '@/assets/img/emptyImg.png';
|
||
|
||
const showModel = ref(false);
|
||
// 初始化 From 内容
|
||
const form = {
|
||
page: 1,
|
||
pageSize: 10,
|
||
key_word: ''
|
||
};
|
||
|
||
watch(searchValue, () => {
|
||
// 当搜索框内容发生变化的时候，重置 finished 状态
|
||
finished.value = true;
|
||
// 重置搜索form 数据
|
||
form.page = 1;
|
||
});
|
||
|
||
const handleSearchClick = () => {
|
||
// 点击搜索的时候重置 form 数据
|
||
form.page = 1;
|
||
form.key_word = searchValue.value;
|
||
// 重置 survey 数据
|
||
clearSurveys();
|
||
// 重置 finished 状态
|
||
finished.value = false;
|
||
|
||
fetchSurveys(form);
|
||
};
|
||
|
||
onUnmounted(() => {
|
||
// 当组件卸载的时候，清空 survey 数据
|
||
clearSurveys();
|
||
// 清空搜索的字符
|
||
searchValue.value = '';
|
||
});
|
||
|
||
onMounted(() => {
|
||
// 解决当没有问卷的时候，里面的内容不更新的问题
|
||
fetchSurveys(form);
|
||
});
|
||
|
||
async function handleLoadSurveys() {
|
||
await fetchSurveys(form);
|
||
form.page = form.page + 1;
|
||
}
|
||
|
||
function handleEmptyClick() {
|
||
showModel.value = true;
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@use '@/assets/css/theme';
|
||
@import '@/assets/css/base';
|
||
@import '@/assets/css/main';
|
||
|
||
.el-dropdown-menu__item:not(.is-disabled):focus,
|
||
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||
background-color: #000;
|
||
}
|
||
|
||
.survey-search {
|
||
@extend %search-gradient;
|
||
padding: 10px 10px;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 1000;
|
||
background-color: theme.$nav-header-color;
|
||
}
|
||
|
||
.new-survey-container {
|
||
margin-top: 10px;
|
||
|
||
.new-survey_item {
|
||
margin: 0 10px 10px;
|
||
padding: 10px;
|
||
border-radius: 16px;
|
||
background-color: white;
|
||
}
|
||
|
||
.new-survey_item + .new-survey_item {
|
||
margin: 0 10px 10px;
|
||
}
|
||
}
|
||
</style>
|