源文件

jeepay-ui-uapp-agent/hooks/useList.js

@@ -0,0 +1,136 @@
+import { ref, reactive, toRefs, onMounted, watch } from "vue"
+import { onPullDownRefresh, onShow, onReachBottom, onLoad } from "@dcloudio/uni-app"
+
+// requestFun: 请求函数  dataHandle: 数据处理函数  params 额外的固定的请求数据
+export default function (config) {
+  const { requestFun, dataHandle = (data) => data, params = {}, flag = true, onshow = true, pageSize = 10 } = config
+
+  // 该对象会返回给每个页面，用于取值
+  const useDataResult = reactive({
+    dataList: [], // 数据列表
+    listTipText: "加载更多", // 列表底部提示文字  1.加载更多 2.加载中 3.暂无更多
+  })
+
+  const listParams = {} // 页面传参对象 getList方法中传的参数
+
+  const queryObj = reactive({
+    pageNumber: 1, // 默认是1
+    pageSize: pageSize, // 默认10条，可传参修改
+    isLoad: false, // 是否为上拉加载
+    titlePage: "", // 总页数
+  })
+
+  const getList = (listParamObj) => {
+    // 非下拉刷新才显示加载提示
+    if (queryObj.isLoad) {
+      uni.showLoading({ title: "加载中" })
+    }
+
+    useDataResult.listTipText = "加载中" // 列表底部提示文字  1.加载更多 2.加载中 3.暂无更多
+
+    // listParamObj 父组件在函数中携带的请求参数，与页码页数，固定参数，合并到一起，并且当该参数对象在调用时有具体值，会将页码重置为1
+    let paramObj // 参数合并
+    if (listParamObj) {
+      queryObj.pageNumber = 1
+      Object.keys(listParamObj).forEach((item) => {
+        listParams[item] = listParamObj[item]
+      })
+      useDataResult.dataList = []
+    }
+    paramObj = Object.assign(
+      {
+        pageNumber: queryObj.pageNumber,
+        pageSize: queryObj.pageSize,
+      },
+      params,
+      listParams
+    )
+    paramObj.pageNumber = queryObj.pageNumber
+    paramObj.pageSize = queryObj.pageSize
+    requestFun(paramObj)
+      .then(({ bizData }) => {
+        uni.hideLoading()
+
+        queryObj.titlePage = Math.ceil(bizData.total / queryObj.pageSize) // 页码总数
+
+        if (queryObj.titlePage == queryObj.pageNumber || bizData.records.length == 0) {
+          useDataResult.listTipText = "暂无更多"
+        }
+
+        uni.stopPullDownRefresh() // 请求成功停止下拉刷新
+
+        // dataHandle 函数用于对数据的集中处理，在每个页面可自定义
+        let data = dataHandle(bizData.records ? bizData.records : bizData)
+
+        // 下拉刷新重置数据， 上拉加载新增数据
+        if (queryObj.isLoad) {
+          useDataResult.dataList.push(...data)
+        } else {
+          useDataResult.dataList = data
+        }
+      })
+      .catch((err) => uni.hideLoading())
+  }
+
+  // 只在onshow时调用一次， 请求方法
+  const onShowGetList = () => {
+    if (!flag) return false
+    uni.showLoading({ title: "加载中" })
+    queryObj.pageNumber = 1 // 页码固定为1
+    let paramObj = Object.assign(
+      {
+        // 合并请求参数
+        pageNumber: 1,
+        pageSize: queryObj.pageSize,
+      },
+      params
+    )
+    Object.assign(paramObj, listParams)
+    requestFun(paramObj).then(({ bizData }) => {
+      uni.hideLoading()
+      queryObj.titlePage = Math.ceil(bizData.total / queryObj.pageSize)
+      if (queryObj.titlePage == queryObj.pageNumber || bizData.records.length == 0) {
+        useDataResult.listTipText = "暂无更多"
+      }
+
+      // dataHandle 函数用于对数据的集中处理，在每个页面可自定义
+      let data = dataHandle(bizData.records ? bizData.records : bizData)
+      useDataResult.dataList = data // 由于只在onShow 中调用一次，所以数据重新赋值
+    })
+  }
+
+  onShow(() => {
+    if (onshow) {
+      onShowGetList()
+    }
+  })
+  onLoad(() => {
+    if (!onshow) {
+      onShowGetList()
+    }
+  })
+
+  // 下拉刷新
+  onPullDownRefresh(() => {
+    queryObj.pageNumber = 1
+    queryObj.isLoad = false
+    getList()
+  })
+
+  // 上拉加载
+  onReachBottom(() => {
+    queryObj.pageNumber++
+
+    if (queryObj.pageNumber > queryObj.titlePage) {
+      queryObj.pageNumber = queryObj.pageNumber
+      return (queryObj.isLoad = false)
+    }
+    queryObj.isLoad = true
+    getList()
+  })
+
+  return {
+    useDataResult, // 返回结果对象
+    getList, // 请求函数，每个页面自定义请求参数
+  }
+}