✨ feat:客户管理20%

project.private.config.json

@@ -176,6 +176,20 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/customerManagement/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/customerDetails/index",
+          "query": "id=642",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }

src/app.config.ts

@@ -128,5 +128,9 @@ export default defineAppConfig({
       root: 'pages/customerManagement',
       pages: ['index'],
     },
+    {
+      root: 'pages/customerDetails',
+      pages: ['index'],
+    },
   ],
 })

src/components/AddressList/index.tsx

@@ -36,14 +36,14 @@ const AddressList = memo((props: Params) => {
       })
     }
   }
-  useDidShow(() => {
+  useEffect(() => {
     getData();
     // 监听刷新
     Taro.eventCenter.on("addressList:refresh", getData);
     return () => {
       Taro.eventCenter.off("addressList:refresh", getData);
     }
-  })
+  }, [])
   // 处理刷新
   const [refreshState, setRefreshState] = useState(false);
   const handleRefresh = async () => {
@@ -127,7 +127,7 @@ const AddressList = memo((props: Params) => {
                           item.is_default && <Text className="address-list-phone">{item.phone.replace(item.phone.substring(3, 7), "****")}</Text>
                         }
                       </View>
-                      <Navigator onClick={e => e.stopPropagation()} url={`/pages/addAddress/index?type=edit&id=${item.id}&&purchaser_id=${Number(router.params.purchaser_id)}`} hoverClass="none" className="address-edit">
+                      <Navigator onClick={e => e.stopPropagation()} url={`/pages/addAddress/index?type=edit&id=${item.id}&&purchaser_id=${Number(props.purchaser_id)}`} hoverClass="none" className="address-edit">
                         {/* <Text className="iconfont icon-bianji"></Text> */}
                         <IconFont name={'icon-bianji'} size={40} ></IconFont>
                       </Navigator>
@@ -139,7 +139,7 @@ const AddressList = memo((props: Params) => {
           }
         </View>
       </ScrollView>
-      {addButtonEnabled && <Navigator url={`/pages/addAddress/index?type=add&purchaser_id=${Number(router.params.purchaser_id)}`} hoverClass="none" className="add-address">添加收货地址</Navigator>}
+      {addButtonEnabled && <Navigator url={`/pages/addAddress/index?type=add&purchaser_id=${Number(props.purchaser_id)}`} hoverClass="none" className="add-address">添加收货地址</Navigator>}
     </View>
   )
 })

src/pages/addAddress/index.module.scss

