From 9e4a6e6bcda08d82ef2ec37a73e5920fc3a801ce Mon Sep 17 00:00:00 2001 From: xuan Date: Mon, 12 Dec 2022 18:09:21 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=88=20style(ID1000939):=20=E3=80=90?= =?UTF-8?q?=E8=9C=98=E8=9B=9B=E7=AE=A1=E5=AE=B6=E3=80=91=E5=AE=A2=E6=88=B7?= =?UTF-8?q?=E5=88=97=E8=A1=A8-=20UI=E8=BF=98=E5=8E=9F=E4=B8=8D=E8=B6=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 【【蜘蛛管家】客户列表- UI还原不足】 https://www.tapd.cn/53459131/bugtrace/bugs/view/1153459131001000939 --- project.private.config.json | 14 ++ src/components/AddressList/index.scss | 29 +-- src/components/AddressList/index.tsx | 41 ++-- .../components/tagPopup/index.module.scss | 36 +-- .../components/tagPopup/index.tsx | 23 +- src/pages/customerDetails/index.module.scss | 228 +++++++++--------- src/pages/customerDetails/index.tsx | 16 +- .../components/ItemList/index.module.scss | 10 +- .../components/ItemList/index.tsx | 15 +- .../components/Sort/index.module.scss | 15 +- .../components/Sort/index.tsx | 2 +- .../components/Tag/index.module.scss | 14 +- .../components/Tag/index.tsx | 6 +- src/pages/customerManagement/index.tsx | 8 +- 14 files changed, 218 insertions(+), 239 deletions(-) diff --git a/project.private.config.json b/project.private.config.json index 906b9cd..293706a 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -260,6 +260,20 @@ "query": "", "launchMode": "default", "scene": null + }, + { + "name": "客户列表", + "pathName": "pages/customerManagement/index", + "query": "", + "launchMode": "default", + "scene": null + }, + { + "name": "客户详情", + "pathName": "pages/customerDetails/index", + "query": "purchaser_id=1705", + "launchMode": "default", + "scene": null } ] } diff --git a/src/components/AddressList/index.scss b/src/components/AddressList/index.scss index 6ed9309..6b614c1 100644 --- a/src/components/AddressList/index.scss +++ b/src/components/AddressList/index.scss @@ -1,3 +1,9 @@ +.address-container { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; +} .address-scroll-view { height: 100%; box-sizing: border-box; @@ -13,22 +19,15 @@ } .address-list { - width: 704px; - padding-bottom: 24px; - // height: 156px; background: #ffffff; border-radius: 20px; - // box-shadow: 2px 4px 12px 0px rgba(0, 0, 0, 0.16); - padding: 30px; + padding: 24px 30px; box-sizing: border-box; - margin: 18px auto 0; - // border: 1px solid #ffffff; - // border: 1px solid rgba(0, 0, 0, 0.16); + margin: 18px 24px 0; } .address-active { border: 1px solid #68b4ff; - // box-shadow: 0px 0px 10px 0px rgba(0, 122, 255, 0.27); } .address-list:first-child { @@ -41,7 +40,6 @@ .address-user { font-size: 32px; - font-family: Microsoft YaHei, Microsoft YaHei-Bold; font-weight: 700; text-align: left; color: #000000; @@ -50,16 +48,13 @@ } .address-list-default { - width: 58px; - height: 28px; - background: #cde5ff; + background: #ffffff; border-radius: 6px; font-size: 20px; font-weight: 400; text-align: center; color: #007aff; - margin-left: 30px; - + padding: 4px 10px; } .address-list-phone { @@ -96,7 +91,7 @@ .address-list-bottom { display: flex; justify-content: space-between; - margin-top: 18px; + margin-top: 10px; } .add-address { @@ -140,4 +135,4 @@ font-weight: 400; color: #676767; } -} \ No newline at end of file +} diff --git a/src/components/AddressList/index.tsx b/src/components/AddressList/index.tsx index b587cf0..e988de5 100644 --- a/src/components/AddressList/index.tsx +++ b/src/components/AddressList/index.tsx @@ -2,6 +2,7 @@ import Taro, { showModal, useDidShow, useRouter } from '@tarojs/taro' import { Button, Navigator, ScrollView, Text, View } from '@tarojs/components' import { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react' import './index.scss' +import Tag from '../tag' import { MpPurchaserAddressList } from '@/api/addressList' import { alert } from '@/common/common' import IconFont from '@/components/iconfont/iconfont' @@ -126,26 +127,30 @@ const AddressList = (props: Params, AddressListRef) => { // data.map((item,index)=>{ return ( handleSelect(item, index)} className={`address-list ${focusId == item.id && 'address-active'}`}> - - {item.name} - {item.phone} - { - item.is_default && 默认 - } - - - - {item.province_name + item.city_name + item.district_name + item.address_detail} - {/* {item.address_detail} */} + + + + {item.name} + {item.phone} + { + item.is_default + && + 默认 + + } + + + + {item.province_name + item.city_name + item.district_name + item.address_detail} + + - {/* { - item.is_default && {item.phone.replace(item.phone.substring(3, 7), "****")} - } */} - e.stopPropagation()} url={`/pages/addAddress/index?type=edit&id=${item.id}&&purchaser_id=${Number(props.purchaser_id)}`} hoverClass="none" className="address-edit"> - {/* */} - - + + e.stopPropagation()} url={`/pages/addAddress/index?type=edit&id=${item.id}&&purchaser_id=${Number(props.purchaser_id)}`} hoverClass="none" className="address-edit"> + + + { item.factory !== '' && <> diff --git a/src/pages/customerDetails/components/tagPopup/index.module.scss b/src/pages/customerDetails/components/tagPopup/index.module.scss index b204ae0..63767ca 100644 --- a/src/pages/customerDetails/components/tagPopup/index.module.scss +++ b/src/pages/customerDetails/components/tagPopup/index.module.scss @@ -1,12 +1,10 @@ .scrollView { - height: 400px; - + max-height: 75vh; .thirdBox { padding-left: 48px; .thirdTopfont { font-size: 28px; - font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #000000; } @@ -18,20 +16,9 @@ flex-shrink: 0; .activemodeBox { - padding: 10px 20px; - min-width: 200px; - margin-bottom: 10px; - margin-right: 16px; - // padding: 17px 48px 17px 48px; - background: rgba(51, 127, 255, 0.1); - border-radius: 8px; - font-size: 28px; - font-weight: 400; - color: #337fff; - text-align: center; - line-height: 68px; - border: 1px solid #337fff; - box-sizing: border-box; + background: rgba(51, 127, 255, 0.1) !important; + color: #337fff !important; + border: 1px solid #337fff !important; } .modeBox { @@ -46,7 +33,6 @@ color: #777777; border: 1px solid #f6f6f6; text-align: center; - line-height: 68px; box-sizing: border-box; } } @@ -73,7 +59,6 @@ border-radius: 44px; border: 1px solid #087eff; font-size: 28px; - font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #337fff; text-align: center; @@ -87,8 +72,7 @@ height: 80px; background: #68b4ff; border-radius: 44px; - font-size: 32px; - font-family: PingFangSC-Medium, PingFang SC; + font-size: 28px; font-weight: 500; color: #ffffff; text-align: center; @@ -97,18 +81,8 @@ } .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; } } diff --git a/src/pages/customerDetails/components/tagPopup/index.tsx b/src/pages/customerDetails/components/tagPopup/index.tsx index c9f70f7..92ebf10 100644 --- a/src/pages/customerDetails/components/tagPopup/index.tsx +++ b/src/pages/customerDetails/components/tagPopup/index.tsx @@ -8,6 +8,7 @@ import { formatDateTime, formatPriceDiv, formatWeightDiv } from '@/common/format import IconFont from '@/components/iconfont/iconfont' import Popup from '@/components/popup' import { MpPurchaserLabelAdd, MpPurchaserList } from '@/api/customer' +import NormalButton from '@/components/normalButton' interface Props { showPopup: boolean @@ -111,7 +112,7 @@ const TagPopup = (props: Props, ref) => { onClick={() => { handCheckMode(item) }} - className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} + className={classnames(styles.modeBox, item.checked && styles.activemodeBox)} key={index} > {item.name} @@ -122,24 +123,8 @@ const TagPopup = (props: Props, ref) => { - - + 重置 + 保存({choseNums}) ) diff --git a/src/pages/customerDetails/index.module.scss b/src/pages/customerDetails/index.module.scss index 1f6d56f..49200f9 100644 --- a/src/pages/customerDetails/index.module.scss +++ b/src/pages/customerDetails/index.module.scss @@ -1,125 +1,125 @@ .mainTop { - padding-top: 24px; - background: #fff; - overflow: hidden; + padding-top: 24px; + background: #fff; + overflow: hidden; - .mainUser { - padding-top: 36px; - margin-left: 24px; - margin-right: 24px; - display: flex; - position: relative; - background: #F6F7FB; - border-radius: 16px; - padding-bottom: 20px; + .mainUser { + padding-top: 36px; + margin-left: 24px; + margin-right: 24px; + display: flex; + position: relative; + background: #f6f7fb; + border-radius: 16px; + padding-bottom: 20px; - // margin-bottom: 16px; - .leftSafe { - width: 142px; - - .itemCile { - width: 78px; - height: 78px; - background: linear-gradient(337deg, #7BB7FF 0%, #4581FF 100%); - font-size: 32px; - font-weight: 500; - color: #FFFFFF; - text-align: center; - line-height: 78px; - border-radius: 50%; - margin-right: 32px; - margin-left: 32px; - } - } - - - .item_top_one { - .item_top_one_flex { - display: flex; - align-items: center; - - .itemName { - font-size: 28px; - font-weight: 500; - color: #000000; - margin-right: 24px; - } - - .itemPhone { - font-size: 28px; - font-family: PingFangSC-Regular, PingFang SC; - font-weight: 400; - color: #646466; - } - } - - .item_tag_box { - margin-top: 16px; - display: flex; - align-items: center; - flex-wrap: wrap; - - .item_tagItem { - margin-bottom: 5px; - margin-right: 16px; - padding: 6px 16px 6px 16px; - font-size: 24px; - font-weight: 500; - color: #4581FF; - background: #ecf2ff; - border-radius: 8px; - } - - .item_tagAdd { - color: #4581FF; - background: #ecf2ff; - width: 114px; - height: 45px; - border-radius: 8px; - display: flex; - align-items: center; - - justify-content: space-between; - - .item_add { - margin-left: 20px; - line-height: 45px; - // font-size: 40px; - // margin-left: 8px; - } - - .item_add_font { - font-size: 24px; - font-weight: 500; - color: #4581FF; - margin-right: 15px; - } - } - } - } - - .pos { - position: absolute; - top: 35px; - right: 24px; - font-size: 28px; - font-weight: 400; - color: #337FFF; - } + // margin-bottom: 16px; + .leftSafe { + width: 142px; + display: flex; + align-items: center; + justify-content: center; + .itemCile { + width: 78px; + height: 78px; + background: linear-gradient(337deg, #7bb7ff 0%, #4581ff 100%); + font-size: 32px; + font-weight: 500; + color: #ffffff; + text-align: center; + line-height: 78px; + border-radius: 50%; + margin-right: 32px; + margin-left: 32px; + } } + .item_top_one { + .item_top_one_flex { + display: flex; + align-items: center; + + .itemName { + font-size: 28px; + font-weight: 500; + color: #000000; + margin-right: 24px; + } + + .itemPhone { + font-size: 28px; + font-weight: 400; + color: #646466; + } + } + + .item_tag_box { + margin-top: 16px; + display: flex; + align-items: center; + flex-wrap: wrap; + + .item_tagItem { + margin-bottom: 5px; + margin-right: 16px; + padding: 4px 10px 4px 10px; + font-size: 24px; + font-weight: 500; + color: #4581ff; + background: #e3eafb; + border-radius: 8px; + border: none; + } + + .item_tagAdd { + color: #4581ff; + background: #ecf2ff; + width: 114px; + height: 45px; + border-radius: 8px; + display: flex; + align-items: center; + + justify-content: space-between; + + .item_add { + margin-left: 20px; + line-height: 45px; + // font-size: 40px; + // margin-left: 8px; + } + + .item_add_font { + font-size: 24px; + font-weight: 500; + color: #4581ff; + margin-right: 15px; + } + } + } + } + + .pos { + position: absolute; + top: 35px; + right: 24px; + font-size: 28px; + font-weight: 400; + color: #337fff; + } + } } .formBox { - margin-top: 24px; - margin-left: 24px; - margin-right: 24px; - background: #FFFFFF; - border-radius: 16px; - padding: 40px 32px 40px 32px; + margin-top: 24px; + margin-left: 24px; + margin-right: 24px; + background: #ffffff; + border-radius: 16px; + padding: 40px 32px 40px 32px; } .order_list { - height: calc(100vh - 250px); - margin-top: 24px; -} \ No newline at end of file + height: calc(100vh - 250px); + margin-top: 24px; +} diff --git a/src/pages/customerDetails/index.tsx b/src/pages/customerDetails/index.tsx index 27ccf5b..f486271 100644 --- a/src/pages/customerDetails/index.tsx +++ b/src/pages/customerDetails/index.tsx @@ -12,6 +12,7 @@ import { alert, goLink } from '@/common/common' import { formatDateTime, formatPriceDiv, formatWeightDiv } from '@/common/format' import AddressList from '@/components/AddressList' import { MpPurchaser } from '@/api/customer' +import Tag from '@/components/tag' const CustomerDetails = () => { const router = useRouter() @@ -85,12 +86,21 @@ const CustomerDetails = () => { {infoObj?.phone} - {infoObj?.purchaser_type_name || '暂无'} - {infoObj?.sale_user_name || '暂无'} + + {infoObj?.purchaser_type_name || '暂无'} + + + {infoObj?.sale_user_name || '暂无'} + + {/* {infoObj?.purchaser_type_name || '暂无'} + {infoObj?.sale_user_name || '暂无'} */} { infoObj?.label_list?.map((item, key) => { return ( - {item.label_name} + + {item.label_name} + + // {item.label_name} ) }) } diff --git a/src/pages/customerManagement/components/ItemList/index.module.scss b/src/pages/customerManagement/components/ItemList/index.module.scss index 8652350..5989157 100644 --- a/src/pages/customerManagement/components/ItemList/index.module.scss +++ b/src/pages/customerManagement/components/ItemList/index.module.scss @@ -36,14 +36,13 @@ .itemName { font-size: 28px; - font-weight: 500; + font-weight: 550; color: #000000; margin-right: 24px; } .itemPhone { font-size: 28px; - font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #6e6e6e; } @@ -58,12 +57,13 @@ .item_tagItem { margin-bottom: 5px; margin-right: 16px; - padding: 6px 16px 6px 16px; + padding: 4px 10px 4px 10px; font-size: 24px; font-weight: 500; color: #4581ff; background: #ecf2ff; border-radius: 8px; + border: none; } } } @@ -104,12 +104,16 @@ color: #000000; .flex_left { + width: 50%; color: #999999; font-weight: 400; font-size: 24px; + @include common_ellipsis(); } .flex_right { + width: 50%; + text-align: left; color: #999999; font-weight: 400; font-size: 24px; diff --git a/src/pages/customerManagement/components/ItemList/index.tsx b/src/pages/customerManagement/components/ItemList/index.tsx index 2f3b3ae..0b8e387 100644 --- a/src/pages/customerManagement/components/ItemList/index.tsx +++ b/src/pages/customerManagement/components/ItemList/index.tsx @@ -6,6 +6,7 @@ import styles from './index.module.scss' import { alert } from '@/common/common' import { formatDateTime, formatPriceDiv, formatWeightDiv } from '@/common/format' import IconFont from '@/components/iconfont/iconfont' +import Tag from '@/components/tag' interface Props { obj: any @@ -68,12 +69,18 @@ const ItemList = (props: Props) => { {props.obj.phone} - {props.obj.purchaser_type_name || '暂无'} - {props.obj.sale_user_name || '暂无'} + + {props.obj.purchaser_type_name || '暂无'} + + + {props.obj.sale_user_name || '暂无'} + { props.obj?.label_list?.map((item, key) => { return ( - {item.label_name} + + {item.label_name} + ) }) } @@ -89,7 +96,7 @@ const ItemList = (props: Props) => { {props.obj.default_address.province_name + props.obj.default_address.city_name + props.obj.default_address.district_name || '暂无'} - {timeFont}：{formatDateTime(time) || '暂无'} + {timeFont}：{formatDateTime(time, 'YYYY-MM-DD HH:mm') || '暂无'} ) diff --git a/src/pages/customerManagement/components/Sort/index.module.scss b/src/pages/customerManagement/components/Sort/index.module.scss index 365c0c4..8d10c1f 100644 --- a/src/pages/customerManagement/components/Sort/index.module.scss +++ b/src/pages/customerManagement/components/Sort/index.module.scss @@ -4,28 +4,21 @@ padding-left: 40px; .itemFlex { - padding: 23px 18px 23px 18px; + padding: 20px 18px 20px 18px; background: #f6f6f6; - // box-sizing: border-box; border: 1px solid #f6f6f6; font-size: 28px; font-weight: 400; - color: #777777; + color: #9a9a9a; margin-right: 24px; margin-bottom: 24px; border-radius: 16px; } - .itemactiveFlex { - padding: 23px 18px 23px 18px; + .active { background: rgba(51, 127, 255, 0.1); - border-radius: 16px; border: 1px solid #337fff; - // box-sizing: border-box; - font-size: 28px; - font-weight: 400; color: #337fff; - margin-right: 24px; - margin-bottom: 24px; + font-weight: 550; } } diff --git a/src/pages/customerManagement/components/Sort/index.tsx b/src/pages/customerManagement/components/Sort/index.tsx index 05dad1d..7d9262f 100644 --- a/src/pages/customerManagement/components/Sort/index.tsx +++ b/src/pages/customerManagement/components/Sort/index.tsx @@ -97,7 +97,7 @@ const Sort = (props: Props, ref) => { { list.map((item, index) => { return ( - handItem?.(item)}>{item.name} + handItem?.(item)}>{item.name} ) }) } diff --git a/src/pages/customerManagement/components/Tag/index.module.scss b/src/pages/customerManagement/components/Tag/index.module.scss index 893d575..872f9e8 100644 --- a/src/pages/customerManagement/components/Tag/index.module.scss +++ b/src/pages/customerManagement/components/Tag/index.module.scss @@ -15,9 +15,8 @@ .itemFlex { min-width: 80px; - padding: 23px 60px 23px 60px; + padding: 20px 60px 20px 60px; background: #f6f6f6; - // box-sizing: border-box; border: 1px solid #f6f6f6; font-size: 28px; font-weight: 400; @@ -28,18 +27,11 @@ text-align: center; } - .itemactiveFlex { - min-width: 80px; - padding: 23px 60px 23px 60px; + .active { background: rgba(51, 127, 255, 0.1); - border-radius: 16px; border: 1px solid #337fff; - // box-sizing: border-box; - font-size: 28px; - font-weight: 400; + font-weight: 550; color: #337fff; - margin-right: 24px; - margin-bottom: 24px; } } } diff --git a/src/pages/customerManagement/components/Tag/index.tsx b/src/pages/customerManagement/components/Tag/index.tsx index 04f6f27..611bf3b 100644 --- a/src/pages/customerManagement/components/Tag/index.tsx +++ b/src/pages/customerManagement/components/Tag/index.tsx @@ -92,17 +92,17 @@ const Tag = (props: Props, ref) => { 客户类型 - + { list.map((item, index) => { return ( - handItem?.(item)}>{item.name} + handItem?.(item)}>{item.name} ) }) } 自定义标签 - + { taglist.map((item, index) => { return ( diff --git a/src/pages/customerManagement/index.tsx b/src/pages/customerManagement/index.tsx index 3684a76..0ac8e7c 100644 --- a/src/pages/customerManagement/index.tsx +++ b/src/pages/customerManagement/index.tsx @@ -6,7 +6,7 @@ import styles from './index.module.scss' import Tag from './components/Tag' import Sort from './components/Sort' import ChoseCity from './components/ChoseCity' -import ItemLiist from './components/ItemList' +import ItemList from './components/ItemList' import Popup from '@/components/popup' import { dataLoadingStatus, debounce, getFilterData } from '@/common/util' import { alert, goLink } from '@/common/common' @@ -70,7 +70,7 @@ const CustomerManagement = () => { setOrderData(() => ({ list: [], total: 0 })) setSearchField(val => ({ ...val, name_phone_or_sale_user: e, size: 10 })) }, []) - const getScrolltolower = useCallback(() => { + const getScrollToLower = useCallback(() => { if (orderData.list.length < orderData.total) { pageNum.current.page++ const size = pageNum.current.size * pageNum.current.page @@ -151,14 +151,14 @@ const CustomerManagement = () => { {orderData?.list?.map((item, index) => { return ( - + ) })}