xuan/TestEShopDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

封装请求hook

Browse Source
This commit is contained in:
czm 2022-04-22 19:12:15 +08:00
parent f326656ed7
commit 050f90433c
13 changed files with 191 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/common/constant.js Normal file
View File

@ -0,0 +1,27 @@
console.log('环境变量2',CURRENT_ENV);
// export const BASE_URL = CURRENT_ENV.includes('development') ? `https://test.zzfzyc.com/lymarket` : `https://www.zzfzyc.com/lymarket`
// export const BASE_URL = `http://192.168.0.75:50001/lymarket`
// export const BASE_URL = `http://192.168.0.89:50001/lymarket`
// export const BASE_URL = `http://10.0.0.5:50001/lymarket`
// export const BASE_URL = `http://192.168.0.89:40001/lymarket`
// export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
// export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境
export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发
// export const BASE_URL = `https://dev.zzfzyc.com/lymarket` // 开发环境
// export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境
// export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
// CDN
// 生成密钥
export const GET_UPLOAD_SIGN = `/upyun/getsign` // 请求签名 url
export const UPLOAD_CDN_URL = `https://v0.api.upyun.com/`
// 前缀
export const IMG_CND_Prefix = "http://test.cdn.zzfzyc.com/"
// 上传图片视频
export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}`;

2
src/components/infiniteScroll/index.tsx
View File

@ -75,7 +75,7 @@ export default memo(({
onRefresherRefresh = {() => refresherRefresh()}
onRefresherRestore = {() => refresherRestore()}
onRefresherAbort = {() => refresherAbort()}
refresherBackground ='#ccc'
refresherBackground ='#F8F8F8'
>
<View style={{paddingBottom:paddingBottom + 'rpx'}}>
{children}

4
src/components/shopCart/index.tsx
View File

@ -112,7 +112,7 @@ export default ({show = false, onClose}: param) => {
</View>
<View className={styles.con}>
{loading&&<LoadingCard/>}
{!loading&&list.length > 0&&<InfiniteScroll selfonScrollToLower={() => {console.log('触底了')}} paddingBottom={100}>
{!loading&&list.length > 0&&<InfiniteScroll refresherTriggered={true} refresherEnabled={true} selfonScrollToLower={() => {console.log('触底了')}} paddingBottom={100}>
<View className={styles.product_list}>
{list.map((item, index) => {
return <View key={index} className={styles.product_item}>
@ -124,7 +124,7 @@ export default ({show = false, onClose}: param) => {
</View>
<View className={styles.des}>
<View className={styles.title}>{item.title}</View>
<View className={styles.subtitle}>0770# 21S单面平纹(食毛)</View>
<View className={styles.subtitle}>07703# 21S单面平纹(食毛)</View>
<View className={styles.tag}>剪板</View>
</View>
<View className={styles.count}>

16
src/components/sideBar/index.tsx
View File

@ -16,10 +16,20 @@ type Params = {
children?: ReactNode,
height?: string,
heightItem?: number,
sideBarOnClick?: (ListProps) => void
sideBarOnClick?: (ListProps) => void,
refresherTriggered?: true|false,
selfOnRefresherRefresh?: () => void
}
export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClick, children, heightItem = 100}: Params) => {
export default memo(({list = [],
defaultValue = 0,
height='100vh',
sideBarOnClick,
children,
heightItem = 100,
refresherTriggered = false,
selfOnRefresherRefresh
}: Params) => {
let num_half = useRef(0)
@ -94,7 +104,7 @@ export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClic
<View className="common_safe_area_y"></View>
</ScrollView>
<View className={styles.sideBar_con}>
<InfiniteScroll selfonScrollToLower={() => onScrolltolower()}>
<InfiniteScroll selfonScrollToLower={() => onScrolltolower()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
{children}
</InfiniteScroll>
</View>

4
src/pages/details/index.config.ts
View File

@ -1,3 +1,5 @@
export default {
navigationBarTitleText: '详情'
navigationBarTitleText: '详情',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark'
}

23
src/pages/details/index.tsx
View File

@ -1,6 +1,6 @@
import { Image, RichText, Swiper, SwiperItem, View } from '@tarojs/components'
import Taro from '@tarojs/taro';
import { Button, Image, RichText, Swiper, SwiperItem, View } from '@tarojs/components'
import Taro, { useShareAppMessage } from '@tarojs/taro';
import classnames from "classnames";
import DesSwiper from './components/swiper';
import OrderCount from './components/orderCount';
@ -8,6 +8,7 @@ import ShopCart from '@/components/shopCart';
import Preview,{colorItem} from './components/preview';
import styles from './index.module.scss'
import { useMemo, useState } from 'react';
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh';
type item = {title:string, img:string, url:string, id:number}
type params = {
@ -17,6 +18,9 @@ type params = {
}
export default (props:params) => {
//页面下拉刷新
const res = useManualPullDownRefresh()
const list = [
{
title:'数据',
@ -80,6 +84,19 @@ export default (props:params) => {
duration: 2000
})
}
useShareAppMessage(res => {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '自定义转发标题',
path: '/page/user?id=123'
}
})
return (
<View className={styles.main}>
<DesSwiper list={list}/>
@ -91,10 +108,12 @@ export default (props:params) => {
<View className={styles.share}>
<View className={classnames('iconfont icon-fenxiang', styles.miconfont)}></View>
<View className={styles.text}>分享</View>
<Button open-type="share">转发</Button>
</View>
<View className={styles.collect}>
<View className={classnames('iconfont icon-shoucang', styles.miconfont, collectStatus&&styles.collected)} onClick={() => changeCollect()}></View>
<View className={styles.text}>收藏</View>
</View>
</View>
<View className={styles.des_data}>

14
src/pages/index/index.tsx
View File

@ -35,7 +35,17 @@ export default () => {
const [showShopCart, setShowShopCart] = useState(false)
const res = useManualPullDownRefresh(() => {return '99999'})
//页面下拉刷新
const res = useManualPullDownRefresh()
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getData = () => {
setRefresherTriggeredStatus(true)
setTimeout(() => {
setRefresherTriggeredStatus(() => false)
console.log('12123')
}, 1000)
}
return (
<MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
@ -48,7 +58,7 @@ export default () => {
</View>
</View>
<View className={styles.products}>
<SideBar list={tabs_list} height="100%" heightItem={150}>
<SideBar list={tabs_list} height="100%" heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getData()}>
<Product/>
</SideBar>
</View>

4
src/pages/searchList/hightSearchList.config.ts
View File

@ -1,3 +1,5 @@
export default {
navigationBarTitleText: '搜索'
navigationBarTitleText: '搜索',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark'
}

4
src/pages/searchList/hightSearchList.tsx
View File

@ -12,6 +12,7 @@ import Tabs from "@/components/tabs";
import styles from './hightSearchList.module.scss'
import { useCallback, useEffect, useState } from "react";
import Taro, { useReady } from "@tarojs/taro";
import useManualPullDownRefresh from "@/use/useManualPullDownRefresh";
export default () => {
const [showFilter, setShowFilter] = useState(false)
@ -55,6 +56,9 @@ export default () => {
setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
}
}, [state.deviceLab])
//页面下拉刷新
const res = useManualPullDownRefresh()
return (
<View className={styles.main}>
<View className={styles.search}>

2
src/pages/searchList/search.config.ts
View File

@ -1,3 +1,3 @@
export default {
navigationBarTitleText: '搜索'
navigationBarTitleText: '搜索',
}

4
src/pages/searchList/searchList.config.ts
View File

@ -1,3 +1,5 @@
export default {
navigationBarTitleText: '高级搜索'
navigationBarTitleText: '高级搜索',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark'
}

4
src/pages/searchList/searchList.tsx
View File

@ -8,6 +8,7 @@ import SelectData from "./components/selectData";
import { goLink } from "@/common/common";
import styles from './searchList.module.scss'
import { useCallback, useState } from "react";
import useManualPullDownRefresh from "@/use/useManualPullDownRefresh";
export default () => {
const [showFilter, setShowFilter] = useState(false)
@ -30,6 +31,9 @@ export default () => {
setScrollStatus(false)
}
},[])
//页面下拉刷新
const res = useManualPullDownRefresh()
return (
<View className={styles.main}>
<View className={styles.search}>

178
src/use/useHttp.ts
View File

@ -1,54 +1,75 @@
import Taro from '@tarojs/taro'
import { useState } from 'react'
import { useRef, 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}，请检查网络或联系管理员！`
type Params = {
code: string|null
success: true|false
data: any,
msg: string,
loading: true|false,
error: any,
query: any,
filter: any,
sort: any,
total: number,
multiple: true|false, // 请求多次
count: number, // 第几次请求
token: string, // token
page?: number,
pageSize?: number
}
/**
* 返回状态信息，根据 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}，请检查网络或联系管理员！`
}
/**
@ -69,28 +90,25 @@ export const useRequest = (options = {
pagination: false, // 是否分页
}) => {
let params:any = {
let params:Params = {
code: null, // 业务码
success: null, // 请求是否成功
success: false, // 请求是否成功
data: {},
msg: '',
loading: null,
loading: false,
error: null,
query: {},
filter: null,
sort: null,
sort: '',
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 stateRef = useRef({...params})
const [state, setState] = useState({...stateRef.current})
// // 每页多少条记录
// const handleSizeChange = (val) => {
@ -120,7 +138,7 @@ export const useRequest = (options = {
// eslint-disable-next-line
const handleSort = (val, orderby = "desc") => {
if (val != null) {
state.sort = orderby ? {
stateRef.current.sort = orderby ? {
sort_key: `${orderby == 'desc' ? '-' + val : val}`
} : null
}
@ -129,16 +147,16 @@ export const useRequest = (options = {
// 请求函数
const fetchData = async (sub_options) => {
state.loading = true
state.query = {
stateRef.current.loading = true
setState((e) => ({...e, loading:true}))
stateRef.current.query = {
...sub_options,
...options.pagination && {
page: state.page,
size: state.size,
page: stateRef.current.page,
size: stateRef.current.pageSize,
},
...state.filter,
...state.sort
...stateRef.current.filter,
...stateRef.current.sort
}
try {
let token = Taro.getStorageSync('token')
@ -147,13 +165,13 @@ export const useRequest = (options = {
...{
header: {
"Platform": 3,
"Authorization": token || state.token,
"Authorization": token || stateRef.current.token,
}
},
...options.method?.toUpperCase() == 'GET' ? {
data: state.query
data: stateRef.current.query
} : {
data: options.type?.toUpperCase() == 'FORMDATA' ? qs.stringify(state.query) : state.query
data: options.type?.toUpperCase() == 'FORMDATA' ? qs.stringify(stateRef.current.query) : stateRef.current.query
}
}
const result = await Taro.request(q as any)
@ -165,11 +183,11 @@ export const useRequest = (options = {
} = 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
stateRef.current.success = (code === 0 ? true : false)
stateRef.current.code = code
stateRef.current.msg = msg
stateRef.current.data = data
stateRef.current.total = data?.list ? data?.total : 0
}else{
Taro.showToast({
title: `错误：${showStatus(statusCode)}`
@ -183,22 +201,20 @@ export const useRequest = (options = {
}
} catch (e) {
console.log('出错', e);
state.success = false
state.error = true
state.msg = e.errMsg
stateRef.current.success = false
stateRef.current.error = true
stateRef.current.msg = e.errMsg
}
state.error = false
state.loading = false
stateRef.current.error = false
stateRef.current.loading = false
setState(() => stateRef.current)
}
return {
// handleSizeChange,
// handleCurrentChange,
// handleFilterChange,
handleSort,
fetchData,
state,
}
}