✨ feat:客户管理50%
This commit is contained in:
Haiyi
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
})
|
||||
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '客户编辑',
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
})
|
||||
Reference in New Issue
Block a user