xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat:客户管理20%

Browse Source
This commit is contained in:
Haiyi 2022-10-21 18:43:22 +08:00
parent da5d41cfaa
commit 18df424f70
21 changed files with 997 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
project.private.config.json
View File

@ -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
}
]
}

4
src/app.config.ts
View File

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

8
src/components/AddressList/index.tsx
View File

@ -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>
)
})

2
src/pages/addAddress/index.module.scss
View File

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

80
src/pages/customerDetails/components/form/index.module.scss Normal file
View File

@ -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;
}
}

38
src/pages/customerDetails/components/form/index.tsx Normal file
View File

@ -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>
)
})

42
src/pages/customerDetails/components/tabs/index.module.scss Normal file
View File

@ -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;
}
}
}

32
src/pages/customerDetails/components/tabs/index.tsx Normal file
View File

@ -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 >
)
})

0
src/pages/customerDetails/components/tagPopup/index.module.scss Normal file
View File

19
src/pages/customerDetails/components/tagPopup/index.tsx Normal file
View File

@ -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>
)
})

3
src/pages/customerDetails/index.config.ts Normal file
View File

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

119
src/pages/customerDetails/index.module.scss Normal file
View File

@ -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;
}

88
src/pages/customerDetails/index.tsx Normal file
View File

@ -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>
)
}

106
src/pages/customerManagement/components/ItemList/index.module.scss Normal file
View File

@ -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;
}
}

55
src/pages/customerManagement/components/ItemList/index.tsx Normal file
View File

@ -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 >
)
})

31
src/pages/customerManagement/components/Sort/index.module.scss Normal file
View File

@ -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;
}
}

87
src/pages/customerManagement/components/Sort/index.tsx Normal file
View File

@ -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>
)
})

44
src/pages/customerManagement/components/Tag/index.module.scss
View File

@ -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;
}
}
}

86
src/pages/customerManagement/components/Tag/index.tsx
View File

@ -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>
)

64
src/pages/customerManagement/index.module.scss
View File

@ -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;
}
}
}

96
src/pages/customerManagement/index.tsx
View File

@ -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>
)