订单列表对接

2022-05-25 20:32:15 +08:00
parent bbe5956813
commit 1367c0f654
13 changed files with 287 additions and 129 deletions
@@ -1,11 +1,33 @@
-import { formatImgUrl } from "@/common/fotmat";
+import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
 import { useSelector } from "@/reducers/hooks";
 import { Image, Text, View } from "@tarojs/components"
 import classnames from "classnames";
-import { memo } from "react";
+import { memo, useCallback } from "react";
 import styles  from './index.module.scss'
-export default memo(() => {
+
+type Param = {
+    value?: {
+        order_no: string,
+        sale_mode: number,
+        sale_mode_name: string,
+        status_name: string,
+        shipment_mode_name: string,
+        product_list: any[],
+        total_fabrics: number,
+        total_colors: number,
+        total_number: number
+    }
+}
+export default memo(({value}: Param) => {
    const userInfo = useSelector(state => state.userInfo)
+    //对应数量
+    const formatCount = useCallback((item, sale_mode) => {
+        return sale_mode == 0? item.roll : Number(item.length / 100)
+    }, [value])
+    //对应单价
+    const standardPrice = useCallback((price, sale_mode) => {
+        return formatPriceDiv(price).toLocaleString() + '/' + (sale_mode == 1?'m':'kg')
+    }, [value])
    return (
        <View className={styles.order_item}>
            <View className={styles.header}>
@@ -14,41 +36,43 @@ export default memo(() => {
                <Text className={styles.name}>{userInfo.adminUserInfo.user_name}</Text>
                </View>
                <View className={styles.order_num}>
-                <Text>订单号：LY2278204399678</Text>
+                <Text>订单号：{value?.order_no}</Text>
                <Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
                </View>
-                <View className={styles.tag}>自提</View>
+                <View className={styles.tag}>{value?.shipment_mode_name}</View>
            </View>
-            <View className={styles.product_title}>
-                <View className={styles.product_tag}>大货</View>
-                <View className={styles.product_name}>0770# 21S单面平纹(食毛)</View>
-                <View className={styles.product_status}>待接单</View>
+            <View className={styles.product_con}>
+                <View className={styles.product_title}>
+                    <View className={styles.product_tag}>{value?.sale_mode_name}</View>
+                    <View className={styles.product_name}>{formatHashTag(value?.product_list[0].code, value?.product_list[0].name)}</View>
+                    <View className={styles.product_status}>{value?.status_name}</View>
+                </View>
+                <View className={styles.product_list}>
+                    <View className={styles.image}>
+                    <Image src={formatImgUrl(value?.product_list[0].product_colors[0].texture_url)}/>
+                    <View className={styles.color_num}>{value?.product_list[0].product_colors[0].code}</View>
+                    </View>
+                    <View className={styles.color_list}>
+                        {value?.product_list[0].product_colors.map((itemColor, index) => {
+                                return (
+                                    (index <= 1)&&<View className={styles.color_item}>
+                                        <View className={styles.color_title}>{formatHashTag(itemColor.code, itemColor.name)}</View>
+                                        <View className={styles.color_price}>{standardPrice(itemColor.sale_price, value.sale_mode)}</View>
+                                        <View className={styles.color_num}>×{formatCount(itemColor, value.sale_mode)}条</View>
+                                    </View>
+                                )
+                            
+                            })
+                        }
+                        <View className={styles.color_item}>
+                            <View className={styles.color_more}>……</View>
+                            <View className={styles.color_more}>……</View>
+                            <View className={styles.color_more}>……</View>
+                        </View>
+                    </View>
+                </View>
+                <View className={styles.color_count_num}>{`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`}</View>
            </View>
-            <View className={styles.product_list}>
-                <View className={styles.image}>
-                <Image src={formatImgUrl('')}/>
-                <View className={styles.color_num}>24色</View>
-                </View>
-                <View className={styles.color_list}>
-                <View className={styles.color_item}>
-                    <View className={styles.color_title}>1# 薄荷绿</View>
-                    <View className={styles.color_price}>¥40/kg</View>
-                    <View className={styles.color_num}>×2条</View>
-                </View>
-                <View className={styles.color_item}>
-                    <View className={styles.color_title}>1# 薄荷绿</View>
-                    <View className={styles.color_price}>¥40/kg</View>
-                    <View className={styles.color_num}>×2条</View>
-                </View>
-                <View className={styles.color_item}>
-                    <View className={styles.color_more}>……</View>
-                    <View className={styles.color_more}>……</View>
-                    <View className={styles.color_more}>……</View>
-                </View>
-                
-                </View>
-            </View>
-            <View className={styles.color_count_num}>2种面料，3种颜色，共6条</View>
            <View className={styles.btns_list}>
                <View className={styles.btns_item}>取消订单</View>
                <View className={styles.btns_item}>修改地址</View>
@@ -9,28 +9,30 @@
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.16);
        border-bottom: 2px solid #e2e2e2;
        .order_status_list{
-            display: flex;
-            justify-content: space-between;
            font-size: $font_size;
            color: #9E9E9E;
            margin-top: 20px;
            .order_status_item{
-                padding: 20px 10px;
+                padding: 20px;
                box-sizing: border-box;
            }
            .selected{
                font-weight: 700;
                color: #000;
                border-bottom: 4px solid #707070;
-                // border-radius: 4px;
+            }
+            .order_list_scroll{
+                white-space: nowrap;
+                display: flex;
            }
        }
    }
    .order_list{
        flex:1;
        height: 0;
-        .order_item{
+        .order_item_con{
            margin-top: 20px;
+            padding: 0 20px;
        }
    }
 }
@@ -1,15 +1,16 @@
 import Search from "@/components/search"
 import useLogin from "@/use/useLogin"
-import { Image, Text, View } from "@tarojs/components"
-import { useDidShow, useRouter } from "@tarojs/taro"
-import { useCallback, useState } from "react"
+import { Image, ScrollView, Text, View } from "@tarojs/components"
+import Taro, { useDidShow, useRouter } from "@tarojs/taro"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import {ORDER_STATUS} from '@/common/enum'
 import styles  from './index.module.scss'
 import classnames from "classnames";
-import { useSelector } from "@/reducers/hooks"
-import { formatImgUrl } from "@/common/fotmat"
 import Order from "./components/order"
 import InfiniteScroll from "@/components/infiniteScroll"
+import {GetOrderStatusListApi, GetOrderListApi} from '@/api/order'
+import { dataLoadingStatus, getFilterData } from "@/common/util"
+import Tabs from "@/components/tabs"

 export default () => {
  const {checkLogin} = useLogin()
@@ -17,46 +18,89 @@ export default () => {
    await checkLogin()
  })

-  const router = useRouter()
  //搜索参数
  const [searchField, setSearchField] = useState({
-    shipment_mode:'',
+    status: -1,
    page : 1,
    size : 10,
-    key:''
+    Name:''
  })

-  //订单状态
-  type orderStatusParam = {value:number, label:string}[] 
-  const order_status: orderStatusParam = [{value:-1, label:'全部'}, ...Object.values(ORDER_STATUS)]
-  const [selectStatus, setSelectStatus] = useState(-1)
-  const changeStatus = useCallback((e) => {
-    setSelectStatus(() => e)
+  //获取订单状态
+  const {fetchData: statusFetchData} = GetOrderStatusListApi()
+  const [statusList, setStatusList] = useState<any[]>([{id: -1, name: '全部'}])
+  const getOrderStatusList = async () => {
+    let res = await statusFetchData()
+    let list = [...statusList, ...res.data.list||[]]
+    setStatusList(() => list)
+  }
+  useEffect(() => {
+    getOrderStatusList()
  }, [])

+  //获取订单列表
+  const {fetchData: listFetchData, state:orderState} = GetOrderListApi()
+  const [orderData, setOrderData] = useState<{list:any[], total:number}>({list:[], total:0})
+  const getOrderList = async () => {
+    let res = await listFetchData(getFilterData(searchField))
+    setOrderData({list: res.data.list, total: res.data.total})
+    Taro.stopPullDownRefresh()
+  }
+
+
+  //监听筛选条件变化
+  useEffect(() => {
+      getOrderList()
+  }, [searchField])
+
+  //上拉加载数据
+  const pageNum = useRef({size: searchField.size, page: searchField.page})
+  const getScrolltolower = useCallback(() => {
+      if(orderData.list.length < orderData.total) {
+          pageNum.current.page++
+          const size = pageNum.current.size * pageNum.current.page
+          setSearchField({...searchField, size })
+      }
+  }, [orderData])
+
+  //状态改变
+  const changeStatus = useCallback((e) => {
+    pageNum.current.page = 1
+    setSearchField((value) => ({...value, status:e,  size:10}))
+    setOrderData(() => ({list:[], total:0}))
+  }, [])
+
+
+  //数据加载状态
+  const statusMore = useMemo(() => {
+    return dataLoadingStatus({list:orderData.list, total: orderData.total, status: orderState.loading})
+  }, [orderData, orderState])
+
  //输入了搜索关键字
  const getSearchData = useCallback((e) => {
-    // setMaterialList(() => ({list:[], total:0}))
-    setSearchField((val) => ({...val, code_or_name:e, size:10}))
+    pageNum.current.page = 1
+    setOrderData(() => ({list:[], total:0}))
+    setSearchField((val) => ({...val, name:e, size:10}))
  }, [])
-
  
-
  return (
    <View className={styles.order_list_main}>
      <View className={styles.title}>
-        <Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true} defaultValue={router.params.key} changeOnSearch={getSearchData} debounceTime={300}/>
+        <Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true}  changeOnSearch={getSearchData} debounceTime={300}/>
        <View className={styles.order_status_list}>
-          {order_status.map(item => {
-            return <View key={item.value} onClick={() => changeStatus(item.value)} className={classnames(styles.order_status_item, (selectStatus==item.value)&&styles.selected)}>{item.label}</View>
-          })}
+          <ScrollView scrollX >
+            <View className={styles.order_list_scroll}> 
+              {statusList.map(item => {
+                return <View key={item.id} onClick={() => changeStatus(item.id)} className={classnames(styles.order_status_item, (searchField.status==item.id)&&styles.selected)}>{item.name}</View>
+              })}
+            </View>
+          </ScrollView>
        </View>
      </View>
      <View className={styles.order_list}>
-          <InfiniteScroll>
-            {new Array(10).fill('').map(item => {
-              return <View className={styles.order_item}> <Order/></View>
-              
+          <InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} >
+            {orderData?.list.map(item => {
+              return <View className={styles.order_item_con}> <Order value={item}/></View>
            })}
          </InfiniteScroll>
      </View>