🎈 perf(优化购物车):

src/components/shopCart/components/productItem/index.module.scss

@@ -0,0 +1,96 @@
+.product_item {
+  display: flex;
+  align-items: center;
+  &:nth-child(n + 2) {
+    margin-top: 37px;
+  }
+  .checkbox {
+    display: flex;
+    align-items: center;
+  }
+  .img {
+    width: 126px;
+    height: 126px;
+    margin-left: 20px;
+    image {
+      width: 100%;
+      height: 100%;
+      border-radius: 10px;
+    }
+  }
+  .des {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-left: 20px;
+    padding-right: 10px;
+    box-sizing: border-box;
+
+    .subtitle {
+      color: $color_font_two;
+      font-size: $font_size_medium;
+      margin: 10px 0;
+    }
+    .tag {
+      font-size: $font_size_min;
+      color: #fff;
+      background-color: $color_main;
+      border-radius: 10px;
+      width: 65px;
+      height: 33px;
+      text-align: center;
+      line-height: 33px;
+    }
+  }
+
+  .count {
+    display: flex;
+    justify-content: space-between;
+    .btn_count {
+      width: 235px;
+      height: 64px;
+      background-color: #ecf5ff;
+      border-radius: 40px 0px 16px 0px;
+      padding: 0 20px;
+      display: flex;
+      align-items: center;
+    }
+
+    .long {
+      color: $color_main;
+      font-size: $font_size_medium;
+    }
+  }
+  .product_item_name {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    color: #3c3c3c;
+  }
+  .product_item_name_header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    margin-left: 20px;
+    font-size: 28px;
+    .price {
+      font-size: $font_size;
+      font-weight: 700;
+      color: $color_font_one;
+      text {
+        font-size: $font_size_min;
+      }
+    }
+    .title {
+      font-size: $font_size;
+      color: $color_font_one;
+      padding-right: 10px;
+      @include common_ellipsis;
+      flex: 1;
+    }
+  }
+}
+.no_product_item_select {
+  opacity: 0.3;
+}

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

@@ -0,0 +1,93 @@
+import { View } from '@tarojs/components'
+import { memo, useCallback, useMemo } from 'react'
+import classnames from 'classnames'
+import styles from './index.module.scss'
+import MCheckbox from '@/components/checkbox'
+import Counter from '@/components/counter'
+import LabAndImg from '@/components/LabAndImg'
+import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/fotmat'
+import { saleModeType } from '@/common/enum'
+type param = {
+  sale_model: saleModeType
+  onChangeSelect: (val: any) => any
+  onChangeCount: (val: any) => any
+
+  item: any
+}
+
+export default memo((props: param) => {
+  let { onChangeCount, onChangeSelect, item, sale_model } = props
+
+  const selectCallBack = useCallback(() => {
+    onChangeSelect({ ...item, selected: true })
+  }, [item])
+  const colseCallBack = useCallback(() => {
+    onChangeSelect({ ...item, selected: false })
+  }, [item])
+  const getLabAndImg = useCallback(() => {}, [])
+  const getInputValue = useCallback(
+    (e) => {
+      let roll = item.sale_mode == 0 ? parseFloat(e) : 0
+      let length = item.sale_mode != 0 ? parseFloat(e) * 100 : 0
+      onChangeCount({ ...item, roll, length })
+    },
+    [item],
+  )
+  const rga = useMemo(() => {
+    return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url, title: item.product_color_code }
+  }, [item])
+
+  console.log('刷新2：：', item)
+
+  //格式化金额
+  const formatPirce = useCallback((price) => {
+    return Number(formatPriceDiv(price))
+  }, [])
+  //格式化数量
+  const formatCount = useCallback((item) => {
+    return item.sale_mode == 0 ? item.roll : item.length / 100
+  }, [])
+  //格式化单位
+  const formatUnit = useCallback((item) => {
+    return item.sale_mode == 0 ? '条' : '米'
+  }, [])
+  return (
+    <View className={classnames(styles.product_item, sale_model != item.sale_mode && styles.no_product_item_select)}>
+      <View className={styles.checkbox}>
+        <MCheckbox status={item.selected} onSelect={selectCallBack} onClose={colseCallBack} disabled={sale_model != item.sale_mode} />
+      </View>
+      <View className={styles.img}>
+        <LabAndImg value={rga} showStatus={false} onClick={getLabAndImg} />
+      </View>
+      <View className={styles.product_item_name}>
+        <View className={styles.product_item_name_header}>
+          <View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
+          <View className={styles.price}>
+            <text>￥</text>
+            {formatPirce(item.sale_price)}
+            <text>/{item.eunit}</text>
+          </View>
+        </View>
+        <View className={styles.count}>
+          <View className={styles.des}>
+            <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.btn_count}>
+            <Counter
+              onBlue={getInputValue}
+              defaultNum={formatCount(item)}
+              step={item.step}
+              digits={item.digits}
+              onClickBtn={getInputValue}
+              unit={formatUnit(item)}
+              minNum={item.minNum}
+              maxNum={item.maxNum}
+              disabled={sale_model != item.sale_mode}
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+})

