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

🌈 style(ID1000939): 【蜘蛛管家】客户列表- UI还原不足

Browse Source 
【【蜘蛛管家】客户列表- UI还原不足】 https://www.tapd.cn/53459131/bugtrace/bugs/view/1153459131001000939
This commit is contained in:
xuan 2022-12-12 18:09:21 +08:00
parent cb3d4b8734
commit 9e4a6e6bcd
14 changed files with 218 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
project.private.config.json
View File

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

29
src/components/AddressList/index.scss
View File

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

41
src/components/AddressList/index.tsx
View File

@ -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 (
<View key={index} onClick={() => handleSelect(item, index)} className={`address-list ${focusId == item.id && 'address-active'}`}>
<View className="address-user">
{item.name}
<Text className="address-list-phone">{item.phone}</Text>
{
item.is_default && <Text className="address-list-default">默认</Text>
}
</View>
<View className="address-list-bottom">
<View className="address-list-info">
<View>{item.province_name + item.city_name + item.district_name + item.address_detail}
{/* {item.address_detail} */}
<View className="address-container">
<View>
<View className="address-user">
{item.name}
<Text className="address-list-phone">{item.phone}</Text>
{
item.is_default
&& <Tag type="primary" size="small" circle plain customClassName="address-list-default">
默认
</Tag>
}
</View>
<View className="address-list-bottom">
<View className="address-list-info">
<View>{item.province_name + item.city_name + item.district_name + item.address_detail}
</View>
</View>
</View>
{/* {
item.is_default && <Text className="address-list-phone">{item.phone.replace(item.phone.substring(3, 7), "****")}</Text>
} */}
</View>
<Navigator onClick={e => e.stopPropagation()} url={`/pages/addAddress/index?type=edit&id=${item.id}&&purchaser_id=${Number(props.purchaser_id)}`} hoverClass="none" className="address-edit">
{/* <Text className="iconfont icon-bianji"></Text> */}
<IconFont name="icon-bianji" size={40} color="#717171"></IconFont>
</Navigator>
<View>
<Navigator onClick={e => e.stopPropagation()} url={`/pages/addAddress/index?type=edit&id=${item.id}&&purchaser_id=${Number(props.purchaser_id)}`} hoverClass="none" className="address-edit">
<IconFont name="icon-bianji" size={40} color="#717171"></IconFont>
</Navigator>
</View>
</View>
{
item.factory !== '' && <>

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

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

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

@ -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) => {
</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>
<NormalButton onClick={handReset} customClassName={styles.resetBox} type="primary" size="normal" plain circle>重置</NormalButton>
<NormalButton onClick={handSure} disabled={isDisabled} customClassName={classnames(!isDisabled && styles.activeButton, styles.button)} type="primary" size="normal" plain circle>保存({choseNums})</NormalButton>
</View>
</Popup>
)

228
src/pages/customerDetails/index.module.scss
View File

@ -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;
}
height: calc(100vh - 250px);
margin-top: 24px;
}

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

