对接api3

2022-05-09 10:03:33 +08:00
parent 4c46c6e22d
commit 883c24b7be
14 changed files with 294 additions and 203 deletions
@@ -7,41 +7,44 @@ import Counter from "../counter";
 import Big from 'big.js'
 import classnames from "classnames";
 import styles from "./index.module.scss"
-import { memo, useEffect, useState } from "react";
+import { memo, useEffect, useRef, useState } from "react";
+import {GetColorList} from "@/api/materialColor"
+import { useRouter } from "@tarojs/taro";

 type param = {
    show?: true|false,
-    onClose?: () => void
+    onClose?: () => void,
+    title?: string,
+    productId?: number
 }
-export default memo(({show = false, onClose}: param) => {
+export default memo(({show = false, onClose, title = '', productId = 0}: param) => {
    const selectList = [
-        {step:1,  digits:2, title:'剪板', unit:'米'}, 
-        {step:1,  digits:2, title:'散剪', unit:'米'}, 
-        {step:1,  digits:0, title:'大货', unit:'件'}
+        {id: 0, step:1,  digits:0, title:'大货', unit:'件', eunit:'kg'},
+        {id: 1, step:1,  digits:2, title:'剪板', unit:'米', eunit:'m'}, 
+        {id: 2, step:1,  digits:2, title:'散剪', unit:'米', eunit:'m'}, 
    ]
    const [selectIndex, setSelectIndex] = useState(0)
    const selectProduct = (index:number) => {
        setSelectIndex(index)
    }
-
+   
+    //获取面料颜色列表
+    const {fetchData:colorFetchData} = GetColorList()
    const [list, setList] = useState<any[]>([])
    const [loading, setLoading] = useState(false)
-
-    console.log('执行执行')
+    const condition = useRef({physical_warehouse:1, sale_mode:selectIndex, product_id:0})
+    const getColorList = async () => {
+        setLoading(() => true)
+        let {data} = await colorFetchData(condition.current)
+        setList([...data.list])
+        setLoading(() => false)
+    }

    useEffect(() => {
-        if(!show) return
-        let lists:any[] = []
-        for(let i = 0; i < 20; i++) {
-            lists = [...lists, {
-                title:`${i}#薄荷绿`,
-                subtitle: '0770# 21S单面平纹(食毛)',
-                tag: '剪板',
-                count:0,
-                show: false,
-            }]
-        }
-        setList([...lists])
+        if(show) {
+            condition.current.product_id = productId
+            getColorList()
+        } 
    }, [show])

    useEffect(() => {
@@ -62,7 +65,6 @@ export default memo(({show = false, onClose}: param) => {
        setShowPopup(false)
    }

-
    //计算总数量和总米/件数
    const [selectCount, setSelectCount] = useState({
        sumCount: 0,
@@ -98,12 +100,17 @@ export default memo(({show = false, onClose}: param) => {
        setSearchShow(true)
    }

+    const addShopCart = () => {
+
+    }
+
    
    return (
        <View className={styles.shop_cart_main}>
+            
            <Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
                <View className={styles.popup_con}>
-                    <View className={styles.header}>0770# 21S单面平纹(食毛)</View>
+                    <View className={styles.header}>{title}</View>
                    <View className={styles.search}>
                        <View className={styles.search_title}>下单类型:</View>
                        <View className={styles.search_list}>
@@ -119,9 +126,10 @@ export default memo(({show = false, onClose}: param) => {
                        <View className={styles.text} onClick={() => setSearchShow(false)}>取消</View>
                    </View>}
                    <View className={styles.colorNum}>
-                        <View className={styles.title}>颜色分类 (13)</View>
+                        <View className={styles.title}>颜色分类 (13) {list.length}</View>
                        <View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>
                    </View>
+                    
                    <View className={styles.product_color_con}>
                        {list.length > 0&&<InfiniteScroll>
                            <View className={styles.color_con}>
@@ -156,7 +164,7 @@ export default memo(({show = false, onClose}: param) => {
                    <View className={styles.buy_btn}>
                        <View className={styles.buy_btn_con}>
                            <View className={styles.count}>当前已选{selectCount.kindCount}种，共{selectCount.sumCount}{selectList[selectIndex].unit}</View>
-                            <View className={classnames(styles.add_cart, selectCount.kindCount&&styles.select_add_cart)}>加入购物车</View>
+                            <View className={classnames(styles.add_cart, selectCount.kindCount&&styles.select_add_cart)} onClick={() => addShopCart()}>加入购物车</View>
                        </View>
                    </View>
                </View>
@@ -1,5 +1,5 @@

-import { Button, Image, RichText, Swiper, SwiperItem, Text, View } from '@tarojs/components'
+import { Button, Image, RichText, ScrollView, Swiper, SwiperItem, Text, View } from '@tarojs/components'
 import Taro, { useDidShow, useRouter, useShareAppMessage } from '@tarojs/taro';
 import classnames from "classnames";
 import DesSwiper from './components/swiper';
@@ -8,9 +8,11 @@ import ShopCart from '@/components/shopCart';
 import Preview,{colorItem} from './components/preview';
 import styles  from './index.module.scss'
 import { useEffect, useMemo, useState } from 'react';
+import {formatHashTag} from '@/common/fotmat'
 import useManualPullDownRefresh from '@/use/useManualPullDownRefresh';
 import { goLink } from '@/common/common';
 import useUserInfo from '@/use/useUserInfo';
+import {GetProductDetailApi} from '@/api/material'

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

@@ -22,12 +24,22 @@ type params = {
 export default (props:params) => {

  const router = useRouter()
-  useEffect(() => {
-    console.log('router::',router)
-  }, [])

-  //页面下拉刷新
-  const res = useManualPullDownRefresh()
+  //获取数据
+  const [productInfo, setProductInfo] = useState<any>({})
+  const {fetchData} = GetProductDetailApi()
+  useEffect(() => {
+    getProductDetail()
+  }, [])
+  const getProductDetail = async () => {
+    let {data} = await fetchData({id: router.params.id})
+    setProductInfo(data)
+  }
+
+  //面料名称
+  const productName = useMemo(() => {
+    return formatHashTag(productInfo.code, productInfo.name)
+  },[productInfo])

  const list = [
    {
@@ -46,8 +58,6 @@ export default (props:params) => {

  const [showCart, setShowCart] = useState(false)

-
-
  const [showOrderCount, setShowOrderCount] = useState(false)

  const html = `<h1>这里是详情</h1>
@@ -55,27 +65,13 @@ export default (props:params) => {
    <img style="width:100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic24.nipic.com%2F20121021%2F10910884_100200815001_2.jpg&refer=http%3A%2F%2Fpic24.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257920&t=9353dda34f18ae2fe6803f3da35954bb">
  `

-  const colorList = [
-    {
-        title:'#1', 
-        img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d', 
-        url:'', 
-        id:1
-    },
-    {
-        title:'#1', 
-        img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d', 
-        url:'', 
-        id:1
-    },
-   
-  ]
+  
  const [colorInfo, setColorInfo] = useState<colorItem>()
  const [showPreview, setShowPreview] = useState(false)
  const getColorItem = (item) => {
    setColorInfo({
-      title: item.title,
-      img: item.img,
+      title: item.code,
+      img: item.texture_url,
    })
    setShowPreview(true)
  }
@@ -101,8 +97,6 @@ export default (props:params) => {
      imageUrl: list[0].img
    }
  })
-
-  const {user} = useUserInfo()
  

  return (
@@ -110,8 +104,8 @@ export default (props:params) => {
      <DesSwiper list={list}/>
      <View className={styles.product_header}>
        <View className={styles.title}>
-          <View className={styles.name}>0770# 21S单面平纹(食毛)</View>
-          <View className={styles.des}>面料描述，疯狂描述。。。</View>
+          <View className={styles.name}>{productName}</View>
+          <View className={styles.des}>{productInfo.describe}</View>
        </View>
        <View className={styles.share}>
          <View className={classnames('iconfont icon-fenxiang', styles.miconfont)}></View>
@@ -128,24 +122,24 @@ export default (props:params) => {
      <View className={styles.des_data}>
        <View className={styles.title}>详情参数</View>
        <View className={styles.con}>
-          <View className={styles.des_text}>编号：<Text>0770</Text></View>
-          <View className={styles.des_text}>幅宽：<Text>160cm</Text></View>
-          <View className={styles.des_text}>克重：<Text>160g</Text></View>
-          <View className={styles.des_text}>成分：<Text>67.6%棉24%涤纶6.4%氨纶%氨纶氨纶%氨纶</Text></View>
+          <View className={styles.des_text}>编号：<Text>{productInfo.code}</Text></View>
+          <View className={styles.des_text}>幅宽：<Text>{productInfo.width}</Text></View>
+          <View className={styles.des_text}>克重：<Text>{productInfo.weight_density}</Text></View>
+          <View className={styles.des_text}>成分：<Text>{productInfo.component}</Text></View>
        </View>
      </View>
      <View className={styles.product_color}>
        <View className={styles.title}>色号 (10)</View>
-        <View className={styles.list}>
-          {colorList.map(item => {
-            return <View className={styles.item} onClick={() => getColorItem(item)}>
-              <View className={styles.item_color}>
-                <Image src={item.img}></Image>
-              </View>
-              <View className={styles.item_name}>{item.title}</View>
-            </View>
-          })}
-        </View>
+          <View className={styles.list}>
+              {productInfo?.product_color_list?.map(item => {
+                return <View className={styles.item} onClick={() => getColorItem(item)}>
+                  <View className={styles.item_color}>
+                    <Image src={item.texture_url}></Image>
+                  </View>
+                  <View className={styles.item_name}>{item.code}</View>
+                </View>
+              })}
+          </View>
      </View>
      <View className={styles.product_detail}>
          <RichText nodes={html}></RichText>
@@ -157,7 +151,7 @@ export default (props:params) => {
        </View>
        <View className={styles.buy_btn} onClick={() => setShowOrderCount(true)}>开始下单</View>
      </View>
-      <OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)}/>
+      <OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)} title={productName} productId={productInfo.id}/>
      <ShopCart show={showCart}  onClose={() => setShowCart(false)}/>
      <Preview value={colorInfo} show={showPreview} onClose={() => setShowPreview(false)}/>
      <View className='common_safe_area_y'></View>
@@ -5,16 +5,23 @@ import SideBar from '@/components/sideBar'
 import Product from '@/components/product'
 import MoveBtn from '@/components/moveBtn'
 import ShopCart from '@/components/shopCart'
-import styles  from './index.module.scss'
 import { goLink } from '@/common/common'
+import styles  from './index.module.scss'
 import { useEffect, useRef, useState } from 'react'
-import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
+import Taro, { Events, useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
 import useManualPullDownRefresh from '@/use/useManualPullDownRefresh'
+
 import {GetProductKindListApi, GetProductListApi} from '@/api/material'
+import useLogin from '@/use/useLogin'

 export default () => {
- 
-  
+
+  const {checkLogin} = useLogin()
+
+  useDidShow(() => {
+    checkLogin()
+  })
+
  useEffect(() => {
    categoryList()
  }, [])
@@ -25,34 +32,42 @@ export default () => {
  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()
+    setFiltrate({...filtrate, product_kind_id:res.data.list[0].id})
  }

  //获取面料列表
-  const [productData, setProductData] = useState({list:[], total:0, hasMore:true})
-  const filtrate = useRef({product_kind_id:0, size: 5,page: 1})
+  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(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)
+    const {data,total} = await productFetchData(filtrate)
    setProductData({...productData,list:data.list,total})
+    setRefresherTriggeredStatus(() => false)
+  }
+  //监听查询条件
+  useEffect(() => {
+    if(filtrate.product_kind_id)
+      getProductList()
+  }, [filtrate])
+
+  //点击面料类型
+  const getProductKindId = async (e) => {
+    pageNum.current = 1
+    setFiltrate({...filtrate, size:5, product_kind_id:e.id})
+    setHasMore(true)
  }

  //上拉加载数据
  const getScrolltolower = () => {
    if(productData.list.length >= productData.total) {
-      setProductData({...productData, hasMore: false})
+      setHasMore(false)
    } else {
      pageNum.current++
-      getProductList()
+      const newSize = filtrate.size * pageNum.current
+      setFiltrate({...filtrate, size:newSize})
    }
  }

@@ -62,18 +77,21 @@ export default () => {
  //列表下拉刷新
  const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
  const getRefresherRefresh = async () => {
-    filtrate.current.size = 5
    pageNum.current = 1
-    getProductList()
+    setFiltrate({...filtrate, size:5})
+    setHasMore(true)
+    setRefresherTriggeredStatus(true)
  }
-  useEffect(() => {
-    setRefresherTriggeredStatus(productState.loading)
-  }, [productState.loading])
+
+ 
+
  
  //页面下拉刷新
-  const res = useManualPullDownRefresh()
+  // const res = useManualPullDownRefresh()
+  usePullDownRefresh(() => {
+    console.log('123')
+  })
  
-
  return (
    <MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
      <View className={styles.main}>
@@ -85,7 +103,7 @@ export default () => {
          </View>
        </View>
        <View className={styles.products}>
-          <SideBar list={kindData.list} height="100%" defaultValue={kindData.defaultId} hasMore={productData.hasMore} selfOnScrolltolower={() =>  getScrolltolower()} sideBarOnClick={(e) => getProductKindId(e)} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}>
+          <SideBar list={kindData.list} height="100%" defaultValue={kindData.defaultId} hasMore={hasMore} selfOnScrolltolower={() =>  getScrolltolower()} sideBarOnClick={(e) => getProductKindId(e)} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}>
            <Product productList={productData.list}/>
          </SideBar>
        </View>