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/Design/Index.vue

@@ -52,8 +52,8 @@
           <martrix-question
             v-if="
               element.question_type === 8 ||
-                element.question_type === 9 ||
-                element.question_type === 10
+              element.question_type === 9 ||
+              element.question_type === 10
             "
             :element="computedElement(element)"
             :index="index"

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,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>
 

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;
@@ -852,51 +852,51 @@ async function answer(callback, callbackBeforePage) {
         const { value } = answer;
         const newValue = value.replace(/\n|\r|\r\n/g, '');
         switch (config.text_type) {
-        // 字母
-        case 3:
-          isError
-              = config.include_mark === 1
-              ? !/^[a-zA-Z·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]]+$/.test(
-                newValue
-              ) || !newValue.length
-              : !/^[a-zA-Z]+$/.test(newValue) || !newValue.length;
-          question.error = isError ? translatedText.value.PleaseEnterEnglishLetters : '';
-          break;
+          // 字母
+          case 3:
+            isError =
+              config.include_mark === 1
+                ? !/^[a-zA-Z·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]]+$/.test(
+                    newValue
+                  ) || !newValue.length
+                : !/^[a-zA-Z]+$/.test(newValue) || !newValue.length;
+            question.error = isError ? translatedText.value.PleaseEnterEnglishLetters : '';
+            break;
           // 中文
-        case 4:
-          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
-              : !/^(?:[\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;
-          question.error = isError ? translatedText.value.PleaseEnterChineseWords : '';
-          break;
+          case 4:
+            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
+                : !/^(?:[\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;
+            question.error = isError ? translatedText.value.PleaseEnterChineseWords : '';
+            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(
-              value
-            );
-          question.error = isError ? translatedText.value.PleaseEnterACorrectEmail : '';
-          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(
+                value
+              );
+            question.error = isError ? translatedText.value.PleaseEnterACorrectEmail : '';
+            break;
           // 手机号
-        case 6:
-          isError = !/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value);
-          question.error = isError ? translatedText.value.PleaseEnterACorrectPhone : '';
-          break;
+          case 6:
+            isError = !/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value);
+            question.error = isError ? translatedText.value.PleaseEnterACorrectPhone : '';
+            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(
-              value
-            );
-          question.error = isError ? translatedText.value.PleaseEnterACorrectID : '';
-          break;
-        default:
-          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(
+                value
+              );
+            question.error = isError ? translatedText.value.PleaseEnterACorrectID : '';
+            break;
+          default:
+            break;
         }
         if (!isError && value.length < config.min && ![1, 2].includes(config.text_type)) {
           isError = true;
@@ -908,54 +908,54 @@ async function answer(callback, callbackBeforePage) {
         Object.keys(answer).forEach((key) => {
           const value = answer[key];
           switch (config.text_type) {
-          // 字母
-          case 3:
-            if (
-              !/^[a-zA-Z·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]]+$/.test(
-                value
-              )
-            ) {
-              question.error = translatedText.value.PleaseEnterEnglishLetters;
-            }
-            break;
+            // 字母
+            case 3:
+              if (
+                !/^[a-zA-Z·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]]+$/.test(
+                  value
+                )
+              ) {
+                question.error = translatedText.value.PleaseEnterEnglishLetters;
+              }
+              break;
             // 中文
-          case 4:
-            if (
-              !/^(?:[\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(
-                value
-              )
-            ) {
-              question.error = translatedText.value.PleaseEnterChineseWords;
-            }
-            break;
+            case 4:
+              if (
+                !/^(?:[\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(
+                  value
+                )
+              ) {
+                question.error = translatedText.value.PleaseEnterChineseWords;
+              }
+              break;
             // 邮箱
-          case 5:
-            if (
-              !/^(([^<>()[\]\\.,;:\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 = translatedText.value.PleaseEnterACorrectEmail;
-            }
-            break;
+            case 5:
+              if (
+                !/^(([^<>()[\]\\.,;:\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 = translatedText.value.PleaseEnterACorrectEmail;
+              }
+              break;
             // 手机号
-          case 6:
-            if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)) {
-              question.error = translatedText.value.PleaseEnterACorrectPhone;
-            }
-            break;
+            case 6:
+              if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)) {
+                question.error = translatedText.value.PleaseEnterACorrectPhone;
+              }
+              break;
             // 身份证号
-          case 7:
-            if (
-              !/^[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 = translatedText.value.PleaseEnterACorrectID;
-            }
-            break;
-          default:
-            break;
+            case 7:
+              if (
+                !/^[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 = translatedText.value.PleaseEnterACorrectID;
+              }
+              break;
+            default:
+              break;
           }
           if (!question.error && value.length < config.min && ![1, 2].includes(config.text_type)) {
             question.error = translatedText.value.PleaseEnterMoreThanOneCharacters(config.min);
@@ -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
                       );