diff --git a/package-lock.json b/package-lock.json index a0df40e..5427fab 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 9258dd5..1ee5a32 100644 --- a/package.json +++ b/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", diff --git a/src/pages/index/index.config.ts b/src/pages/index/index.config.ts index 0b7f3f1..1f88149 100644 --- a/src/pages/index/index.config.ts +++ b/src/pages/index/index.config.ts @@ -1,3 +1,5 @@ export default { - navigationBarTitleText: '电子商城' + navigationBarTitleText: '电子商城', + enablePullDownRefresh: true, + backgroundTextStyle: 'dark' } diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index f147af4..e09cb32 100644 --- a/src/pages/index/index.tsx +++ b/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 ( setShowShopCart(!showShopCart)}> diff --git a/src/use/useHttp.ts b/src/use/useHttp.ts new file mode 100644 index 0000000..8dea036 --- /dev/null +++ b/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, + } + +} \ No newline at end of file diff --git a/src/use/useManualPullDownRefresh.ts b/src/use/useManualPullDownRefresh.ts new file mode 100644 index 0000000..4ff1ff3 --- /dev/null +++ b/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 + } +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 1759e5f..dda13eb 100644 --- a/yarn.lock +++ b/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"