src/components/shopCart/index copy.tsx

@@ -0,0 +1,408 @@
+import { Image, ScrollView, View } from '@tarojs/components'
+import Popup from '@/components/popup'
+import classnames from 'classnames'
+import MCheckbox from '@/components/checkbox'
+import LoadingCard from '@/components/loadingCard'
+import InfiniteScroll from '@/components/infiniteScroll'
+import styles from './index.module.scss'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import Taro from '@tarojs/taro'
+import { alert, goLink } from '@/common/common'
+import { GetShoppingCartApi, DelShoppingCartApi, UpdateShoppingCartApi } from '@/api/shopCart'
+import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/fotmat'
+import { setParam } from '@/common/system'
+import { debounce, throttle } from '@/common/util'
+import Counter from '../counter'
+import { ApplyOrderAccessApi, GetAdminUserInfoApi, SubscriptionMessageApi } from '@/api/user'
+import useCommonData from '@/use/useCommonData'
+import BindSalesmanPopup from '../bindSalesmanPopup'
+import LabAndImgShow from '../LabAndImgShow'
+import LabAndImg from '../LabAndImg'
+
+type param = {
+  show?: true | false
+  onClose?: () => void
+  intoStatus?: 'again' | 'shop'
+  default_sale_mode?: number //面料类型（0：大货， 1：剪版，2：散剪
+}
+export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode }: param) => {
+  const selectList = [
+    { value: 0, title: '大货', unit: '条', eunit: 'kg', step: 1, digits: 0, minNum: 1, maxNum: 100000, defaultNum: 1 },
+    { value: 1, title: '剪板', unit: '米', eunit: 'm', step: 1, digits: 2, minNum: 0.5, maxNum: 9.99, defaultNum: 1 },
+    { value: 2, title: '散剪', unit: '米', eunit: 'kg', step: 1, digits: 2, minNum: 3, maxNum: 100000, defaultNum: 3 },
+  ]
+
+  //切换面料类型
+  const [selectIndex, setSelectIndex] = useState(default_sale_mode || 0)
+  const selectProduct = (index: number) => {
+    setSelectIndex(index)
+  }
+  useEffect(() => {
+    setSelectIndex(() => default_sale_mode!)
+  }, [default_sale_mode])
+
+  useEffect(() => {
+    resetList()
+    setSelectStatus(true)
+  }, [selectIndex])
+
+  const MCheckboxRef = useRef(null)
+
+  //获取购物车数据数量
+  const { setShopCount } = useCommonData()
+
+  //重置勾选数据
+  const resetList = () => {
+    list?.map((item) => {
+      if (selectIndex == item.sale_mode || selectIndex == -1) {
+        checkboxData[item.id] = true
+      } else {
+        checkboxData[item.id] = false
+      }
+    })
+    setCheckboxData(() => ({ ...checkboxData }))
+  }
+
+  //获取数据
+  const [list, setList] = useState<any[]>([])
+  const [loading, setLoading] = useState(false)
+  const { fetchData } = GetShoppingCartApi()
+  const getShoppingCart = async () => {
+    const { data } = await fetchData()
+    let color_list = data.color_list || []
+    setShopCount(color_list.length)
+    initList(color_list)
+    setList(color_list)
+    setLoading(false)
+  }
+
+  //初始化全部数据默认勾选
+  const [checkboxData, setCheckboxData] = useState<{ [index: number]: true | false }>({})
+  const initStatus = useRef(false)
+  const initList = (color_list) => {
+    if (initStatus.current) {
+      color_list?.map((item) => {
+        if (selectIndex == item.sale_mode) checkboxData[item.id] = true
+      })
+      initStatus.current = false
+    }
+    setCheckboxData(() => checkboxData)
+  }
+
+  //显示是展示数据
+  useEffect(() => {
+    if (!show) {
+      setList([])
+      setSelectIndex(default_sale_mode || 0)
+    } else {
+      setLoading(true)
+      initStatus.current = true
+      getShoppingCart()
+      setShowBindSalesman(() => false)
+    }
+  }, [show])
+
+  useEffect(() => {
+    return () => {
+      setList([])
+    }
+  }, [])
+
+  const [showPopup, setShowPopup] = useState(false)
+  useEffect(() => {
+    setShowPopup(show)
+  }, [show])
+
+  //全选反选
+  const [selectStatus, setSelectStatus] = useState(false)
+  const selectAll = () => {
+    list.map((item) => {
+      if (selectIndex == item.sale_mode || selectIndex == -1) checkboxData[item.id] = !selectStatus
+    })
+    setSelectStatus(!selectStatus)
+    setCheckboxData(() => ({ ...checkboxData }))
+  }
+
+  //checkbox选中回调
+  const selectCallBack = useCallback((item) => {
+    checkboxData[item.id] = true
+    checkSelect()
+    setCheckboxData((e) => ({ ...e, ...checkboxData }))
+  }, [])
+
+  //checkbox选中判断是否全部选中，全部选中后是全选，否则反选
+  const checkSelect = () => {
+    let list_count = 0
+    let select_count = 0
+    list?.map((item) => {
+      if (selectIndex == -1 || selectIndex == item.sale_mode) {
+        list_count++
+        if (checkboxData[item.id]) select_count++
+      }
+    })
+    setSelectStatus(select_count == list_count)
+  }
+
+  //checkbox关闭回调
+  const colseCallBack = useCallback((item) => {
+    checkboxData[item.id] = false
+    checkSelect()
+    setCheckboxData((e) => ({ ...e, ...checkboxData }))
+  }, [])
+
+  //popup关闭
+  const closePopup = () => {
+    onClose?.()
+    setShowPopup(false)
+  }
+
+  //删除购物车内容
+  const { fetchData: delShopFetchData } = DelShoppingCartApi()
+  const delSelect = () => {
+    getSelectId()
+    if (selectIds.current.length <= 0) return alert.none('请选择要删除的面料!')
+    Taro.showModal({
+      content: '删除所选商品？',
+      success: async function (res) {
+        if (res.confirm) {
+          const res = await delShopFetchData({ id: selectIds.current })
+          if (res.success) {
+            getShoppingCart()
+            Taro.showToast({
+              title: '成功',
+              icon: 'success',
+            })
+          } else {
+            Taro.showToast({
+              title: res.msg,
+              icon: 'none',
+            })
+          }
+        } else if (res.cancel) {
+          console.log('用户点击取消')
+        }
+      },
+    })
+  }
+
+  //获取面料选中的id
+  const selectIds = useRef<number[]>([])
+  const getSelectId = () => {
+    selectIds.current = []
+    list?.map((item) => {
+      if (selectIndex == -1 || selectIndex == item.sale_mode) {
+        checkboxData[item.id] && selectIds.current.push(item.id)
+      }
+    })
+  }
+
+  //格式化金额
+  const formatPirce = useCallback((price) => {
+    return Number(formatPriceDiv(price))
+  }, [])
+
+  //格式化数量
+  const formatCount = useCallback((item) => {
+    return item.sale_mode == 0 ? item.roll : item.length / 100
+  }, [])
+
+  //格式化单位
+  const formatUnit = useCallback((item) => {
+    return item.sale_mode == 0 ? '条' : '米'
+  }, [])
+
+  //预估金额和总条数
+  const estimatePrice = useMemo(() => {
+    let estimate_amount = 0
+    let product_list = new Set() //面料
+    let color_count = 0 //颜色数量
+    let all_count = 0 //总数量
+    list.map((item) => {
+      if (checkboxData[item.id]) {
+        estimate_amount += item.estimate_amount
+        product_list.add(item.product_id)
+        color_count++
+        all_count += item.sale_mode == 0 ? item.roll : item.length
+      }
+    })
+    let all_count_text = selectIndex == 0 ? all_count + ' 条' : all_count / 100 + ' 米'
+    return {
+      price: Number(formatPriceDiv(estimate_amount)).toFixed(2),
+      countText: `已选 ${product_list.size} 种面料，${color_count} 个颜色，共 ${all_count_text}`,
+      color_count,
+    }
+  }, [list, checkboxData])
+
+  //去结算
+  const { fetchData: useFetchData } = GetAdminUserInfoApi()
+  const { fetchData: applyOrderAccessFetchData } = ApplyOrderAccessApi()
+  const orderDetail = throttle(async () => {
+    let res = await useFetchData()
+    if (res.data.order_access_status !== 3) {
+      if (res.data.order_access_status == 1) applyOrderAccessFetchData()
+      setShowBindSalesman(() => true)
+      onClose?.()
+      return false
+    }
+    getSelectId()
+    if (selectIds.current.length == 0) {
+      alert.error('请选择面料')
+    } else {
+      let ids = selectIds.current.join('-')
+      setParam({ ids, sale_mode: selectIndex }) //临时存储
+      closePopup()
+      if (intoStatus == 'again') {
+        goLink('/pages/order/comfirm', {}, 'redirectTo')
+      } else {
+        goLink('/pages/order/comfirm')
+      }
+    }
+  }, 500)
+
+  //计数组件-当后端修改完成才修改前端显示
+  const { fetchData: fetchDataUpdateShoppingCart } = UpdateShoppingCartApi()
+  const [UpdateShoppingCartLoading, setUpdateShoppingCartLoading] = useState(false)
+  const getInputValue = debounce(async (num, item) => {
+    let roll = item.sale_mode == 0 ? parseFloat(num) : 0
+    let length = item.sale_mode != 0 ? parseFloat(num) * 100 : 0
+    setUpdateShoppingCartLoading(() => true)
+    let res = await fetchDataUpdateShoppingCart({ id: item.id, roll, length })
+    setUpdateShoppingCartLoading(() => false)
+    if (res.success) {
+      getShoppingCart()
+    }
+  }, 300)
+
+  //绑定业务员和电话号码
+  const [showBindSalesman, setShowBindSalesman] = useState(false)
+
+  //显示图片弹窗
+  const [showLabImage, setShowLabImage] = useState(false)
+  const [labImageValue, setLabImageValue] = useState()
+  const getLabAndImg = useCallback((val) => {
+    setShowLabImage(() => true)
+    setLabImageValue(val)
+  }, [])
+  const closeLabImgShow = useCallback(() => {
+    setShowLabImage(() => false)
+  }, [])
+
+  return (
+    <View className={styles.shop_cart_main}>
+      <Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
+        <View className={styles.popup_con}>
+          <View className={styles.header}>
+            <View onClick={selectAll}>{!selectStatus ? '全选' : '反选'}</View>
+            <View onClick={delSelect}>
+              <text className={classnames('iconfont', 'icon-shanchu', styles.miconfont)}></text>
+              删除所选
+            </View>
+          </View>
+          <View className={styles.count_all}>{estimatePrice.countText}</View>
+          <View className={styles.search}>
+            {selectList.map((item) => {
+              return (
+                <View
+                  key={item.value}
+                  onClick={() => selectProduct(item.value)}
+                  className={classnames(styles.search_item, selectIndex == item.value && styles.search_item_select)}>
+                  {item.title}
+                </View>
+              )
+            })}
+          </View>
+          <View className={styles.con}>
+            {loading && <LoadingCard />}
+            {!loading && list?.length > 0 && (
+              <InfiniteScroll moreStatus={false}>
+                <View className={styles.product_list}>
+                  {list?.map((item) => {
+                    return (
+                      <View
+                        key={item}
+                        className={classnames(styles.product_item, selectIndex != -1 && selectIndex != item.sale_mode && styles.no_product_item_select)}>
+                        <View className={styles.checkbox}>
+                          <MCheckbox
+                            disabled={selectIndex != -1 && selectIndex != item.sale_mode}
+                            status={!!checkboxData[item.id]}
+                            onSelect={() => selectCallBack(item)}
+                            onClose={() => colseCallBack(item)}
+                          />
+                        </View>
+                        <View className={styles.img}>
+                          <LabAndImg
+                            value={{ lab: item.lab, rgb: item.rgb, texture_url: item.texture_url, title: item.product_color_code }}
+                            showStatus={false}
+                            onClick={getLabAndImg}
+                          />
+                        </View>
+                        <View className={styles.product_item_name}>
+                          <View className={styles.product_item_name_header}>
+                            <View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
+                            <View className={styles.price}>
+                              <text>￥</text>
+                              {formatPirce(item.sale_price)}
+                              <text>/{selectList[item.sale_mode].eunit}</text>
+                            </View>
+                          </View>
+                          <View className={styles.count}>
+                            <View className={styles.des}>
+                              <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.btn_count}>
+                              <Counter
+                                onBlue={(e) => getInputValue(e, item)}
+                                defaultNum={formatCount(item)}
+                                step={selectList[selectIndex].step}
+                                digits={selectList[selectIndex].digits}
+                                onClickBtn={(e) => getInputValue(e, item)}
+                                unit={formatUnit(item)}
+                                minNum={selectList[selectIndex].minNum}
+                                maxNum={selectList[selectIndex].maxNum}
+                                disable={UpdateShoppingCartLoading}
+                              />
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    )
+                  })}
+                </View>
+              </InfiniteScroll>
+            )}
+            {!loading && list?.length == 0 && (
+              <View className={styles.empty}>
+                <View className={styles.title}>暂未选择商品</View>
+                <View className={styles.btn}>去选购</View>
+              </View>
+            )}
+          </View>
+          <View className={styles.buy_btn}>
+            <View className={styles.buy_con}>
+              <View className={styles.icon}>
+                <View className={classnames('iconfont', 'icon-gouwuche', styles.miconfont)}></View>
+              </View>
+              <View className={styles.price_con}>
+                <View className={styles.price_real}>
+                  <text>￥</text>
+                  {estimatePrice.price}
+                </View>
+                <View className={styles.price_forecast}>预估金额</View>
+              </View>
+              <View className={styles.goPay} onClick={() => orderDetail()}>
+                去结算({estimatePrice.color_count})
+              </View>
+            </View>
+          </View>
+        </View>
+      </Popup>
+      <View>
+        <BindSalesmanPopup show={showBindSalesman} onClose={() => setShowBindSalesman(false)} />
+      </View>
+      <View>
+        <LabAndImgShow value={labImageValue} show={showLabImage} onClose={closeLabImgShow} />
+      </View>
+    </View>
+  )
+}

