From 48f054517f76bac3a0bb1a46e57d5cbdac13fc64 Mon Sep 17 00:00:00 2001
From: czm <2192718639@qq.com>
Date: Fri, 25 Nov 2022 14:23:22 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=88=20perf(=E5=AE=8C=E6=88=90=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96):?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/index.js                               |  4 +-
 src/components/LabAndImg/index.tsx            | 17 ++++-
 src/components/sideBar/index.tsx              | 13 ++--
 .../details/components/orderCount/index.tsx   |  2 +-
 src/pages/details/index.module.scss           |  9 ++-
 src/pages/details/index.tsx                   |  2 +-
 .../components/productClass/index.module.scss | 47 ++++++++----
 .../index/components/productClass/index.tsx   | 71 ++++++++++---------
 src/pages/order/components/scanPay/index.tsx  |  2 +-
 src/pages/userEdit/index.tsx                  |  7 --
 10 files changed, 105 insertions(+), 69 deletions(-)

diff --git a/config/index.js b/config/index.js
index 389f1a5..cbc3245 100644
--- a/config/index.js
+++ b/config/index.js
@@ -60,7 +60,9 @@ const config = {
     postcss: {
       pxtransform: {
         enable: true,
-        config: {},
+        config: {
+          onePxTransform: false,
+        },
       },
       url: {
         enable: true,
diff --git a/src/components/LabAndImg/index.tsx b/src/components/LabAndImg/index.tsx
index 7aee959..5fff9dc 100644
--- a/src/components/LabAndImg/index.tsx
+++ b/src/components/LabAndImg/index.tsx
@@ -19,7 +19,7 @@ type Param = {
   name?: string
 }
 export default memo(({ value, onClick, showStatus = false, round = false, name = '' }: Param) => {
-  const [imgs, setImgs] = useState<string[]>([])
+  const [imgs, setImgs] = useState<string>('')
 
   //lab是否都是0
   const rgbStyle = useMemo(() => {
@@ -35,7 +35,7 @@ export default memo(({ value, onClick, showStatus = false, round = false, name =
       let imgs = value.texture_url.split(',').map((item) => {
         return formatImgUrl(item)
       })
-      setImgs(() => imgs)
+      setImgs(() => imgs[0])
     }
   }, [value])
 
@@ -50,10 +50,21 @@ export default memo(({ value, onClick, showStatus = false, round = false, name =
     setLabAndImgShow(true)
   }
 
+  const checkLoad = (val) => {
+    setImgs(() => formatImgUrl(''))
+  }
+
   return (
     <>
       <View className={styles.labAndImg_main} style={{ borderRadius: round ? '50%' : '' }} onClick={() => onShowLabAndImg()}>
-        {value.texture_url && <Image mode='aspectFill' src={imgs[0]} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '' }}></Image>}
+        {value.texture_url && (
+          <Image
+            mode='aspectFill'
+            src={imgs}
+            onError={(e) => checkLoad(e)}
+            className={styles.labAndImg_image}
+            style={{ borderRadius: round ? '50%' : '' }}></Image>
+        )}
         {!value.texture_url && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle, borderRadius: round ? '50%' : '' }}></View>}
         {!value.texture_url && !rgbStyle && (
           <Image mode='aspectFill' src={formatImgUrl('')} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '' }}></Image>
diff --git a/src/components/sideBar/index.tsx b/src/components/sideBar/index.tsx
index d8ec31a..6d800bb 100644
--- a/src/components/sideBar/index.tsx
+++ b/src/components/sideBar/index.tsx
@@ -1,8 +1,8 @@
 import { ScrollView, View } from '@tarojs/components'
-import React, { memo, ReactNode, useEffect, useRef, useState } from 'react'
+import React, { memo, ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import classnames from 'classnames'
-import Taro, { useReady } from '@tarojs/taro'
+import Taro, { getCurrentInstance, useReady, useRouter } from '@tarojs/taro'
 import InfiniteScroll, { StatusParam } from '../infiniteScroll'
 import LoadingCard from '../loadingCard'
 import ProductClass from '@/pages/index/components/productClass'
@@ -73,7 +73,7 @@ export default memo(
       }
     }
 
-    useReady(() => {
+    useEffect(() => {
       Taro.nextTick(() => {
         let query = Taro.createSelectorQuery()
         query
@@ -85,16 +85,17 @@ export default memo(
             let ratio = 750 / clientWidth
             let height = clientHeight * ratio
             num_half.current = Math.ceil(height / 2 / heightItem)
+            console.log('num_half::', num_half)
             init()
           })
           .exec()
       })
-    })
+    }, [])
 
     //二级面料系列分类
     const [openClass, setOpenClass] = useState(false)
     const [classList, setClassList] = useState([])
-    const [classId, setClassId] = useState(0)
+    const [classId, setClassId] = useState(-1)
     const { fetchData } = GetClassList()
     const getClassData = async (id) => {
       let res = await fetchData({ id })
@@ -111,7 +112,7 @@ export default memo(
 
     const getSelectClass = (id) => {
       selectClass?.(id)
-      setClassId(id)
+      setClassId(() => id)
     }
 
     return (
diff --git a/src/pages/details/components/orderCount/index.tsx b/src/pages/details/components/orderCount/index.tsx
index cd90c9c..955e8e8 100644
--- a/src/pages/details/components/orderCount/index.tsx
+++ b/src/pages/details/components/orderCount/index.tsx
@@ -302,7 +302,7 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
                   height={400} /* 列表的高度 */
                   width='100%' /* 列表的宽度 */
                   itemData={list} /* 渲染列表的数据 */
-                  itemCount={list.length + 1} /*  渲染列表的长度 */
+                  itemCount={list.length} /*  渲染列表的长度 */
                   itemSize={100} /* 列表单项的高度  */
                   overscanCount={1}>
                   {Rows}
diff --git a/src/pages/details/index.module.scss b/src/pages/details/index.module.scss
index 4e511b5..9b238eb 100644
--- a/src/pages/details/index.module.scss
+++ b/src/pages/details/index.module.scss
@@ -66,7 +66,9 @@
     }
     .con {
       display: grid;
-      grid-template-columns: auto auto;
+      grid-template-columns: 50% 50%;
+      grid-template-rows: auto auto auto;
+      grid-template-areas: 'a b' 'c d' 'e e';
       font-size: $font_size_medium;
       color: $color_font_three;
       background-color: rgba(247, 247, 247, 0.6);
@@ -77,6 +79,10 @@
       .des_text {
         display: flex;
         margin-bottom: 24px;
+        font-size: 26px;
+        &:nth-child(5) {
+          grid-area: e;
+        }
         text {
           flex: 1;
           color: #333333;
@@ -95,6 +101,7 @@
     .title {
       color: rgba(0, 0, 0, 0.8);
       font-weight: 500;
+      font-size: 28px;
     }
     .list {
       margin-top: 30px;
diff --git a/src/pages/details/index.tsx b/src/pages/details/index.tsx
index 537a5e1..6de3f91 100644
--- a/src/pages/details/index.tsx
+++ b/src/pages/details/index.tsx
@@ -247,7 +247,7 @@ export default (props: Params) => {
           <View className={styles.customer_service}>
             <View className={classnames('iconfont icon-kefu', styles.miconfont)}></View>
             <View className={styles.text}>
-              客服
+              询货/咨询
               <Button
                 className={styles.wxBtn}
                 openType='contact'
diff --git a/src/pages/index/components/productClass/index.module.scss b/src/pages/index/components/productClass/index.module.scss
index 5fec53a..e124093 100644
--- a/src/pages/index/components/productClass/index.module.scss
+++ b/src/pages/index/components/productClass/index.module.scss
@@ -1,20 +1,28 @@
+.class_main {
+  position: relative;
+  height: 100%;
+}
 .product_class_main_line {
   width: 100%;
   height: 80px;
-  position: relative;
-  display: flex;
-  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  // display: flex;
+  // align-items: center;
   margin-bottom: 20px;
   background-color: #fff;
   .product_class_scroll {
-    padding: 0 88px 0 19px;
     box-sizing: border-box;
+    padding: 6px 90px 0 20px;
     .product_class_list {
       white-space: nowrap;
       display: flex;
       box-sizing: border-box;
       .product_class_item {
-        padding: 10px 20px;
+        height: 56px;
+        line-height: 56px;
+        padding: 0 15px;
         background: #f5f5f5;
         border-radius: 29px;
         display: flex;
@@ -25,14 +33,13 @@
         box-sizing: border-box;
         max-width: 260px;
         // @include common_ellipsis;
-        &:nth-last-child(n + 1) {
-          margin-right: 16px;
-        }
+        margin: 0 8px 16px 8px;
       }
       .product_class_item_selected {
         border: 1px solid #3c78f4;
         color: #3c78f4;
         background: #ecf2ff;
+        box-sizing: border-box;
       }
     }
   }
@@ -61,7 +68,9 @@
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  position: relative;
+  position: absolute;
+  top: 0;
+  left: 0;
   .product_class_block_con {
     max-height: 500px;
     background-color: #fff;
@@ -71,13 +80,20 @@
   .product_class_scroll {
     box-sizing: border-box;
     max-height: 500px;
-    padding: 20px 20px 0 20px;
+    padding: 0 20px;
+    padding: 6px 20px 0 20px;
     .product_class_list {
-      display: flex;
-      flex-wrap: wrap;
+      // display: flex;
+      // flex-wrap: wrap;
       box-sizing: border-box;
+      display: grid;
+      grid-template-columns: auto auto auto;
       .product_class_item {
-        padding: 10px 20px;
+        width: 169px;
+        height: 56px;
+        line-height: 56px;
+        text-align: center;
+        padding: 0 15px;
         background: #f5f5f5;
         border-radius: 29px;
         display: flex;
@@ -85,15 +101,16 @@
         justify-content: center;
         font-size: 24px;
         color: rgba(0, 0, 0, 0.8);
-        margin: 0 8px 20px 8px;
+        margin: 0 8px 16px 8px;
         box-sizing: border-box;
         max-width: 260px;
-        // @include common_ellipsis(1);
+        @include common_ellipsis(1);
       }
       .product_class_item_selected {
         border: 1px solid #3c78f4;
         color: #3c78f4;
         background: #ecf2ff;
+        box-sizing: border-box;
       }
     }
   }
diff --git a/src/pages/index/components/productClass/index.tsx b/src/pages/index/components/productClass/index.tsx
index ddab642..0b40391 100644
--- a/src/pages/index/components/productClass/index.tsx
+++ b/src/pages/index/components/productClass/index.tsx
@@ -1,7 +1,7 @@
 import { ScrollView, Text, View } from '@tarojs/components'
 import styles from './index.module.scss'
 import classnames from 'classnames'
-import { useEffect, useMemo, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 
 type Param = {
   open: boolean
@@ -15,29 +15,31 @@ type ParamProduct = Omit<Param, 'open'>
 
 export default (option: Param) => {
   const { open = false, onOpenClick, onSelect, list, defaultSelectId } = option
-  //   const [defaultSelectIded, setDefaultSelectIded] = useState(-1)
-  const getSelect = (id) => {
-    // setDefaultSelectIded(id)
+  const getSelect = useCallback((id) => {
     onSelect?.(id)
-  }
+  }, [])
+  const openClick = useCallback((val) => {
+    onOpenClick?.(val)
+  }, [])
   return (
     <>
-      {open ? (
-        <ProductClassBlock list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={(val) => onOpenClick?.(val)}></ProductClassBlock>
-      ) : (
-        <ProductClassLine list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={(val) => onOpenClick?.(val)}></ProductClassLine>
-      )}
+      <View className={styles.class_main}>
+        <ProductClassLine list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={openClick}></ProductClassLine>
+        <ProductClassBlock open={open} list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={openClick}></ProductClassBlock>
+      </View>
     </>
   )
 }
 
-const ProductClassLine = (option: ParamProduct) => {
-  const { onOpenClick, defaultSelectId = -1, onSelect, list = [] } = option
+const ProductClassLine = memo((option: ParamProduct) => {
+  const { onOpenClick, defaultSelectId = 0, onSelect, list = [] } = option
   const [selectInfo, setSelectInfo] = useState({
-    selected: -1, //当前选中的id
+    selected: 0, //当前选中的id
     tabId: 0, //需要滚动到的id
   })
 
+  console.log('刷新了')
+
   useEffect(() => {
     let data: { item: any; index: number } = { item: null, index: 0 }
     list?.filter((item, index) => {
@@ -47,6 +49,7 @@ const ProductClassLine = (option: ParamProduct) => {
     })
     if (data.item) {
       const num = data.index > 0 ? data.index - 1 : 0
+      console.log('获取数据：：', list[num].id)
       setSelectInfo((e) => ({ ...e, tabId: list[num].id, selected: data.item.id }))
     }
   }, [defaultSelectId])
@@ -76,11 +79,11 @@ const ProductClassLine = (option: ParamProduct) => {
       </View>
     </View>
   )
-}
+})
 
-const ProductClassBlock = (option: ParamProduct) => {
-  const { onOpenClick, defaultSelectId = -1, onSelect, list = [] } = option
-  const [selectInfo, setSelectInfo] = useState(-1)
+const ProductClassBlock = (option: ParamProduct & { open: boolean }) => {
+  const { onOpenClick, defaultSelectId = 0, onSelect, list = [], open } = option
+  const [selectInfo, setSelectInfo] = useState(0)
 
   useEffect(() => {
     setSelectInfo(defaultSelectId)
@@ -91,24 +94,26 @@ const ProductClassBlock = (option: ParamProduct) => {
     onSelect?.(item.id)
   }
   return (
-    <View className={styles.product_class_main_block}>
-      <View className={styles.product_class_block_con}>
-        <ScrollView scrollY className={styles.product_class_scroll}>
-          <View className={styles.product_class_list}>
-            {list?.map((item) => (
-              <View
-                className={classnames(styles.product_class_item, item.id == selectInfo ? styles.product_class_item_selected : '')}
-                onClick={() => clickEvent(item)}>
-                {item.name}
-              </View>
-            ))}
+    <>
+      <View className={styles.product_class_main_block} style={{ display: open ? 'block' : 'none' }}>
+        <View className={styles.product_class_block_con}>
+          <ScrollView scrollY className={styles.product_class_scroll}>
+            <View className={styles.product_class_list}>
+              {list?.map((item) => (
+                <View
+                  className={classnames(styles.product_class_item, item.id == selectInfo ? styles.product_class_item_selected : '')}
+                  onClick={() => clickEvent(item)}>
+                  {item.name}
+                </View>
+              ))}
+            </View>
+          </ScrollView>
+          <View className={styles.product_class_close} onClick={() => onOpenClick?.(false)}>
+            点击收起<Text className={classnames('iconfont icon-a-moreback', styles.product_class_close_icon)}></Text>
           </View>
-        </ScrollView>
-        <View className={styles.product_class_close} onClick={() => onOpenClick?.(false)}>
-          点击收起<Text className={classnames('iconfont icon-a-moreback', styles.product_class_close_icon)}></Text>
         </View>
+        <View className={styles.product_class_block_mask} onClick={() => onOpenClick?.(false)}></View>
       </View>
-      <View className={styles.product_class_block_mask} onClick={() => onOpenClick?.(false)}></View>
-    </View>
+    </>
   )
 }
diff --git a/src/pages/order/components/scanPay/index.tsx b/src/pages/order/components/scanPay/index.tsx
index 6e0b784..d3b114e 100644
--- a/src/pages/order/components/scanPay/index.tsx
+++ b/src/pages/order/components/scanPay/index.tsx
@@ -191,7 +191,7 @@ export default memo(({ show = true, onClose, company, orderInfo }: Param) => {
           <View className={styles.scanPay_list}>
             {(state.loading && <LoadingCard />) || (
               <ScrollView scrollY className={styles.scanPay_list}>
-                <Image mode='widthFix' src={payCodeImage} onClick={showImage}></Image>
+                <Image mode='widthFix' src={payCodeImage} onClick={showImage} showMenuByLongpress={true}></Image>
               </ScrollView>
             )}
           </View>
diff --git a/src/pages/userEdit/index.tsx b/src/pages/userEdit/index.tsx
index 5a45875..9f988d2 100644
--- a/src/pages/userEdit/index.tsx
+++ b/src/pages/userEdit/index.tsx
@@ -170,9 +170,6 @@ export default () => {
         <View>点击编辑头像</View>
       </View>
       <View className='user-edit-content'>
-        <View className='user-edit-content-title'>
-          <Text /> 个人资料
-        </View>
         <UserEditList
           onClick={() => (ModifyIcknameEl.current as any).setModalShow(true)}
           data={(formData as any)?.user_name}
@@ -184,7 +181,6 @@ export default () => {
           {(formData as any)?.phone ? (
             <View className='user-edit-content-phone'>
               <View>{(formData as any)?.phone}</View>
-              <Text>已绑定</Text>
             </View>
           ) : (
             <Button className='user-edit-content-bindphone' openType='getPhoneNumber' onGetPhoneNumber={mGetPhoneNumber}>
@@ -194,9 +190,6 @@ export default () => {
         </UserEditList>
       </View>
       <View className='user-edit-content'>
-        <View className='user-edit-content-title'>
-          <Text /> 组织资料
-        </View>
         <UserEditList
           onClick={() => (ModifyCompanyNameEl.current as any).setModalShow(true)}
           data={(formData as any)?.company_name}