🐞 fix(ID1000708 首页购物车按钮问题):

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`
@@ -14,7 +14,7 @@ export const BASE_URL = CURRENT_BASE_URL
 // 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.22:50002/lymarket` // 婷
-// export const BASE_URL = `http://192.168.1.42:50002/lymarket` //  杰
+export const BASE_URL = `http://192.168.1.42:50002/lymarket` //  杰
 
 // CDN
 // 生成密钥

src/components/moveBtn/index.tsx

@@ -1,48 +1,53 @@
-import { MovableArea, MovableView, View } from "@tarojs/components"
+import { MovableArea, MovableView, View } from '@tarojs/components'
-import Taro, { useReady } from "@tarojs/taro"
+import Taro, { useReady } from '@tarojs/taro'
-import { ReactElement, useEffect, useRef, useState } from "react"
+import { ReactElement, useEffect, useLayoutEffect, useRef, useState } from 'react'
-import classnames from "classnames";
+import classnames from 'classnames'
-import styles  from './index.module.scss'
+import styles from './index.module.scss'
-import { GetShoppingCartApi } from "@/api/shopCart";
+import { GetShoppingCartApi } from '@/api/shopCart'
-import useCommonData from "@/use/useCommonData";
+import useCommonData from '@/use/useCommonData'
-import { useSelector } from "@/reducers/hooks";
+import { useSelector } from '@/reducers/hooks'
 
 type param = {
-    children?: ReactElement|null,
+  children?: ReactElement | null
-    onClick?: () => void
+  onClick?: () => void
 }
