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

【【蜘蛛管家】客户列表- UI还原不足】 https://www.tapd.cn/53459131/bugtrace/bugs/view/1153459131001000939

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

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: 24px 30px;
-    padding: 30px;
     box-sizing: border-box;
-    margin: 18px auto 0;
+    margin: 18px 24px 0;
-    // border: 1px solid #ffffff;
-    // border: 1px solid rgba(0, 0, 0, 0.16);
   }
 
   .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;
+    background: #ffffff;
-    height: 28px;
-    background: #cde5ff;
     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 {

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,27 +127,31 @@ 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-container">
+                      <View>
                         <View className="address-user">
                           {item.name}
                           <Text className="address-list-phone">{item.phone}</Text>
                           {
-                        item.is_default && <Text className="address-list-default">默认</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}
-                          {/* {item.address_detail} */}
                             </View>
-                        {/* {
-                          item.is_default && <Text className="address-list-phone">{item.phone.replace(item.phone.substring(3, 7), "****")}</Text>
-                        } */}
                           </View>
+                        </View>
+                      </View>
+                      <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>
+                    </View>
                     {
                       item.factory !== '' && <>
                         <View className="line"></View>

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;
+        background: rgba(51, 127, 255, 0.1) !important;
-        min-width: 200px;
+        color: #337fff !important;
-        margin-bottom: 10px;
+        border: 1px solid #337fff !important;
-        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;
       }
 
       .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-size: 28px;
-    font-family: PingFangSC-Medium, PingFang SC;
     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;
   }
 }
 

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

src/pages/customerDetails/index.module.scss

@@ -9,21 +9,23 @@
     margin-right: 24px;
     display: flex;
     position: relative;
-        background: #F6F7FB;
+    background: #f6f7fb;
     border-radius: 16px;
     padding-bottom: 20px;
 
     // 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%);
+        background: linear-gradient(337deg, #7bb7ff 0%, #4581ff 100%);
         font-size: 32px;
         font-weight: 500;
-                color: #FFFFFF;
+        color: #ffffff;
         text-align: center;
         line-height: 78px;
         border-radius: 50%;
@@ -32,7 +34,6 @@
       }
     }
 
-
     .item_top_one {
       .item_top_one_flex {
         display: flex;
@@ -47,7 +48,6 @@
 
         .itemPhone {
           font-size: 28px;
-                    font-family: PingFangSC-Regular, PingFang SC;
           font-weight: 400;
           color: #646466;
         }
@@ -62,16 +62,17 @@
         .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;
+          color: #4581ff;
-                    background: #ecf2ff;
+          background: #e3eafb;
           border-radius: 8px;
+          border: none;
         }
 
         .item_tagAdd {
-                    color: #4581FF;
+          color: #4581ff;
           background: #ecf2ff;
           width: 114px;
           height: 45px;
@@ -91,7 +92,7 @@
           .item_add_font {
             font-size: 24px;
             font-weight: 500;
-                        color: #4581FF;
+            color: #4581ff;
             margin-right: 15px;
           }
         }
@@ -104,17 +105,16 @@
       right: 24px;
       font-size: 28px;
       font-weight: 400;
-            color: #337FFF;
+      color: #337fff;
     }
   }
-
 }
 
 .formBox {
   margin-top: 24px;
   margin-left: 24px;
   margin-right: 24px;
-    background: #FFFFFF;
+  background: #ffffff;
   border-radius: 16px;
   padding: 40px 32px 40px 32px;
 }

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 = () => {
               <View className={styles.itemPhone}>{infoObj?.phone}</View>
             </View>
             <View className={styles.item_tag_box}>
-              <View className={styles.item_tagItem}>{infoObj?.purchaser_type_name || '暂无'}</View>
+              <Tag type="primary" size="normal" circle customClassName={styles.item_tagItem} plain>
-              <View className={styles.item_tagItem}>{infoObj?.sale_user_name || '暂无'}</View>
+                {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>
                   )
                 })
               }

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;

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) => {
               <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>
+              <Tag type="primary" size="normal" circle customClassName={styles.item_tagItem}>
-              <View className={styles.item_tagItem}>{props.obj.sale_user_name || '暂无'}</View>
+                {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 >
   )

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 {
+  .active {
-    padding: 23px 18px 23px 18px;
     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;
+    font-weight: 550;
-    margin-bottom: 24px;
   }
 }

src/pages/customerManagement/components/Sort/index.tsx

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

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 {
+    .active {
-      min-width: 80px;
-      padding: 23px 60px 23px 60px;
       background: rgba(51, 127, 255, 0.1);
-      border-radius: 16px;
       border: 1px solid #337fff;
-      // box-sizing: border-box;
+      font-weight: 550;
-      font-size: 28px;
-      font-weight: 400;
       color: #337fff;
-      margin-right: 24px;
-      margin-bottom: 24px;
     }
   }
 }

src/pages/customerManagement/components/Tag/index.tsx

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

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 = () => {
       <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>