@@ -91,7 +91,7 @@
 }
 
 .checkBox {
-    margin-left: 32px;
+    margin-left: 24px;
     margin-top: 24px;
     width: 702px;
     height: 120px;

src/pages/customerDetails/components/form/index.module.scss

@@ -0,0 +1,80 @@
+.mainItem {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #e5e5e5;
+    padding-bottom: 40px;
+    margin-bottom: 40px;
+
+    .mainItem_left {
+        width: 176px;
+        font-size: 28px;
+        font-weight: 500;
+        color: #000000;
+    }
+
+    .mainItem_right {
+        font-size: 28px;
+        font-weight: 400;
+        color: #000000;
+        margin-right: 16px;
+    }
+
+    .mainItem_active_right {
+        font-size: 28px;
+        font-weight: 400;
+        color: #337FFF;
+        margin-right: 16px;
+    }
+
+    .call {
+        width: 65px;
+        height: 34px;
+        border-radius: 8px;
+        border: 1px solid #337FFF;
+        font-size: 24px;
+        font-weight: 400;
+        color: #337FFF;
+        line-height: 34px;
+        text-align: center;
+    }
+}
+
+.mainItem_active {
+    display: flex;
+    align-items: center;
+    border-bottom: none;
+    margin-bottom: 40px;
+
+    .mainItem_left {
+        width: 176px;
+        font-size: 28px;
+        font-weight: 500;
+        color: #000000;
+    }
+
+    .mainItem_right {
+        font-size: 28px;
+        font-weight: 400;
+        color: #000000;
+        margin-right: 16px;
+    }
+
+    .mainItem_active_right {
+        font-size: 28px;
+        font-weight: 400;
+        color: #337FFF;
+        margin-right: 16px;
+    }
+
+    .call {
+        width: 65px;
+        height: 34px;
+        border-radius: 8px;
+        border: 1px solid #337FFF;
+        font-size: 24px;
+        font-weight: 400;
+        color: #337FFF;
+        line-height: 34px;
+        text-align: center;
+    }
+}

src/pages/customerDetails/components/form/index.tsx

@@ -0,0 +1,38 @@
+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 {
+    title: string,
+    des: string | number,
+    isPhone?: boolean
+    isBorder?: boolean
+}
+
+export default memo((props: Props) => {
+    const {
+        isPhone = false,
+        isBorder = true,
+    } = props
+
+    const handPhone = () => {
+        Taro.makePhoneCall({
+            phoneNumber: props.des as string
+        })
+    }
+
+
+    return (
+        <View className={classnames(isBorder ? styles.mainItem : styles.mainItem_active)}>
+            <View className={styles.mainItem_left}>{props.title}</View>
+            <View className={classnames(isPhone ? styles.mainItem_active_right : styles.mainItem_right)}>{props.des}</View>
+            {
+                isPhone && <View className={styles.call} onClick={() => handPhone()}>拨打</View>
+            }
+        </View>
+    )
+})

src/pages/customerDetails/components/tabs/index.module.scss

@@ -0,0 +1,42 @@
+.flexBox {
+    width: 100%;
+    height: 102px;
+    background: #ffffff;
+    display: flex;
+    position: sticky;
+    top: 80px;
+    .itemBox {
+        position: relative;
+        flex: 1;
+        min-width: 138px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        height: 102px;
+
+        .itemFont {
+            font-size: 28px;
+            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+            font-weight: 700;
+            color: #000000;
+        }
+
+        .activeItems {
+            font-size: 28px;
+            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+            font-weight: 400;
+            color: #337FFF;
+        }
+
+        .borderBox {
+            position: absolute;
+            bottom: 0;
+            width: 138px;
+            height: 6px;
+            background: #337FFF;
+            border-radius: 4px;
+        }
+    }
+}

src/pages/customerDetails/components/tabs/index.tsx

@@ -0,0 +1,32 @@
+import { View, Input, Button } from '@tarojs/components'
+import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
+import styles from "./index.module.scss"
+import classnames from "classnames";
+
+interface Props {
+    list: any[],
+    handChose?: (any) => void
+}
+export default memo((props: Props) => {
+    const { list = [], handChose } = props
+
+    return (
+        <View className={styles.flexBox}>
+            {
+                list.map((item, index) => {
+                    return (
+                        <View className={styles.itemBox} key={index} onClick={() => handChose?.(item)}>
+                            <View
+                                className={classnames(item.showBorder ? styles.activeItems : styles.itemFont)}
+
+                            >{item?.name}</View >
+                            {
+                                item.showBorder && <View className={styles.borderBox} ></View>
+                            }
+                        </View >
+                    )
+                })
+            }
+        </View >
+    )
+})

src/pages/customerDetails/components/tagPopup/index.tsx

@@ -0,0 +1,19 @@
+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'
+import Popup from '@/components/popup';
+interface Props {
+    showPopup: boolean,
+    handClose: () => void,
+    
+}
+export default memo((props: Props) => {
+    return (
+        <Popup title={'选择标签'} show={props.showPopup} onClose={() => { props.handClose() }}></Popup>
+    )
+})

src/pages/customerDetails/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+    navigationBarTitleText: '客户详情',
+}

src/pages/customerDetails/index.module.scss

@@ -0,0 +1,119 @@
+.mainTop {
+    padding-top: 24px;
+    background: #fff;
+    overflow: hidden;
+
+    .mainUser {
+        padding-top: 36px;
+        margin-left: 24px;
+        margin-right: 24px;
+        display: flex;
+        position: relative;
+        background: #F6F7FB;
+        border-radius: 16px;
+        padding-bottom: 20px;
+        // margin-bottom: 16px;
+
+        .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;
+            margin-left: 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;
+                }
+
+                .item_tagAdd {
+                    color: #4581FF;
+                    background: #ecf2ff;
+                    width: 114px;
+                    height: 45px;
+                    border-radius: 8px;
+                    display: flex;
+                    align-items: center;
+
+                    justify-content: space-between;
+
+                    .item_add {
+                        line-height: 45px;
+                        // font-size: 40px;
+                        margin-left: 8px;
+                    }
+
+                    .item_add_font {
+                        font-size: 24px;
+                        font-weight: 500;
+                        color: #4581FF;
+                        margin-right: 10px;
+                    }
+                }
+            }
+        }
+
+        .pos {
+            position: absolute;
+            top: 25px;
+            right: 24px;
+            font-size: 28px;
+            font-weight: 400;
+            color: #337FFF;
+        }
+    }
+
+}
+
+.formBox {
+    margin-top: 24px;
+    margin-left: 24px;
+    margin-right: 24px;
+    background: #FFFFFF;
+    border-radius: 16px;
+    padding: 40px 32px 40px 32px;
+}
+
+.order_list {
+    height: calc(100vh - 250px);
+    margin-top: 24px;
+}

