✨ feat:客户管理50%
This commit is contained in:
Haiyi
@@ -0,0 +1,30 @@
|
||||
.mainBox {
|
||||
|
||||
.scrollView {
|
||||
height: 500px;
|
||||
|
||||
|
||||
.itemBox {
|
||||
margin-left: 53px;
|
||||
margin-right: 27px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 82px;
|
||||
border-bottom: 1px solid #f9f9f9;
|
||||
|
||||
.itemProvince {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.activeitemProvince {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #337FFF;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
import { View, ScrollView } 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'
|
||||
import { GetAddressListApi } from "@/api/addressList";
|
||||
import Tabs from "../tabs"
|
||||
import IconFont from '@/components/iconfont/iconfont';
|
||||
interface Props {
|
||||
handCity?: (any) => void
|
||||
}
|
||||
|
||||
export default memo((props: Props) => {
|
||||
|
||||
const DropDownItemRef = useRef<any>()
|
||||
// const close = () => {
|
||||
// DropDownItemRef.current.closePopup()
|
||||
// }
|
||||
|
||||
//获取地址
|
||||
const { fetchData } = GetAddressListApi()
|
||||
useEffect(() => {
|
||||
getProvince()
|
||||
}, [])
|
||||
|
||||
|
||||
//获取省
|
||||
const getProvince = async () => {
|
||||
let res = await fetchData({ parent_id: 1 })
|
||||
if (res.data) {
|
||||
setlist([...res.data.list])
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//省数组
|
||||
const [list, setlist] = useState<any[]>([])
|
||||
//区数组
|
||||
const [cityList, setcityList] = useState<any[]>([])
|
||||
|
||||
//区分在哪一栏
|
||||
const [currentValue, setCurrentValue] = 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])
|
||||
setCurrentValue(item.id)
|
||||
})
|
||||
}
|
||||
|
||||
//选择省
|
||||
const handProvince = (item) => {
|
||||
list.map(it => {
|
||||
if (item.id == it.id) {
|
||||
it.check = true
|
||||
} else {
|
||||
it.check = false
|
||||
}
|
||||
return it
|
||||
})
|
||||
setlist([...list])
|
||||
getCity(item.id)
|
||||
setCurrentValue(2)
|
||||
TarBarList.map(it => {
|
||||
if (it.id == currentValue) {
|
||||
it.name = item.name
|
||||
it.showBorder = false
|
||||
|
||||
} else {
|
||||
it.showBorder = true
|
||||
}
|
||||
|
||||
return it
|
||||
})
|
||||
setTarBarList([...TarBarList])
|
||||
}
|
||||
|
||||
//获取市
|
||||
const getCity = async (id) => {
|
||||
let res = await fetchData({ parent_id: id })
|
||||
if (res.data) {
|
||||
setcityList([...res.data.list])
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//选择市
|
||||
const handCity = (item) => {
|
||||
cityList.map(it => {
|
||||
if (item.id == it.id) {
|
||||
it.check = !it.check
|
||||
}
|
||||
return it
|
||||
})
|
||||
setcityList([...cityList])
|
||||
let arr = cityList.filter(next => { return next.check })
|
||||
props.handCity?.(arr)
|
||||
}
|
||||
|
||||
return (
|
||||
<DropDownItem ref={DropDownItemRef} title={'所有省市'} value={-1} activeColor='#337fff'>
|
||||
<View className={styles.mainBox}>
|
||||
<Tabs list={TarBarList} handChose={(item) => handChose?.(item)}></Tabs>
|
||||
{
|
||||
currentValue == 1 && <ScrollView scrollY className={styles.scrollView}>
|
||||
{
|
||||
list.map(item => {
|
||||
return (
|
||||
<View className={styles.itemBox} onClick={() => handProvince(item)}>
|
||||
<View className={classnames(item.check ? styles.activeitemProvince : styles.itemProvince)}>{item.name}</View>
|
||||
<IconFont name={'icon-chakanquanbukehu'} size={50} color={'#d8d8d8'}></IconFont>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ScrollView>
|
||||
}
|
||||
{
|
||||
currentValue == 2 && <ScrollView scrollY className={styles.scrollView}>
|
||||
{
|
||||
cityList.map(item => {
|
||||
return (
|
||||
<View className={styles.itemBox} onClick={() => handCity(item)}>
|
||||
<View className={classnames(item.check ? styles.activeitemProvince : styles.itemProvince)}>{item.name}</View>
|
||||
{/* <IconFont name={'icon-chakanquanbukehu'} size={50} color={'#d8d8d8'}></IconFont> */}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ScrollView>
|
||||
}
|
||||
</View>
|
||||
</DropDownItem>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,42 @@
|
||||
.flexBox {
|
||||
width: 100%;
|
||||
height: 102px;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
padding-left: 53px;
|
||||
|
||||
.itemBox {
|
||||
position: relative;
|
||||
min-width: 88px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
height: 102px;
|
||||
margin-right: 40px;
|
||||
|
||||
.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: 88px;
|
||||
height: 6px;
|
||||
background: #337FFF;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 >
|
||||
)
|
||||
})
|
||||
@@ -36,7 +36,7 @@
|
||||
}
|
||||
|
||||
.order_list {
|
||||
// height: calc(100vh - env(safe-area-inset-bottom) - 230px);
|
||||
height: calc(100vh - env(safe-area-inset-bottom) - 160px);
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@ import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format
|
||||
import { dataLoadingStatus, getFilterData } from '@/common/util'
|
||||
import Tag from './components/Tag';
|
||||
import Sort from './components/Sort';
|
||||
import ChoseCity from './components/ChoseCity';
|
||||
import Search from '@/components/search'
|
||||
import ItemLiist from "./components/ItemList"
|
||||
import InfiniteScroll from '@/components/infiniteScroll'
|
||||
@@ -74,15 +75,20 @@ export default () => {
|
||||
console.log(val, 456456)
|
||||
}, [])
|
||||
|
||||
//筛选城市
|
||||
const handCity = useCallback((val) => {
|
||||
console.log(val, 899999)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View className={styles.mainBox}>
|
||||
<View className={styles.topBox}>
|
||||
<View className={styles.search_input}>
|
||||
<Search placeholder='搜索客户名称、电话、业务员' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.menuBox}>
|
||||
<Sort handSort={handSort}></Sort>
|
||||
<Tag></Tag>
|
||||
<ChoseCity handCity={handCity}></ChoseCity>
|
||||
<Tag></Tag>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user