✨ feat:首页大概

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",
+    })
+}

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;
+    }
+
+}

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<any>({ 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 (
-        <>
-            <View>222</View>
-        </>
+        // <MoveBtn onClick={() => setShowShopCart(showShopCart)}>
+        <View className={styles.main}>
+            <View className={styles.search}>
+                {/* <View className={styles.search_collect} onClick={() => goLink('/pages/collection/index')}>
+                        我的收藏
+                    </View> */}
+                <View className={styles.search_input} onClick={() => goLink('/pages/searchList/search')}>
+                    <Search disabled={true} style={{ width: '263rpx' }} />
+                </View>
+            </View>
+            <View className={styles.products}>
+                <SideBar
+                    list={kindData.list}
+                    height='100%'
+                    defaultValue={kindData.defaultId}
+                    hasMore={hasMore}
+                    statusMore={statusMore}
+                    selfOnScrolltolower={getScrolltolower}
+                    sideBarOnClick={getProductKindId}
+                    heightItem={150}
+                    refresherTriggered={refresherTriggeredStatus}
+                    selfOnRefresherRefresh={() => getRefresherRefresh()}>
+                    <Product productList={productData.list} />
+                </SideBar>
+            </View>
+            <View className='common_safe_area_y'></View>
+            {/* <ShopCart show={showShopCart} onClose={() => setShowShopCart(false)} /> */}
+        </View>
+        // </MoveBtn>
     )
 }

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)
   }

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 {

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',