确认订单

package-lock.json

@@ -22,6 +22,7 @@
         "@babel/core": "^7.8.0",
         "@tarojs/mini-runner": "3.3.10",
         "@tarojs/webpack-runner": "3.3.10",
+        "@types/qs": "^6.9.7",
         "@types/react": "^17.0.2",
         "@types/webpack-env": "^1.13.6",
         "@typescript-eslint/eslint-plugin": "^4.15.1",
@@ -3981,6 +3982,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "dev": true
+    },
     "node_modules/@types/react": {
       "version": "17.0.43",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz",
@@ -23717,6 +23724,12 @@
       "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
       "dev": true
     },
+    "@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "dev": true
+    },
     "@types/react": {
       "version": "17.0.43",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz",

package.json

@@ -49,6 +49,7 @@
     "@babel/core": "^7.8.0",
     "@tarojs/mini-runner": "3.3.10",
     "@tarojs/webpack-runner": "3.3.10",
+    "@types/qs": "^6.9.7",
     "@types/react": "^17.0.2",
     "@types/webpack-env": "^1.13.6",
     "@typescript-eslint/eslint-plugin": "^4.15.1",

src/pages/index/index.config.ts

@@ -1,3 +1,5 @@
 export default {
-  navigationBarTitleText: '电子商城'
+  navigationBarTitleText: '电子商城',
+  enablePullDownRefresh: true,
+  backgroundTextStyle: 'dark'
 }

src/pages/index/index.tsx

@@ -8,7 +8,9 @@ import ShopCart from '@/components/shopCart'
 import styles  from './index.module.scss'
 import { goLink } from '@/common/common'
 import { useState } from 'react'
-import Taro from '@tarojs/taro'
+import Taro, { usePullDownRefresh } from '@tarojs/taro'
+import useManualPullDownRefresh from '@/use/useManualPullDownRefresh'
+
 
 export default () => {
   const tabs_list = [
@@ -32,6 +34,8 @@ export default () => {
   ]
 
   const [showShopCart, setShowShopCart] = useState(false)
+  
+  const res = useManualPullDownRefresh(() => {return '99999'})
 
   return (
     <MoveBtn onClick={() => setShowShopCart(!showShopCart)}>

src/use/useHttp.ts

@@ -0,0 +1,204 @@
+
+
+import Taro from '@tarojs/taro'
+import { useState } from 'react'
+import  qs from 'qs';
+    /**
+     * 返回状态信息，根据 http 状态错
+     * @param {Number} status 
+     * @returns 
+     */
+    const showStatus = (status) => {
+      let message = ''
+      switch (status) {
+        case 400:
+          message = '请求错误(400)'
+          break
+        case 401:
+          message = '未授权，请重新登录(401)'
+          break
+        case 403:
+          message = '拒绝访问(403)'
+          break
+        case 404:
+          message = '请求出错(404)'
+          break
+        case 408:
+          message = '请求超时(408)'
+          break
+        case 500:
+          message = '服务器错误(500)'
+          break
+        case 501:
+          message = '服务未实现(501)'
+          break
+        case 502:
+          message = '网络错误(502)'
+          break
+        case 503:
+          message = '服务不可用(503)'
+          break
+        case 504:
+          message = '网络超时(504)'
+          break
+        case 505:
+          message = 'HTTP版本不受支持(505)'
+          break
+        default:
+          message = `连接出错(${status})!`
+      }
+      return `${message}，请检查网络或联系管理员！`
+    }
+
+
+/**  
+ * axios 请求状态封装，返回响应式数据 fetch(), loading, error, code, msg 等常用方法/状态  
+ * @param {Object} options 对象  
+ * @param {String} options.url 请求的URL  
+ * @param {String} options.method 请求的方法  
+ * @param {Object} options.data 请求的参数  
+ * @returns {Object} 返回fetch(), loading, error, code, msg  
+ */
+export const useRequest = (options = {
+    url: '/',
+    method: 'get',
+    type: 'json',
+    data: {},
+    page: 1,
+    pageSize: 24,
+    pagination: false, // 是否分页
+}) => {
+    
+    let params:any = {
+        code: null, // 业务码  
+        success: null, // 请求是否成功
+        data: {},
+        msg: '',
+        loading: null,
+        error: null,
+        query: {},
+        filter: null,
+        sort: null,
+        total: 0,
+        multiple: true, // 请求多次
+        count: 0, // 第几次请求
+        token: '', // token
+    }
+
+    if(options.pagination) {
+        params.page = options.page
+        params.pageSize = options.pageSize
+    }
+
+    const [state, setState] = useState({...params})
+
+    // // 每页多少条记录
+    // const handleSizeChange = (val) => {
+    //     state.size = val
+    // }
+
+    // // 当前
+    // const handleCurrentChange = (val) => {
+    //     state.page = val
+    // }
+
+    // /**
+    //  * 筛选搜索
+    //  * @param {Object} val  `{name:'ppx'}` name 为字段名，ppx 为字段内容
+    //  */
+    // const handleFilterChange = (val) => {
+    //     state.filter = val
+    // }
+
+    // 排序
+
+    /**
+     * 排序字段，排序方式
+     * @param {String} val 排序字段 
+     * @param {String} sortOrder `desc` / `asc`
+     */
+    // eslint-disable-next-line
+    const handleSort = (val, orderby = "desc") => {
+        if (val != null) {
+            state.sort = orderby ? {
+                sort_key: `${orderby == 'desc' ? '-' + val : val}`
+            } : null
+        }
+
+    }
+
+    // 请求函数  
+    const fetchData = async (sub_options) => {
+        state.loading = true
+
+        state.query = {
+            ...sub_options,
+            ...options.pagination && {
+                page: state.page,
+                size: state.size,
+            },
+            ...state.filter,
+            ...state.sort
+        }
+        try {
+            let token = Taro.getStorageSync('token')
+            const q = {
+                ...options,
+                ...{
+                    header: {
+                        "Platform": 3,
+                        "Authorization": token || state.token,
+                    }
+                },
+                ...options.method?.toUpperCase() == 'GET' ? {
+                    data: state.query
+                } : {
+                    data: options.type?.toUpperCase() == 'FORMDATA' ? qs.stringify(state.query) : state.query
+                }
+            }
+            const result = await Taro.request(q as any)
+            const { statusCode } = result
+            const {
+                code,
+                msg,
+                data
+            } = result.data
+            console.log(code, msg, data, statusCode);
+            if (statusCode === 200) {
+                state.success = (code === 0 ? true : false)
+                state.code = code
+                state.msg = msg
+                state.data = data
+                state.total = data?.list ? data?.total : 0
+            }else{
+                Taro.showToast({
+                    title: `错误：${showStatus(statusCode)}`
+                })
+                if (statusCode === 401) {
+                    Taro.reLaunch({
+                        url: '/pages/login/index'
+                    })
+                }
+                
+            }  
+
+        } catch (e) {
+            console.log('出错', e);
+            state.success = false
+            state.error = true
+            state.msg = e.errMsg
+
+        }
+        state.error = false
+        state.loading = false
+    }
+
+    return {
+        // handleSizeChange,
+        // handleCurrentChange,
+        // handleFilterChange,
+        handleSort,
+        fetchData,
+    }
+
+}

src/use/useManualPullDownRefresh.ts

@@ -0,0 +1,24 @@
+import Taro, { usePullDownRefresh } from "@tarojs/taro"
+import { useCallback, useState } from "react"
+
+type Arg = {[index:string]:any}
+export default (fn?:(val:Arg) => any, arg?:Arg) => {
+    const [data, setData] = useState({})
+
+    usePullDownRefresh(() => {
+        getData()
+    })
+
+    const getData = useCallback(() => {
+        setTimeout(() => {
+            const res = fn?.({...arg})
+            setData((e) => ({...e, res}))
+            Taro.stopPullDownRefresh()
+        }, 1000)
+    }, [])
+
+    return {
+        getData,
+        data
+    }
+}

yarn.lock

@@ -1601,6 +1601,11 @@
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
+"@types/qs@^6.9.7":
+  "integrity" "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw=="
+  "resolved" "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz"
+  "version" "6.9.7"
+
 "@types/react@^17.0.2":
   version "17.0.43"
   resolved "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz"