🦄 refactor:购物车添加虚拟列表

src/api/order.ts

@@ -41,3 +41,10 @@ export const mpsaleOrderpreView = () => {
         method: "put"
     })
 }
+//业务员枚举
+export const mpenumsaleUserlist = () => {
+    return useRequest({
+        url: `/v1/mp/enum/saleUser/list`,
+        method: "get"
+    })
+}

src/app.config.ts

@@ -1,5 +1,12 @@
 export default defineAppConfig({
-  pages: ['pages/user/index', 'pages/index/index', 'pages/order/index', 'pages/shopping/index', 'pages/searchPage/index', 'pages/customerPage/index'],
+  pages: ['pages/user/index',
+    'pages/index/index',
+    'pages/order/index',
+    'pages/shopping/index',
+    'pages/searchPage/index',
+    'pages/customerPage/index',
+    'pages/saleuserPage/index',
+  ],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',

src/components/closeBtn/index.tsx

@@ -14,7 +14,7 @@ export default memo(({onClose, styleObj = {}}:Params) => {
             className={style.icon_a_cuowuwrong_self}
             onClick={onClose}
         >
-            <Text className={`iconfont icon-qingkong ${style.icon_a_btn}`}></Text>
+            <Text className={`iconfont icon-guanbi ${style.icon_a_btn}`}></Text>
         </View>
     )
 })

src/components/goodsItem/index.tsx

@@ -5,7 +5,7 @@ import classnames from "classnames";
 
 interface props {
     clickAdd: (any) => void,
-    onInputEven: (a: any, c: any) => void,
+    // onInputEven?: (a: any, c: any) => void,
     clickReduce: (any) => void,
     handPlus: (any) => void,
     modeFont?: number
@@ -18,38 +18,53 @@ interface props {
         code?: string,
         rgb?: { r: number, g: number, b: number },
         name?: string,
-        roll?: number | string
+        roll?: number | string,
+        buyNums?: number | string,
     }
 }
 
 
 export default memo((props: props) => {
+    const [value, setValue] = useState<any>({ count: props.value.nums })
 
+    const onInputEven = (e) => {
+
+        let res = e.detail.value
+        if (props.modeFont !== 2) {
+            if (Number(res) == 0 || Number(res) < 1) {
+                setValue({ count: 1 })
+            }
+        } else {
+            if (Number(res) == 0 || Number(res) < 3) {
+                setValue({ count: 3 })
+            }
+        }
+    }
 
     const type = useMemo(() => {
         if (props.modeFont === 0) {
             return 'number'
         } else {
-            return 'type'
+            return 'digit'
         }
     }, [props.modeFont])
     return (
         <View className={styles.goodsBox}>
             {
-                props.value?.rgb?.r == 0 && props.value?.rgb?.g == 0 && props.value?.rgb?.b == 0 && <Image className={styles.pic} mode={'aspectFill'} src={'https://test.cdn.zzfzyc.com/mall/no_img.png'}></Image>
+                props?.value?.rgb?.r == 0 && props?.value?.rgb?.g == 0 && props?.value?.rgb?.b == 0 && <Image className={styles.pic} mode={'aspectFill'} src={'https://test.cdn.zzfzyc.com/mall/no_img.png'}></Image>
             }
             {
-                (props.value?.rgb?.r != 0 || props.value?.rgb?.g != 0 || props.value?.rgb?.b != 0) &&
+                (props?.value?.rgb?.r != 0 || props?.value?.rgb?.g != 0 || props?.value?.rgb?.b != 0) &&
-                <View className={styles.pic} style={{ backgroundColor: `rgb(${props.value.rgb?.r} ${props.value.rgb?.g} ${props.value.rgb?.b})` }}></View>
+                <View className={styles.pic} style={{ backgroundColor: `rgb(${props?.value?.rgb?.r} ${props?.value?.rgb?.g} ${props?.value.rgb?.b})` }}></View>
             }
             <View className={styles.rightGoodbox}>
                 <View className={styles.leftFontsbox}>
-                    <View className={styles.title}>{props.value.code} {props.value.name}环保黑</View>
+                    <View className={styles.title}>{props.value?.code} {props.value?.name}环保黑</View>
                     {/* <View className={styles.productName}>0681# 26S全棉平纹</View> */}
                     <View className={styles.productNums}>剩:{props.value?.roll}件</View>
                 </View>
                 <View className={styles.rightFontsbox}>
-                    <View className={styles.money}>¥{props.modeFont === 0 ? Number(props.value?.bulk_price) / 100 : props.modeFont === 1 ? Number(props.value?.length_cut_price) / 100 : Number(props.value?.weight_cut_price) / 100}{props.modeFont === 0 ? '/Kg' : '/m'}</View>
+                    <View className={styles.money}>¥{props?.modeFont === 0 ? Number(props.value?.bulk_price) / 100 : props.modeFont === 1 ? Number(props.value?.length_cut_price) / 100 : Number(props.value?.weight_cut_price) / 100}{props.modeFont === 0 ? '/Kg' : '/m'}</View>
                     {
                         props.value.showInput && <View className={styles.inputBox}>
                             <View className={styles.reduceBox} onClick={() => { props.clickReduce?.(props.value) }}>
@@ -57,7 +72,9 @@ export default memo((props: props) => {
                                 </View>
                             </View>
                             <View className={styles.numsBox}>
-                                <Input type={type as any} value={props.value.nums} onInput={($event) => props.onInputEven($event, props.value)}></Input>
+                                <Input type={type as any} value={value.count} onInput={onInputEven}></Input>
+
+                                {/* <Input type={type as any} value={value.count} onInput={($event) => onInputEven($event, props.value)}></Input> */}
                             </View>
                             <View className={styles.addBox} onClick={() => { props.handPlus?.(props.value) }}>
                                 +

src/components/shoppingCart/index.module.scss

@@ -76,7 +76,7 @@
         display: flex;
         margin-bottom: 24px;
         align-items: center;
-
+        padding-bottom: 10px;
 
         .kingFont {
             font-size: 28px;
@@ -91,7 +91,7 @@
             width: 148px;
             height: 30px;
             border-radius: 4px;
-            border: 1px solid #E42945;
+            border: 1PX solid #E42945;
             font-size: 22px;
             font-family: PingFangSC-Medium, PingFang SC;
             font-weight: 500;
@@ -106,8 +106,9 @@
         margin-bottom: 32px;
     }
 
+    .scrollviewBig {
         .scrollview {
-        height: 500px;
+            height: 300px;
 
             .kongBox {
                 height: 181px;
@@ -115,6 +116,12 @@
             }
         }
 
+        .kongOne {
+            height: 100px;
+        }
+    }
+
+
     .posBox {
         width: 100%;
         position: fixed;

src/components/shoppingCart/index.tsx

@@ -6,7 +6,7 @@ import classnames from "classnames";
 import Popup from '@/components/popup'
 import Goods from "@/components/goodsItem"
 import BottomCustomer from "@/components/BottomCustomer"
-
+import VirtualList from '@tarojs/components/virtual-list'
 
 interface prosObj {
     showPopup?: false | true,
@@ -86,9 +86,20 @@ export default memo(forwardRef((props: prosObj, ref) => {
 
         return s;
     }, [goodList])
+    // onInputEven={(e, obj) => oninputEvent?.(e, obj)}
 
-
+    const rows = memo(({ id, index, style, data }: any) => {
-
+        let item = data[index]
+        return (
+            <>
+                <Goods modeFont={(modeFont as number)}
+                    handPlus={(item) => handPlus?.(item)}
+                    value={item || {}}
+                    clickAdd={(item) => addNums?.(item)}
+                    clickReduce={(item) => { reduceNums?.(item) }}></Goods>
+            </>
+        )
+    })
 
     return (
         <Popup showTitle={false} show={showPopup} onClose={() => closePopup?.()}>
@@ -114,20 +125,21 @@ export default memo(forwardRef((props: prosObj, ref) => {
                 <View className={styles.searchBox}>
                     <Search placeholder='请输入搜索布料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
                 </View>
-                <ScrollView
+                <View className={styles.scrollviewBig}>
+                    <VirtualList
                         className={styles.scrollview}
-                    scroll-y={true}
+                        height={300} /* 列表的高度 */
-                >
+                        width='100%' /* 列表的宽度 */
+                        itemData={goodList} /* 渲染列表的数据 */
+                        itemCount={goodList.length + 0} /*  渲染列表的长度 */
+                        itemSize={100} /* 列表单项的高度  */
+                        overscanCount={1}>
+                        {rows}
+                    </VirtualList>
+                    <View className={styles.kongOne}></View>
+                </View>
+
 
-                    {
-                        goodList.map((item, index) => {
-                            return (
-                                <Goods modeFont={(modeFont as number)} handPlus={(item) => handPlus?.(item)} key={index} value={item} onInputEven={(e, obj) => oninputEvent?.(e, obj)} clickAdd={(item) => addNums?.(item)} clickReduce={(item) => { reduceNums?.(item) }}></Goods>
-                            )
-                        })
-                    }
-                    <View className={styles.kongBox}></View>
-                </ScrollView>
                 <View className={styles.posBox}>
                     <BottomCustomer clientName={clientName} clientId={clientId} isDisabled={selectTotal > 0 && clientName !== '' ? false : true} handSure={() => { handSure() }}></BottomCustomer>
                 </View>
@@ -135,4 +147,7 @@ export default memo(forwardRef((props: prosObj, ref) => {
         </Popup>
 
     )
+
+
 }))
+

src/pages/customerPage/index.module.scss

@@ -20,6 +20,10 @@ page {
         }
     }
 
+    .listBox {
+        height: 100vh;
+    }
+
     .itemBox {
         margin-left: 24px;
         width: 702px;

src/pages/customerPage/index.tsx

@@ -7,47 +7,68 @@ import { ClientListApi } from '@/api/order'
 import { useDidShow } from '@tarojs/taro';
 import Taro from '@tarojs/taro'
 import { useRouter } from '@tarojs/taro'
+import InfiniteScroll from '@/components/infiniteScroll'
+import { dataLoadingStatus, getFilterData } from '@/common/util'
 
 export default () => {
 
+
+
     const [search, setSearch] = useState({
-        name: null
+        name: null,
+        page: 1,
+        size: 10,
     })
-    const [clentList, setClientlist] = useState<any[]>([])
+    const [clentList, setClientlist] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
 
+    const { fetchData: clitentFetch, state: orderState } = ClientListApi()
+    //数据加载状态
+    const statusMore = useMemo(() => {
+        return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading })
+    }, [clentList, orderState])
 
-    const [clientObj, setclientObj] = useState({})
+    const [clientObj, setclientObj] = useState({
+        clientId: null,
+        clientName: ''
+    })
 
     //输入了搜索关键字
     const getSearchData = useCallback((eq) => {
-
+        pageNum.current.page = 1
-        setSearch({ name: eq })
+        setClientlist(() => ({ list: [], total: 0 }))
-
+        setSearch((e) => ({ ...e, name: eq, size: 10 }))
     }, [])
 
 
     const router = useRouter()
-    // useDidShow(() => {
-    //     if (router?.params.clientId) {
-    //         clentList.map(item => {
-    //             if (item.id == router?.params.clientId) {
-    //                 item.checked = true
-    //             }else{
-
-    //             }
-    //         })
-    //     }
-    // })
 
     useEffect(() => {
-        setSearch(search)
+        if (search.name === '') {
+            setSearch((e) => ({ ...e, name: null }))
+        }
         if (search.name !== '') getCuss()
     }, [search])
 
+    //上拉加载数据
+    const pageNum = useRef({ size: search.size, page: search.page })
+    const getScrolltolower = useCallback(() => {
+        if (clentList.list.length < clentList.total) {
+            pageNum.current.page++
+            const size = pageNum.current.size * pageNum.current.page
+            setSearch((e) => ({ ...e, size }))
+            console.log(search, 11111)
+        }
+    }, [clentList])
 
-    const { fetchData: clitentFetch } = ClientListApi()
+    //列表下拉刷新
+    const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
+    const getRefresherRefresh = async () => {
+        pageNum.current.size = 1
+        setRefresherTriggeredStatus(true)
+        setSearch((val) => ({ ...val, size: 10 }))
+    }
     const getCuss = async () => {
-        let res = await clitentFetch({ name: search.name === null ? '' : search.name })
+        let res = await clitentFetch({ name: search.name === null ? '' : search.name, page: search.page, size: search.size })
         if (router?.params.clientId) {
             res.data.list.map(item => {
                 if (item.id == router?.params.clientId) {
@@ -58,15 +79,15 @@ export default () => {
                 return item
             })
         }
-        // res.data.list.map(item => {
+        setClientlist((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
-        //     item.checked = false
+        setRefresherTriggeredStatus(() => false)
-        // })
-        setClientlist([...res.data.list])
     }
 
+
+
     //选择客户
     const selectClient = (item) => {
-        clentList.map(it => {
+        clentList.list.map(it => {
             if (item.id === it.id) {
                 it.checked = true
             } else {
@@ -74,19 +95,30 @@ export default () => {
             }
             return it
         })
+        setclientObj(item)
         let pages = Taro.getCurrentPages(); // 获取当前的页面栈 
         let prevPage = pages[pages.length - 2];
         prevPage.setData({ //设置上一个页面的值
             clientId: item.id,
-            clientName: item.name
+            clientName: item.name,
         });
-        setClientlist([...clentList])
+        setClientlist((e) => ({ ...e, list: clentList?.list, total: clentList?.total }))
-        setclientObj(item)
         Taro.navigateBack({
             delta: 1
         })
     }
-
+    useEffect(() => {
+        if (clientObj?.clientId !== null) {
+            setclientObj(clientObj)
+        } else {
+            let pages = Taro.getCurrentPages(); // 获取当前的页面栈 
+            let prevPage = pages[pages.length - 2];
+            prevPage.setData({ //设置上一个页面的值
+                clientId: '',
+                clientName: '',
+            });
+        }
+    }, [clientObj])
     return (
         <View className={styles.cussBox}>
             <View className={styles.searchBox}>
@@ -95,8 +127,15 @@ export default () => {
                 </View>
 
             </View>
+            <View className={styles.listBox}>
+                <InfiniteScroll
+                    statusMore={statusMore}
+                    selfonScrollToLower={getScrolltolower}
+                    refresherEnabled={true}
+                    refresherTriggered={refresherTriggeredStatus}
+                    selfOnRefresherRefresh={getRefresherRefresh}>
                     {
-                clentList.map((item, index) => {
+                        clentList.list.map((item, index) => {
                             return (
                                 <View className={classnames(item.checked ? styles.acticveitemBox : styles.itemBox)} key={index} onClick={() => { selectClient(item) }}>
                                     <View className={styles.cussName}>{item.name}</View>
@@ -106,6 +145,9 @@ export default () => {
                             )
                         })
                     }
+                </InfiniteScroll>
+            </View>
+
 
         </View>
     )

src/pages/index/index.tsx

@@ -14,7 +14,7 @@ import { dataLoadingStatus } from '@/common/util'
 import Taro, { useDidShow } from '@tarojs/taro'
 import goodsItem from '@/components/goodsItem'
 import { WX_APPID } from '@/common/constant'
-
+import { debounce } from "@/common/util";
 export default () => {
     useEffect(() => {
         categoryList()
@@ -182,30 +182,6 @@ export default () => {
         })
         setGoodlist([...goodList])
     }, [goodList])
-    //加减输入框
-    const oninputEvent = useCallback((e, item) => {
-        goodList.map((it) => {
-            if (item.id === it.id) {
-                if (search.modeId !== 2) {
-                    if (Number(e.detail.value) < item.nums || e.detail.value === '') {
-                        it.nums = 1
-                    } else {
-                        it.nums = Number(e.detail.value)
-                    }
-
-                } else {
-                    if (Number(e.detail.value) < item.nums || e.detail.value === '') {
-                        it.nums = 3
-                    } else {
-                        it.nums = Number(e.detail.value)
-                    }
-                }
-
-            }
-            return item
-        })
-        setGoodlist([...goodList])
-    }, [goodList])
 
 
     //输入了搜索关键字
@@ -262,7 +238,6 @@ export default () => {
                 return item
             })
             setGoodlist([...goodList])
-            setSearchObj((e) => ({ ...e, goodsId: null }))
             console.log(search, '000000.0.0.')
             Taro.hideLoading()
         } else {
@@ -300,8 +275,25 @@ export default () => {
                 </SideBar>
             </View>
             <View className='common_safe_area_y'></View>
-            <ShopCart handSure={() => handSure()} clientName={clientObj?.clientName} clientId={clientObj?.clientId} modeFont={search.modeId} handPlus={(item) => handPlus(item)} obj={goodObj} ref={ShopCartRef} getSearchData={(e) => { getSearchData(e) }} oninputEvent={(e, item) => { oninputEvent(e, item) }} reduceNums={(item) => { reduceNums(item) }} addNums={(item) => { handAdd(item) }} showPopup={showShopCart} handCheck={(item) => { handCheckMode(item) }} closePopup={() => closePoup()} goodList={goodList} typeList={typeList}></ShopCart>
+            <ShopCart handSure={() => handSure()}
+                clientName={clientObj?.clientName}
+                clientId={clientObj?.clientId}
+                modeFont={search.modeId}
+                handPlus={(item) => handPlus(item)}
+                obj={goodObj}
+                ref={ShopCartRef}
+                getSearchData={(e) => { getSearchData(e) }}
+
+                reduceNums={(item) => { reduceNums(item) }}
+                addNums={(item) => { handAdd(item) }}
+                showPopup={showShopCart}
+                handCheck={(item) => { handCheckMode(item) }}
+                closePopup={() => closePoup()}
+                goodList={goodList}
+                typeList={typeList}
+            ></ShopCart>
         </View>
         // </MoveBtn>
     )
 }
+// oninputEvent={(e, item) => { oninputEvent(e, item) }}

src/pages/order/index.module.scss

@@ -6,6 +6,12 @@
 }
 
 .icon_shaixuan {
+    color: #0D7CFF;
+    font-size: 35px;
+    margin-right: 10px;
+}
+
+.activeshaixuan {
     color: #000;
     font-size: 35px;
     margin-right: 10px;
@@ -19,6 +25,14 @@
     color: #000000;
 }
 
+.activeshai {
+    color: #0D7CFF;
+    margin-right: 32px;
+    font-size: 28px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+}
+
 .popupBox {
     .topBox {
         display: flex;
@@ -38,9 +52,9 @@
                 align-items: center;
                 width: 319px;
                 height: 68px;
-                background: #E9E9E9;
+                background: #f6f6f6;
                 border-radius: 8px;
-                opacity: 0.4;
+                // opacity: 0.4;
                 justify-content: space-between;
                 margin-right: 16px;
 
@@ -57,73 +71,185 @@
                     font-size: 30px;
                 }
             }
-        }
-    }
-}
 
-.popupTwobox {
+            .activelefttopSelectBox {
-    padding-left: 40px;
+                width: 319px;
-    padding-right: 40px;
+                height: 68px;
-
+                background: rgba(51, 127, 255, 0.1);
-    .scrollview {
+                border-radius: 8px;
-        height: 400px;
+                border: 1px solid #337FFF;
-
-        .btnBox {
-            margin-top: 40px;
                 display: flex;
-            flex-wrap: wrap;
+                align-items: center;
+                justify-content: space-between;
+                margin-right: 16px;
 
-            .itemBox {
+                .lefttopSelectName {
-                width: 213px;
+                    font-size: 28px;
-                height: 80px;
+                    font-family: PingFangSC-Regular, PingFang SC;
-                background: #f5f5f5;
+                    font-weight: 400;
+                    color: #337FFF;
+                    margin-left: 24px;
+                }
+
+                .icon_more {
+                    margin-right: 24px;
+                    font-size: 30px;
+                    color: #337FFF;
+                }
+            }
+        }
+    }
+
+    .secondBox {
+        margin-top: 40px;
+        padding-left: 48px;
+
+        .secondTopfont {
+            font-size: 28px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #000000;
+        }
+
+        .inputBox {
+            width: 654px;
+            height: 68px;
+            background: #f6f6f6;
+            border-radius: 8px;
+            // opacity: 0.4;
+            margin-top: 24px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .orderInput {
+                margin-left: 24px;
+                width: 400px;
+                font-size: 28px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #000000;
+            }
+
+            .saomiao {
+                margin-right: 24px;
+                font-size: 26px;
+                color: #000;
+            }
+        }
+    }
+
+    .thirdBox {
+        margin-top: 40px;
+        padding-left: 48px;
+
+        .thirdTopfont {
+            font-size: 28px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #000000;
+        }
+
+        .flexModebox {
+            margin-top: 24px;
+            display: flex;
+
+            .activemodeBox {
+                margin-right: 16px;
+                width: 152px;
+                height: 68px;
+                background: rgba(51, 127, 255, 0.1);
                 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;
+                text-align: center;
-                background: #e8effd;
+                line-height: 68px;
                 border: 1px solid #337FFF;
-                margin-bottom: 16px;
                 box-sizing: border-box;
             }
 
-            .activeitemBox:nth-child(3n-0) {
+            .modeBox {
-                margin-right: 0px;
+                margin-right: 16px;
-            }
+                width: 152px;
-
+                height: 68px;
-            .itemBox:nth-child(3n-0) {
+                background: #f6f6f6;
-                margin-right: 0px;
+                border-radius: 8px;
+                font-size: 28px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #000000;
+                text-align: center;
+                line-height: 68px;
+                box-sizing: border-box;
+                // opacity: 0.4;
             }
         }
     }
 
+    .bottomBox {
+        width: 750px;
+        height: 160px;
+        background: #FFFFFF;
+        position: fixed;
+        bottom: 0;
+        z-index: 99;
+        display: flex;
+        padding-top: 16px;
+        justify-content: space-between;
 
+        .resetBox {
+            margin-left: 48px;
+            width: 311px;
+            height: 80px;
+            border-radius: 44px;
+            border: 1px solid #087EFF;
+            font-size: 28px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #337FFF;
+            text-align: center;
+            line-height: 80px;
+        }
+
+        .button {
+            margin-right: 32px;
+            width: 311px;
+            height: 80px;
+            background: #68b4ff;
+            border-radius: 44px;
+            font-size: 32px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #FFFFFF;
+            text-align: center;
+            line-height: 80px;
+        }
+
+        .activeButton {
+            margin-right: 32px;
+            width: 311px;
+            height: 80px;
+            background: #337FFF;
+            border-radius: 44px;
+            font-size: 32px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #fff;
+            text-align: center;
+            line-height: 80px;
+        }
+    }
 }
 
+
+
 .order_list {
     height: calc(100vh - 160px);
 
     .bigBpx {
         height: 200px;
     }
+
 }

src/pages/order/index.tsx

@@ -1,6 +1,6 @@
-import { View, ScrollView } from '@tarojs/components'
+import { View, ScrollView, Input, Button } from '@tarojs/components'
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react'
-import { mpenumsaleorderstatus, OrderListApi, ClientListApi } from '@/api/order'
+import { mpenumsaleorderstatus, OrderListApi } from '@/api/order'
 import OrderStatusList from './components/orderStatusList'
 import Search from '@/components/search'
 import { dataLoadingStatus, getFilterData } from '@/common/util'
@@ -9,6 +9,7 @@ import classnames from "classnames";
 import Popup from '@/components/popup'
 import InfiniteScroll from '@/components/infiniteScroll'
 import { compose } from 'redux'
+import Taro, { useDidShow } from '@tarojs/taro'
 
 export default () => {
   //页码和页数
@@ -23,8 +24,12 @@ export default () => {
   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))
+    let res = await listFetchData({
+      ...getFilterData(searchField),
+      ...getFilterData(searchObj)
+    })
     setOrderData((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
+    setshowPopup(false)
     setRefresherTriggeredStatus(() => false)
   }
 
@@ -91,67 +96,143 @@ export default () => {
   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])
-  }, [])
 
 
+  useDidShow(() => {
+
+    //获取选择的客户
+    let pages = Taro.getCurrentPages();
+    let currPage = pages[pages.length - 1]; // 获取当前页面
+    console.log(currPage.data, '8888')
+
+    setsearchObj((e) => ({
+      ...e,
+      purchaser_id: currPage.data?.clientId ? currPage.data?.clientId : '',
+      clientName: currPage.data?.clientName ? currPage.data?.clientName : '',
+      sale_user_id: currPage.data?.saleuserId ? currPage.data?.saleuserId : '',
+      saleuserName: currPage.data?.saleuserName ? currPage.data?.saleuserName : '',
+    }))
+  })
+
+  interface filterObj {
+    purchaser_id?: string | number,
+    clientName?: string,
+    sale_user_id?: string | number,
+    saleuserName?: string,
+    orderNo?: string | undefined,
+    sale_mode?: Number | undefined,
+    shipment_mode?: Number | undefined
+  }
+
+  //筛选参数
+  const [searchObj, setsearchObj] = useState<filterObj>({
+    purchaser_id: '',
+    clientName: '',
+    sale_user_id: '',
+    saleuserName: '',
+    orderNo: '',
+    sale_mode: undefined,
+    shipment_mode: undefined
+  })
+  // 跳转选择客户
+  const navTo = (index) => {
+    if (index === 1) {
+      Taro.navigateTo({
+        url: '/pages/customerPage/index?clientId=' + searchObj?.purchaser_id
+      })
+    } else {
+      Taro.navigateTo({
+        url: '/pages/saleuserPage/index?saleuserId=' + searchObj?.sale_user_id
+      })
+    }
+  }
+  //订单号输入框
+  const handInput = (eq) => {
+    setsearchObj((e) => ({ ...e, orderNo: eq.detail.value }))
+  }
+
+  //订单类型
+  const [modeList, setModeList] = useState<any[]>([{ id: -1, name: '不限' }, { id: 0, name: '大货' }, { id: 1, name: '剪版' }, { id: 2, name: '散剪' }])
+  //选择订单类型
+  const handCheckMode = (item) => {
+    modeList.map(it => {
+      if (it.id === item.id) {
+        it.checked = true
+      } else {
+        it.checked = false
+      }
+      return it
+    })
+    setModeList([...modeList])
+    setsearchObj((e) => ({ ...e, sale_mode: item.id }))
+  }
+
+  ///发货方式类型
+  const [deliveryList, setdeliveryList] = useState<any[]>([{ id: -1, name: '不限' }, { id: 1, name: '自提' }, { id: 2, name: '物流' }])
+  //选择发货方式类型
+  const handCheckDelivery = (item) => {
+    deliveryList.map(it => {
+      if (it.id === item.id) {
+        it.checked = true
+      } else {
+        it.checked = false
+      }
+      return it
+    })
+    setdeliveryList([...deliveryList])
+    setsearchObj((e) => ({ ...e, shipment_mode: item.id }))
+  }
+  //是否不允许确认筛选
+  const isDisabled = useMemo(() => {
+    if (searchObj.clientName !== '' ||
+      searchObj.orderNo !== '' ||
+      searchObj.saleuserName !== '' ||
+      searchObj.sale_mode !== undefined ||
+      searchObj.shipment_mode !== undefined
+    ) {
+      return false
+    } else {
+      return true
+    }
+  }, [searchObj])
+
+  //重置
+  const handReset = () => {
+    setsearchObj({
+      purchaser_id: '',
+      clientName: '',
+      sale_user_id: '',
+      saleuserName: '',
+      orderNo: '',
+      sale_mode: undefined,
+      shipment_mode: undefined
+    })
+  }
+  //确认筛选
+  const handSure = async () => {
+    getOrderList()
+  }
+  //扫描
+  const handScan = () => {
+    Taro.scanCode({
+      success(res) {
+        setsearchObj((e) => ({ ...e, orderNo: res.result }))
+      },
+      fail(res) {
+        console.log(res);
+      },
+    });
+  }
+
   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={classnames('iconfont', 'icon-shaixuan', !isDisabled ? styles.icon_shaixuan : styles.activeshaixuan)}></View>
-          <View className={styles.shaixuan}>筛选</View>
+          <View className={classnames(isDisabled ? styles.shaixuan : styles.activeshai)}>筛选</View>
         </View>
       </Search>
       <OrderStatusList list={statusList} onSelect={changeStatus} defaultId={-1} />
@@ -175,40 +256,62 @@ export default () => {
       <Popup title={'筛选订单'} show={showPopup} onClose={() => closePopup()}>
         <View className={styles.popupBox}>
           <View className={styles.topBox}>
-            <View className={styles.leftTop} onClick={() => showPopupDesige(1)}>
+            <View className={styles.leftTop} onClick={() => navTo(1)}>
               <View className={styles.lefttopTitle}>客户信息</View>
-              <View className={styles.lefttopSelectBox}>
+              <View className={classnames(searchObj.clientName === '' ? styles.lefttopSelectBox : styles.activelefttopSelectBox)}>
-                <View className={styles.lefttopSelectName}>请选择客户</View>
+                <View className={styles.lefttopSelectName}>{searchObj.clientName === '' ? '请选择客户' : searchObj.clientName}</View>
                 <View className={classnames('iconfont', 'icon-more', styles.icon_more)}></View>
               </View>
             </View>
-            <View className={styles.leftTop} onClick={() => showPopupDesige(2)}>
+            <View className={styles.leftTop} onClick={() => navTo(2)}>
               <View className={styles.lefttopTitle}>业务员</View>
-              <View className={styles.lefttopSelectBox}>
+              <View className={classnames(searchObj.saleuserName === '' ? styles.lefttopSelectBox : styles.activelefttopSelectBox)}>
-                <View className={styles.lefttopSelectName}>请选择业务员</View>
+                <View className={styles.lefttopSelectName}>{searchObj.saleuserName === '' ? '请选择客户' : searchObj.saleuserName}</View>
                 <View className={classnames('iconfont', 'icon-more', styles.icon_more)}></View>
               </View>
             </View>
           </View>
+          <View className={styles.secondBox}>
+            <View className={styles.secondTopfont}>订单单号</View>
+            <View className={styles.inputBox}>
+              <Input onInput={(e) => { handInput(e) }} placeholderStyle='color:#000000; font-size:26rpx' className={styles.orderInput} value={searchObj.orderNo} placeholder={'请输入或扫描条形码'}></Input>
+              <View className={classnames('iconfont', 'icon-saomiao', styles.saomiao)} onClick={() => { handScan() }}></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 className={styles.thirdBox}>
+            <View className={styles.thirdTopfont}>订单类型</View>
+            <View className={styles.flexModebox}>
+              {
+                modeList.map((item, index) => {
+                  return (
+                    <View onClick={() => { handCheckMode(item) }} className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
+                  )
+                })
+              }
+            </View>
+          </View>
+          <View className={styles.thirdBox}>
+            <View className={styles.thirdTopfont}>发货方式</View>
+            <View className={styles.flexModebox}>
+              {
+                deliveryList.map((item, index) => {
+                  return (
+                    <View onClick={() => { handCheckDelivery(item) }} className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
+                  )
+                })
+              }
+            </View>
+          </View>
+          <View>{isDisabled}</View>
+          <View style={{ height: '160rpx' }}></View>
+
+          <View className={styles.bottomBox}>
+
+            <Button className={styles.resetBox} onClick={() => { handReset() }}> 重置</Button >
+            <Button className={classnames(isDisabled ? styles.button : styles.activeButton)} disabled={isDisabled} onClick={() => { handSure?.() }}> 确认</Button >
 
           </View>
-
+        </View>
       </Popup>
     </View>
   )

src/pages/saleuserPage/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+    navigationBarTitleText: '选择业务员',
+}

src/pages/saleuserPage/index.module.scss

@@ -0,0 +1,110 @@
+page {
+    background: #f7f7f7;
+}
+
+.cussBox {
+
+    .searchBox {
+        position: sticky;
+        top: 0;
+        width: 750px;
+        height: 96px;
+        background: #FFFFFF;
+        display: flex;
+        align-items: center;
+
+        .two {
+            width: 702px;
+            height: 72px;
+            margin-left: 24px;
+        }
+    }
+
+    .listBox {
+        height: calc(100vh - 96px);
+    }
+
+    .itemBox {
+        margin-left: 24px;
+        width: 702px;
+        height: 104px;
+        background: #FFFFFF;
+        border-radius: 16px;
+        display: flex;
+        align-items: center;
+        margin-top: 24px;
+        box-sizing: border-box;
+
+        .cussName {
+            margin-left: 48px;
+            width: 168px;
+            height: 34px;
+            font-size: 28px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #000000;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .phone {
+            margin-left: 88px;
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+        }
+
+        .woker {
+            margin-left: 88px;
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+        }
+    }
+
+    .acticveitemBox {
+        margin-left: 24px;
+        width: 702px;
+        height: 104px;
+        background: #FFFFFF;
+        border-radius: 16px;
+        display: flex;
+        align-items: center;
+        margin-top: 24px;
+        box-sizing: border-box;
+
+        border: 1px solid #337FFF;
+
+        .cussName {
+            margin-left: 48px;
+            width: 168px;
+            height: 34px;
+            font-size: 28px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #000000;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .phone {
+            margin-left: 88px;
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+        }
+
+        .woker {
+            margin-left: 88px;
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+        }
+    }
+}

src/pages/saleuserPage/index.tsx

@@ -0,0 +1,151 @@
+import { View, ScrollView, Image, Input, Button } from '@tarojs/components'
+import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
+import styles from "./index.module.scss"
+import classnames from "classnames";
+import Search from '@/components/search'
+import { mpenumsaleUserlist } from '@/api/order'
+import { useDidShow } from '@tarojs/taro';
+import Taro from '@tarojs/taro'
+import { useRouter } from '@tarojs/taro'
+import InfiniteScroll from '@/components/infiniteScroll'
+import { dataLoadingStatus, getFilterData } from '@/common/util'
+
+export default () => {
+
+
+
+    const [search, setSearch] = useState({
+        name: null,
+        page: 1,
+        size: 10,
+    })
+    const [clentList, setClientlist] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
+
+    const { fetchData: clitentFetch, state: orderState } = mpenumsaleUserlist()
+    //数据加载状态
+    const statusMore = useMemo(() => {
+        return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading })
+    }, [clentList, orderState])
+
+    const [clientObj, setclientObj] = useState({
+        saleuserId: null,
+        saleuserName: ''
+    })
+
+    //输入了搜索关键字
+    const getSearchData = useCallback((eq) => {
+        pageNum.current.page = 1
+        setClientlist(() => ({ list: [], total: 0 }))
+        setSearch((e) => ({ ...e, name: eq, size: 10 }))
+    }, [])
+
+
+    const router = useRouter()
+
+    useEffect(() => {
+        if (search.name === '') {
+            setSearch((e) => ({ ...e, name: null }))
+        }
+        if (search.name !== '') getCuss()
+    }, [search])
+
+    //上拉加载数据
+    const pageNum = useRef({ size: search.size, page: search.page })
+    const getScrolltolower = useCallback(() => {
+        if (clentList.list.length < clentList.total) {
+            pageNum.current.page++
+            const size = pageNum.current.size * pageNum.current.page
+            setSearch((e) => ({ ...e, size }))
+            console.log(search, 11111)
+        }
+    }, [clentList])
+
+    //列表下拉刷新
+    const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
+    const getRefresherRefresh = async () => {
+        pageNum.current.size = 1
+        setRefresherTriggeredStatus(true)
+        setSearch((val) => ({ ...val, size: 10 }))
+    }
+    const getCuss = async () => {
+        let res = await clitentFetch({ name: search.name === null ? '' : search.name, page: search.page, size: search.size })
+        if (router?.params.clientId) {
+            res.data.list.map(item => {
+                if (item.id == router?.params.clientId) {
+                    item.checked = true
+                } else {
+                    item.checked = false
+                }
+                return item
+            })
+        }
+        setClientlist((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
+        setRefresherTriggeredStatus(() => false)
+    }
+    //选择业务员
+    const selectClient = (item) => {
+        clentList.list.map(it => {
+            if (item.id === it.id) {
+                it.checked = true
+            } else {
+                it.checked = false
+            }
+            return it
+        })
+        let pages = Taro.getCurrentPages(); // 获取当前的页面栈 
+        let prevPage = pages[pages.length - 2];
+        prevPage.setData({ //设置上一个页面的值
+            saleuserId: item.id,
+            saleuserName: item.name
+        });
+        setClientlist((e) => ({ ...e, list: clentList?.list, total: clentList?.total }))
+        setclientObj(item)
+        Taro.navigateBack({
+            delta: 1
+        })
+    }
+    useEffect(() => {
+        if (clientObj?.saleuserId !== null) {
+            setclientObj(clientObj)
+        } else {
+            let pages = Taro.getCurrentPages(); // 获取当前的页面栈 
+            let prevPage = pages[pages.length - 2];
+            prevPage.setData({ //设置上一个页面的值
+                saleuserId: '',
+                saleuserName: '',
+            });
+        }
+    }, [clientObj])
+    return (
+        <View className={styles.cussBox}>
+            <View className={styles.searchBox}>
+                <View className={styles.two}>
+                    <Search placeholder='请输入业务员名称' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
+                </View>
+
+            </View>
+            <View className={styles.listBox}>
+                <InfiniteScroll
+                    statusMore={statusMore}
+                    selfonScrollToLower={getScrolltolower}
+                    refresherEnabled={true}
+                    refresherTriggered={refresherTriggeredStatus}
+                    selfOnRefresherRefresh={getRefresherRefresh}>
+                    {
+                        clentList.list.map((item, index) => {
+                            return (
+                                <View className={classnames(item.checked ? styles.acticveitemBox : styles.itemBox)} key={index} onClick={() => { selectClient(item) }}>
+                                    <View className={styles.cussName}>{item.name}</View>
+                                    <View className={styles.phone}>{item.phone}</View>
+                                    <View className={styles.woker}>{item.sale_user_name}</View>
+                                </View>
+                            )
+                        })
+                    }
+                </InfiniteScroll>
+            </View>
+
+
+        </View>
+    )
+}