feat: 请求及提示 调试

env/.env

@@ -10,7 +10,7 @@ VITE_APP_PUBLIC_BASE=/
 # 登录页面
 VITE_LOGIN_URL = '/pages/login/index'
 # 第一个请求地址
-VITE_SERVER_BASEURL = 'https://ukw0y1.laf.run'
+VITE_SERVER_BASEURL = 'http://192.168.0.101:8101'
 # 第二个请求地址
 VITE_API_SECONDARY_URL = 'https://ukw0y1.laf.run'
 
@@ -27,5 +27,5 @@ VITE_UPLOAD_BASEURL__WEIXIN_TRIAL = 'https://ukw0y1.laf.run/upload'
 VITE_UPLOAD_BASEURL__WEIXIN_RELEASE = 'https://ukw0y1.laf.run/upload'
 
 # h5是否需要配置代理
-VITE_APP_PROXY=false
+VITE_APP_PROXY=true
 VITE_APP_PROXY_PREFIX = '/api'

src/api/product.ts

@@ -0,0 +1,11 @@
+import { http } from '@/utils/http'
+import { extractAndRetained, qs } from '@/utils/index'
+
+/**
+ * 获取商品列表
+ * @returns data.list[]
+ */
+export function getList(data: any) {
+  const { extract, retained } = extractAndRetained(data, ['page', 'size'])
+  return http.post<any>(`/mall/product/list?${qs(extract)}`, retained)
+}

src/main.ts

@@ -3,11 +3,17 @@ import { createSSRApp } from 'vue'
 import App from './App.vue'
 import { prototypeInterceptor, requestInterceptor, routeInterceptor } from './interceptors'
 import i18n from './locale/index'
-
 import store from './store'
 import '@/style/index.scss'
 import 'virtual:uno.css'
 
+uni.$zp = {
+  config: {
+    // 配置分页默认pageSize为20
+    'default-page-size': 20,
+  },
+}
+
 export function createApp() {
   const app = createSSRApp(App)
   app.use(store)

src/pages/index/index.vue

@@ -10,10 +10,10 @@
 </route>
 
 <script lang="ts" setup>
-// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）（使用页面滚动）
-// eslint-disable-next-line unused-imports/no-unused-imports
-import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
 import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
+// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）（使用页面滚动）
+
+import { getList } from '@/api/product'
 
 defineOptions({
   name: 'Index', // 首页
@@ -150,17 +150,11 @@ const priceTabList = ref([
 ])
 
 const dataList = ref([])
-function queryList(pageNo, pageSize) {
-  // 此处请求仅为演示，请替换为自己项目中的请求
-  setTimeout(() => {
-    dataList.value = [
-      { title: '123' },
-      { title: '123' },
-      { title: '123' },
-      { title: '12345' },
-    ]
-    paging.value.complete(dataList.value)
-  }, 1000)
+async function queryList(pageNo, pageSize) {
+  const data = { page: pageNo, size: pageSize }
+  const res = await getList(data)
+  console.log(res)
+  paging.value.complete(dataList.value)
 }
 
 function toProductDetail(item) {
@@ -177,7 +171,7 @@ function toNotifications() {
 </script>
 
 <template>
-  <z-paging ref="paging" refresher-only use-page-scroll @query="queryList">
+  <z-paging ref="paging" use-page-scroll @query="queryList">
     <template #top>
       <view
         class="flex items-center justify-between bg-white pb-40rpx pl-42rpx pr-34rpx pt-26rpx"

src/utils/http.ts

@@ -1,4 +1,5 @@
 import type { CustomRequestOptions } from '@/interceptors/request'
+import { toast } from './toast'
 
 export function http<T>(options: CustomRequestOptions) {
   // 1. 返回 Promise 对象
@@ -25,19 +26,13 @@ export function http<T>(options: CustomRequestOptions) {
         else {
           // 其他错误 -> 根据后端错误信息轻提示
           !options.hideErrorToast
-          && uni.showToast({
-            icon: 'none',
-            title: (res.data as IResData<T>).msg || '请求错误',
-          })
+          && toast.info((res.data as IResData<T>).msg || '请求错误')
           reject(res)
         }
       },
       // 响应失败
       fail(err) {
-        uni.showToast({
-          icon: 'none',
-          title: '网络错误，换个网络试试',
-        })
+        toast.error('网络错误，换个网络试试')
         reject(err)
       },
     })

src/utils/index.ts

@@ -161,3 +161,70 @@ export function getEnvBaseUploadUrl() {
 
   return baseUploadUrl
 }
+
+// 其他公共方法
+
+export function extractAndRetained(obj, keys) {
+  const extract = {}
+  const retained = { ...obj } // 创建浅拷贝
+
+  keys.forEach((key) => {
+    if (Object.prototype.hasOwnProperty.call(retained, key)) {
+      extract[key] = retained[key]
+      delete retained[key]
+    }
+  })
+
+  return { extract, retained }
+}
+// 地址栏参数拼接
+/**
+ * 将对象序列化为 URL 查询字符串
+ * @param {object} params - 需要序列化的参数对象
+ * @returns {string} 序列化后的查询字符串
+ */
+export function qs(params) {
+  return Object.entries(params)
+    .map(([key, value]) => {
+      const encodedKey = encodeURIComponent(key)
+      const encodedValue
+        = value === undefined || value === null
+          ? ''
+          : encodeURIComponent(String(value))
+      return `${encodedKey}=${encodedValue}`
+    })
+    .join('&')
+}
+
+/**
+ * 解析 URL 查询字符串为对象
+ * @param {string} queryString - 需要解析的查询字符串（如 "a=1&b=2"）
+ * @returns {object} 解析后的参数对象
+ */
+export function parseQs(queryString) {
+  if (!queryString)
+    return {}
+
+  // 移除开头的问号（如果有）
+  const cleanQuery = queryString.startsWith('?')
+    ? queryString.slice(1)
+    : queryString
+
+  return cleanQuery.split('&')
+    .reduce((acc, pair) => {
+      const [encodedKey, encodedValue] = pair.split('=')
+
+      if (encodedKey === undefined)
+        return acc
+
+      const key = decodeURIComponent(encodedKey)
+      const value = encodedValue === undefined
+        ? undefined
+        : decodeURIComponent(encodedValue)
+
+      // 处理空字符串值
+      acc[key] = value === '' ? null : value
+
+      return acc
+    }, {})
+}