对接完添加购物车

src/components/shopCart/index.module.scss

@@ -59,7 +59,6 @@
                 .checkbox{
                     display: flex;
                     align-items: center;
-                    
                 }
                 .img{
                     width: 126px;
@@ -80,6 +79,7 @@
                    .title{
                        font-size: $font_size;
                        color: $color_font_one;
+                       @include common_ellipsis;
                    }
                    .subtitle{
                        color: $color_font_two;
@@ -101,6 +101,7 @@
                 display: flex;
                 flex-direction: column;
                 justify-content: space-between;
+                align-items: flex-end;
                 .price{
                     font-size: $font_size;
                     font-weight: 700;

src/components/shopCart/index.tsx

@@ -5,17 +5,24 @@ import MCheckbox from "@/components/checkbox";
 import LoadingCard from "@/components/loadingCard";
 import InfiniteScroll from "@/components/infiniteScroll";
 import styles from "./index.module.scss"
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import Taro from "@tarojs/taro";
 import { goLink } from "@/common/common";
 import {GetShoppingCartApi} from "@/api/shopCart"
+import { formatHashTag, formatMillionYuan } from "@/common/fotmat";
 
 type param = {
     show?: true|false,
     onClose?: () => void
 }
 export default ({show = false, onClose}: param) => {
-    const selectList = ['不限', '剪板', '散剪', '大货']
+    const selectList = [
+        {title:'不限', unit:'', eunit:''},
+        {title:'大货', unit:'件', eunit:'kg'},
+        {title:'剪板', unit:'米', eunit:'m'}, 
+        {title:'散剪', unit:'米', eunit:'kg'}, 
+    ]
+
     const [selectIndex, setSelectIndex] = useState(0)
     const selectProduct = (index:number) => {
         setSelectIndex(index)
@@ -28,7 +35,8 @@ export default ({show = false, onClose}: param) => {
     const getShoppingCart = async () => {
         setLoading(true)
         const {data} = await fetchData()
-        setList(data)
+        console.log('color_list::', data)
+        setList(data.color_list)
         setLoading(false)
     }
 
@@ -94,7 +102,16 @@ export default ({show = false, onClose}: param) => {
         })
     }
 
-    
+    //格式化金额
+    const formatPirce = useCallback((price) => {
+        const {num} = formatMillionYuan(price, 100)
+        return Number(num)
+    }, [])
+
+    //格式化数量
+    const formatCount = useCallback((item) => {
+        return item.sale_mode == 0? item.roll + '件': item.length + 'm'
+    }, [])
     
     return (
         <View className={styles.shop_cart_main}>
@@ -109,15 +126,15 @@ export default ({show = false, onClose}: param) => {
                     </View>
                     <View className={styles.search}>
                         {selectList.map((item, index) => {
-                            return <View key={index} onClick={() => selectProduct(index)} className={classnames(styles.search_item, (selectIndex==index)&&styles.search_item_select)}>{item}</View>
+                            return <View key={index} onClick={() => selectProduct(index)} className={classnames(styles.search_item, (selectIndex==index)&&styles.search_item_select)}>{item.title}</View>
                         })}
                     
                     </View>
                     <View className={styles.con}>
                         {loading&&<LoadingCard/>}
-                        {!loading&&list.length > 0&&<InfiniteScroll  refresherTriggered={true} refresherEnabled={true} selfonScrollToLower={() => {console.log('触底了')}} paddingBottom={100}>
+                        {!loading&&list?.length > 0&&<InfiniteScroll  refresherTriggered={true} refresherEnabled={true} moreStatus={false} >
                             <View className={styles.product_list}>
-                                {list.map((item, index) => {
+                                {list?.map((item, index) => {
                                     return <View key={index} className={styles.product_item}>
                                         <View className={styles.checkbox}>
                                         <MCheckbox status={item.select} onSelect={() => selectCallBack(item)} onClose={() => colseCallBack(item)}/>
@@ -126,19 +143,19 @@ export default ({show = false, onClose}: param) => {
                                             <Image src="https://bpic.588ku.com//back_origin_min_pic/22/01/11/aa3da17bab9a6556564028e4f1d77874.jpg!/fw/750/quality/99/unsharp/true/compress/true"/>
                                         </View>
                                         <View className={styles.des}>
-                                            <View className={styles.title}>{item.title}</View>
-                                            <View className={styles.subtitle}>07703# 21S单面平纹(食毛)</View>
-                                            <View className={styles.tag}>剪板</View>
+                                            <View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
+                                            <View className={styles.subtitle}>{item.product_color_code +' ' + item.product_color_name}</View>
+                                            <View className={styles.tag}>{item.sale_mode_name}</View>
                                         </View>
                                         <View className={styles.count}>
-                                            <View className={styles.price}><text>￥</text>40.5<text>/kg</text></View>
-                                            <View className={styles.long}>×12m</View>
+                                            <View className={styles.price}><text>￥</text>{formatPirce(item.sale_price)}<text>/kg</text></View>
+                                            <View className={styles.long}>×{formatCount(item)}</View>
                                         </View>
                                     </View>
                                 })}
                             </View>
                         </InfiniteScroll>}
-                        {!loading&&list.length == 0 &&<View className={styles.empty}>
+                        {!loading&&list?.length == 0 &&<View className={styles.empty}>
                             <View className={styles.title}>暂未选择商品</View>
                             <View className={styles.btn}>去选购</View>
                         </View>}