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

✨ feat:客户管理50%

Browse Source
This commit is contained in:
Haiyi 2022-10-24 19:10:14 +08:00
parent 18df424f70
commit 9764f9f1bc
17 changed files with 1109 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
project.private.config.json
View File

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

9
src/api/customer.ts Normal file
View File

@ -0,0 +1,9 @@
import { useRequest } from '@/use/useHttp'
//获取客户信息
export const mppurchaser = () => {
return useRequest({
url: `/v1/mp/purchaser`,
method: "get",
})
}

4
src/app.config.ts
View File

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

126
src/pages/customerDetails/components/tagPopup/index.module.scss
View File

@ -0,0 +1,126 @@
.scrollView {
height: 600px;
.thirdBox {
padding-left: 48px;
.thirdTopfont {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
.flexModebox {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
.activemodeBox {
margin-bottom: 10px;
margin-right: 16px;
padding: 17px 48px 17px 48px;
// 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: #337FFF;
text-align: center;
line-height: 68px;
border: 1px solid #337FFF;
box-sizing: border-box;
}
.modeBox {
margin-bottom: 10px;
margin-right: 16px;
padding: 17px 48px 17px 48px;
// width: 152px;
// height: 68px;
background: #f6f6f6;
border-radius: 8px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
border: 1px solid #f6f6f6;
text-align: center;
line-height: 68px;
box-sizing: border-box;
// opacity: 0.4;
}
}
}
}
.bottomBox {
width: 100%;
// width: 750px;
height: 160px;
background: #FFFFFF;
// position: fixed;
// bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
z-index: 99;
display: flex;
padding-top: 16px;
align-items: center;
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;
letter-spacing: 4px;
}
.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;
letter-spacing: 4px;
}
}
.goLink {
position: absolute;
right: 32px;
top: 37px;
font-size: 28px;
font-weight: 400;
color: #337FFF;
}

87
src/pages/customerDetails/components/tagPopup/index.tsx
View File