@ -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 = () => {
<View className={styles.itemPhone}>{infoObj?.phone}</View>
</View>
<View className={styles.item_tag_box}>
<View className={styles.item_tagItem}>{infoObj?.purchaser_type_name || '暂无'}</View>
<View className={styles.item_tagItem}>{infoObj?.sale_user_name || '暂无'}</View>
<Tag type="primary" size="normal" circle customClassName={styles.item_tagItem} plain>
{infoObj?.purchaser_type_name || '暂无'}
</Tag>
<Tag type="primary" size="normal" circle customClassName={styles.item_tagItem} plain>
{infoObj?.sale_user_name || '暂无'}
</Tag>
{/* <View className={styles.item_tagItem}>{infoObj?.purchaser_type_name || '暂无'}</View>
<View className={styles.item_tagItem}>{infoObj?.sale_user_name || '暂无'}</View> */}
{
infoObj?.label_list?.map((item, key) => {
return (
<View key={key} className={styles.item_tagItem}>{item.label_name}</View>
<Tag type="primary" key={key} size="normal" circle customClassName={styles.item_tagItem}>
{item.label_name}
</Tag>
// <View key={key} className={styles.item_tagItem}>{item.label_name}</View>
)
})
}

10
src/pages/customerManagement/components/ItemList/index.module.scss
View File

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

15
src/pages/customerManagement/components/ItemList/index.tsx
View File

@ -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) => {
<View className={styles.itemPhone}>{props.obj.phone}</View>
</View>
<View className={styles.item_tag_box}>
<View className={styles.item_tagItem}>{props.obj.purchaser_type_name || '暂无'}</View>
<View className={styles.item_tagItem}>{props.obj.sale_user_name || '暂无'}</View>
<Tag type="primary" size="normal" circle customClassName={styles.item_tagItem}>
{props.obj.purchaser_type_name || '暂无'}
</Tag>
<Tag type="primary" size="normal" circle customClassName={styles.item_tagItem}>
{props.obj.sale_user_name || '暂无'}
</Tag>
{
props.obj?.label_list?.map((item, key) => {
return (
<View key={key} className={styles.item_tagItem}>{item.label_name}</View>
<Tag type="primary" key={key} size="normal" circle customClassName={styles.item_tagItem}>
{item.label_name}
</Tag>
)
})
}
@ -89,7 +96,7 @@ const ItemList = (props: Props) => {
<View className={styles.line}></View>
<View className={styles.flex_bottom}>
<View className={styles.flex_left}>{props.obj.default_address.province_name + props.obj.default_address.city_name + props.obj.default_address.district_name || '暂无'}</View>
<View className={styles.flex_right}>{timeFont}：{formatDateTime(time) || '暂无'}</View>
<View className={styles.flex_right}>{timeFont}：{formatDateTime(time, 'YYYY-MM-DD HH:mm') || '暂无'}</View>
</View>
</View >
)

15
src/pages/customerManagement/components/Sort/index.module.scss
View File

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

2
src/pages/customerManagement/components/Sort/index.tsx
View File

@ -97,7 +97,7 @@ const Sort = (props: Props, ref) => {
{
list.map((item, index) => {
return (
<View key={index} className={classnames(item.checked ? styles.itemactiveFlex : styles.itemFlex)} onClick={() => handItem?.(item)}>{item.name}</View>
<View key={index} className={classnames(styles.itemFlex, item.checked && styles.active)} onClick={() => handItem?.(item)}>{item.name}</View>
)
})
}

14
src/pages/customerManagement/components/Tag/index.module.scss
View File

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

6
src/pages/customerManagement/components/Tag/index.tsx
View File

@ -92,17 +92,17 @@ const Tag = (props: Props, ref) => {
<DropDownItem ref={DropDownItemRef} title="自定标签" value={currentValue} activeColor="#337fff" onCloseOverlay={props?.onCloseOverlay}>
<View className={styles.mainBox}>
<View className={styles.pussTitle}>客户类型</View>
<View className={styles.pussBox}>
<View className={classnames(styles.pussBox)}>
{
list.map((item, index) => {
return (
<View key={index} className={classnames(item.checked ? styles.itemactiveFlex : styles.itemFlex)} onClick={() => handItem?.(item)}>{item.name}</View>
<View key={index} className={classnames(item.checked && styles.active, styles.itemFlex)} onClick={() => handItem?.(item)}>{item.name}</View>
)
})
}
</View>
<View className={styles.pussTitle}>自定义标签</View>
<View className={styles.pussBox}>
<View className={classnames(styles.pussBox)}>
{
taglist.map((item, index) => {
return (

8
src/pages/customerManagement/index.tsx
View File

@ -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 = () => {
<View className={styles.order_list}>
<InfiniteScroll
statusMore={statusMore}
selfonScrollToLower={getScrolltolower}
selfonScrollToLower={getScrollToLower}
refresherEnabled
refresherTriggered={refresherTriggeredStatus}
selfOnRefresherRefresh={getRefresherRefresh}
>
{orderData?.list?.map((item, index) => {
return (
<ItemLiist key={index} sortId={sortRefRef.current} obj={item}></ItemLiist>
<ItemList key={index} sortId={sortRefRef.current} obj={item}></ItemList>
)
})}
</InfiniteScroll>