Files
ylst-h5/src/views/Survey/Index.vue

99 lines
2.2 KiB
Vue

<template>
<div class="survey-search">
<!-- <van-search
v-model="searchValue"
placeholder="请输入关键词"
class="theme-background"
:border="false"
background="#fff"
@search="blurs"
></van-search> -->
<nav-search v-model:value="searchValue" @search="blurs" />
</div>
<div class="new-survey-container">
<div style="margin-bottom: 80px">
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<div v-for="item in survey" v-if="survey.length > 0" :key="item" class="new-survey_item">
<survey-item :survey="item" />
</div>
<empty-container v-else />
</van-list>
</div>
<NewSurvey v-if="survey.length > 0" />
</div>
</template>
<script setup>
import { onMounted } 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 {
form,
fetchSurveys,
loading,
finished,
survey,
searchValue
} from '@/views/Survey/hooks/useSurveyData';
const blurs = () => {
form.value.page = 1;
form.value.project_name = searchValue.value;
survey.value = [];
fetchSurveys();
};
const onLoad = () => {
// 异步更新数据
setTimeout(() => {
form.value.page = form.value.page + 1;
fetchSurveys();
}, 500);
};
onMounted(() => {
// fetchSurveys();
});
</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 {
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
padding: 0;
background-color: theme.$nav-header-color;
}
.new-survey-container {
margin-top: 10px;
.new-survey_item {
margin: 0 10px 10px;
padding: 10px 0 8px 7px;
border-radius: 8px;
background-color: white;
}
.new-survey_item + .new-survey_item {
margin: 0 10px 10px;
}
}
</style>