-export default ({children = null, onClick}:param) => {
+export default ({ children = null, onClick }: param) => {
-      //获取购物车数据数量
+  //获取购物车数据数量
-  const {getShopCount, commonData} = useCommonData()
+  const { getShopCount, commonData } = useCommonData()
-
-    const [screenHeight, setScreenHeight] = useState(0)
-    const [showMoveBtn, setShowMoveBtn] = useState(false)
-    const screenWidthRef = useRef(0)
-    useReady(() => {
-        const res = Taro.getSystemInfoSync()
-        if(res.screenHeight) {
-            let ratio = 750 / res.screenWidth
-            setScreenHeight(res.screenHeight*ratio - 460)
-            screenWidthRef.current = res.screenWidth/2
-        }
-        setShowMoveBtn(true)
-    })
-
-    useEffect(() => {
-        getShopCount()
-    }, [])
-
-    const dragEnd = (e) => {
 
+  const [screenHeight, setScreenHeight] = useState(0)
+  const [showMoveBtn, setShowMoveBtn] = useState(false)
+  const screenWidthRef = useRef(0)
+  useLayoutEffect(() => {
+    const res = Taro.getSystemInfoSync()
+    if (res.screenHeight) {
+      let ratio = 750 / res.screenWidth
+      setScreenHeight(res.screenHeight * ratio - 460)
+      screenWidthRef.current = res.screenWidth / 2
     }
+    setShowMoveBtn(true)
+  })
 
-    return (
+  useEffect(() => {
-        <MovableArea className={styles.movableItem}>
+    getShopCount()
-            {children}
+  }, [])
-            {showMoveBtn&&<MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia={true} x="630rpx" y={screenHeight+'rpx'} onTouchEnd={(e) => dragEnd(e)}>
+
-              <View className={classnames('iconfont','icon-gouwuche', styles.shop_icon) } ></View>
+  const dragEnd = (e) => {}
-              {(commonData.shopCount > 0)&&<View className={styles.product_num}>{commonData.shopCount > 99?'99+':commonData.shopCount}</View>}
+
-            </MovableView>}
+  return (
-        </MovableArea>
+    <MovableArea className={styles.movableItem}>
-    )
+      {children}
-}
+      <MovableView
+        onClick={onClick}
+        className={styles.moveBtn}
+        direction='all'
+        inertia={true}
+        x='630rpx'
+        y={screenHeight + 'rpx'}
+        onTouchEnd={(e) => dragEnd(e)}>
+        <View className={classnames('iconfont', 'icon-gouwuche', styles.shop_icon)}></View>
+        {commonData.shopCount > 0 && <View className={styles.product_num}>{commonData.shopCount > 99 ? '99+' : commonData.shopCount}</View>}
+      </MovableView>
+    </MovableArea>
+  )
+}

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

@@ -1,176 +1,180 @@
-.shop_cart_main{
+.shop_cart_main {
-    .popup_con{
+  .popup_con {
-        height: 80vh;
+    height: 80vh;
+    display: flex;
+    flex-direction: column;
+  }
+  .header {
+    color: $color_font_one;
+    font-size: 32px;
+    font-weight: 700;
+    padding: 20px;
+  }
+  .colorFind {
+    padding: 10px 20px;
+    display: flex;
+    align-items: center;
+    .search {
+      flex: 1;
+    }
+    .text {
+      font-size: $font_size_medium;
+      color: $color_main;
+    }
+  }
+  .search {
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    .search_title {
+      font-size: $font_size;
+      color: #000;
+      width: 160px;
+    }
+    .search_list {
+      display: flex;
+      justify-content: space-between;
+      flex: 1;
+    }
+    .search_item {
+      width: 148px;
+      height: 55px;
+      text-align: center;
+      line-height: 55px;
+      color: $color_font_two;
+      font-size: $font_size_medium;
+      background-color: #f0f0f0;
+      border-radius: 50px;
+    }
+    .search_item_select {
+      border: 2px solid $color_main;
+      background-color: #ecf5ff;
+      color: $color_main;
+      width: 144px;
+      height: 51px;
+    }
+  }
+  .colorNum {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    .title {
+      font-size: 26px;
+    }
+    .miconfont {
+      font-size: 36px;
+      color: $color_font_two;
+    }
+  }
+  .product_color_con {
+    flex: 1;
+    height: 0;
+    padding-bottom: 151px;
+  }
+  .color_con {
+    .virtual_list {
+      padding-bottom: 300px;
+    }
+    .item {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 20px;
+      margin-bottom: 40px;
+      .item_color {
+        width: 156.5px;
+        height: 156.5px;
+        border-radius: 20px;
+      }
+      .item_con {
+        flex: 1;
         display: flex;
         flex-direction: column;
-    }
-    .header{
-        color: $color_font_one;
-        font-size: 32px;
-        font-weight: 700;
-        padding: 20px;
-    }
-    .colorFind{
-        padding: 10px 20px;
-        display: flex;
-        align-items: center;
-        .search{
-            flex:1;
-        }
-        .text{
-            font-size: $font_size_medium;
-            color: $color_main;
-        }
-    }
-    .search{
-        display: flex;
-        align-items: center;
-        padding: 20px;
-        .search_title{
-            font-size: $font_size;
-            color: #000;
-            width: 160px;
-        }
-        .search_list{
-            display: flex;
-            justify-content: space-between;
-            flex:1;
-        }
-        .search_item{
-            width: 148px;
-            height: 55px;
-            text-align: center;
-            line-height: 55px;
-            color: $color_font_two;
-            font-size: $font_size_medium;
-            background-color: #f0f0f0;
-            border-radius: 50px;
-        }
-        .search_item_select{
-            border: 2px solid $color_main;
-            background-color: #ecf5ff;
-            color: $color_main;
-            width: 144px;
-            height: 51px;
-        }
-    }
-    .colorNum{
-        display: flex;
         justify-content: space-between;
-        padding: 20px;
+        padding: 20px 0 20px 20px;
-        .title{
+        .title {
-            font-size: 26px;
+          font-size: $font_size_big;
+          font-weight: 700;
         }
-        .miconfont{
+        .num {
-            font-size: 36px;
+          font-size: $font_size;
-            color: $color_font_two;
+          color: $color_main;
+          padding-top: 10px;
         }
-    }
+        .weight_error {
-    .product_color_con{
+          font-size: 28px;
-        flex:1;
+          color: #666666;
-        height: 0;
-        padding-bottom:151px;
-    }
-    .color_con{
-        .virtual_list{
-            padding-bottom: 300px;
         }
-        .item {
+        .priceText {
-            display: flex;
+          font-size: $font_size_big;
-            justify-content: space-between;
+          Text {
-            padding: 0 20px;
+            font-size: $font_size_min;
-            margin-bottom: 40px;
+          }
-            .item_color{
-                width: 156.5px;
-                height: 156.5px;
-                border-radius: 20px;
-                
-            }
-            .item_con{
-                flex:1;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-                padding: 20px 0 20px 20px;
-                .title{
-                    font-size: $font_size_big;
-                    font-weight: 700;
-                }
-                .num{
-                    font-size: $font_size;
-                    color: $color_main;
-                }
-                .priceText{
-                    font-size: $font_size_big;
-                    Text{
-                        font-size: $font_size_min;
-                    }
-                }
-            }
-            .btn_con{
-                display: flex;
-                align-items: flex-end;
-                .btn{
-                    width: 116px;
-                    height: 64px;
-                    background-color: $color_main;
-                    border-radius: 40px 0px 16px 0px;
-                    font-size: $font_size_medium;
-                    text-align: center;
-                    line-height: 64px;
-                    color: #fff;
-                }
-                .btn_count{
-                    width: 235px;
-                    height: 64px;
-                    background-color: #ECF5FF;
-                    border-radius: 40px 0px 16px 0px;
-                    padding: 0 20px;
-                    display: flex;
-                    align-items: center;
-                }
-            }
         }
-    }
+      }
-    .noData{
+      .btn_con {
-        width:100%;
-        height: 100%;
         display: flex;
-        justify-content: center;
+        align-items: flex-end;
-        align-items: center;
+        .btn {
-        color: $color_font_three;
+          width: 116px;
-        font-size: $font_size_medium;
+          height: 64px;
+          background-color: $color_main;
+          border-radius: 40px 0px 16px 0px;
+          font-size: $font_size_medium;
+          text-align: center;
+          line-height: 64px;
+          color: #fff;
+        }
+        .btn_count {
+          width: 235px;
+          height: 64px;
+          background-color: #ecf5ff;
+          border-radius: 40px 0px 16px 0px;
+          padding: 0 20px;
+          display: flex;
+          align-items: center;
+        }
+      }
     }
-    .buy_btn{
+  }
-        width: 100%;
+  .noData {
-        padding: 0 40px;
+    width: 100%;
-        padding-bottom: constant(safe-area-inset-bottom);
+    height: 100%;
-        padding-bottom: env(safe-area-inset-bottom);
+    display: flex;
-        box-sizing: border-box;
+    justify-content: center;
-        position: fixed;
+    align-items: center;
-        bottom:0;
+    color: $color_font_three;
-        font-size: $font_size_medium;
+    font-size: $font_size_medium;
-        color: $color_font_two;
+  }
-        background-color: #fff;
+  .buy_btn {
-        box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16); 
+    width: 100%;
-        .buy_btn_con{
+    padding: 0 40px;
-            display: flex;
+    padding-bottom: constant(safe-area-inset-bottom);
-            justify-content: space-between;
+    padding-bottom: env(safe-area-inset-bottom);
-            align-items: center;
+    box-sizing: border-box;
-            height: 151px;
+    position: fixed;
-        }
+    bottom: 0;
-        .add_cart{
+    font-size: $font_size_medium;
-            width: 260px;
+    color: $color_font_two;
-            height: 90px;
+    background-color: #fff;
-            font-size: $font_size_big;
+    box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.16);
-            text-align: center;
+    .buy_btn_con {
-            line-height: 90px;
+      display: flex;
-            border-radius: 50px;
+      justify-content: space-between;
-            color: #fff;
+      align-items: center;
-            background: linear-gradient(38deg,#5cabff, #7cbcfc 100%, #99ccff 100%);
+      height: 151px;
-        }
-        .select_add_cart{
-            background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
-        }
     }
-}
+    .add_cart {
+      width: 260px;
+      height: 90px;
+      font-size: $font_size_big;
+      text-align: center;
+      line-height: 90px;
+      border-radius: 50px;
+      color: #fff;
+      background: linear-gradient(38deg, #5cabff, #7cbcfc 100%, #99ccff 100%);
+    }
+    .select_add_cart {
+      background: linear-gradient(38deg, #007aff, #4fa6ff 100%, #68b4ff 100%);
+    }
+  }
+}

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

@@ -12,7 +12,7 @@ import { GetColorList } from '@/api/materialColor'
 import { AddShoppingCartApi } from '@/api/shopCart'
 import Taro, { useRouter } from '@tarojs/taro'
 import UseLogin from '@/use/useLogin'
-import { formatHashTag, formatPriceDiv } from '@/common/fotmat'
+import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
 import { getFilterData } from '@/common/util'
 import LabAndImg from '@/components/LabAndImg'
 import VirtualList from '@tarojs/components/virtual-list'
@@ -228,6 +228,7 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
             </View>
             <View className={styles.item_con}>
               <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
+              <View className={styles.weight_error}>空差：{formatWeightDiv(item.weight_error)}kg</View>
               <View className={styles.num}>{formatPrice(item)}</View>
             </View>
             <View className={styles.btn_con}>

src/pages/details/index.module.scss

@@ -1,174 +1,179 @@
-.main{
+.main {
-    min-height: 100%;
+  min-height: 100%;
-    background-color: $color_bg_one;
+  background-color: $color_bg_one;
-    padding-bottom: 100px;
+  padding-bottom: 100px;
-    .product_header{
+  .product_header {
-        padding: 0 20px;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    height: 163.57px;
+    background-color: #fff;
+    .title {
+      flex: 1;
+      .name {
+        font-size: 32px;
+        font-weight: 700;
+        color: $color_font_one;
+        @include common_ellipsis(1);
+      }
+      .des {
+        font-size: $font_size_medium;
+        color: $color_font_three;
+        @include common_ellipsis(1);
+        margin-top: 20px;
+      }
+    }
+    .share,
+    .collect {
+      width: 76px;
+      font-size: $font_size_min;
+      text-align: center;
+      color: $color_font_three;
+      position: relative;
+      .text {
+        margin-top: 10px;
+        font-size: $font_size_medium;
+      }
+    }
+    .shareBtn {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+    }
+    .miconfont {
+      font-size: 45px;
+    }
+    .collected {
+      color: #ffc300;
+    }
+  }
+  .des_data {
+    background-color: #fff;
+    padding: 20px;
+    margin-top: 16px;
+    .title {
+      font-size: $font_size;
+      font-weight: 700;
+      color: $color_font_one;
+      margin-bottom: 20px;
+    }
+    .con {
+      display: grid;
+      grid-template-columns: 260px auto;
+      font-size: $font_size_medium;
+      color: $color_font_three;
+      .des_text {
         display: flex;
-        align-items: center;
+        margin-bottom: 16px;
-        height: 163.57px;
+        text {
-        background-color: #fff;
+          flex: 1;
-        .title{
+          @include common_ellipsis(1);
-            flex:1;
-            .name{
-                font-size: 32px;
-                font-weight: 700;
-                color: $color_font_one;
-                @include common_ellipsis(1);
-            }
-            .des{
-                font-size: $font_size_medium;
-                color: $color_font_three;
-                @include common_ellipsis(1);
-                margin-top: 20px;
-            }
         }
-        .share, .collect {
+      }
-            width: 76px;
+    }
-            font-size: $font_size_min;
+  }
-            text-align: center;
+  .product_color {
-            color: $color_font_three;
+    background-color: #fff;
-            position: relative;
+    margin-top: 16px;
-            .text{
+    padding: 30px 20px 0;
-                margin-top: 10px;
+    color: $color_font_one;
-                font-size: $font_size_medium;
+    font-size: $font_size_medium;
-            }
+    .title {
-        }
+    }
-        .shareBtn {
+    .list {
-            position: absolute;
+      margin-top: 30px;
-            top: 0;
+      display: grid;
-            left: 0;
+      grid-template-columns: 210px 210px 210px;
+      justify-content: space-between;
+      .item {
+        width: 210px;
+        margin-bottom: 28px;
+        .item_color {
+          width: 210px;
+          height: 210px;
+          border-radius: 20px;
+          image {
             width: 100%;
             height: 100%;
-            opacity: 0;
+            border-radius: 20px;
+          }
         }
-        .miconfont{
+        .item_name {
-            font-size: 45px;
+          text-align: center;
+          margin-top: 10px;
+          @include common_ellipsis;
         }
-        .collected{
+        .bulk_price {
-            color: #FFC300;
+          color: #8a8a8a;
+          font-size: 24px;
+          text-align: center;
         }
+      }
     }
-    .des_data{
+  }
-        background-color: #fff;
+  .product_detail {
-        padding: 20px;
+    // padding: 20px;
-        margin-top: 16px;
+    background-color: #fff;
-        .title{
+    margin-top: 16px;
-            font-size: $font_size;
+  }
-            font-weight: 700;
+  .product_buy {
-            color: $color_font_one;
+    display: flex;
-            margin-bottom: 20px;
+    justify-content: space-between;
-        }
+    align-items: center;
-        .con{
+    height: 95px;
-            display: grid;
+    width: 100vw;
-            grid-template-columns: 260px auto;
+    position: fixed;
-            font-size: $font_size_medium;
+    bottom: 0;
-            color: $color_font_three;
+    left: 0;
-            .des_text{
+    background-color: #fff;
-                display: flex;
+    padding-bottom: constant(safe-area-inset-bottom);
-                margin-bottom: 16px;
+    padding-bottom: env(safe-area-inset-bottom);
-                text{
+
-                    flex:1;
+    .buy_cart {
-                    @include common_ellipsis(1);
+      width: 150px;
-                }
+      color: $color_font_three;
-            }
+      text-align: center;
-        }
+      position: relative;
+      .text {
+        font-size: $font_size_min;
+      }
+      .miconfont {
+        font-size: 36px;
+      }
+      .product_num {
+        position: absolute;
+        font-size: 23px;
+        background-color: red;
+        color: #fff;
+        height: 36px;
+        line-height: 36px;
+        padding: 0 6px;
+        border-radius: 72px;
+        min-width: 25px;
+        text-align: center;
+        top: 0;
+        right: 20px;
+      }
     }
-    .product_color{
+    .buy_btn {
-        background-color: #fff;
+      display: flex;
-        margin-top: 16px;
+      justify-content: center;
-        padding: 30px 20px 0;
+      align-items: center;
-        color: $color_font_one;
+      width: 297px;
-        font-size: $font_size_medium;
+      height: 100%;
-        .title{
+      background-color: $color_main;
-            
+      font-size: $font_size;
-        }
+      color: #fff;
-        .list{
+      position: relative;
-            margin-top: 30px;
+      .phoneBtn {
-            display: grid;
+        background-color: rgba(0, 0, 0, 0);
-            grid-template-columns: 210px 210px 210px ;
+        position: absolute;
-            justify-content: space-between;
+        width: 100%;
-            .item {
+        height: 100%;
-                width:210px;
+      }
-                margin-bottom: 20px;
-                .item_color{
-                    width:210px;
-                    height: 210px;
-                    border-radius: 20px;
-                    image{
-                        width: 100%;
-                        height: 100%;
-                        border-radius: 20px;
-                    }
-                }
-                .item_name{
-                    text-align: center;
-                    margin-top: 10px;
-                }
-            }
-        }
     }
-    .product_detail{
+  }
-        // padding: 20px;
+}
-        background-color: #fff;
-        margin-top: 16px;
-    }
-    .product_buy{
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        height:95px;
-        width: 100vw;
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        background-color: #fff;
-        padding-bottom: constant(safe-area-inset-bottom);
-        padding-bottom: env(safe-area-inset-bottom);
-        
-    
-        .buy_cart{
-            width: 150px;
-            color: $color_font_three;
-            text-align: center;
-            position: relative;
-            .text{
-                font-size: $font_size_min;
-            }
-            .miconfont{
-                font-size: 36px;
-            }
-            .product_num{
-                position: absolute;
-                font-size: 23px;
-                background-color: red;
-                color: #fff;
-                height: 36px;
-                line-height: 36px;
-                padding: 0 6px;
-                border-radius: 72px;
-                min-width: 25px;
-                text-align: center;
-                top: 0;
-                right: 20px;
-            }
-        }
-        .buy_btn{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 297px;
-            height: 100%;
-            background-color: $color_main;
-            font-size: $font_size;
-            color: #fff;
-            position: relative;
-            .phoneBtn{
-                background-color: rgba(0, 0, 0, 0);
-                position: absolute;
-                width: 100%;
-                height: 100%;
-            }
-        }
-    }
-}

src/pages/details/index.tsx

@@ -6,7 +6,7 @@ import OrderCount from './components/orderCount'
 import ShopCart from '@/components/shopCart'
 import styles from './index.module.scss'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { formatHashTag, formatImgUrl } from '@/common/fotmat'
+import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/fotmat'
 import { GetProductDetailApi } from '@/api/material'
 import useLogin from '@/use/useLogin'
 import { AnalysisShortCodeApi, GetShortCodeApi } from '@/api/share'
@@ -218,7 +218,8 @@ export default (props: Params) => {
                 <View className={styles.item_color}>
                   <LabAndImg value={{ lab: item.lab, rgb: item.rgb, texture_url: item.texture_url, title: item.code }} showStatus={true} />
                 </View>
-                <View className={styles.item_name}>{item.code}</View>
+                <View className={styles.item_name}>{formatHashTag(item.code, item.name)}</View>
+                <View className={styles.bulk_price}>{formatPriceDiv(item.bulk_price)}/Kg</View>
               </View>
             )
           })}

src/pages/user/index.tsx

@@ -341,7 +341,16 @@ const Main = memo(() => {
               <View className={styles['card-main-list-content-item-right']}>
                 <Text className='iconfont icon-a-moreback'></Text>
               </View>
-              {item.type === 'customer' && <Button openType='contact' className={styles.customer}></Button>}
+              {item.type === 'customer' && (
+                <Button
+                  openType='contact'
+                  // sendMessageTitle='有个靓仔要询货:0770# 21S全棉平纹'
+                  // showMessageCard={true}
+                  // sendMessageImg='https://test.cdn.zzfzyc.com/mall/no_img.png'
+                  // sendMessagePath='/pages/details/index?id=21'
+                  // onContact={(e) => console.log('ee:::', e)}
+                  className={styles.customer}></Button>
+              )}
             </View>
           )
         })}