🎈 perf(优化加入购物车):

src/common/constant.js

@@ -1,4 +1,4 @@
-export const BASE_URL = CURRENT_BASE_URL
+// export const BASE_URL = CURRENT_BASE_URL
 // export const BASE_URL = `http://192.168.0.75:50001/lymarket`
 // export const BASE_URL = `http://192.168.0.89:50001/lymarket`
 // export const BASE_URL = `http://10.0.0.5:50001/lymarket`
@@ -12,7 +12,7 @@ export const BASE_URL = CURRENT_BASE_URL
 // export const BASE_URL = `https://dev.zzfzyc.com/lymarket`  // 开发环境
 // export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境
 // export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
-// export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添
+export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添
 // export const BASE_URL = `http://192.168.1.22:50002/lymarket` // 婷
 // export const BASE_URL = `http://192.168.1.42:50002/lymarket` //  杰
 

src/components/shopCart/components/productItem/index.tsx

@@ -1,4 +1,4 @@
-import { View } from '@tarojs/components'
+import { CustomWrapper, View } from '@tarojs/components'
 import { memo, useCallback, useMemo } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
@@ -12,7 +12,6 @@ type param = {
   sale_model: saleModeType
   onChangeSelect: (val: any) => any
   onChangeCount: (val: any) => any
-
   item: any
 }
 
