🦄 refactor(书籍详情页): 下拉滚动列表写法简化测试

+/*
+ * @Date: 2022-05-26 19:50:27
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-18 00:15:08
+ * @FilePath: /tswj/src/api/C/book.js
+ * @Description: 文件描述
+ */
 import { fn, fetch } from '@/api/fn';
 import { fn, fetch } from '@/api/fn';
 
 
 const Api = {
 const Api = {
   ADD_SUBSCRIBE: '/srv/?a=add_subscribe',
   ADD_SUBSCRIBE: '/srv/?a=add_subscribe',
+  BOOK_INFO: '/srv/?a=book_info',
 }
 }
 
 
 /**
 /**
@@ -10,3 +18,13 @@ const Api = {
  * @returns 
  * @returns 
  */
  */
 export const addSubscribeAPI = (params) => fn(fetch.post(Api.ADD_SUBSCRIBE, params));
 export const addSubscribeAPI = (params) => fn(fetch.post(Api.ADD_SUBSCRIBE, params));
+
+/**
+ * @description: 书籍详情
+ * @param {String} book_id 书籍 ID
+ * @param {String} localism_type 方言类型
+ * @param {*} limit
+ * @param {*} offset
+ * @returns 
+ */
+export const bookInfoAPI = (params) => fn(fetch.get(Api.BOOK_INFO, params));

+/*
+ * @Date: 2022-05-05 18:07:16
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-18 00:22:36
+ * @FilePath: /tswj/src/composables/useVideoList.js
+ * @Description: 文件描述
+ */
 import { ref } from 'vue'
 import { ref } from 'vue'
 import axios from '@/utils/axios';
 import axios from '@/utils/axios';
 import _ from 'lodash'
 import _ from 'lodash'
 import { Toast } from 'vant';
 import { Toast } from 'vant';
 import { useRoute } from 'vue-router'
 import { useRoute } from 'vue-router'
+import { bookInfoAPI } from '@/api/C/book'
+import { flowFn } from '@/hooks/useFlowFn'
 
 
 export const useVideoList = () => {
 export const useVideoList = () => {
   const $route = useRoute();
   const $route = useRoute();
@@ -97,47 +106,13 @@ export const useVideoList = () => {
   /**
   /**
    * 向下滚动查询数据
    * 向下滚动查询数据
    */
    */
-  const onLoad = () => {
+  const onLoad = async () => {
     // 异步更新数据
     // 异步更新数据
-    axios.get('/srv/?a=book_info', {
-      params: {
-        book_id: $route.query.id,
-        localism_type: chooseLanguage.value.text,
-        limit: limit.value,
-        offset: offset.value
-      }
-    })
-      .then(res => {
-        if (res.data.code === 1) {
-          bookInfo.value = res.data.data;
-          prod_list.value = _.concat(prod_list.value, res.data.data.prod_list);
-          prod_list.value = _.uniqBy(prod_list.value, 'id');
-          offset.value = prod_list.value.length;
-          loading.value = false;
-          // 数据全部加载完成
-          if (!res.data.data.prod_list.length) {
-            // 加载状态结束
-            finished.value = true;
-          }
-          // 空数据提示
-          if (!prod_list.value.length) {
-            finishedTextStatus.value = false;
-          }
-          emptyStatus.value = Object.is(prod_list.value.length, 0);
-        } else {
-          // tslint:disable-next-line: no-console
-          console.warn(res);
-          if (!res.data.show) return false;
-          Toast({
-            icon: 'close',
-            message: res.data.msg
-          });
+    const { data, code } = await bookInfoAPI({ book_id: $route.query.id, localism_type: chooseLanguage.value.text, limit: limit.value, offset: offset.value })
+    if (code === 1) {
+      bookInfo.value = data;
+      flowFn(data.prod_list, prod_list, offset, loading, finished, finishedTextStatus, emptyStatus);
     }
     }
-      })
-      .catch(err => {
-        // tslint:disable-next-line: no-console
-        console.error(err);
-      })
   };
   };
 
 
   /**
   /**

+
+/**
+ * @description 封装简化滚动查询列表执行流程
+ * @param {*} data 接口返回列表数据
+ * @param {*} list 自定义列表
+ * @param {*} offset 
+ * @param {*} loading 
+ * @param {*} finished 
+ * @param {*} finishedTextStatus 
+ * @param {*} emptyStatus 
+ */
+import _ from 'lodash'
+
+export const flowFn = (data, list, offset, loading, finished, finishedTextStatus, emptyStatus) => {
+  list.value = _.concat(list.value, data);
+  list.value = _.uniqBy(list.value, 'id');
+  offset.value = list.value.length;
+  loading.value = false;
+  // 数据全部加载完成
+  if (!data.length) {
+    // 加载状态结束
+    finished.value = true;
+  }
+  // 空数据提示
+  if (!list.value.length) {
+    finishedTextStatus.value = false;
+  }
+  emptyStatus.value = Object.is(list.value.length, 0);
+}