src/components/shopCart/index.tsx

@@ -18,23 +18,36 @@ import useCommonData from '@/use/useCommonData'
 import BindSalesmanPopup from '../bindSalesmanPopup'
 import LabAndImgShow from '../LabAndImgShow'
 import LabAndImg from '../LabAndImg'
+import ProductItem from './components/productItem'
+import { saleModeType } from '@/common/enum'
 
 type param = {
   show?: true | false
   onClose?: () => void
   intoStatus?: 'again' | 'shop'
-  default_sale_mode?: number //面料类型（0：大货， 1：剪版，2：散剪
+  default_sale_mode?: saleModeType //面料类型（0：大货， 1：剪版，2：散剪
+}
+type modelClassType = {
+  value: saleModeType
+  title: string
+  unit: string
+  step: number
+  digits: number
+  minNum: number
+  maxNum: number
+  defaultNum: number
+  eunit: string
 }
 export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode }: param) => {
-  const selectList = [
+  const selectList: modelClassType[] = [
     { value: 0, title: '大货', unit: '条', eunit: 'kg', step: 1, digits: 0, minNum: 1, maxNum: 100000, defaultNum: 1 },
     { value: 1, title: '剪板', unit: '米', eunit: 'm', step: 1, digits: 2, minNum: 0.5, maxNum: 9.99, defaultNum: 1 },
     { value: 2, title: '散剪', unit: '米', eunit: 'kg', step: 1, digits: 2, minNum: 3, maxNum: 100000, defaultNum: 3 },
   ]
 
   //切换面料类型
-  const [selectIndex, setSelectIndex] = useState(default_sale_mode || 0)
+  const [selectIndex, setSelectIndex] = useState<saleModeType>(default_sale_mode || 0)
-  const selectProduct = (index: number) => {
+  const selectProduct = (index: 0 | 1 | 2) => {
     setSelectIndex(index)
   }
   useEffect(() => {
@@ -49,63 +62,78 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
   //获取购物车数据数量
   const { setShopCount } = useCommonData()
 
-  //重置勾选数据
+  //获取所有数据数据
-  const resetList = () => {
+  const [list, setList] = useState<{ [id: number]: any }>({})
-    list?.map((item) => {
-      if (selectIndex == item.sale_mode || selectIndex == -1) {
-        checkboxData[item.id] = true
-      } else {
-        checkboxData[item.id] = false
-      }
-    })
-    setCheckboxData(() => ({ ...checkboxData }))
-  }
-
-  //获取数据
-  const [list, setList] = useState<any[]>([])
   const [loading, setLoading] = useState(false)
-  const { fetchData } = GetShoppingCartApi()
+  const { fetchData: getShoppingFetchData } = GetShoppingCartApi()
   const getShoppingCart = async () => {
-    const { data } = await fetchData()
+    const { data } = await getShoppingFetchData()
     let color_list = data.color_list || []
-    setShopCount(color_list.length)
     initList(color_list)
-    setList(color_list)
     setLoading(false)
   }
 
-  //初始化全部数据默认勾选
+  //更新单条数据
-  const [checkboxData, setCheckboxData] = useState<{ [index: number]: true | false }>({})
+  const getShoppingCartInfo = async (item) => {
-  const initStatus = useRef(false)
+    const res = await getShoppingFetchData({ id: item.id })
-  const initList = (color_list) => {
+    if (res.success) {
-    if (initStatus.current) {
+      let info = res.data.color_list[0]
-      color_list?.map((item) => {
+      let newInfo = {
-        if (selectIndex == item.sale_mode) checkboxData[item.id] = true
+        ...item,
-      })
+        estimate_amount: info.estimate_amount,
-      initStatus.current = false
+        estimate_weight: info.estimate_weight,
+        lab: info.lab,
+        roll: info.roll,
+        length: info.length,
+        sale_offset: info.sale_offset,
+        sale_price: info.sale_price,
+        standard_price: info.standard_price,
+      }
+      setList((e) => ({ ...e, [item['id']]: newInfo }))
     }
-    setCheckboxData(() => checkboxData)
   }
 
-  //显示是展示数据
+  const listData = useMemo(() => {
+    return Object.values(list)
+  }, [list])
+
+  //初始化全部数据默认勾选
+  const initList = (color_list) => {
+    let obj = {}
+    color_list?.map((item) => {
+      item.selected = selectIndex == item.sale_mode
+      const { unit, eunit, step, digits, minNum, maxNum } = selectList[item.sale_mode]
+      item = { ...item, unit, eunit, step, digits, minNum, maxNum }
+      obj[item.id] = item
+    })
+    setList(() => ({ ...obj }))
+  }
+
+  //重置勾选数据
+  const resetList = () => {
+    Object.values(list)?.map((item) => {
+      if (selectIndex == item.sale_mode) {
+        item.selected = true
+      } else {
+        item.selected = false
+      }
+      list[item['id']] = { ...item }
+    })
+    setList(() => ({ ...list }))
+  }
+
+  //显示时展示数据
   useEffect(() => {
     if (!show) {
-      setList([])
+      setList({})
       setSelectIndex(default_sale_mode || 0)
     } else {
       setLoading(true)
-      initStatus.current = true
       getShoppingCart()
       setShowBindSalesman(() => false)
     }
   }, [show])
 
-  useEffect(() => {
-    return () => {
-      setList([])
-    }
-  }, [])
-
   const [showPopup, setShowPopup] = useState(false)
   useEffect(() => {
     setShowPopup(show)
@@ -114,39 +142,38 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
   //全选反选
   const [selectStatus, setSelectStatus] = useState(false)
   const selectAll = () => {
-    list.map((item) => {
+    Object.values(list)?.map((item) => {
-      if (selectIndex == item.sale_mode || selectIndex == -1) checkboxData[item.id] = !selectStatus
+      if (selectIndex == item.sale_mode) {
+        item.selected = !selectStatus
+        list[item['id']] = { ...item }
+      }
     })
+    setList(() => ({ ...list }))
     setSelectStatus(!selectStatus)
-    setCheckboxData(() => ({ ...checkboxData }))
-  }
-
-  //checkbox选中回调
-  const selectCallBack = (item) => {
-    checkboxData[item.id] = true
-    checkSelect()
-    setCheckboxData(() => ({ ...checkboxData }))
   }
 
   //checkbox选中判断是否全部选中，全部选中后是全选，否则反选
-  const checkSelect = () => {
+  useEffect(() => {
     let list_count = 0
     let select_count = 0
-    list?.map((item) => {
+    Object.values(list)?.map((item) => {
-      if (selectIndex == -1 || selectIndex == item.sale_mode) {
+      if (selectIndex == item.sale_mode) {
         list_count++
-        if (checkboxData[item.id]) select_count++
+        if (item.selected) select_count++
       }
     })
     setSelectStatus(select_count == list_count)
-  }
+  }, [list])
 
-  //checkbox关闭回调
+  //修改数量
-  const colseCallBack = (item) => {
+  const onChangeCount = useCallback((item) => {
-    checkboxData[item.id] = false
+    getInputValue(item)
-    checkSelect()
+  }, [])
-    setCheckboxData(() => ({ ...checkboxData }))
+
-  }
+  //修改选择
+  const onChangeSelect = useCallback((item) => {
+    setList((e) => ({ ...e, [item.id]: { ...item } }))
+  }, [])
 
   //popup关闭
   const closePopup = () => {
@@ -187,49 +214,35 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
   const selectIds = useRef<number[]>([])
   const getSelectId = () => {
     selectIds.current = []
-    list?.map((item) => {
+    Object.values(list)?.map((item) => {
-      if (selectIndex == -1 || selectIndex == item.sale_mode) {
+      if (selectIndex == item.sale_mode) {
-        checkboxData[item.id] && selectIds.current.push(item.id)
+        item.selected && selectIds.current.push(item.id)
       }
     })
   }
 
-  //格式化金额
-  const formatPirce = useCallback((price) => {
-    return Number(formatPriceDiv(price))
-  }, [])
-
-  //格式化数量
-  const formatCount = useCallback((item) => {
-    return item.sale_mode == 0 ? item.roll : item.length / 100
-  }, [])
-
-  //格式化单位
-  const formatUnit = useCallback((item) => {
-    return item.sale_mode == 0 ? '条' : '米'
-  }, [])
-
   //预估金额和总条数
   const estimatePrice = useMemo(() => {
     let estimate_amount = 0
     let product_list = new Set() //面料
     let color_count = 0 //颜色数量
     let all_count = 0 //总数量
-    list.map((item) => {
+    Object.values(list)?.map((item) => {
-      if (checkboxData[item.id]) {
+      if (item.selected) {
         estimate_amount += item.estimate_amount
         product_list.add(item.product_id)
         color_count++
-        all_count += item.sale_mode == 0 ? item.roll : item.length
+        all_count += item.sale_mode == 0 ? parseFloat(item.roll) : parseFloat(item.length)
       }
     })
     let all_count_text = selectIndex == 0 ? all_count + ' 条' : all_count / 100 + ' 米'
+    console.log('text::', list)
     return {
       price: Number(formatPriceDiv(estimate_amount)).toFixed(2),
       countText: `已选 ${product_list.size} 种面料，${color_count} 个颜色，共 ${all_count_text}`,
       color_count,
     }
-  }, [list, checkboxData])
+  }, [list])
 
   //去结算
   const { fetchData: useFetchData } = GetAdminUserInfoApi()
@@ -250,7 +263,7 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
       setParam({ ids, sale_mode: selectIndex }) //临时存储
       closePopup()
       if (intoStatus == 'again') {
-        goLink('/pages/order/comfirm', {}, 'redirectTo')
+        goLink('/pages/order/comfirm', null, 'redirectTo')
       } else {
         goLink('/pages/order/comfirm')
       }
@@ -259,15 +272,13 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
 
   //计数组件-当后端修改完成才修改前端显示
   const { fetchData: fetchDataUpdateShoppingCart } = UpdateShoppingCartApi()
-  const [UpdateShoppingCartLoading, setUpdateShoppingCartLoading] = useState(false)
+  const getInputValue = debounce(async (item) => {
-  const getInputValue = debounce(async (num, item) => {
+    let res = await fetchDataUpdateShoppingCart({ id: item.id, roll: item.roll, length: item.length })
-    let roll = item.sale_mode == 0 ? parseFloat(num) : 0
-    let length = item.sale_mode != 0 ? parseFloat(num) * 100 : 0
-    setUpdateShoppingCartLoading(() => true)
-    let res = await fetchDataUpdateShoppingCart({ id: item.id, roll, length })
-    setUpdateShoppingCartLoading(() => false)
     if (res.success) {
-      getShoppingCart()
+      console.log('item修改：：', item)
+      getShoppingCartInfo(item)
+    } else {
+      setList((e) => ({ ...e }))
     }
   }, 300)
 
@@ -311,65 +322,16 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
           </View>
           <View className={styles.con}>
             {loading && <LoadingCard />}
-            {!loading && list?.length > 0 && (
+            {!loading && listData?.length > 0 && (
               <InfiniteScroll moreStatus={false}>
                 <View className={styles.product_list}>
-                  {list?.map((item) => {
+                  {listData?.map((item) => {
-                    return (
+                    return <ProductItem sale_model={selectIndex} onChangeCount={onChangeCount} onChangeSelect={onChangeSelect} item={item} />
-                      <View
-                        key={item}
-                        className={classnames(styles.product_item, selectIndex != -1 && selectIndex != item.sale_mode && styles.no_product_item_select)}>
-                        <View className={styles.checkbox}>
-                          <MCheckbox
-                            disabled={selectIndex != -1 && selectIndex != item.sale_mode}
-                            status={!!checkboxData[item.id]}
-                            onSelect={() => selectCallBack(item)}
-                            onClose={() => colseCallBack(item)}
-                          />
-                        </View>
-                        <View className={styles.img}>
-                          <LabAndImg
-                            value={{ lab: item.lab, rgb: item.rgb, texture_url: item.texture_url, title: item.product_color_code }}
-                            showStatus={false}
-                            onClick={getLabAndImg}
-                          />
-                        </View>
-                        <View className={styles.product_item_name}>
-                          <View className={styles.product_item_name_header}>
-                            <View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
-                            <View className={styles.price}>
-                              <text>￥</text>
-                              {formatPirce(item.sale_price)}
-                              <text>/{selectList[item.sale_mode].eunit}</text>
-                            </View>
-                          </View>
-                          <View className={styles.count}>
-                            <View className={styles.des}>
-                              <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.btn_count}>
-                              <Counter
-                                onBlue={(e) => getInputValue(e, item)}
-                                defaultNum={formatCount(item)}
-                                step={selectList[selectIndex].step}
-                                digits={selectList[selectIndex].digits}
-                                onClickBtn={(e) => getInputValue(e, item)}
-                                unit={formatUnit(item)}
-                                minNum={selectList[selectIndex].minNum}
-                                maxNum={selectList[selectIndex].maxNum}
-                                disable={UpdateShoppingCartLoading}
-                              />
-                            </View>
-                          </View>
-                        </View>
-                      </View>
-                    )
                   })}
                 </View>
               </InfiniteScroll>
             )}
-            {!loading && list?.length == 0 && (
+            {!loading && listData?.length == 0 && (
               <View className={styles.empty}>
                 <View className={styles.title}>暂未选择商品</View>
                 <View className={styles.btn}>去选购</View>