From 9764f9f1bcf3e33eb32f74b5caf318f785c7ac03 Mon Sep 17 00:00:00 2001 From: Haiyi <1021441632@qq.com> Date: Mon, 24 Oct 2022 19:10:14 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=E5=AE=A2=E6=88=B7=E7=AE=A1?= =?UTF-8?q?=E7=90=8650%?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- project.private.config.json | 7 - src/api/customer.ts | 9 + src/app.config.ts | 4 + .../components/tagPopup/index.module.scss | 126 +++++++ .../components/tagPopup/index.tsx | 87 ++++- src/pages/customerDetails/index.tsx | 5 +- .../components/Form/index.module.scss | 83 +++++ .../customerEditor/components/Form/index.tsx | 76 +++++ src/pages/customerEditor/index.config.ts | 3 + src/pages/customerEditor/index.module.scss | 148 +++++++++ src/pages/customerEditor/index.tsx | 312 ++++++++++++++++++ .../components/ChoseCity/index.module.scss | 30 ++ .../components/ChoseCity/index.tsx | 147 +++++++++ .../components/tabs/index.module.scss | 42 +++ .../components/tabs/index.tsx | 32 ++ .../customerManagement/index.module.scss | 2 +- src/pages/customerManagement/index.tsx | 10 +- 17 files changed, 1109 insertions(+), 14 deletions(-) create mode 100644 src/api/customer.ts create mode 100644 src/pages/customerEditor/components/Form/index.module.scss create mode 100644 src/pages/customerEditor/components/Form/index.tsx create mode 100644 src/pages/customerEditor/index.config.ts create mode 100644 src/pages/customerEditor/index.module.scss create mode 100644 src/pages/customerEditor/index.tsx create mode 100644 src/pages/customerManagement/components/ChoseCity/index.module.scss create mode 100644 src/pages/customerManagement/components/ChoseCity/index.tsx create mode 100644 src/pages/customerManagement/components/tabs/index.module.scss create mode 100644 src/pages/customerManagement/components/tabs/index.tsx diff --git a/project.private.config.json b/project.private.config.json index 9c59ea7..158d507 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -183,13 +183,6 @@ "query": "", "launchMode": "default", "scene": null - }, - { - "name": "", - "pathName": "pages/customerDetails/index", - "query": "id=642", - "launchMode": "default", - "scene": null } ] } diff --git a/src/api/customer.ts b/src/api/customer.ts new file mode 100644 index 0000000..2c4b661 --- /dev/null +++ b/src/api/customer.ts @@ -0,0 +1,9 @@ +import { useRequest } from '@/use/useHttp' + +//获取客户信息 +export const mppurchaser = () => { + return useRequest({ + url: `/v1/mp/purchaser`, + method: "get", + }) +} \ No newline at end of file diff --git a/src/app.config.ts b/src/app.config.ts index fbf73f8..d9ac501 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -132,5 +132,9 @@ export default defineAppConfig({ root: 'pages/customerDetails', pages: ['index'], }, + { + root: 'pages/customerEditor', + pages: ['index'], + }, ], }) diff --git a/src/pages/customerDetails/components/tagPopup/index.module.scss b/src/pages/customerDetails/components/tagPopup/index.module.scss index e69de29..991e675 100644 --- a/src/pages/customerDetails/components/tagPopup/index.module.scss +++ b/src/pages/customerDetails/components/tagPopup/index.module.scss @@ -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; +} \ No newline at end of file diff --git a/src/pages/customerDetails/components/tagPopup/index.tsx b/src/pages/customerDetails/components/tagPopup/index.tsx index c43a384..19b9c57 100644 --- a/src/pages/customerDetails/components/tagPopup/index.tsx +++ b/src/pages/customerDetails/components/tagPopup/index.tsx @@ -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([{ 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 ( - { props.handClose() }}> + { props.handClose() }}> + + + 自定义标签分组 + + {modeList.map((item, index) => { + return ( + { + handCheckMode(item) + }} + className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} + key={index}> + {item.name} + + ) + })} + + + + + + + + ) }) \ No newline at end of file diff --git a/src/pages/customerDetails/index.tsx b/src/pages/customerDetails/index.tsx index 259f7a9..a21b6d2 100644 --- a/src/pages/customerDetails/index.tsx +++ b/src/pages/customerDetails/index.tsx @@ -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(1) //顶部栏 @@ -53,7 +56,7 @@ export default () => { - {'编辑 >'} + goLink('/pages/customerEditor/index?id=' + router.params.purchaser_id)}>{'编辑 >'} handChose?.(item)}> diff --git a/src/pages/customerEditor/components/Form/index.module.scss b/src/pages/customerEditor/components/Form/index.module.scss new file mode 100644 index 0000000..bbfb183 --- /dev/null +++ b/src/pages/customerEditor/components/Form/index.module.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/src/pages/customerEditor/components/Form/index.tsx b/src/pages/customerEditor/components/Form/index.tsx new file mode 100644 index 0000000..86f2a40 --- /dev/null +++ b/src/pages/customerEditor/components/Form/index.tsx @@ -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 ( + + {title} + { + isQuire && * + } + + { + !children && handNav?.()}> + { + showInput && handBlur?.(e.detail.value)} + value={inputValue} + > + } + { + showMore && + } + + } + {children} + + ) + +}) \ No newline at end of file diff --git a/src/pages/customerEditor/index.config.ts b/src/pages/customerEditor/index.config.ts new file mode 100644 index 0000000..4e00470 --- /dev/null +++ b/src/pages/customerEditor/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: '客户编辑', +} diff --git a/src/pages/customerEditor/index.module.scss b/src/pages/customerEditor/index.module.scss new file mode 100644 index 0000000..cddd5ba --- /dev/null +++ b/src/pages/customerEditor/index.module.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/pages/customerEditor/index.tsx b/src/pages/customerEditor/index.tsx new file mode 100644 index 0000000..6fbf159 --- /dev/null +++ b/src/pages/customerEditor/index.tsx @@ -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() + + const [formData, setformData] = useState() + + //默认业务员 + 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([ + { + 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 ( + <> + + +
+
+
+ + { + list.map(item => { + return ( + handItem(item)}>{item.name} + ) + }) + } + +
+
+
+
setShowSiteModal(true)} + >
+
+
goLink('/pages/saleuserPage/index')} + showBorder={false} + inputValue={formData?.sale_user_name} + >
+ + `} clickNode={() => setShowDesc(true)}> + {infoObj?.remark === '' ? '尚未备注信息' : infoObj?.remark} + + setShowDesc(false)}> + getRemark(e)} defaultValue={infoObj?.remark} showInput={showDesc ? true : false} /> + +
handleSetSite(val)} defaultValue={[infoObj?.province_id, infoObj?.city_id, infoObj?.district_id]} addressOnClose={() => onClose()} show={showSiteModal} /> + + + + + + + ) +} + + + +//卡片盒子元素 +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 ( + + + {title} + { + showMode && clickNode?.()}>{modeName} + } + + + {children} + + ) +}) \ No newline at end of file diff --git a/src/pages/customerManagement/components/ChoseCity/index.module.scss b/src/pages/customerManagement/components/ChoseCity/index.module.scss new file mode 100644 index 0000000..0a429fd --- /dev/null +++ b/src/pages/customerManagement/components/ChoseCity/index.module.scss @@ -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; + } + + } + } +} \ No newline at end of file diff --git a/src/pages/customerManagement/components/ChoseCity/index.tsx b/src/pages/customerManagement/components/ChoseCity/index.tsx new file mode 100644 index 0000000..6286242 --- /dev/null +++ b/src/pages/customerManagement/components/ChoseCity/index.tsx @@ -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() + // 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([]) + //区数组 + const [cityList, setcityList] = useState([]) + + //区分在哪一栏 + const [currentValue, setCurrentValue] = useState(1) + + //顶部栏 + const [TarBarList, setTarBarList] = useState([{ 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 ( + + + handChose?.(item)}> + { + currentValue == 1 && + { + list.map(item => { + return ( + handProvince(item)}> + {item.name} + + + ) + }) + } + + } + { + currentValue == 2 && + { + cityList.map(item => { + return ( + handCity(item)}> + {item.name} + {/* */} + + ) + }) + } + + } + + + ) +}) \ No newline at end of file diff --git a/src/pages/customerManagement/components/tabs/index.module.scss b/src/pages/customerManagement/components/tabs/index.module.scss new file mode 100644 index 0000000..939516b --- /dev/null +++ b/src/pages/customerManagement/components/tabs/index.module.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/src/pages/customerManagement/components/tabs/index.tsx b/src/pages/customerManagement/components/tabs/index.tsx new file mode 100644 index 0000000..6ed5f40 --- /dev/null +++ b/src/pages/customerManagement/components/tabs/index.tsx @@ -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 ( + + { + list.map((item, index) => { + return ( + handChose?.(item)}> + {item?.name} + { + item.showBorder && + } + + ) + }) + } + + ) +}) \ No newline at end of file diff --git a/src/pages/customerManagement/index.module.scss b/src/pages/customerManagement/index.module.scss index 8271758..56cbb70 100644 --- a/src/pages/customerManagement/index.module.scss +++ b/src/pages/customerManagement/index.module.scss @@ -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; } diff --git a/src/pages/customerManagement/index.tsx b/src/pages/customerManagement/index.tsx index dc9b224..f62c2dc 100644 --- a/src/pages/customerManagement/index.tsx +++ b/src/pages/customerManagement/index.tsx @@ -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 ( - + - +