对接api

2022-05-09 10:03:33 +08:00
parent e7a130533d
commit 4c46c6e22d
16 changed files with 243 additions and 184 deletions
@@ -1,15 +1,16 @@
 import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
-import { useMemo, useState } from "react"
+import { useMemo, useRef, useState } from "react"
 import styles  from './index.module.scss'

 type item = {title:string, img:string, url:string, id:number}

 type params = {
    list?: item[]
-  }
+}
 export default ({list = []}: params) => {
    
    const [pageIndex, setPageIndex] = useState(1)
+    const pageRef = useRef<any>(null)

    const pageCount = useMemo(() => {
        return list.length
@@ -17,7 +18,9 @@ export default ({list = []}: params) => {

    const swiperChange = (e) => {
        setPageIndex(e.detail.current + 1)
+        pageRef.current.innerHTML = 2
    }
+    

    return (
        <View className={styles.swiper}>
@@ -30,7 +33,7 @@ export default ({list = []}: params) => {
                </SwiperItem>
            })}
            </Swiper>
-            <View className={styles.page}>{pageIndex+'/'+pageCount}</View>
+            <View className={styles.page} ref={pageRef}>{pageIndex+'/'+pageCount}</View>
        </View>
    )
 }
@@ -11,6 +11,7 @@ import { useEffect, useMemo, useState } from 'react';
 import useManualPullDownRefresh from '@/use/useManualPullDownRefresh';
 import { goLink } from '@/common/common';
 import useUserInfo from '@/use/useUserInfo';
+
 type item = {title:string, img:string, url:string, id:number}

 type params = {
@@ -48,9 +49,6 @@ export default (props:params) => {


  const [showOrderCount, setShowOrderCount] = useState(false)
-  // const showCartmemo = useMemo(() => {
-  //   return showCart
-  // },[showCart])

  const html = `<h1>这里是详情</h1>
    <div style="font-size:13px">你好啊啊</div>
@@ -105,6 +103,7 @@ export default (props:params) => {
  })

  const {user} = useUserInfo()
+  

  return (
    <View className={styles.main}>
@@ -1,5 +1,5 @@
 import {View} from '@tarojs/components'
-import Swiper from '@/components/swiper'
+import Banner from '@/components/banner'
 import Search from '@/components/search'
 import SideBar from '@/components/sideBar'
 import Product from '@/components/product'
@@ -7,50 +7,77 @@ import MoveBtn from '@/components/moveBtn'
 import ShopCart from '@/components/shopCart'
 import styles  from './index.module.scss'
 import { goLink } from '@/common/common'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
 import useManualPullDownRefresh from '@/use/useManualPullDownRefresh'
-import useUserInfo from '@/use/useUserInfo'
+import {GetProductKindListApi, GetProductListApi} from '@/api/material'

 export default () => {
-  const tabs_list = [
-      {title:'平纹系列', value: 1},
-      {title:'平纹系列', value: 2},
-      {title:'平纹系列', value: 3},
-      {title:'平纹系列', value: 4},
-      {title:'平纹系列', value: 5},
-      {title:'平纹系列', value: 6},
-      {title:'平纹系列', value: 7},
-      {title:'平纹系列', value: 8},
-      {title:'平纹系列', value: 9},
-      {title:'平纹系列', value: 10},
-      {title:'平纹系列', value: 11},
-      {title:'平纹系列', value: 12},
-      {title:'平纹系列', value: 13},
-      {title:'平纹系列', value: 14},
-      {title:'平纹系列', value: 15},
-      {title:'平纹系列', value: 16},
-      {title:'平纹系列', value: 17},
-  ]
+ 
+  
+  useEffect(() => {
+    categoryList()
+  }, [])
+
+  //获取面料种类
+  const [kindData, setKindData] = useState<any>({list:[], defaultId:0})
+  const {fetchData} = GetProductKindListApi()
+  const categoryList = async () => {
+    const res = await fetchData()
+    setKindData({...kindData, list:res.data.list, defaultId: res.data.list[0].id})
+    filtrate.current.product_kind_id = res.data.list[0].id
+    getProductList()
+  }
+
+  //获取面料列表
+  const [productData, setProductData] = useState({list:[], total:0, hasMore:true})
+  const filtrate = useRef({product_kind_id:0, size: 5,page: 1})
+  const pageNum = useRef(1)
+  const {fetchData: productFetchData, state: productState} = GetProductListApi()
+  const getProductKindId = async (e) => {
+    filtrate.current.size = 5
+    pageNum.current = 1
+    filtrate.current.product_kind_id = e.id
+    getProductList()
+  }
+  const getProductList = async () => {
+    filtrate.current.size = filtrate.current.size * pageNum.current
+    const {data,total} = await productFetchData(filtrate.current)
+    setProductData({...productData,list:data.list,total})
+  }
+
+  //上拉加载数据
+  const getScrolltolower = () => {
+    if(productData.list.length >= productData.total) {
+      setProductData({...productData, hasMore: false})
+    } else {
+      pageNum.current++
+      getProductList()
+    }
+  }
+

  const [showShopCart, setShowShopCart] = useState(false)
  
+  //列表下拉刷新
+  const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
+  const getRefresherRefresh = async () => {
+    filtrate.current.size = 5
+    pageNum.current = 1
+    getProductList()
+  }
+  useEffect(() => {
+    setRefresherTriggeredStatus(productState.loading)
+  }, [productState.loading])
+  
  //页面下拉刷新
  const res = useManualPullDownRefresh()
-
-  const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
-  const getData = () => {
-    setRefresherTriggeredStatus(true)
-    setTimeout(() => {
-      setRefresherTriggeredStatus(() => false)
-      console.log('12123')
-    }, 1000)
-  }
  
+
  return (
    <MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
      <View className={styles.main}>
-        <Swiper/>
+        <Banner/>
        <View className={styles.search}>
          <View className={styles.search_collect}>我的收藏</View>
          <View className={styles.search_input}>
@@ -58,8 +85,8 @@ export default () => {
          </View>
        </View>
        <View className={styles.products}>
-          <SideBar list={tabs_list} height="100%" heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getData()}>
-            <Product/>
+          <SideBar list={kindData.list} height="100%" defaultValue={kindData.defaultId} hasMore={productData.hasMore} selfOnScrolltolower={() =>  getScrolltolower()} sideBarOnClick={(e) => getProductKindId(e)} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}>
+            <Product productList={productData.list}/>
          </SideBar>
        </View>
        <View className='common_safe_area_y'></View>
@@ -11,11 +11,14 @@ export default ({onBlur, onSave}:Param) => {
    const [descData, setDescData] = useState({
        number: 0,
        value: '',
-        count: 10
+        count: 200
    })
    const getDesc = useCallback((e) => {
        let value = e.detail.value
-        let res = value.slice(0, descData.count)
+        let res = value
+        if(value.length > descData.count) {
+            res = value.slice(0, descData.count)
+        }
        setDescData({...descData, number:res.length, value: res})
    },[])

@@ -26,7 +29,7 @@ export default ({onBlur, onSave}:Param) => {
        <View className={styles.order_popup}>
            <View className={styles.order_popup_title}>添加备注</View>
            <View className={styles.order_popup_input}>
-                <Textarea placeholder="请添加备注" maxlength={10} cursorSpacing={100} onInput={(e) => getDesc(e)} onBlur={(e) => onBlur?.(e)}></Textarea>
+                <Textarea placeholder="请添加备注" maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e)} onBlur={(e) => onBlur?.(e)}></Textarea>
                <View className={styles.descDataNum}>{descData.number}/{descData.count}</View>
            </View>
            <View className={styles.order_save_address} onClick={() => setSave()}>保存</View>