feat:问卷列表下拉加载更多

2025-03-17 19:39:07 +08:00
parent 55b9f47b25
commit df8368612f
5 changed files with 186 additions and 162 deletions
--- a/components.d.ts
+++ b/components.d.ts
@@ -32,6 +32,7 @@ declare module 'vue' {
    VanGrid: typeof import('vant/es')['Grid']
    VanGridItem: typeof import('vant/es')['GridItem']
    VanIcon: typeof import('vant/es')['Icon']
+    VanList: typeof import('vant/es')['List']
    VanNavBar: typeof import('vant/es')['NavBar']
    VanPicker: typeof import('vant/es')['Picker']
    VanPopup: typeof import('vant/es')['Popup']
--- a/src/views/Home/components/Market/Index.vue
+++ b/src/views/Home/components/Market/Index.vue
@@ -20,7 +20,7 @@ const marketList = ref([]);
 const active = ref(null);
 const marketInfo = ref([]);

-const getTableList = async() => {
+const getTableList = async () => {
  const res = await getListScene();
  if (res.data.code === 0) {
    res.data.data.forEach((item) => {
@@ -31,7 +31,7 @@ const getTableList = async() => {
    getMarketInfo(marketList.value[0]);
  }
 };
-const getMarketInfo = async(item) => {
+const getMarketInfo = async (item) => {
  const data = marketList.value.filter((market, index) => item === index)[0];
  if (data) {
    const params = {
--- a/src/views/Survey/Index.vue
+++ b/src/views/Survey/Index.vue
@@ -1,5 +1,11 @@
 <template>
  <div class="new-survey-container container">
+    <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">
@@ -46,10 +52,10 @@
          <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-button @click="toPreview(item)" style="border: 2px solid #71b73c">
              <el-text style="color: #71b73c">预览</el-text>
            </el-button>
-          <el-button color="#6fb937" @click="toPublish(item)">
+            <el-button @click="toPublish(item)" color="#6fb937">
              <el-text style="color: white">开启投放</el-text>
            </el-button>
          </div>
@@ -65,6 +71,7 @@
          <!--        </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>

--- a/src/views/Survey/views/Preview/Index.vue
+++ b/src/views/Survey/views/Preview/Index.vue
@@ -675,9 +675,9 @@ async function answer(callback, callbackBeforePage) {
          question.error = translatedText.value.ThisIsARequiredQuestion;
        }
      } else if (
-        answer
-        && questionType === 1
-        && Object.keys(answer).findIndex((value) => !answer[value]) !== -1
+        answer &&
+        questionType === 1 &&
+        Object.keys(answer).findIndex((value) => !answer[value]) !== -1
      ) {
        // 单选题
        isError = true;
@@ -854,8 +854,8 @@ async function answer(callback, callbackBeforePage) {
        switch (config.text_type) {
          // 字母
          case 3:
-          isError
-              = config.include_mark === 1
+            isError =
+              config.include_mark === 1
                ? !/^[a-zA-Z·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]]+$/.test(
                    newValue
                  ) || !newValue.length
@@ -864,8 +864,8 @@ async function answer(callback, callbackBeforePage) {
            break;
          // 中文
          case 4:
-          isError
-              = config.include_mark === 1
+            isError =
+              config.include_mark === 1
                ? !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]])+$/.test(
                    newValue
                  ) || !newValue.length
@@ -876,8 +876,8 @@ async function answer(callback, callbackBeforePage) {
            break;
          // 邮箱
          case 5:
-          isError
-              = !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+            isError =
+              !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
                value
              );
            question.error = isError ? translatedText.value.PleaseEnterACorrectEmail : '';
@@ -889,8 +889,8 @@ async function answer(callback, callbackBeforePage) {
            break;
          // 身份证号
          case 7:
-          isError
-              = !/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
+            isError =
+              !/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
                value
              );
            question.error = isError ? translatedText.value.PleaseEnterACorrectID : '';
@@ -1032,14 +1032,14 @@ async function answer(callback, callbackBeforePage) {
              currentQuestions.forEach((question, index) => {
                if (index >= warnStart && index < warnEnd) {
                  if (repeat.repeat_type) {
-                    question.warning
-                      = translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
+                    question.warning =
+                      translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
                        repeat.allow_repeat_num,
                        repeat.repeat_type
                      );
                  } else {
-                    question.error
-                      = translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
+                    question.error =
+                      translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
                        repeat.allow_repeat_num,
                        repeat.repeat_type
                      );