feat:问卷列表下拉加载更多
This commit is contained in:
du.meimei
@@ -1,70 +1,77 @@
|
||||
<template>
|
||||
<div class="new-survey-container container">
|
||||
<div v-for="item in survey" :key="item" class="new-survey_item">
|
||||
<!-- 问卷详情 -->
|
||||
<div class="survey_item_info">
|
||||
<div style="position: relative">
|
||||
<div class="survey_item_info_title">
|
||||
<van-list
|
||||
v-model:loading="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
>
|
||||
<div v-for="item in survey" :key="item" class="new-survey_item">
|
||||
<!-- 问卷详情 -->
|
||||
<div class="survey_item_info">
|
||||
<div style="position: relative">
|
||||
<div class="survey_item_info_title">
|
||||
<el-text>
|
||||
<b>{{ item.project_name }}</b>
|
||||
</el-text>
|
||||
<el-text>{{ item.answer_num }}份</el-text>
|
||||
</div>
|
||||
<div class="survey_item_info_status">
|
||||
<el-space spacer="|">
|
||||
<!--报名签到-->
|
||||
<div>
|
||||
<span><img src="" alt="" /></span>
|
||||
<el-text size="small">{{ item.scene_name }}</el-text>
|
||||
</div>
|
||||
<!-- 问卷来源 -->
|
||||
<div>
|
||||
<span><img src="" alt="" /></span>
|
||||
<el-text size="small">{{ item.source === 1 ? '移动端' : 'PC端' }}</el-text>
|
||||
</div>
|
||||
<!-- 问卷时间 -->
|
||||
<div>
|
||||
<span><img src="" alt="" /></span>
|
||||
<el-text size="small">{{ item.created_at }}</el-text>
|
||||
</div>
|
||||
</el-space>
|
||||
</div>
|
||||
<div class="survey_item_status">
|
||||
<span class="survey_item_info_status_text">-{{ item.status_txt }}-</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--问卷描述-->
|
||||
<div v-if="item.remarks" class="survey_item_info_desc">
|
||||
<el-text>
|
||||
<b>{{ item.project_name }}</b>
|
||||
{{ item.remarks }}
|
||||
</el-text>
|
||||
<el-text>{{ item.answer_num }}份</el-text>
|
||||
</div>
|
||||
<div class="survey_item_info_status">
|
||||
<el-space spacer="|">
|
||||
<!--报名签到-->
|
||||
<div>
|
||||
<span><img src="" alt="" /></span>
|
||||
<el-text size="small">{{ item.scene_name }}</el-text>
|
||||
</div>
|
||||
<!-- 问卷来源 -->
|
||||
<div>
|
||||
<span><img src="" alt="" /></span>
|
||||
<el-text size="small">{{ item.source === 1 ? '移动端' : 'PC端' }}</el-text>
|
||||
</div>
|
||||
<!-- 问卷时间 -->
|
||||
<div>
|
||||
<span><img src="" alt="" /></span>
|
||||
<el-text size="small">{{ item.created_at }}</el-text>
|
||||
</div>
|
||||
</el-space>
|
||||
</div>
|
||||
<div class="survey_item_status">
|
||||
<span class="survey_item_info_status_text">-{{ item.status_txt }}-</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--问卷描述-->
|
||||
<div v-if="item.remarks" class="survey_item_info_desc">
|
||||
<el-text>
|
||||
{{ item.remarks }}
|
||||
</el-text>
|
||||
<!-- action 功能位置 -->
|
||||
<div class="survey_item_action">
|
||||
<!-- <el-space direction="horizontal">-->
|
||||
<div>
|
||||
<el-button @click="deleteItem(item)"> 删除</el-button>
|
||||
<el-button @click="copyItem(item)"> 复制</el-button>
|
||||
<el-button @click="toPreview(item)" style="border: 2px solid #71b73c">
|
||||
<el-text style="color: #71b73c">预览</el-text>
|
||||
</el-button>
|
||||
<el-button @click="toPublish(item)" color="#6fb937">
|
||||
<el-text style="color: white">开启投放</el-text>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-dropdown placement="top-end" trigger="click" style="">
|
||||
<Io5EllipsisHorizontalSharp />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>编辑</el-dropdown-item>
|
||||
<el-dropdown-item>存为模板</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<!-- </el-space>-->
|
||||
</div>
|
||||
</div>
|
||||
<!-- action 功能位置 -->
|
||||
<div class="survey_item_action">
|
||||
<!-- <el-space direction="horizontal">-->
|
||||
<div>
|
||||
<el-button @click="deleteItem(item)"> 删除</el-button>
|
||||
<el-button @click="copyItem(item)"> 复制</el-button>
|
||||
<el-button style="border: 2px solid #71b73c" @click="toPreiview(item)">
|
||||
<el-text style="color: #71b73c">预览</el-text>
|
||||
</el-button>
|
||||
<el-button color="#6fb937" @click="toPublish(item)">
|
||||
<el-text style="color: white">开启投放</el-text>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-dropdown placement="top-end" trigger="click" style="">
|
||||
<Io5EllipsisHorizontalSharp />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>编辑</el-dropdown-item>
|
||||
<el-dropdown-item>存为模板</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<!-- </el-space>-->
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -76,12 +83,22 @@ import { showDialog, showFailToast, showSuccessToast, showToast } from 'vant';
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
const survey = ref([]);
|
||||
const total = ref(0);
|
||||
const loading = ref(false);
|
||||
const finished = ref(false);
|
||||
const form = ref({
|
||||
page: 1,
|
||||
page: 0,
|
||||
pageSize: 10
|
||||
});
|
||||
|
||||
const fetchSurveys = async() => {
|
||||
const onLoad = () => {
|
||||
// 异步更新数据
|
||||
setTimeout(() => {
|
||||
form.value.page = form.value.page + 1;
|
||||
fetchSurveys();
|
||||
}, 500);
|
||||
};
|
||||
const fetchSurveys = async () => {
|
||||
const params = {
|
||||
page: form.value.page,
|
||||
per_page: form.value.pageSize,
|
||||
@@ -89,7 +106,8 @@ const fetchSurveys = async() => {
|
||||
};
|
||||
const res = await getSurveysPage(params);
|
||||
if (res.data.code === 0) {
|
||||
survey.value = res.data.data;
|
||||
survey.value = survey.value.concat(res.data.data);
|
||||
total.value = res.data.meta.total;
|
||||
survey.value.forEach((item) => {
|
||||
const sceneName = JSON.parse(JSON.stringify(item.scene_name));
|
||||
const nameList = sceneName.split('-');
|
||||
@@ -102,6 +120,11 @@ const fetchSurveys = async() => {
|
||||
item.created_at = timeList[0];
|
||||
}
|
||||
});
|
||||
loading.value = false;
|
||||
// 数据全部加载完成
|
||||
if (survey.value.length >= total.value) {
|
||||
finished.value = true;
|
||||
}
|
||||
} else {
|
||||
// Toast()
|
||||
}
|
||||
@@ -112,7 +135,7 @@ const deleteItem = (item) => {
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#03B03C'
|
||||
})
|
||||
.then(async() => {
|
||||
.then(async () => {
|
||||
const res = await deleteSurveys(item.sn);
|
||||
if (res.data.message) {
|
||||
showToast(res.data.message);
|
||||
@@ -136,7 +159,7 @@ const copyItem = (item) => {
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#03B03C'
|
||||
})
|
||||
.then(async() => {
|
||||
.then(async () => {
|
||||
const res = await copySurveys(item.sn);
|
||||
if (res.data.code === 200 || res.data.code === 201) {
|
||||
showSuccessToast('复制成功');
|
||||
@@ -150,7 +173,7 @@ const copyItem = (item) => {
|
||||
// on cancel
|
||||
});
|
||||
};
|
||||
const toPreiview = (item) => {
|
||||
const toPreview = (item) => {
|
||||
router.push({
|
||||
path: '/preview',
|
||||
query: {
|
||||
@@ -169,7 +192,7 @@ const toPublish = (item) => {
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
fetchSurveys();
|
||||
// fetchSurveys();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user