🎈 perf(合并ui优化):

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>

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 (

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}

src/pages/details/index.module.scss

@@ -69,7 +69,7 @@
       grid-template-columns: 50% 50%;
       grid-template-rows: auto auto auto;
       grid-template-areas: 'a b' 'c d' 'e e';
-      font-size: 26px;
+      font-size: $font_size_medium;
       color: $color_font_three;
       background-color: rgba(247, 247, 247, 0.6);
       border-radius: 8px;
@@ -79,6 +79,7 @@
       .des_text {
         display: flex;
         margin-bottom: 24px;
+        font-size: 26px;
         &:nth-child(5) {
           grid-area: e;
         }

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;
+  position: absolute;
-  display: flex;
+  top: 0;
-  align-items: center;
+  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,9 +33,7 @@
         box-sizing: border-box;
         max-width: 260px;
         // @include common_ellipsis;
-        &:nth-last-child(n + 1) {
+        margin: 0 8px 16px 8px;
-          margin-right: 16px;
-        }
       }
       .product_class_item_selected {
         border: 1px solid #3c78f4;
@@ -62,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;
@@ -72,13 +80,20 @@
   .product_class_scroll {
     box-sizing: border-box;
     max-height: 500px;
-    padding: 15px 20px 0 10px;
+    padding: 0 20px;
+    padding: 6px 20px 0 20px;
     .product_class_list {
-      display: flex;
+      // display: flex;
-      flex-wrap: wrap;
+      // 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;
@@ -86,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;
       }
     }
   }

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,27 +15,31 @@ type ParamProduct = Omit<Param, 'open'>
 
 export default (option: Param) => {
   const { open = false, onOpenClick, onSelect, list, defaultSelectId } = option
-  const getSelect = (id) => {
+  const getSelect = useCallback((id) => {
     onSelect?.(id)
-  }
+  }, [])
+  const openClick = useCallback((val) => {
+    onOpenClick?.(val)
+  }, [])
   return (
     <>
-      {open ? (
+      <View className={styles.class_main}>
-        <ProductClassBlock list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={(val) => onOpenClick?.(val)}></ProductClassBlock>
+        <ProductClassLine list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={openClick}></ProductClassLine>
-      ) : (
+        <ProductClassBlock open={open} list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={openClick}></ProductClassBlock>
-        <ProductClassLine list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={(val) => onOpenClick?.(val)}></ProductClassLine>
+      </View>
-      )}
     </>
   )
 }
 
-const ProductClassLine = (option: ParamProduct) => {
+const ProductClassLine = memo((option: ParamProduct) => {
-  const { onOpenClick, defaultSelectId = -1, onSelect, list = [] } = option
+  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) => {
@@ -45,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])
@@ -74,11 +79,11 @@ const ProductClassLine = (option: ParamProduct) => {
       </View>
     </View>
   )
-}
+})
 
-const ProductClassBlock = (option: ParamProduct) => {
+const ProductClassBlock = (option: ParamProduct & { open: boolean }) => {
-  const { onOpenClick, defaultSelectId = -1, onSelect, list = [] } = option
+  const { onOpenClick, defaultSelectId = 0, onSelect, list = [], open } = option
-  const [selectInfo, setSelectInfo] = useState(-1)
+  const [selectInfo, setSelectInfo] = useState(0)
 
   useEffect(() => {
     setSelectInfo(defaultSelectId)
@@ -89,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}>
+      <View className={styles.product_class_main_block} style={{ display: open ? 'block' : 'none' }}>
-        <ScrollView scrollY className={styles.product_class_scroll}>
+        <View className={styles.product_class_block_con}>
-          <View className={styles.product_class_list}>
+          <ScrollView scrollY className={styles.product_class_scroll}>
-            {list?.map((item) => (
+            <View className={styles.product_class_list}>
-              <View
+              {list?.map((item) => (
-                className={classnames(styles.product_class_item, item.id == selectInfo ? styles.product_class_item_selected : '')}
+                <View
-                onClick={() => clickEvent(item)}>
+                  className={classnames(styles.product_class_item, item.id == selectInfo ? styles.product_class_item_selected : '')}
-                {item.name}
+                  onClick={() => clickEvent(item)}>
-              </View>
+                  {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>
   )
 }

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>

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}