✨ feat:客户管理50%
This commit is contained in:
Haiyi
parent
18df424f70
commit
9764f9f1bc
@ -183,13 +183,6 @@
|
|||||||
"query": "",
|
"query": "",
|
||||||
"launchMode": "default",
|
"launchMode": "default",
|
||||||
"scene": null
|
"scene": null
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "",
|
|
||||||
"pathName": "pages/customerDetails/index",
|
|
||||||
"query": "id=642",
|
|
||||||
"launchMode": "default",
|
|
||||||
"scene": null
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
9
src/api/customer.ts
Normal file
9
src/api/customer.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { useRequest } from '@/use/useHttp'
|
||||||
|
|
||||||
|
//获取客户信息
|
||||||
|
export const mppurchaser = () => {
|
||||||
|
return useRequest({
|
||||||
|
url: `/v1/mp/purchaser`,
|
||||||
|
method: "get",
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -132,5 +132,9 @@ export default defineAppConfig({
|
|||||||
root: 'pages/customerDetails',
|
root: 'pages/customerDetails',
|
||||||
pages: ['index'],
|
pages: ['index'],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
root: 'pages/customerEditor',
|
||||||
|
pages: ['index'],
|
||||||
|
},
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|||||||
@ -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;
|
||||||
|
}
|
||||||
@ -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 React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
|
||||||
import styles from "./index.module.scss"
|
import styles from "./index.module.scss"
|
||||||
import classnames from "classnames";
|
import classnames from "classnames";
|
||||||
@ -7,13 +7,94 @@ import { alert } from '@/common/common'
|
|||||||
import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
|
import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
|
||||||
import IconFont from '@/components/iconfont/iconfont'
|
import IconFont from '@/components/iconfont/iconfont'
|
||||||
import Popup from '@/components/popup';
|
import Popup from '@/components/popup';
|
||||||
|
import { goLink } from '@/common/common'
|
||||||
interface Props {
|
interface Props {
|
||||||
showPopup: boolean,
|
showPopup: boolean,
|
||||||
handClose: () => void,
|
handClose: () => void,
|
||||||
|
purchaser_id?: string | number
|
||||||
|
|
||||||
}
|
}
|
||||||
export default memo((props: Props) => {
|
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 (
|
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>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
@ -12,8 +12,11 @@ import Tabs from "./components/tabs"
|
|||||||
import Form from "./components/form"
|
import Form from "./components/form"
|
||||||
import AddressList from "@/components/AddressList"
|
import AddressList from "@/components/AddressList"
|
||||||
import TagPopup from './components/tagPopup';
|
import TagPopup from './components/tagPopup';
|
||||||
|
import { goLink } from '@/common/common'
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
const [status, setstatus] = useState<number>(1)
|
const [status, setstatus] = useState<number>(1)
|
||||||
|
|
||||||
//顶部栏
|
//顶部栏
|
||||||
@ -53,7 +56,7 @@ export default () => {
|
|||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<View className={styles.pos}>{'编辑 >'}</View>
|
<View className={styles.pos} onClick={() => goLink('/pages/customerEditor/index?id=' + router.params.purchaser_id)}>{'编辑 >'}</View>
|
||||||
</View>
|
</View>
|
||||||
<Tabs list={TarBarList} handChose={(item) => handChose?.(item)}></Tabs>
|
<Tabs list={TarBarList} handChose={(item) => handChose?.(item)}></Tabs>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
83
src/pages/customerEditor/components/Form/index.module.scss
Normal file
83
src/pages/customerEditor/components/Form/index.module.scss
Normal 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
76
src/pages/customerEditor/components/Form/index.tsx
Normal 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
3
src/pages/customerEditor/index.config.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export default {
|
||||||
|
navigationBarTitleText: '客户编辑',
|
||||||
|
}
|
||||||
148
src/pages/customerEditor/index.module.scss
Normal file
148
src/pages/customerEditor/index.module.scss
Normal 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
312
src/pages/customerEditor/index.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
})
|
||||||
@ -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
147
src/pages/customerManagement/components/ChoseCity/index.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
})
|
||||||
@ -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
32
src/pages/customerManagement/components/tabs/index.tsx
Normal 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 >
|
||||||
|
)
|
||||||
|
})
|
||||||
@ -36,7 +36,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.order_list {
|
.order_list {
|
||||||
// height: calc(100vh - env(safe-area-inset-bottom) - 230px);
|
height: calc(100vh - env(safe-area-inset-bottom) - 160px);
|
||||||
background: #f7f7f7;
|
background: #f7f7f7;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -10,6 +10,7 @@ import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format
|
|||||||
import { dataLoadingStatus, getFilterData } from '@/common/util'
|
import { dataLoadingStatus, getFilterData } from '@/common/util'
|
||||||
import Tag from './components/Tag';
|
import Tag from './components/Tag';
|
||||||
import Sort from './components/Sort';
|
import Sort from './components/Sort';
|
||||||
|
import ChoseCity from './components/ChoseCity';
|
||||||
import Search from '@/components/search'
|
import Search from '@/components/search'
|
||||||
import ItemLiist from "./components/ItemList"
|
import ItemLiist from "./components/ItemList"
|
||||||
import InfiniteScroll from '@/components/infiniteScroll'
|
import InfiniteScroll from '@/components/infiniteScroll'
|
||||||
@ -74,6 +75,11 @@ export default () => {
|
|||||||
console.log(val, 456456)
|
console.log(val, 456456)
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
//筛选城市
|
||||||
|
const handCity = useCallback((val) => {
|
||||||
|
console.log(val, 899999)
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className={styles.mainBox}>
|
<View className={styles.mainBox}>
|
||||||
<View className={styles.topBox}>
|
<View className={styles.topBox}>
|
||||||
@ -82,7 +88,7 @@ export default () => {
|
|||||||
</View>
|
</View>
|
||||||
<View className={styles.menuBox}>
|
<View className={styles.menuBox}>
|
||||||
<Sort handSort={handSort}></Sort>
|
<Sort handSort={handSort}></Sort>
|
||||||
<Tag></Tag>
|
<ChoseCity handCity={handCity}></ChoseCity>
|
||||||
<Tag></Tag>
|
<Tag></Tag>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user