电子商城测试版v4

src/components/moveBtn/index.module.scss

@@ -14,7 +14,21 @@
     align-items: center;
     z-index:999;
     .shop_icon{
-        font-size: 50px;
+        font-size: 70px;
         color: $color_main;
     }
+    .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: 0;
+    }
 }

src/components/moveBtn/index.tsx

@@ -3,6 +3,7 @@ import Taro, { useReady } from "@tarojs/taro"
 import { ReactElement, useEffect, useRef, useState } from "react"
 import classnames from "classnames";
 import styles  from './index.module.scss'
+import { GetShoppingCartApi } from "@/api/shopCart";
 
 type param = {
     children?: ReactElement|null,
@@ -22,6 +23,19 @@ export default ({children = null, onClick}:param) => {
         setShowMoveBtn(true)
     })
 
+    //获取数据
+    const [list, setList] = useState<any[]>([])
+    const {fetchData} = GetShoppingCartApi()
+    const getShoppingCart = async () => {
+        const {data} = await fetchData()
+        let color_list = data.color_list||[]
+        setList(color_list)
+    }
+
+    useEffect(() => {
+        getShoppingCart()
+    }, [])
+
     const dragEnd = (e) => {
 
     }
@@ -31,6 +45,7 @@ export default ({children = null, onClick}:param) => {
             {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>
+              {(list.length > 0)&&<View className={styles.product_num}>{list.length > 99?'99+':list.length}</View>}
             </MovableView>}
         </MovableArea>
     )