feat(utils): 新增节流函数并优化市场组件加载逻辑

- 在 utils.js 中添加了 throttle 函数，用于节流操作
- 在 Market 组件中实现了无限滚动加载功能
- 优化了市场信息获取逻辑，增加了分页处理
- 更新了 yl.png 文件

src/utils/utils.js

@@ -159,6 +159,25 @@ export function debounce(fn, wait) {
   };
 }
 
+/**
+ * 节流函数
+ * @param fn {Function} 需要节流的函数
+ * @param wait {number} 节流时间
+ * @returns {Function} 节流后的函数
+ */
+export function throttle(fn, wait) {
+  let lastTime = 0;
+  return function() {
+    const context = this;
+    const args = arguments;
+    const now = Date.now();
+    if (now - lastTime >= wait) {
+      fn.apply(context, args);
+      lastTime = now;
+    }
+  };
+}
+
 /**
  * 格式化时间
  * @param type now：当前时间  endOfDay：当前时间的 23:59:59

src/views/Home/components/Market/Index.vue

@@ -37,20 +37,25 @@
         </section>
       </van-tabs>
     </div>
-    <market-item :info="marketInfo" :marketItem="marketItem" />
+    <section v-infinite-scroll="loadData">
+      <market-item :info="marketInfo" :marketItem="marketItem" />
+    </section>
     <div class="more">
       <p>-更多模板期待您的探索-</p>
     </div>
   </section>
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import MarketItem from '@/components/MarketItem/MarketItem.vue';
 import { getListScene, getSurveyTemplates } from '@/api/home';
 import Search from '@/components/Search/Index.vue';
 import { imgMap } from '@/utils/imgMap';
+import { throttle } from '@/utils/utils';
 
-const searchResult = ref([]);
+const searchParm = {
+  index: 1
+};
 const marketList = ref([]);
 const active = ref(null);
 const marketIndex = ref(0);
@@ -61,6 +66,7 @@ const marketItem = ref();
 const searchValue = ref('');
 let keyword = '';
 
+let loadDataSingle = false;
 /**
  * 如果这个搜索框没有值，默认清空 keyword, 然后重新加载列表
  */
@@ -84,10 +90,10 @@ const getMarketInfo = async (item: string | number, title?: string) => {
 
   if (data) {
     const params = {
-      page: 1,
+      page: searchParm.index,
       // 此字段无法脱离组件使用
       keyword,
-      per_page: 100,
+      per_page: 10,
       group_id: 0,
       is_public: 1,
       scene_code_info: data.code,
@@ -96,11 +102,23 @@ const getMarketInfo = async (item: string | number, title?: string) => {
 
     // 获取相应的 Info 信息
     const res = await getSurveyTemplates(params);
+    console.log(`template market res`, res);
+    const meta = res.data.meta;
+    const { current_page, last_page } = meta;
+
     if (res.data.code === 0) {
       marketInfo.value = res.data.data;
     }
     // 获取对应的 item 信息
     marketItem.value = marketList.value.find((item) => item.h5Title === title);
+
+    // 后置处理. 解构出当前和最后一页内容,然后判断是否相等,如果相等,则取消数据加载
+    if (current_page === last_page) {
+      loadDataSingle = false;
+    } else {
+      searchParm.index++;
+      loadDataSingle = true;
+    }
   }
 };
 
@@ -112,6 +130,12 @@ function fetchTemplate() {
   keyword = searchValue.value;
   getMarketInfo(marketIndex.value);
 }
+
+const debounceFn = throttle(getTableList, 2000);
+function loadData() {
+  if (!loadDataSingle) return;
+  debounceFn();
+}
 </script>
 
 <style scoped>