src/pages/customerDetails/index.tsx

@@ -0,0 +1,88 @@
+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 Popup from '@/components/popup'
+import { debounce } from '@/common/util'
+import { alert } from '@/common/common'
+import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
+import { ClientListApi } from '@/api/order'
+import Tabs from "./components/tabs"
+import Form from "./components/form"
+import AddressList from "@/components/AddressList"
+import TagPopup from './components/tagPopup';
+export default () => {
+    const router = useRouter()
+    const [status, setstatus] = useState<number>(1)
+
+    //顶部栏
+    const [TarBarList, setTarBarList] = useState<any[]>([{ id: 1, name: '基础信息', showBorder: true }, { id: 2, name: '收货地址', showBorder: false }])
+    const handChose = (item) => {
+        TarBarList.map(it => {
+            if (it.id === item.id) {
+                it.showBorder = true
+            } else {
+                it.showBorder = false
+            }
+            setTarBarList([...TarBarList])
+            setstatus(item.id)
+            // pageNum.current.page = 1
+            // setOrderData(() => ({ list: [], total: 0 }))
+            // setSearchField((val) => ({ ...val, size: 10, status: item.id }))
+        })
+    }
+
+    const [showPopup, setshowPopup] = useState(false)
+    return (
+        <View className={styles.mainBox}>
+            <View className={styles.mainTop}>
+                <View className={styles.mainUser}>
+                    <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 className={styles.item_tagAdd} onClick={() => setshowPopup(true)}>
+                                <View className={styles.item_add}>+</View>
+                                <View className={styles.item_add_font}>标签</View>
+                            </View>
+                        </View>
+                    </View>
+                    <View className={styles.pos}>{'编辑 >'}</View>
+                </View>
+                <Tabs list={TarBarList} handChose={(item) => handChose?.(item)}></Tabs>
+            </View>
+            {
+                status === 1 && <View className={styles.formBox}>
+                    <Form title={'客户全称'} des={'2222'} ></Form>
+                    <Form title={'客户简称'} des={'2222'} ></Form>
+                    <Form title={'客户类型'} des={'2222'} ></Form>
+                    <Form title={'联系人'} des={'2222'} ></Form>
+                    <Form title={'联系电话'} des={'2222'} isPhone></Form>
+                    <Form title={'省市区'} des={'2222'} ></Form>
+                    <Form title={'详细地址'} des={'2222'} ></Form>
+                    <Form title={'业务人员'} des={'2222'} ></Form>
+                    <Form title={'客户来源'} des={'2222'} ></Form>
+                    <Form title={'备注信息'} des={'2222'} ></Form>
+                    <Form title={'下单时间'} des={'2222'} ></Form>
+                    <Form title={'创建时间'} des={'2222'} ></Form>
+                    <Form title={'创建人'} des={'2222'} ></Form>
+                    <Form title={'更新人'} des={'2222'} ></Form>
+                    <Form title={'更新时间'} des={'2222'} isBorder={false}></Form>
+                </View>
+            }
+            {
+                status === 2 &&
+                <View className={styles.order_list}>
+                    <AddressList refresherEnabled={true} purchaser_id={router.params.id as any} />
+                </View>
+            }
+            <TagPopup showPopup={showPopup} handClose={() => setshowPopup(false)}></TagPopup>
+        </View>
+    )
+} 

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;
+        position: sticky;
-        flex: 1;
+        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}>
+            <View className={styles.topBox}>
-                <Tag></Tag>
+                <View className={styles.search_input}>
-                <Tag></Tag>
+                    <Search placeholder='搜索客户名称、电话、业务员' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
-                <Tag></Tag>
+                </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>
     )