@@ -56,10 +55,14 @@ export default memo((props: param) => {
   const formatUnit = useCallback((item) => {
     return item.sale_mode == 0 ? '条' : '米'
   }, [])
+
+  const model_status = useMemo(() => {
+    return sale_model != item.sale_mode
+  }, [item])
   return (
-    <View className={classnames(styles.product_item, sale_model != item.sale_mode && styles.no_product_item_select)} onClick={clickProduct}>
+    <View className={classnames(styles.product_item, model_status && styles.no_product_item_select)} onClick={clickProduct}>
       <View className={styles.checkbox} catchMove>
-        <MCheckbox status={item.selected} onSelect={selectCallBack} onClose={colseCallBack} disabled={sale_model != item.sale_mode} />
+        <MCheckbox status={item.selected} onSelect={selectCallBack} onClose={colseCallBack} disabled={model_status} />
       </View>
       <View className={styles.img}>
         <LabAndImg value={rga} showStatus={false} onClick={getLabAndImg} />
@@ -88,7 +91,7 @@ export default memo((props: param) => {
               unit={formatUnit(item)}
               minNum={item.minNum}
               maxNum={item.maxNum}
-              disabled={sale_model != item.sale_mode}
+              disabled={model_status}
             />
           </View>
         </View>

src/pages/details/components/counter/index.module.scss

@@ -1,46 +1,44 @@
-
+.main {
-.main{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  .plus {
+    color: $color_main;
+    width: 46px;
+    height: 46px;
+    text-align: center;
+    line-height: 43px;
+    font-size: 50px;
+    background-color: $color_main;
+    color: #fff;
+    border-radius: 8px;
+  }
+  .reduce {
+    font-size: 50px;
+    width: 46px;
+    height: 46px;
+    text-align: center;
+    line-height: 43px;
+    color: #007aff;
+  }
+  .input {
     display: flex;
-    align-items: center;
+    align-items: flex-end;
-    justify-content: space-between;
+    background-color: #fff;
-    width: 100%;
+    padding: 5px 10px;
-    .plus{
+    box-sizing: border-box;
-        color: $color_main;
+    width: 106px;
-        width: 46px;
+    border-radius: 10px;
-        height: 46px;
+    input {
-        text-align: center;
+      font-size: $font_size_medium;
-        line-height: 43px;
+      // text-align: right;
-        font-size: 50px;
+      padding-right: 10px;
-        background-color: $color_main;
-        color: #fff;
-        border-radius: 8px;
-    }
-    .reduce {
-        font-size: 50px;
-        width: 46px;
-        height: 46px;
-        text-align: center;
-        line-height: 43px;
-        color:#007AFF;
-    }
-    .input{
-        display: flex;
-        align-items: flex-end;
-        background-color: #fff;
-        padding: 5px 10px;
-        box-sizing: border-box;
-        width: 106px;
-        border-radius: 10px;
-        input{
-            font-size: $font_size_medium;
-            text-align: right;
-            padding-right: 10px;
-        }
-    }
-    
-    .unit{
-        font-size: $font_size_min;
-        color: $color_font_two;
     }
+  }
 
+  .unit {
+    font-size: $font_size_min;
+    color: $color_font_two;
+  }
 }

src/pages/details/components/orderCount/index.module.scss

@@ -69,7 +69,7 @@
   .product_color_con {
     flex: 1;
     height: 0;
-    padding-bottom: 151px;
+    margin-bottom: calc(150px - env(safe-area-inset-bottom));
   }
   .color_con {
     .virtual_list {
@@ -94,6 +94,7 @@
         .title {
           font-size: $font_size_big;
           font-weight: 700;
+          @include common_ellipsis();
         }
         .num {
           font-size: $font_size;
@@ -147,6 +148,7 @@
   }
   .buy_btn {
     width: 100%;
+    height: 150px;
     padding: 0 40px;
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);

src/pages/details/components/orderCount/index.tsx

@@ -2,7 +2,7 @@ import { View, Text } from '@tarojs/components'
 import Popup from '@/components/popup'
 import LoadingCard from '@/components/loadingCard'
 import Search from '@/components/search'
-import Counter from '../counter'
+import Counter from '@/components/counter'
 import Big from 'big.js'
 import classnames from 'classnames'
 import styles from './index.module.scss'
@@ -239,12 +239,11 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
               )) || (
                 <View className={styles.btn_count}>
                   <Counter
-                    otherData={item}
+                    onBlue={(num) => getInputValue(num, item)}
-                    onBlue={getInputValue}
                     defaultNum={item.count}
                     step={selectList[selectIndex].step}
                     digits={selectList[selectIndex].digits}
-                    onClickBtn={getInputValue}
+                    onClickBtn={(num) => getInputValue(num, item)}
                     unit={selectList[selectIndex].unit}
                     minNum={selectList[selectIndex].minNum}
                     maxNum={selectList[selectIndex].maxNum}
@@ -258,6 +257,24 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
     )
   })
 
+  const [virtualHeight, setVirtualheight] = useState(400)
+  useEffect(() => {
+    if (!show) return
+    setTimeout(() => {
+      Taro.nextTick(() => {
+        let query = Taro.createSelectorQuery()
+        query
+          .select('#product_color_con')
+          .boundingClientRect((rect) => {
+            console.log('rect::', rect)
+            let clientHeight = rect.height
+            setVirtualheight(() => clientHeight)
+          })
+          .exec()
+      })
+    }, 100)
+  }, [show])
+
   return (
     <View className={styles.shop_cart_main}>
       <Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
@@ -293,13 +310,13 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
             {!searchShow && <View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>}
           </View>
 
-          <View className={styles.product_color_con}>
+          <View className={styles.product_color_con} id='product_color_con'>
             {list.length <= 0 && colorState.loading && <LoadingCard />}
             {list.length > 0 && !colorState.loading && (
               <View className={styles.color_con}>
                 <VirtualList
                   className={styles.virtual_list}
-                  height={400} /* 列表的高度 */
+                  height={virtualHeight} /* 列表的高度 */
                   width='100%' /* 列表的宽度 */
                   itemData={list} /* 渲染列表的数据 */
                   itemCount={list.length} /*  渲染列表的长度 */
@@ -324,7 +341,7 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
             </View>
           </View>
         </View>
-        <View className='common_safe_area_y'></View>
+        {/* <View className='common_safe_area_y'></View> */}
       </Popup>
       <View>
         <LabAndImgShow value={labImageValue} show={showLabImage} onClose={closeLabImgShow} />