✨ feat:客户管理20%

src/pages/customerManagement/components/ItemList/index.module.scss

@@ -0,0 +1,106 @@
+.mainItem {
+    margin-left: 24px;
+    margin-right: 24px;
+    margin-bottom: 24px;
+    background: #fff;
+    overflow: hidden;
+    padding-bottom: 16px;
+    border-radius: 16px;
+
+    .itemTop {
+        margin-top: 36px;
+        display: flex;
+        justify-content: space-between;
+
+        .itemLeft {
+            margin-left: 24px;
+            display: flex;
+
+            .itemCile {
+                width: 78px;
+                height: 78px;
+                background: linear-gradient(337deg, #7BB7FF 0%, #4581FF 100%);
+                font-size: 32px;
+                font-weight: 500;
+                color: #FFFFFF;
+                text-align: center;
+                line-height: 78px;
+                border-radius: 50%;
+                margin-right: 32px;
+            }
+
+            .item_top_one {
+                .item_top_one_flex {
+                    display: flex;
+                    align-items: center;
+
+                    .itemName {
+                        font-size: 28px;
+                        font-weight: 500;
+                        color: #000000;
+                        margin-right: 24px;
+                    }
+
+                    .itemPhone {
+                        font-size: 28px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: #000000;
+                    }
+                }
+
+                .item_tag_box {
+                    margin-top: 16px;
+                    display: flex;
+                    align-items: center;
+                    flex-wrap: wrap;
+
+                    .item_tagItem {
+                        margin-bottom: 5px;
+                        margin-right: 16px;
+                        padding: 6px 16px 6px 16px;
+                        font-size: 24px;
+                        font-weight: 500;
+                        color: #4581FF;
+                        background: #ecf2ff;
+                        border-radius: 8px;
+                    }
+                }
+            }
+        }
+
+        .itemRight {
+            display: flex;
+
+            .phoneFont {
+                margin-right: 40px;
+                margin-left: 16px;
+                font-size: 24px;
+                font-weight: 400;
+                color: #4581FF;
+            }
+        }
+    }
+
+    .line {
+        height: 1px;
+        background: #000000;
+        opacity: 0.1;
+        margin-right: 24px;
+        margin-left: 24px;
+        margin-top: 20px;
+        margin-bottom: 16px;
+    }
+
+    .flex_bottom {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-left: 24px;
+        padding-right: 24px;
+        font-size: 24px;
+        font-weight: 400;
+        color: #000000;
+    }
+
+}

src/pages/customerManagement/components/ItemList/index.tsx

@@ -0,0 +1,55 @@
+import { View } from '@tarojs/components'
+import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
+import styles from "./index.module.scss"
+import classnames from "classnames";
+import Taro, { usePullDownRefresh, useRouter, useDidShow } from '@tarojs/taro';
+import { alert } from '@/common/common'
+import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
+import IconFont from '@/components/iconfont/iconfont'
+interface Props {
+    obj: any
+}
+
+export default memo((props: Props) => {
+
+    const handPhone = () => {
+        Taro.makePhoneCall({
+            phoneNumber: props.obj?.phone
+        })
+    }
+
+    const handNav = () => {
+        Taro.navigateTo({
+            url: '/pages/customerDetails/index?purchaser_id=' + props.obj?.id
+        })
+    }
+
+    return (
+        <View className={styles.mainItem} onClick={() => handNav()}>
+            <View className={styles.itemTop}>
+                <View className={styles.itemLeft}>
+                    <View className={styles.itemCile}>欧</View>
+                    <View className={styles.item_top_one}>
+                        <View className={styles.item_top_one_flex}>
+                            <View className={styles.itemName}>欧阳斌峰</View>
+                            <View className={styles.itemPhone}>133****7761</View>
+                        </View>
+                        <View className={styles.item_tag_box}>
+                            <View className={styles.item_tagItem}>二批</View>
+                            <View className={styles.item_tagItem}>二批</View>
+                        </View>
+                    </View>
+                </View>
+                <View className={styles.itemRight} onClick={() => handPhone()}>
+                    <IconFont name={'icon-dizhi'} size={30} color={'#5C5C66'}></IconFont>
+                    <View className={styles.phoneFont}>联系TA</View>
+                </View>
+            </View>
+            <View className={styles.line}></View>
+            <View className={styles.flex_bottom}>
+                <View className={styles.flex_left}>广东省广州市海珠区</View>
+                <View className={styles.flex_right}>更新时间：2022-09-20  17:10</View>
+            </View>
+        </View >
+    )
+})

src/pages/customerManagement/components/Sort/index.module.scss

@@ -0,0 +1,31 @@
+.mainBox {
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 40px;
+
+    .itemFlex {
+        padding: 23px 11px 23px 11px;
+        background: #f6f6f6;
+        box-sizing: border-box;
+        border: 1px solid #f6f6f6;
+        font-size: 28px;
+        font-weight: 400;
+        color: #000000;
+        margin-right: 24px;
+        margin-bottom: 24px;
+        border-radius: 16px;
+    }
+
+    .itemactiveFlex {
+        padding: 23px 11px 23px 11px;
+        background: rgba(51, 127, 255, 0.1);
+        border-radius: 16px;
+        border: 1px solid #337FFF;
+        box-sizing: border-box;
+        font-size: 28px;
+        font-weight: 400;
+        color: #337FFF;
+        margin-right: 24px;
+        margin-bottom: 24px;
+    }
+}

src/pages/customerManagement/components/Sort/index.tsx

@@ -0,0 +1,87 @@
+import { View } from '@tarojs/components'
+import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
+import styles from "./index.module.scss"
+import classnames from "classnames";
+import Taro, { usePullDownRefresh, useRouter, useDidShow } from '@tarojs/taro';
+import { alert } from '@/common/common'
+import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
+import DropDownItem from '@/components/dropDown-item'
+interface Props {
+    handSort?: (any) => void
+}
+
+export default memo((props: Props) => {
+
+    const DropDownItemRef = useRef<any>()
+    // const close = () => {
+    //     DropDownItemRef.current.closePopup()
+    // }
+
+    const [list, setlist] = useState<any[]>([
+        {
+            name: '下单时间升序',
+            id: 0,
+            checked: false
+        },
+        {
+            name: '下单时间升序',
+            id: 1,
+            checked: false
+        },
+        {
+            name: '下单时间升序',
+            id: 2,
+            checked: false
+        },
+        {
+            name: '下单时间升序',
+            id: 3,
+            checked: false
+        },
+        {
+            name: '下单时间升序',
+            id: 4,
+            checked: false
+        },
+    ])
+
+    const [currentValue, setCurrentValue] = useState<number>(-1)
+
+    const handItem = (it) => {
+        list.map(item => {
+            if (item.id == it.id) {
+                item.checked = true
+            } else {
+                item.checked = false
+            }
+            return item
+        })
+        setlist([...list])
+        props.handSort?.(it)
+    }
+
+
+    const title = useMemo(() => {
+        let arr = list.filter(item => { return item.checked })
+        if (!arr.length) {
+            return '默认排序'
+        } else {
+            return arr[0]?.name
+        }
+    }, [list])
+
+
+    return (
+        <DropDownItem ref={DropDownItemRef} title={title} value={currentValue} activeColor='#337fff'>
+            <View className={styles.mainBox}>
+                {
+                    list.map((item, index) => {
+                        return (
+                            <View className={classnames(item.checked ? styles.itemactiveFlex : styles.itemFlex)} onClick={() => handItem?.(item)}>{item.name}</View>
+                        )
+                    })
+                }
+            </View>
+        </DropDownItem>
+    )
+})

src/pages/customerManagement/components/Tag/index.module.scss

@@ -0,0 +1,44 @@
+.mainBox {
+    .pussTitle {
+        font-size: 28px;
+        font-weight: 500;
+        color: #000000;
+        margin-bottom: 24px;
+        margin-left: 40px;
+        margin-top: 15px;
+    }
+
+    .pussBox {
+        display: flex;
+        flex-wrap: wrap;
+        padding-left: 40px;
+
+
+
+        .itemFlex {
+            padding: 23px 47px 23px 47px;
+            background: #f6f6f6;
+            box-sizing: border-box;
+            border: 1px solid #f6f6f6;
+            font-size: 28px;
+            font-weight: 400;
+            color: #000000;
+            margin-right: 24px;
+            margin-bottom: 24px;
+            border-radius: 16px;
+        }
+
+        .itemactiveFlex {
+            padding: 23px 47px 23px 47px;
+            background: rgba(51, 127, 255, 0.1);
+            border-radius: 16px;
+            border: 1px solid #337FFF;
+            box-sizing: border-box;
+            font-size: 28px;
+            font-weight: 400;
+            color: #337FFF;
+            margin-right: 24px;
+            margin-bottom: 24px;
+        }
+    }
+}

src/pages/customerManagement/components/Tag/index.tsx

@@ -3,24 +3,96 @@ import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNo
 import styles from "./index.module.scss"
 import classnames from "classnames";
 import Taro, { usePullDownRefresh, useRouter, useDidShow } from '@tarojs/taro';
-import Popup from '@/components/popup'
-import { debounce } from '@/common/util'
 import { alert } from '@/common/common'
 import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
-import IconFont from '@/components/iconfont/iconfont'
 import DropDownItem from '@/components/dropDown-item'
 
 
 export default memo(() => {
 
     const DropDownItemRef = useRef<any>()
-    const close = () => {
-        DropDownItemRef.current.closePopup()
+
+    const [currentValue, setCurrentValue] = useState<number>(-1)
+
+    const [list, setlist] = useState<any[]>([
+        {
+            name: '二批',
+            id: 0,
+            checked: false
+        },
+        {
+            name: '制衣厂',
+            id: 1,
+            checked: false
+        },
+        {
+            name: '布行',
+            id: 2,
+            checked: false
+        }
+    ])
+
+    const [taglist, settaglist] = useState<any[]>([
+        {
+            name: '二批321312',
+            id: 0,
+            checked: false
+        },
+        {
+            name: '制衣厂312412',
+            id: 1,
+            checked: false
+        },
+        {
+            name: '布行54354',
+            id: 2,
+            checked: false
+        }
+    ])
+
+    const handItem = (it) => {
+        list.map(item => {
+            if (item.id == it.id) {
+                item.checked = !item.checked
+            }
+            return item
+        })
+        setlist([...list])
     }
+
+    const handTag = (it) => {
+        taglist.map(item => {
+            if (item.id == it.id) {
+                item.checked = !item.checked
+            }
+            return item
+        })
+        settaglist([...taglist])
+    }
+
     return (
-        <DropDownItem ref={DropDownItemRef} title={'全部标签'} value={-1} activeColor='#337fff' hasBottomBtn={true}>
+        <DropDownItem ref={DropDownItemRef} title={'自定标签'} value={currentValue} activeColor='#337fff'>
             <View className={styles.mainBox}>
-                <View onClick={() => close()}>111</View>
+                <View className={styles.pussTitle}>客户类型</View>
+                <View className={styles.pussBox}>
+                    {
+                        list.map((item, index) => {
+                            return (
+                                <View className={classnames(item.checked ? styles.itemactiveFlex : styles.itemFlex)} onClick={() => handItem?.(item)}>{item.name}</View>
+                            )
+                        })
+                    }
+                </View>
+                <View className={styles.pussTitle}>自定义标签</View>
+                <View className={styles.pussBox}>
+                    {
+                        taglist.map((item, index) => {
+                            return (
+                                <View className={classnames(item.checked ? styles.itemactiveFlex : styles.itemFlex)} onClick={() => handTag?.(item)}>{item.name}</View>
+                            )
+                        })
+                    }
+                </View>
             </View>
         </DropDownItem>
     )

src/pages/customerManagement/index.module.scss

@@ -1,9 +1,65 @@
 .mainBox {
-    overflow: hidden;
 
-    .menuBox {
+    .topBox {
         width: 100%;
-        display: flex;
-        flex: 1;
+        position: sticky;
+        top: 0;
+        z-index: 999;
+        padding-bottom: 24px;
+        background: #fff;
+        // overflow: hidden;
+
+        .search_input {
+            padding-top: 8px;
+            margin-left: 24px;
+            margin-right: 24px;
+            margin-bottom: 10px;
+        }
+
+        .menuBox {
+            width: 100%;
+            display: flex;
+            flex: 1;
+
+
+        }
+
+    }
+
+    .totalFont {
+        margin-top: 24px;
+        margin-left: 24px;
+        font-size: 26px;
+        font-weight: 400;
+        color: #000000;
+        margin-bottom: 15px;
+    }
+
+    .order_list {
+        // height: calc(100vh -  env(safe-area-inset-bottom) - 230px);
+        background: #f7f7f7;
+    }
+
+    .bottom_box {
+        height: 160px;
+        background: #FFFFFF;
+        position: fixed;
+        bottom: 0;
+        z-index: 1;
+
+        .bottom_btn {
+            margin-top: 16px;
+            margin-left: 24px;
+            margin-right: 24px;
+            width: 702px;
+            height: 80px;
+            background: #337FFF;
+            border-radius: 44px;
+            line-height: 80px;
+            text-align: center;
+            font-size: 28px;
+            font-weight: 500;
+            color: #FFFFFF;
+        }
     }
 }

src/pages/customerManagement/index.tsx

@@ -7,16 +7,102 @@ import Popup from '@/components/popup'
 import { debounce } from '@/common/util'
 import { alert } from '@/common/common'
 import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
-import IconFont from '@/components/iconfont/iconfont'
+import { dataLoadingStatus, getFilterData } from '@/common/util'
 import Tag from './components/Tag';
+import Sort from './components/Sort';
+import Search from '@/components/search'
+import ItemLiist from "./components/ItemList"
+import InfiniteScroll from '@/components/infiniteScroll'
+import { ClientListApi } from '@/api/order'
 
 export default () => {
+
+    const [searchField, setSearchField] = useState<{ page: number; size: number; order_no: string }>({
+        page: 1,
+        size: 10,
+        order_no: '',
+    })
+
+    const [orderData, setOrderData] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
+    const { fetchData: listFetchData, state: orderState } = ClientListApi()
+    const getOrderList = async () => {
+        let res = await listFetchData({
+            ...getFilterData(searchField)
+        })
+        setOrderData((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
+        setRefresherTriggeredStatus(() => false)
+    }
+
+    //监听筛选条件变化
+    useEffect(() => {
+        getOrderList()
+    }, [searchField])
+
+
+    //输入了搜索关键字
+    const getSearchData = useCallback((e) => {
+        // pageNum.current.page = 1
+        // setOrderData(() => ({ list: [], total: 0 }))
+        // setSearchField((val) => ({ ...val, order_no: e, size: 10 }))
+    }, [])
+
+    //数据加载状态
+    const statusMore = useMemo(() => {
+        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 [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
+    const getRefresherRefresh = async () => {
+        pageNum.current.size = 1
+        setRefresherTriggeredStatus(true)
+        setSearchField((val) => ({ ...val, size: 10 }))
+    }
+
+    //选择排序
+    const handSort = useCallback((val) => {
+        console.log(val, 456456)
+    }, [])
+
     return (
         <View className={styles.mainBox}>
-            <View className={styles.menuBox}>
-                <Tag></Tag>
-                <Tag></Tag>
-                <Tag></Tag>
+            <View className={styles.topBox}>
+                <View className={styles.search_input}>
+                    <Search placeholder='搜索客户名称、电话、业务员' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
+                </View> 
+                <View className={styles.menuBox}>
+                    <Sort handSort={handSort}></Sort>
+                    <Tag></Tag>
+                    <Tag></Tag>
+                </View>
+            </View>
+            <View className={styles.totalFont}>共 36 个客户</View>
+            <View className={styles.order_list}>
+                <InfiniteScroll
+                    statusMore={statusMore}
+                    selfonScrollToLower={getScrolltolower}
+                    refresherEnabled={true}
+                    refresherTriggered={refresherTriggeredStatus}
+                    selfOnRefresherRefresh={getRefresherRefresh}>
+                    {orderData?.list?.map((item, index) => {
+                        return (
+                            <ItemLiist obj={item}></ItemLiist>
+                        )
+                    })}
+                </InfiniteScroll>
+            </View>
+            <View className={styles.bottom_box}>
+                <View className={styles.bottom_btn}>新建用户</View>
             </View>
         </View>
     )