diff --git a/src/api/index.ts b/src/api/index.ts new file mode 100644 index 0000000..f168fac --- /dev/null +++ b/src/api/index.ts @@ -0,0 +1,24 @@ + + +import { useRequest } from "@/use/useHttp" +/** + * 系列列表 + * @returns + */ +export const kindListApi = () => { + return useRequest({ + url: `/v1/mp/product/kind/list`, + method: "get", + }) +} + +/** + * 面料列表 + * @returns + */ +export const ProductListApi = () => { + return useRequest({ + url: `/v1/mp/product/list`, + method: "get", + }) +} diff --git a/src/pages/index/index.module.scss b/src/pages/index/index.module.scss new file mode 100644 index 0000000..dabaed2 --- /dev/null +++ b/src/pages/index/index.module.scss @@ -0,0 +1,37 @@ +.main { + background-color: $color_bg_one; + height: 100vh; + display: flex; + flex-direction: column; + + .search { + width: 100%; + display: flex; + justify-content: space-between; + padding: 20px 20px 30px 20px; + box-sizing: border-box; + align-items: center; + + .search_collect { + font-size: 26px; + border: 2px solid #007AFF; + color: #007AFF; + border-radius: 50px; + width: 132px; + height: 44px; + text-align: center; + line-height: 44px; + } + + .search_input { + flex: 1; + margin-left: 20px; + } + } + + .products { + flex: 1; + height: 0; + } + +} \ No newline at end of file diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 3032e27..5f9ccf4 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -1,9 +1,112 @@ -import { View, Image, Text, Navigator, Button } from '@tarojs/components' +import { View } from '@tarojs/components' +import Search from '@/components/search' +import SideBar from '@/components/sideBar' +import Product from '@/components/product' +import MoveBtn from '@/components/moveBtn' +// import ShopCart from '@/components/shopCart' +import { goLink } from '@/common/common' +import styles from './index.module.scss' +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import { kindListApi, ProductListApi } from '@/api/index' +// import useLogin from '@/use/useLogin' +import { dataLoadingStatus } from '@/common/util' export default () => { + useEffect(() => { + categoryList() + }, []) + + //获取面料种类 + const [kindData, setKindData] = useState({ list: [], defaultId: 0 }) + const { fetchData } = kindListApi() + const categoryList = async () => { + const res = await fetchData() + if (res.data?.list) { + setKindData({ ...kindData, list: res.data.list, defaultId: res.data.list[0].id }) + setFiltrate({ ...filtrate, product_kind_id: res.data.list[0].id }) + } + } + + //获取面料列表 + const [productData, setProductData] = useState({ list: [], total: 0 }) + const [hasMore, setHasMore] = useState(true) + const [filtrate, setFiltrate] = useState({ product_kind_id: 0, size: 5, page: 1 }) + const pageNum = useRef({ size: filtrate.size, page: filtrate.page }) + const { fetchData: productFetchData, state: productState } = ProductListApi() + //获取数据方法 + const getProductList = async () => { + const { data, total } = await productFetchData(filtrate) + setProductData({ ...productData, list: data.list, total }) + setRefresherTriggeredStatus(() => false) + } + //监听查询条件 + useEffect(() => { + if (filtrate.product_kind_id) getProductList() + }, [filtrate]) + + //点击面料类型 + const getProductKindId = useCallback((e) => { + pageNum.current.page = 1 + setProductData({ list: [], total: 0 }) + setFiltrate((list) => ({ ...list, size: 5, product_kind_id: e.id })) + }, []) + + //上拉加载数据 + const getScrolltolower = useCallback(() => { + if (productData.list.length >= productData.total) { + setHasMore(false) + } else { + pageNum.current.page++ + const newSize = pageNum.current.size * pageNum.current.page + setFiltrate((e) => ({ ...e, size: newSize })) + } + }, [productData]) + + const [showShopCart, setShowShopCart] = useState(false) + + //列表下拉刷新 + const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) + const getRefresherRefresh = async () => { + pageNum.current.page = 1 + setFiltrate({ ...filtrate, size: 5 }) + setHasMore(true) + setRefresherTriggeredStatus(true) + } + + //数据加载状态 + const statusMore = useMemo(() => { + return dataLoadingStatus({ list: productData.list, total: productData.total, status: productState.loading }) + }, [productData, productState.loading]) + return ( - <> - 222 - + // setShowShopCart(showShopCart)}> + + + {/* goLink('/pages/collection/index')}> + 我的收藏 + */} + goLink('/pages/searchList/search')}> + + + + + getRefresherRefresh()}> + + + + + {/* setShowShopCart(false)} /> */} + + // ) } diff --git a/src/use/useCommonData.ts b/src/use/useCommonData.ts index 8af7ef9..cf515ab 100644 --- a/src/use/useCommonData.ts +++ b/src/use/useCommonData.ts @@ -2,7 +2,7 @@ import { useDispatch } from 'react-redux' import { SET_SHOPCOUNT, CLEAR_SHOPCOUNT } from '@/constants/common' import { DataParam } from '@/reducers/commonData' import { useCallback, useState } from 'react' -import { GetShoppingCartApi } from '@/api/shopCart' +// import { GetShoppingCartApi } from '@/api/shopCart' import { useSelector } from '@/reducers/hooks' export default () => { const commonData = useSelector((state) => state.commonData) @@ -16,10 +16,10 @@ export default () => { dispatch({ type: CLEAR_SHOPCOUNT }) } - const { fetchData: fetchDataShopCount } = GetShoppingCartApi() + // const { fetchData: fetchDataShopCount } = GetShoppingCartApi() const getShopCount = async () => { //获取购物车数据数量 - const { data } = await fetchDataShopCount() + // const { data } = await fetchDataShopCount() let color_list = data.color_list || [] setShopCount(color_list.length) } diff --git a/src/use/useHttp.ts b/src/use/useHttp.ts index 89ca698..efb08c0 100644 --- a/src/use/useHttp.ts +++ b/src/use/useHttp.ts @@ -145,18 +145,18 @@ export const useRequest = ( ...options, ...{ header: { - Platform: 6, + Platform: 3, Appid: WX_APPID, Authorization: token || stateRef.current.token, }, }, ...(options.method?.toUpperCase() == 'GET' ? { - data: stateRef.current.query, - } + data: stateRef.current.query, + } : { - data: options.type?.toUpperCase() == 'FORMDATA' ? qs.stringify(stateRef.current.query) : stateRef.current.query, - }), + data: options.type?.toUpperCase() == 'FORMDATA' ? qs.stringify(stateRef.current.query) : stateRef.current.query, + }), } const result = await Taro.request(q as any) const { statusCode } = result @@ -178,7 +178,7 @@ export const useRequest = ( } else { if (statusCode === 401) { removeToken() - removeSessionKey() + // removeSessionKey() removeUserInfo() login() } else { diff --git a/src/use/useLoginRequest.ts b/src/use/useLoginRequest.ts index 893d874..9bf6122 100644 --- a/src/use/useLoginRequest.ts +++ b/src/use/useLoginRequest.ts @@ -26,7 +26,7 @@ export default () => { const q = { url: BASE_URL + '/v1/mall/login', header: { - "Platform": 6, + "Platform": 3, "Appid": WX_APPID, }, method: 'post',