@ -1,4 +1,4 @@
import { View } from '@tarojs/components'
import { View, ScrollView, Button } from '@tarojs/components'
import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
import styles from "./index.module.scss"
import classnames from "classnames";
@ -7,13 +7,94 @@ import { alert } from '@/common/common'
import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
import IconFont from '@/components/iconfont/iconfont'
import Popup from '@/components/popup';
import { goLink } from '@/common/common'
interface Props {
showPopup: boolean,
handClose: () => void,
purchaser_id?: string | number
}
export default memo((props: Props) => {
//标签
const [modeList, setModeList] = useState<any[]>([{ id: -1, name: '不限' }, { id: 0, name: '大货' }, { id: 1, name: '剪版' }, { id: 2, name: '散剪' }, { id: 3, name: '新开发客户' }])
//选择标签
const handCheckMode = (item) => {
modeList.map(it => {
if (it.id === item.id) {
it.checked = !it.checked
}
return it
})
setModeList([...modeList])
}
const handReset = () => {
modeList.map(it => {
it.checked = false
return it
})
setModeList([...modeList])
}
const handSure = () => {
}
const isDisabled = useMemo(() => {
let arr = modeList.filter(item => { return item.checked })
if (arr.length) {
return false
} else {
return true
}
}, [modeList])
const choseNums = useMemo(() => {
let arr = modeList.filter(item => { return item.checked })
return arr.length
}, [modeList])
return (
<Popup title={'选择标签'} show={props.showPopup} onClose={() => { props.handClose() }}></Popup>
<Popup title={'选择标签'} show={props.showPopup} onClose={() => { props.handClose() }}>
<ScrollView scrollY className={styles.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>
</ScrollView>
<View className={styles.bottomBox}>
<Button
className={styles.resetBox}
onClick={() => {
handReset()
}}>
重置
</Button>
<Button
className={classnames(isDisabled ? styles.button : styles.activeButton)}
disabled={isDisabled}
onClick={() => {
handSure?.()
}}>
保存({choseNums})
</Button>
</View>
</Popup>
)
})

5
src/pages/customerDetails/index.tsx
View File

@ -12,8 +12,11 @@ import Tabs from "./components/tabs"
import Form from "./components/form"
import AddressList from "@/components/AddressList"
import TagPopup from './components/tagPopup';
import { goLink } from '@/common/common'
export default () => {
const router = useRouter()
const [status, setstatus] = useState<number>(1)
//顶部栏
@ -53,7 +56,7 @@ export default () => {
</View>
</View>
</View>
<View className={styles.pos}>{'编辑 >'}</View>
<View className={styles.pos} onClick={() => goLink('/pages/customerEditor/index?id=' + router.params.purchaser_id)}>{'编辑 >'}</View>
</View>
<Tabs list={TarBarList} handChose={(item) => handChose?.(item)}></Tabs>
</View>

83
src/pages/customerEditor/components/Form/index.module.scss Normal file
View File

@ -0,0 +1,83 @@
.mainItem {
margin-bottom: 40px;
display: flex;
align-items: center;
padding-bottom: 40px;
border-bottom: 1px solid #e8e8e8;
.leftItem {
width: 176px;
display: flex;
align-items: center;
font-size: 28px;
font-weight: 500;
color: #000000;
.xing {
font-size: 28px;
font-weight: 500;
color: #E42945;
}
}
.rightItem {
display: flex;
align-items: center;
width: 100%;
padding-left: 48px;
.placeholderStyle {
color: #f7f7f7;
font-size: 28px;
font-weight: 400;
}
.inputStyle {
width: 100%;
font-size: 28px;
font-weight: 400;
color: #000000;
}
}
}
.mainItemactive {
display: flex;
align-items: center;
border-bottom: none;
.leftItem {
width: 176px;
display: flex;
align-items: center;
font-size: 28px;
font-weight: 500;
color: #000000;
.xing {
font-size: 28px;
font-weight: 500;
color: #E42945;
}
}
.rightItem {
display: flex;
align-items: center;
width: 100%;
padding-left: 48px;
.placeholderStyle {
color: #f7f7f7;
font-size: 28px;
font-weight: 400;
}
.inputStyle {
width: 100%;
font-size: 28px;
font-weight: 400;
color: #000000;
}
}
}

76
src/pages/customerEditor/components/Form/index.tsx Normal file
View File

@ -0,0 +1,76 @@
import { View, ScrollView, Button, Input } 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';
import { goLink } from '@/common/common'
interface Props {
title: string
isQuire?: boolean,
placeholderFont?: string,
handBlur?: (any) => void,
inputValue?: string,
isDisabled?: boolean,
inputType?: any,
maxlength?: number,
children?: ReactNode,
showInput?: boolean,
showMore?: boolean,
showBorder?: boolean,
handNav?: () => void
}
export default memo((props: Props) => {
let {
title = '标题',
isQuire = true,
placeholderFont = '请输入',
handBlur,
handNav,
inputValue,
isDisabled,
inputType = "text",
maxlength = 999,
children,
showInput = true,
showMore = false,
showBorder = true
} = props
return (
<View className={classnames(showBorder ? styles.mainItem : styles.mainItemactive)}>
<View className={styles.leftItem}>{title}
{
isQuire && <View className={styles.xing}>*</View>
}
</View>
{
!children && <View className={styles.rightItem} onClick={() => handNav?.()}>
{
showInput && <Input
maxlength={maxlength}
type={inputType}
disabled={isDisabled}
className={styles.inputStyle}
placeholder={placeholderFont}
placeholderStyle={styles.placeholderStyle}
onBlur={(e) => handBlur?.(e.detail.value)}
value={inputValue}
></Input>
}
{
showMore && <IconFont name={'icon-chakanquanbukehu'} size={50} color={'#000000'}></IconFont>
}
</View>
}
{children}
</View>
)
})

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

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

148
src/pages/customerEditor/index.module.scss Normal file
View File

@ -0,0 +1,148 @@
.mainBox {
margin: 24px;
background: #fff;
padding: 40px 32px 40px 32px;
.flexBox {
display: flex;
align-items: center;
.itemBox {
background: #f6f6f6;
border: 1px solid #f6f6f6;
box-sizing: border-box;
width: 132px;
height: 56px;
opacity: 0.4;
background: #E9E9E9;
border-radius: 8px;
font-size: 28px;
font-weight: 400;
color: #000000;
text-align: center;
line-height: 56px;
margin-right: 24px;
}
.activeBox {
width: 132px;
height: 56px;
background: rgba(51, 127, 255, 0.1);
border-radius: 8px;
border: 1px solid #337FFF;
font-size: 28px;
font-weight: 500;
color: #337FFF;
box-sizing: border-box;
text-align: center;
line-height: 56px;
margin-right: 24px;
}
}
}
.defaltBox {
margin: 24px;
padding: 24px 32px 24px 24px;
background: #FFFFFF;
border-radius: 16px;
.titleBox {
width: 638px;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
.modeName {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #337FFF;
}
}
.modeLine {
margin-top: 24px;
width: 638px;
height: 1px;
background: #000000;
opacity: 0.1;
}
}
.remarkFont {
margin-top: 24px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.safeBox {
width: 100%;
height: 160px;
}
.bottomBox {
width: 100%;
// width: 750px;
height: 160px;
background: #FFFFFF;
position: fixed;
bottom: 0;
z-index: 99;
display: flex;
padding-top: 16px;
align-items: center;
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;
}
.button2 {
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;
}
}

312
src/pages/customerEditor/index.tsx Normal file
View File

@ -0,0 +1,312 @@
import { View, Button } 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, goLink } from '@/common/common'
import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
import Form from "./components/form"
import Remark from '../orderDetails/components/remark';
import Address from "@/components/address"
import { mppurchaser } from '@/api/customer'
export default () => {
const router = useRouter()
const [infoObj, setinfoObj] = useState<any>()
const [formData, setformData] = useState<any>()
//默认业务员
useDidShow(() => {
let userInfo = Taro.getStorageSync('userInfo')
//获取选择的客户
let pages = Taro.getCurrentPages();
let currPage = pages[pages.length - 1]; // 获取当前页面
if (currPage.data?.saleuserId) {
setformData((e) => ({
...e,
sale_user_id: currPage.data?.saleuserId ? currPage.data?.saleuserId : userInfo?.user_id,
sale_user_name: currPage.data?.saleuserName ? currPage.data?.saleuserName : userInfo?.user_name,
}))
}
})
useEffect(() => {
getInfo()
}, [])
const { fetchData: getDesc } = mppurchaser()
const getInfo = async () => {
Taro.showLoading({
title: '请稍等...',
mask: true
})
const res = await getDesc({ id: router.params.id })
setinfoObj(res.data)
list.map(item => {
if (item.id == res.data.purchaser_type) {
item.check = true
} else {
item.check = false
}
return item
})
setlist([...list])
setformData({
sale_user_id: res.data?.sale_user_id,
sale_user_name: res.data?.sale_user_name,
name: res.data?.name,
short_name: res.data?.short_name,
director: res.data?.director,
phone: res.data?.phone,
addressName: res.data?.province_name + res.data?.city_name + res.data?.district_name,
address_detail: res.data?.address_detail,
purchaser_type: res.data?.purchaser_type,
// remark: res.data?.remark
})
Taro.hideLoading()
}
const handTitle = useCallback((e) => {
setformData((val) => ({ ...val, name: e }))
}, [])
const handName = useCallback((e) => {
setformData((val) => ({ ...val, short_name: e }))
}, [])
const handUsername = useCallback((e) => {
setformData((val) => ({ ...val, director: e }))
}, [])
const handUserPhone = useCallback((e) => {
setformData((val) => ({ ...val, phone: e }))
}, [])
const handAddress = useCallback((e) => {
setformData((val) => ({ ...val, address_detail: e }))
}, [])
//客户类型数组
const [list, setlist] = useState<any[]>([
{
id: 0,
name: '布行',
check: false
},
{
id: 1,
name: '二批',
check: false
},
{
id: 2,
name: '制衣厂',
check: false
},
])
//选择客户类型
const handItem = (item) => {
list.map(it => {
if (it.id === item.id) {
it.check = true
} else {
it.check = false
}
return it
})
setlist([...list])
setformData((val) => ({ ...val, purchaser_type: item.id }))
}
//备注操作
const [showDesc, setShowDesc] = useState(false)
const getRemark = useCallback(async (e) => {
setShowDesc(false)
setformData((val) => ({ ...val, remark: e }))
}, [])
//地址选择
const [showSiteModal, setShowSiteModal] = useState(false);
const handleSetSite = (ev) => {
var addressName: any = []
ev.forEach(v => {
addressName.push(v?.name)
})
if (ev.length === 3) {
setShowSiteModal(false)
setformData((val) => ({ ...val, addressName: ev[0]?.name + ev[1]?.name + ev[2]?.name || '', }))
}
}
const onClose = () => {
setShowSiteModal(false)
}
const isDisabled = useMemo(() => {
let empty: any = null;
if (typeof (formData) == 'undefined') return
console.log(formData, 12313)
for (const key in formData) {
if (formData.hasOwnProperty(key)) {
console.log('formData[key]=>', formData[key])
if (formData[key] !== '' && typeof (formData[key]) !== 'undefined') {
empty = false
} else {
empty = true;
break;
}
}
}
console.log(empty, 1111)
return empty;
}, [formData])
//重置
const handReset = () => {
setformData({
sale_user_id: '',
sale_user_name: '',
name: '',
short_name: '',
director: '',
phone: '',
addressName: '',
address_detail: '',
purchaser_type: '',
remark: '',
})
}
return (
<>
<View className={styles.mainBox}>
<Form
title={'客户全称'}
handBlur={handTitle}
placeholderFont={'请输入全称'}
inputValue={formData?.name}
></Form>
<Form
title={'客户简称'}
handBlur={handName}
placeholderFont={'请输入简称'}
inputValue={formData?.short_name}
></Form>
<Form
title={'客户类型'}
showInput={false}
>
<View className={styles.flexBox}>
{
list.map(item => {
return (
<View className={classnames(item.check ? styles.activeBox : styles.itemBox)} onClick={() => handItem(item)}>{item.name}</View>
)
})
}
</View>
</Form>
<Form
title={'联系人'}
handBlur={handUsername}
placeholderFont={'请输入联系人'}
inputValue={formData?.director}
></Form>
<Form
title={'联系电话'}
handBlur={handUserPhone}
inputType={'number'}
placeholderFont={'请输入号码'}
maxlength={11}
inputValue={formData?.phone}
></Form>
<Form
title={'省市区'}
isDisabled={true}
showMore={true}
inputValue={formData?.addressName}
placeholderFont={'请选择省市区'}
handNav={() => setShowSiteModal(true)}
></Form>
<Form
title={'详细地址'}
handBlur={handAddress}
placeholderFont={'请输入地址'}
inputValue={formData?.address_detail}
></Form>
<Form
title={'业务员'}
isDisabled={true}
showMore={true}
placeholderFont={'请选择业务员'}
handNav={() => goLink('/pages/saleuserPage/index')}
showBorder={false}
inputValue={formData?.sale_user_name}
></Form>
</View>
<DefaultBox title={'备注信息'} showMode={true} modeName={`${'填写/修改备注'} >`} clickNode={() => setShowDesc(true)}>
<View className={styles.remarkFont}>{infoObj?.remark === '' ? '尚未备注信息' : infoObj?.remark}</View>
</DefaultBox>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
<Remark onSave={(e) => getRemark(e)} defaultValue={infoObj?.remark} showInput={showDesc ? true : false} />
</Popup>
<Address addressOnChange={(val) => handleSetSite(val)} defaultValue={[infoObj?.province_id, infoObj?.city_id, infoObj?.district_id]} addressOnClose={() => onClose()} show={showSiteModal} />
<View className={styles.safeBox}></View>
<View className={styles.bottomBox}>
<Button className={styles.resetBox} onClick={() => { handReset() }}> 重置</Button >
<Button className={classnames(isDisabled ? styles.button2 : styles.activeButton)} disabled={isDisabled} onClick={() => handSure()}> 确认</Button >
</View>
</>
)
}
//卡片盒子元素
interface Obs {
title?: string,
modeName?: string,
showMode?: boolean,
children?: ReactNode,
clickNode?: () => void
}
const DefaultBox = memo((props: Obs) => {
const {
title = '标题',
modeName = '大货',
showMode = false,
children,
clickNode
} = props
return (
<View className={styles.defaltBox}>
<View className={styles.titleBox}>
<View className={styles.title}>{title}</View>
{
showMode && <View className={styles.modeName} onClick={() => clickNode?.()}>{modeName}</View>
}
</View>
<View className={styles.modeLine}></View>
{children}
</View>
)
})

30
src/pages/customerManagement/components/ChoseCity/index.module.scss Normal file
View File

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

147
src/pages/customerManagement/components/ChoseCity/index.tsx Normal file
View File

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

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

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

32
src/pages/customerManagement/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 >
)
})

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

@ -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
src/pages/customerManagement/index.tsx
View File

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