🦄 refactor(订单重构):订单重构

2022-09-01 14:14:18 +08:00
parent b5bd2e1b21
commit 34dd4722c9
8 changed files with 13780 additions and 206 deletions
@@ -1,6 +1,6 @@
 .order_status_list{
    font-size: $font_size;
-    color: #9E9E9E;
+    color: #000;
    margin-top: 20px;
    .order_status_item{
        padding: 20px;
@@ -8,8 +8,8 @@
    }
    .selected{
        font-weight: 700;
-        color: #000;
-        border-bottom: 4px solid #707070;
+        color: #337FFF;
+        border-bottom: 4px solid #337FFF;
    }
    .order_list_scroll{
        white-space: nowrap;
@@ -0,0 +1,129 @@
+.flexBox {
+    display: flex;
+    width: 200px;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.icon_shaixuan {
+    color: #000;
+    font-size: 35px;
+    margin-right: 10px;
+}
+
+.shaixuan {
+    margin-right: 32px;
+    font-size: 28px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #000000;
+}
+
+.popupBox {
+    .topBox {
+        display: flex;
+        padding-left: 48px;
+
+        .leftTop {
+            .lefttopTitle {
+                font-size: 28px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #000000;
+                margin-bottom: 24px;
+            }
+
+            .lefttopSelectBox {
+                display: flex;
+                align-items: center;
+                width: 319px;
+                height: 68px;
+                background: #E9E9E9;
+                border-radius: 8px;
+                opacity: 0.4;
+                justify-content: space-between;
+                margin-right: 16px;
+
+                .lefttopSelectName {
+                    font-size: 28px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #000000;
+                    margin-left: 24px;
+                }
+
+                .icon_more {
+                    margin-right: 24px;
+                    font-size: 30px;
+                }
+            }
+        }
+    }
+}
+
+.popupTwobox {
+    padding-left: 40px;
+    padding-right: 40px;
+
+    .scrollview {
+        height: 400px;
+
+        .btnBox {
+            margin-top: 40px;
+            display: flex;
+            flex-wrap: wrap;
+
+            .itemBox {
+                width: 213px;
+                height: 80px;
+                background: #f5f5f5;
+                border-radius: 8px;
+                font-size: 28px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #000;
+                line-height: 80px;
+                text-align: center;
+                margin-right: 16px;
+                box-sizing: border-box;
+                margin-bottom: 16px;
+                flex-shrink: 0;
+            }
+
+            .activeitemBox {
+                border-radius: 8px;
+                flex-shrink: 0;
+                font-family: PingFangSC-Regular, PingFang SC;
+                line-height: 80px;
+                text-align: center;
+                width: 213px;
+                height: 80px;
+                font-size: 28px;
+                color: #337FFF;
+                margin-right: 16px;
+                background: #e8effd;
+                border: 1px solid #337FFF;
+                margin-bottom: 16px;
+                box-sizing: border-box;
+            }
+
+            .activeitemBox:nth-child(3n-0) {
+                margin-right: 0px;
+            }
+
+            .itemBox:nth-child(3n-0) {
+                margin-right: 0px;
+            }
+        }
+    }
+
+
+}
+
+.order_list {
+    height: calc(100vh - 160px);
+
+    .bigBpx {
+        height: 200px;
+    }
+}
@@ -1,48 +1,215 @@
-// import { View } from '@tarojs/components'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-// import { mpenumsaleorderstatus } from '@/api/order'
-// import OrderStatusList from './components/orderStatusList'
-
-// //页码和页数
-// const [searchField, setSearchField] = useState<{ status: number | unknown; page: number; size: number; name: string }>({
-//   status: null,
-//   page: 1,
-//   size: 10,
-//   name: '',
-// })
-// const pageNum = useRef({ size: searchField.size, page: searchField.page })
-
-
-// //获取订单状态
-// const { fetchData: orderStatusListFetchData } = mpenumsaleorderstatus()
-const [statusList, setStatusList] = useState<any[]>([{ id: -1, name: '全部' }])
-// const getOrderStatusList = async () => {
-//   let res = await orderStatusListFetchData()
-//   setStatusList((e) => [...e, ...res.data.list])
-// }
-
-// //状态改变
-// const changeStatus = useCallback((e) => {
-//   pageNum.current.page = 1
-//   setSearchField((value) => ({ ...value, status: e, size: 10 }))
-//   // setOrderData(() => ({ list: [], total: 0 }))
-// }, [])
-
-
-// useEffect(() => {
-//   getOrderStatusList()
-// }, [])
-
-
-// export default () => {
-//   return (
-//     <View>
-//       {/* <OrderStatusList list={statusList} onSelect={changeStatus} defaultId={-1} /> */}
-//       22
-//     </View>
-//   )
-// }
+import { View, ScrollView } from '@tarojs/components'
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react'
+import { mpenumsaleorderstatus, OrderListApi, ClientListApi } from '@/api/order'
+import OrderStatusList from './components/orderStatusList'
+import Search from '@/components/search'
+import { dataLoadingStatus, getFilterData } from '@/common/util'
+import styles from "./index.module.scss"
+import classnames from "classnames";
+import Popup from '@/components/popup'
+import InfiniteScroll from '@/components/infiniteScroll'
+import { compose } from 'redux'

 export default () => {
-  return (<>222</>)
-}
+  //页码和页数
+  const [searchField, setSearchField] = useState<{ status: number | unknown; page: number; size: number; name: string }>({
+    status: -1,
+    page: 1,
+    size: 10,
+    name: '',
+  })
+
+  //获取订单列表
+  const { fetchData: listFetchData, state: orderState } = OrderListApi()
+  const [orderData, setOrderData] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
+  const getOrderList = async () => {
+    let res = await listFetchData(getFilterData(searchField))
+    setOrderData((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
+    setRefresherTriggeredStatus(() => false)
+  }
+
+
+
+
+  //列表下拉刷新
+  const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
+  const getRefresherRefresh = async () => {
+    pageNum.current.size = 1
+    setRefresherTriggeredStatus(true)
+    setSearchField((val) => ({ ...val, size: 10 }))
+  }
+  //数据加载状态
+  const statusMore = useMemo(() => {
+    console.log({ list: orderData.list, total: orderData.total, status: orderState.loading }, '{ list: orderData.list, total: orderData.total, status: orderState.loading }')
+    return dataLoadingStatus({ list: orderData.list, total: orderData.total, status: orderState.loading })
+  }, [orderData, orderState])
+
+  //上拉加载数据
+  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 { fetchData: orderStatusListFetchData } = mpenumsaleorderstatus()
+  const [statusList, setStatusList] = useState<any[]>([{ id: -1, name: '全部' }])
+  const getOrderStatusList = async () => {
+    let res = await orderStatusListFetchData()
+    setStatusList((e) => [...e, ...res.data.list])
+  }
+
+  //监听筛选条件变化
+  useEffect(() => {
+    if (searchField.status != null) getOrderList()
+  }, [searchField])
+
+  // //状态改变
+  const changeStatus = useCallback((e) => {
+    pageNum.current.page = 1
+    setSearchField((value) => ({ ...value, status: e, size: 10 }))
+
+    console.log(e, '123123')
+    setOrderData(() => ({ list: [], total: 0 }))
+  }, [])
+
+  //输入了搜索关键字
+  const getSearchData = useCallback((e) => {
+    pageNum.current.page = 1
+    setOrderData(() => ({ list: [], total: 0 }))
+    setSearchField((val) => ({ ...val, name: e, size: 10 }))
+  }, [])
+  //筛选内容展示
+  const [showPopup, setshowPopup] = useState(false)
+  const showSelctPopup = () => {
+    setshowPopup(true)
+  }
+  //关闭筛选内容展示
+  const closePopup = () => {
+    setshowPopup(false)
+  }
+  //客户筛选内容展示
+  const [choseTitle, setChoseTitle] = useState('客户')
+  const [showPopupTwo, setshowPopupTwo] = useState(false)
+  const showPopupDesige = (index) => {
+    if (index === 1) {
+      setChoseTitle('客户')
+    } else {
+      setChoseTitle('业务员')
+    }
+    setshowPopupTwo(true)
+  }
+  //客户关闭筛选内容展示
+  const closePopupTwo = () => {
+    setshowPopupTwo(false)
+  }
+  //获取客户或者业务员数据
+  const { fetchData: purchaserFetch } = ClientListApi()
+  const [itemList, setItemList] = useState<any[]>([{ id: -100, name: '不限' }])
+  const getPurchaser = async () => {
+    let res = await purchaserFetch()
+    res.data.list.map(item => {
+      if (item.id === -100) {
+        item.checked = true
+      } else {
+        item.checked = false
+        return item
+      }
+    })
+    setItemList((e) => [...e, ...res.data.list])
+  }
+  //选择客户或者业务员
+  const choseUser = (it, index) => {
+    itemList.map(item => {
+      if (item.id === it.id) {
+        item.checked = true
+      } else {
+        item.checked = false
+        return item
+      }
+    })
+    setItemList(() => [...itemList])
+    console.log(itemList, 123)
+  }
+  //搜索客户或者业务员
+  const getSearchDataPurchaser = useCallback(async (e) => {
+    getPurchaser()
+    // let res = await purchaserFetch({ name: e })
+    // setItemList((e) => [...e, ...res.data.list])
+  }, [])
+
+
+  useEffect(() => {
+    getOrderStatusList()
+    getPurchaser()
+  }, [])
+  return (
+    <View>
+      <Search placeholder='搜索商品/名称/颜色/订单号' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
+        <View className={styles.flexBox} onClick={() => showSelctPopup()}>
+          <View className={classnames('iconfont', 'icon-shaixuan', styles.icon_shaixuan)}></View>
+          <View className={styles.shaixuan}>筛选</View>
+        </View>
+      </Search>
+      <OrderStatusList list={statusList} onSelect={changeStatus} defaultId={-1} />
+      <View className={styles.order_list}>
+        <InfiniteScroll
+          statusMore={statusMore}
+          selfonScrollToLower={getScrolltolower}
+          refresherEnabled={true}
+          refresherTriggered={refresherTriggeredStatus}
+          selfOnRefresherRefresh={getRefresherRefresh}>
+          {orderData?.list?.map((item) => {
+            return (
+              <View key={item.id} className={styles.order_item_con}>
+                <View className={styles.bigBpx}>2222</View>
+                {/* <Order value={item} onClickBtn={clickOrderBtn} /> */}
+              </View>
+            )
+          })}
+        </InfiniteScroll>
+      </View>
+      <Popup title={'筛选订单'} show={showPopup} onClose={() => closePopup()}>
+        <View className={styles.popupBox}>
+          <View className={styles.topBox}>
+            <View className={styles.leftTop} onClick={() => showPopupDesige(1)}>
+              <View className={styles.lefttopTitle}>客户信息</View>
+              <View className={styles.lefttopSelectBox}>
+                <View className={styles.lefttopSelectName}>请选择客户</View>
+                <View className={classnames('iconfont', 'icon-more', styles.icon_more)}></View>
+              </View>
+            </View>
+            <View className={styles.leftTop} onClick={() => showPopupDesige(2)}>
+              <View className={styles.lefttopTitle}>业务员</View>
+              <View className={styles.lefttopSelectBox}>
+                <View className={styles.lefttopSelectName}>请选择业务员</View>
+                <View className={classnames('iconfont', 'icon-more', styles.icon_more)}></View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </Popup>
+      <Popup title={choseTitle} show={showPopupTwo} onClose={() => closePopupTwo()}>
+        <View className={styles.popupTwobox}>
+          <Search placeholder={`请输入${choseTitle}名称`} showBtn={false} changeOnSearch={getSearchDataPurchaser} debounceTime={300} >
+          </Search>
+          <ScrollView
+            className={styles.scrollview}
+            scroll-y={true}
+            showScrollbar={false}
+            enhanced={true}
+          >
+            <View className={styles.btnBox}>
+              {itemList.map((item, index) => <View className={classnames(item.checked ? styles.activeitemBox : styles.itemBox)} key={index} onClick={() => choseUser(item, index)}>{item.name}</View>)}
+            </View>
+          </ScrollView>
+
+        </View>
+
+      </Popup>
+    </View>
+  )
+}