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

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']

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 = {

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>
 

src/views/Survey/views/Preview/Index.vue

@@ -675,9 +675,9 @@ async function answer(callback, callbackBeforePage) {
           question.error = translatedText.value.ThisIsARequiredQuestion;
         }
       } else if (
-        answer
+        answer &&
-        && questionType === 1
+        questionType === 1 &&
-        && Object.keys(answer).findIndex((value) => !answer[value]) !== -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
+            isError =
-              = config.include_mark === 1
+              config.include_mark === 1
                 ? !/^[a-zA-Z·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]]+$/.test(
                     newValue
                   ) || !newValue.length
@@ -864,8 +864,8 @@ async function answer(callback, callbackBeforePage) {
             break;
           // 中文
           case 4:
-          isError
+            isError =
-              = config.include_mark === 1
+              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
+            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(
+              !/^(([^<>()[\]\\.,;:\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
+            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(
+              !/^[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
+                    question.warning =
-                      = translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
+                      translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
                         repeat.allow_repeat_num,
                         repeat.repeat_type
                       );
                   } else {
-                    question.error
+                    question.error =
-                      = translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
+                      translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
                         repeat.allow_repeat_num,
                         repeat.repeat_type
                       );