✨ feat:解决冲突

2022-09-27 17:16:43 +08:00 · 2022-09-27 17:16:43 +08:00 · 7362e5bca6
commit 7362e5bca6
parent 9377ea964f e8bc813d11
16 changed files with 188 additions and 105 deletions
--- a/package.json
+++ b/package.json
@ -80,7 +80,7 @@
    "eslint-plugin-react-hooks": "^4.2.0",
    "react-refresh": "0.11.0",
    "stylelint": "9.3.0",
-    "taro-iconfont-svg": "^1.0.7",
+    "taro-iconfont-svg": "^1.0.8",
    "terser-webpack-plugin": "^5.3.6",
    "typescript": "^4.1.0",
    "webpack": "^5.74.0"
--- a/src/common/common.ts
+++ b/src/common/common.ts
@ -11,6 +11,7 @@ type ParamLink = 'navigateTo' | 'switchTab' | 'reLaunch' | 'redirectTo'
 export const goLink = (path = '', params = {}, way: ParamLink = 'navigateTo') => {
  if (path) {
    let params_str = Qs.stringify(params)
+    console.log('params_str==>', params_str)
    path = params_str ? path + '?' + params_str : path
    Taro[way]({ url: path })
  }
--- a/src/common/constant.js
+++ b/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 = `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.42:50001/lymarket` //  杰
 // export const BASE_URL = `http://192.168.1.95:40001/lymarket` //  华

--- a/src/components/counter/index.tsx
+++ b/src/components/counter/index.tsx
@ -98,20 +98,22 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
            onBlue?.(defaultNum)
        }
    }   
+    const noop = (e) => {
+        e.stopPropagation()
+
+    }
    return (
      <View className={styles.main}>
-            <View className={styles.reduce} onClick={minus}>-</View>
-            <View className={styles.input}>
-                <Input 
-                    value={String(value.count)}
-                    onInput={onInputEven}
-                    onBlur={onBluerEven}
-                    type='digit'
-                    disabled={disable}
-                />
+        <View className={styles.reduce} onClick={minus}>
+          -
+        </View>
+        <View className={styles.input} onClick={noop}>
+          <Input value={String(value.count)} onInput={onInputEven} onBlur={onBluerEven} type='digit' disabled={disable} />
          <View className={styles.unit}>{unit}</View>
        </View>
-            <View className={styles.plus} onClick={onPlus}>+</View>
+        <View className={styles.plus} onClick={onPlus}>
+          +
+        </View>
      </View>
    )
 }
--- a/src/components/iconText/index.tsx
+++ b/src/components/iconText/index.tsx
@ -8,6 +8,7 @@ type PropsType = {
  iconName: IconNames
  iconSize?: number
  svg?: boolean
+  color?: string,
  text?: string
  children?: React.ReactNode
  customClass?: string
@ -16,10 +17,10 @@ type PropsType = {
 }

 const IconText: FC<PropsType> = (props) => {
-  const { children, svg = false, iconName, iconSize = 40, text = '' } = props
+  const { children, svg = false, iconName, iconSize = 40, text = '', color } = props
  return (
    <View className={classnames(styles.iconText, props.customStyle, props.customClass)}>
-      {svg ? <IconFont name={iconName} size={iconSize}></IconFont> : <Text className={classnames('iconfont', iconName, styles.iconfont)}></Text>}
+      {svg ? <IconFont name={iconName} size={iconSize} color={color}></IconFont> : <Text className={classnames('iconfont', iconName, styles.iconfont)}></Text>}
      {children ? children : <Text className={classnames(props.textClassName)}>{text}</Text>}
    </View>
  )
--- a/src/components/iconfont/iconfont.tsx
+++ b/src/components/iconfont/iconfont.tsx
@ -4,7 +4,7 @@ import "./iconfont.scss";
 import Taro from "@tarojs/taro";
 import classnames from "classnames";

-const initSvgSize = (36 / 750) * Taro.getSystemInfoSync().windowWidth
+const SystemWidth = Taro.getSystemInfoSync().windowWidth
 const quot = '"'

 function hex2rgb(hex) {
@ -43,7 +43,7 @@ const IconFont:FC<PropsType> = ({
 }) => {
  const [colors, setColors] = useState<PropsType['color']>()
  const [isStr, setIsStr] = useState(true)
-  const [svgSize, setSvgSize] = useState(initSvgSize)
+  const [svgSize, setSvgSize] = useState(() => (size / 750) * SystemWidth)

  useEffect(() => {
    setIsStr(typeof color === 'string')
@ -60,7 +60,7 @@ const IconFont:FC<PropsType> = ({
  }, [color])

  useEffect(() => {
-    setSvgSize((size / 750) * Taro.getSystemInfoSync().windowWidth)
+    setSvgSize((size / 750) * SystemWidth)
  }, [size])

  // 也可以使用 if (name === 'xxx') { return <view> } 来渲染，但是测试发现在ios下会有问题，报错 Maximum call stack啥的。下面这个写法没问题
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@ -76,7 +76,7 @@ export default () => {
        setRefresherTriggeredStatus(true)
    }
    
-    const onj = JSON.parse(Taro.getStorageSync('userInfo'))
+    const onj = JSON.parse(Taro.getStorageSync('userInfo') || '{}')
    const [search, setSearchObj] = useState({
        modeId: 0,
        goodsId: null,
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@ -75,7 +75,10 @@ const Login: FC = () => {
      alert.error('登陆失败')
    }
  }
-
+  // 处理忘记密码的逻辑
+  const handleForgetPwd = () => {
+    Taro.showToast({ title: '联系客服:0757-86834274', icon: 'none' })
+  }

  return (
    <View className={styles.login}>
@ -108,7 +111,7 @@ const Login: FC = () => {
              记住密码
            </MCheckbox>
          </View>
-          <View className={styles['login-option']}>
+          <View className={styles['login-option']} onClick={handleForgetPwd}>
            <Text className={styles.isForgetPwd}>忘记密码？</Text>
          </View>
        </View>
--- a/src/pages/shopping/components/colorKindItem/index.tsx
+++ b/src/pages/shopping/components/colorKindItem/index.tsx
@ -12,7 +12,7 @@ import { selectList } from '../../config'
 import { useShoppingContext, useWatch } from '../../context'
 type PropsType = {
  purchaserId: number
-  item: Record<string, any> & object
+  itemData: Record<string, any> & object
  orderType: EnumSaleMode
 }

@ -20,11 +20,11 @@ type PropsType = {

 const ColorKindItem: FC<PropsType> = memo(
  (props) => {
-    const { purchaserId, item, orderType = EnumSaleMode.Bulk } = props
-    console.log('重新渲染 ColorKindItem', item.id, orderType, purchaserId)
+    const { purchaserId, itemData, orderType = EnumSaleMode.Bulk } = props
+    console.log('重新渲染 ColorKindItem', itemData.id, orderType, purchaserId)
    const { setChangedCheckbox, colorStore } = useShoppingContext()
    // @ts-ignore
-    const { checked } = useWatch(purchaserId, item?.id)
+    const { checked } = useWatch(purchaserId, itemData?.id)

    //格式化金额
    const formatPrice = useCallback((price) => {
@ -32,36 +32,36 @@ const ColorKindItem: FC<PropsType> = memo(
    }, [])

    //格式化数量
-    const formatCount = useCallback((item) => {
-      return item.sale_mode == EnumSaleMode.Bulk ? item.roll : item.length / 100
+    const formatCount = useCallback((itemData) => {
+      return itemData.sale_mode == EnumSaleMode.Bulk ? itemData.roll : itemData.length / 100
    }, [])

    //格式化单位
-    const formatUnit = useCallback((item) => {
-      return item.sale_mode == EnumSaleMode.Bulk ? '条' : '米'
+    const formatUnit = useCallback((itemData) => {
+      return itemData.sale_mode == EnumSaleMode.Bulk ? '条' : '米'
    }, [])

    const handleSelect = () => {
      console.log('handleSelect')
      setChangedCheckbox({
        purchaserId: purchaserId,
-        goodsKind: { [item.id]: { id: item.id, estimate_amount: item.estimate_amount, checked: true } },
+        goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: true } },
        checked: colorStore[purchaserId].checked,
      })
    }
    const handleClose = () => {
      setChangedCheckbox({
        purchaserId: purchaserId,
-        goodsKind: { [item.id]: { id: item.id, estimate_amount: item.estimate_amount, checked: false } },
+        goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: false } },
        checked: colorStore[purchaserId].checked,
      })
    }

-    const getInputValue = debounce(async (num, item) => {
-      if (item.sale_mode === EnumSaleMode.Bulk) {
-        item.roll = num
+    const getInputValue = debounce(async (num, itemData) => {
+      if (itemData.sale_mode === EnumSaleMode.Bulk) {
+        itemData.roll = num
      } else {
-        item.length = num
+        itemData.length = num
      }
    }, 300)

@ -73,27 +73,27 @@ const ColorKindItem: FC<PropsType> = memo(
        customClassName={classnames(styles.checkbox, checked ? styles.selected : '')}
        customTextClass={styles.colorKindItem}>
        <View className={styles['colorKindItem__left']}>
-          <Image className={styles['colorKindItem__left--image']} mode='aspectFill' src={formatImgUrl(item.product_color_texture_url)}></Image>
+          <Image className={styles['colorKindItem__left--image']} mode='aspectFill' src={formatImgUrl(itemData.product_color_texture_url)}></Image>
        </View>
        <View className={styles['colorKindItem__center']}>
          <Text className={styles['colorKindItem__center--title']}>
-            {item.product_code}# {item.product_name}
+            {itemData.product_code}# {itemData.product_name}
          </Text>
          <View className={styles['colorKindItem__center--detail']}>
-            <Text className={styles['colorKindItem__center--ID']}>{item.product_color_code}</Text>
-            <Text className={styles['colorKindItem__center--description']}>{item.product_color_name}</Text>
+            <Text className={styles['colorKindItem__center--ID']}>{itemData.product_color_code}</Text>
+            <Text className={styles['colorKindItem__center--description']}>{itemData.product_color_name}</Text>
          </View>
        </View>
        <View className={styles['colorKindItem__right']}>
-          <View className={styles['colorKindItem__right--price']}>￥ {formatPrice(item.sale_price)}/kg</View>
+          <View className={styles['colorKindItem__right--price']}>￥ {formatPrice(itemData.sale_price)}/kg</View>
          <View className={styles['colorKindItem__right--counter']}>
            <Counter
-              onBlue={(e) => getInputValue(e, item)}
-              defaultNum={formatCount(item)}
+              onBlue={(e) => getInputValue(e, itemData)}
+              defaultNum={formatCount(itemData)}
              step={selectList[orderType].step}
              digits={selectList[orderType].digits}
-              onClickBtn={(e) => getInputValue(e, item)}
-              unit={formatUnit(item)}
+              onClickBtn={(e) => getInputValue(e, itemData)}
+              unit={formatUnit(itemData)}
              minNum={selectList[orderType].minNum}
              maxNum={selectList[orderType].maxNum}
            />
@ -103,8 +103,8 @@ const ColorKindItem: FC<PropsType> = memo(
    )
  },
  (preProp, nextProp) => {
-    const stringifyPreProp = JSON.stringify(preProp.item)
-    const stringifyNextProp = JSON.stringify(nextProp.item)
+    const stringifyPreProp = JSON.stringify(preProp.itemData)
+    const stringifyNextProp = JSON.stringify(nextProp.itemData)
    console.log('memo==>', preProp, nextProp)
    let needMemoized = true
    if (preProp.purchaserId !== nextProp.purchaserId) {
--- a/src/pages/shopping/components/shoppingCart/index.tsx
+++ b/src/pages/shopping/components/shoppingCart/index.tsx
@ -49,14 +49,17 @@ export const ShoppingCart: FC<ShoppingCartPropsType> = (props) => {
      colorStore,
      setChangedCheckbox(changedGoods) {
        console.log('changedGoods==>', colorStore, changedGoods)
-        setColorStore((prev) => ({
+        setColorStore((prev) => {
+          const currentGoodsKind = { ...prev[changedGoods.purchaserId]?.goodsKind, ...changedGoods.goodsKind }
+          return {
            ...prev,
            [changedGoods.purchaserId as number]: {
              purchaserId: changedGoods.purchaserId,
-            goodsKind: { ...prev[changedGoods.purchaserId]?.goodsKind, ...changedGoods.goodsKind },
+              goodsKind: currentGoodsKind,
              checked: changedGoods.checked,
            },
-        }))
+          }
+        })
        setChangedCheckbox(changedGoods)
      },
      setColorStore,
--- a/src/pages/shopping/components/shoppingCartItem/index.module.scss
+++ b/src/pages/shopping/components/shoppingCartItem/index.module.scss
@ -76,9 +76,6 @@
  display: flex;
  justify-content: center;
  align-items: center;
-  Text {
-    font-size: 52px;
-  }
 }

 .drawerOpen {
--- a/src/pages/shopping/components/shoppingCartItem/index.tsx
+++ b/src/pages/shopping/components/shoppingCartItem/index.tsx
@ -2,18 +2,19 @@ import { Text, View } from '@tarojs/components'
 import { FC, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import classnames from 'classnames'
-import { formatPriceDiv } from '@/common/format'
+import { formatMeterDiv, formatPriceDiv } from '@/common/format'
 import Taro, { useDidShow } from '@tarojs/taro'
 import LayoutBlock from '@/components/layoutBlock'
 import MCheckbox from '@/components/checkbox'
 import Tag from '@/components/tag'
 import Divider from '@/components/divider'
-import NormalButton from '@/components/normalButton'
 import ColorKindItem from '../colorKindItem'
 import { EnumSaleMode } from '@/common/Enumerate'
 import { useNeedMemoCallback } from '@/use/useCommon'
 import { selectList } from '../../config'
-import { useShoppingContext } from '../../context'
+import { Goods, useShoppingContext } from '../../context'
+import IconFont from '@/components/iconfont/iconfont'
+import { isEmptyObject } from '@/common/common'

 type PropsType = {
  itemData?: ShoppingCartData
@ -21,7 +22,9 @@ type PropsType = {

 const DrawerButton = memo<{ isOpen: boolean }>(({ isOpen }) => {
  return (
-    <View className={styles.drawerButton}>{isOpen ? <Text className='iconfont icon-shouqi'></Text> : <Text className='iconfont icon-zhankai'></Text>}</View>
+    <View className={styles.drawerButton}>
+      {isOpen ? <IconFont name='icon-shouqi' size={52}></IconFont> : <IconFont name='icon-zhankai' size={52}></IconFont>}
+    </View>
  )
 })

@ -31,7 +34,7 @@ enum BackEndSaleModeListFieldMap {
  weight_cut_color_list = 2,
 }

-export default memo<PropsType>((props) => {
+export default memo<PropsType>(props => {
  console.log('props==>', props)
  const { itemData } = props

@ -41,7 +44,7 @@ export default memo<PropsType>((props) => {
  const [openDetail, setOpenDetail] = useState(false)

  const handleOpenDetail = () => {
-    setOpenDetail((isOpen) => !isOpen)
+    setOpenDetail(isOpen => !isOpen)
    handleClickLayout()
  }

@ -65,20 +68,37 @@ export default memo<PropsType>((props) => {
    weight_cut_color_list: itemData?.weight_cut_color_list,
  }

-  const { setChangedCheckbox, currentCheckedPurchaserId, setCurrentCheckedPurchaserId, isManageStatus, setSelectedAmount, colorStore } = useShoppingContext()
+  const { setChangedCheckbox, currentCheckedPurchaserId, setCurrentCheckedPurchaserId, isManageStatus, setSelectedAmount, colorStore, currentCheckedSaleMode } = useShoppingContext()

  const memoList = useMemo(() => {
-    return itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? (
-      itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
-        console.log('memoList itemData', item)
+    const selectedList = itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? itemData?.[BackEndSaleModeListFieldMap[selected]] : [{}]
+    // 给每一个客户都初始化一个 checked 状态
+    selectedList.forEach(() => {
      // 初始化选中状态
      setChangedCheckbox({
-          purchaserId: itemData.purchaser_id,
-          goodsKind: { [item.id]: { id: item.id, estimate_amount: item.estimate_amount, checked: false } },
+        purchaserId: itemData?.purchaser_id!,
        checked: false,
      })
-
-        return <ColorKindItem purchaserId={itemData.purchaser_id} key={item.id} item={item} orderType={selected}></ColorKindItem>
+    })
+    // 向 context 中初始化数据
+    return itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? (
+      itemData?.[BackEndSaleModeListFieldMap[selected]].map(item => {
+        setChangedCheckbox({
+          purchaserId: itemData?.purchaser_id!,
+          goodsKind: {
+            [item?.id]: {
+              id: item?.id,
+              estimate_amount: item.estimate_amount,
+              checked: false,
+              product_code: item.product_code,
+              product_color_code: item.product_color_code,
+              sale_mode: item.sale_mode,
+              count: selected === EnumSaleMode.Bulk ? item.roll : Number(formatMeterDiv(item.length)),
+            },
+          },
+          checked: false,
+        })
+        return <ColorKindItem purchaserId={itemData.purchaser_id} key={item.id} itemData={item} orderType={selected}></ColorKindItem>
      })
    ) : (
      <View className={styles.noList}>暂无数据</View>
@ -111,6 +131,48 @@ export default memo<PropsType>((props) => {
      checked: false,
    })
  }
+  // 统计已选面料
+  const materialChecked = useMemo(() => {
+    const targetGoodsKind = colorStore?.[itemData?.purchaser_id!]?.['goodsKind']
+    console.log('targetGoodsKind==>', targetGoodsKind)
+    if (!targetGoodsKind || isEmptyObject(targetGoodsKind)) return 0
+    return new Set(
+      Object.values(targetGoodsKind)?.reduce((prev, item: Goods) => {
+        if (item.checked && item.sale_mode === selected) {
+          return [...prev, item.product_code]
+        }
+        return prev
+      }, []),
+    ).size
+  }, [colorStore, currentCheckedPurchaserId, selected, itemData])
+
+  // 统计已选颜色
+  const colorChecked = useMemo(() => {
+    const targetGoodsKind = colorStore?.[itemData?.purchaser_id!]?.['goodsKind']
+    if (!targetGoodsKind || isEmptyObject(targetGoodsKind)) return 0
+    return new Set(
+      Object.values(targetGoodsKind).reduce((prev, item: Goods) => {
+        if (item.checked && item.sale_mode === selected) {
+          return [...prev, item.product_color_code]
+        }
+        return prev
+      }, []),
+    ).size
+  }, [colorStore, currentCheckedPurchaserId, selected, itemData])
+
+  // 统计已选条数 / 米数
+  const lengthOrRollChecked = useMemo(() => {
+    const targetGoodsKind = colorStore?.[itemData?.purchaser_id!]?.['goodsKind']
+    if (!targetGoodsKind || isEmptyObject(targetGoodsKind)) return 0
+    return (
+      Object.values(targetGoodsKind).reduce((prev, item: Goods) => {
+        if (item.checked && item.sale_mode === selected) {
+          return prev + item.count
+        }
+        return prev
+      }, 0) || 0
+    )
+  }, [colorStore, currentCheckedPurchaserId, selected, itemData])

  return (
    <LayoutBlock
@ -135,9 +197,13 @@ export default memo<PropsType>((props) => {
            </View>
            <View className={styles.summary}>
              <Text>
-                已选 {itemData?.[BackEndSaleModeListFieldMap[selected]].filter((item) => item.checked).length} 种面料，1 个颜色，共{' '}
-                {selected === EnumSaleMode.Bulk ? `${4} 条` : `${4} 米`}
+                已选 {materialChecked} 种面料，{colorChecked} 个颜色，共{' '}
+                {selected === EnumSaleMode.Bulk ? `${lengthOrRollChecked} 条` : `${lengthOrRollChecked} 米`}
              </Text>
+              {/* <Text>
+                已选 {0} 种面料，{0} 个颜色，共{' '}
+                {selected === EnumSaleMode.Bulk ? `${0} 条` : `${0} 米`}
+              </Text> */}
            </View>
          </View>
          <DrawerButton isOpen={openDetail} />
@ -193,7 +259,7 @@ interface ButtonPropsType {
  customStyle?: React.CSSProperties
 }
 // 订单类型
-const SaleModeButton: FC<ButtonPropsType> = (props) => {
+const SaleModeButton: FC<ButtonPropsType> = props => {
  const { onClick, children, isActive = false, customStyle } = props
  const handleClick = () => {
    onClick?.()
--- a/src/pages/shopping/context/index.ts
+++ b/src/pages/shopping/context/index.ts
@ -1,4 +1,3 @@
-import { EnumSaleMode } from '@/common/Enumerate'
 import React, { useRef } from 'react'
 import { useContext } from 'react'

@ -28,12 +27,19 @@ export type ColorStore = {

 export type Goods = {
  id: number
+  product_code: number   // 面料编号
+  product_color_code: number // 颜色编号
  estimate_amount: number // 预估金额
+  count: number    // 已选的条数或米数
+  sale_mode: number
  checked: boolean
 }
 // 分组
 export interface GoodsMeta {
  purchaserId: number
+  // materialChecked: number  // 已选 x 种面料
+  // colorChecked: number    // 已选 x 颜色
+  // lengthOrRollChecked: number   // 共 x 条  共 x 米
  goodsKind?: {
    [id: number]: Goods
  }
--- a/src/pages/shopping/index.tsx
+++ b/src/pages/shopping/index.tsx
@ -1,7 +1,7 @@
 import Search from '@/components/search'
 import { View } from '@tarojs/components'
 import Taro, { useDidShow } from '@tarojs/taro'
-import React, { FC, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import React, { FC, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import classnames from 'classnames'
 import IconText from '@/components/iconText'
@ -12,7 +12,7 @@ import { formatPriceDiv } from '@/common/format'
 import BottomSettleBar from './components/bottomSettleBar'
 import BottomEditBar from './components/bottomEditBar'
 import { ShoppingCartDeleteApi, ShoppingCartListApi } from '@/api/index'
-import { dataLoadingStatus } from '@/common/util'
+import { dataLoadingStatus, debounce } from '@/common/util'
 import { ShoppingCart, TriggerCheckboxOptions } from './components/shoppingCart/index'
 import { GoodsMeta, Goods, useShoppingCart, useShoppingContext } from './context'
 import { alert, goLink } from '@/common/common'
@ -60,7 +60,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
  const { fetchData, state } = ShoppingCartListApi()

  // 输入了搜索关键字
-  const getSearchData = useCallback((e) => {
+  const getSearchData = useCallback(e => {
    fetchData({ short_name_or_phone: e })
    // pageNum.current.page = 1
    // setOrderData(() => ({ list: [], total: 0 }))
@ -74,7 +74,8 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
    return dataLoadingStatus({ list: shoppingCartData.list, total: shoppingCartData.total, status: state.loading })
  }, [shoppingCartData, state])

-  useDidShow(() => {
+  // useLayoutEffect 执行在DOM更新之后，浏览器绘制之前 如果放在 useEffect 里面会产生多一次不必要的回流和重绘，可能会引起视图闪现
+  useLayoutEffect(() => {
    ;(async () => {
      await fetchData()
      let query = Taro.createSelectorQuery()
@ -82,7 +83,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
      query.select('#shoppingContainer').boundingClientRect()
      query.select('#topBar').boundingClientRect()
      query.select('#bottomBar').boundingClientRect()
-      query.exec((res) => {
+      query.exec(res => {
        console.log('res==>', res)
        const containerHeight = res[0].height
        const topBarHeight = res[1].height
@ -91,26 +92,29 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
        setListHeight(listHeight + 'px')
      })
    })()
-  })
+  }, [])

  useEffect(() => {
    setShoppingCartData({ list: state.data, total: state.data.length })
  }, [state])

  // 结算
-  const handleSettleAccount = () => {
+  const handleSettleAccount = debounce(() => {
    const targetGoodsKind = colorStore?.[currentCheckedPurchaserId]?.['goodsKind']
-    if (!targetGoodsKind) return
+    if (!targetGoodsKind) return Taro.showToast({ title: '请先选择客户', icon: 'error' })
+    const checkedGoodsKind = Object.values(targetGoodsKind).reduce((prev, item: Goods) => {
+      if (item.checked) {
+        return [...prev,item.id]
+      }
+      return prev
+    }, [])
+    if (checkedGoodsKind.length === 0) return Taro.showToast({ title: '请先选择商品', icon: 'error' })
    goLink('/pages/submitOrder/index', {
      purchaser_id: currentCheckedPurchaserId,
      sale_mode: currentCheckedSaleMode,
-      shopping_cart_product_color_list: JSON.stringify(Object.values(targetGoodsKind).map((item: Goods) => {
-        if (item.checked) {
-          return item.id
-        }
-      }))
+      shopping_cart_product_color_list: JSON.stringify(checkedGoodsKind),
    })
-  }
+  }, 400)

  const { fetchData: deleteApi } = ShoppingCartDeleteApi()

@ -138,7 +142,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
  // 全选
  const handleSelectAllCheckbox = (isSelectAll: boolean) => {
    console.log('handleSelectAllCheckbox', isSelectAll)
-    const tempObject = colorStore
+    const tempObject = {}
    Object.entries(colorStore).forEach(([key, value]) => {
      tempObject[key] = {
        ...value,
@ -155,9 +159,9 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
        <Search placeholder='请输入客户名称' showBtn={false} changeOnSearch={getSearchData} debounceTime={300}>
          <View className={styles.flexBox} onClick={onStartToManage}>
            {isManageStatus ? (
-              <IconText iconName='icon-guanlidingdan' text='取消' customClass={styles['icon--manage--cancel']} />
+              <IconText svg iconName='icon-guanlidingdan' text='取消' color='#4581ff' customClass={styles['icon--manage--cancel']} />
            ) : (
-              <IconText iconName='icon-guanlidingdan' text='管理' />
+              <IconText svg iconName='icon-guanlidingdan' text='管理' />
            )}
          </View>
        </Search>
@ -174,7 +178,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
      </View>
      <View id='bottomBar'>
        {isManageStatus ? (
-          <BottomEditBar onDelete={handleDelete} onSelectCheckbox={(isAll) => handleSelectAllCheckbox(isAll)}></BottomEditBar>
+          <BottomEditBar onDelete={handleDelete} onSelectCheckbox={isAll => handleSelectAllCheckbox(isAll)}></BottomEditBar>
        ) : (
          <BottomSettleBar onSettleAccount={handleSettleAccount} amount={selectedAmount}></BottomSettleBar>
        )}
--- a/src/pages/user/index.tsx
+++ b/src/pages/user/index.tsx
@ -128,10 +128,10 @@ const UserInfo: FC = () => {
      <LayoutBlock circle>
        <View className={styles.topBar}>
          <View className={styles.left}>
-            <UserAvatar src={userInfo.userInfo.avatar_url} />
+            <UserAvatar src={userInfo.userInfo?.avatar_url} />
          </View>
          <View className={styles.middle}>
-            <Text className={styles.username}>{userInfo.userInfo.user_name}</Text>
+            <Text className={styles.username}>{userInfo.userInfo?.user_name}</Text>
            <Text className={styles.userno}>{userInfo.userInfo.user_code}</Text>
          </View>
          <View className={styles.right}>
--- a/yarn.lock
+++ b/yarn.lock
@ -12704,10 +12704,10 @@ taro-css-to-react-native@3.3.10:
    css-mediaquery "^0.1.2"
    postcss-value-parser "^3.3.0"

-taro-iconfont-svg@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/taro-iconfont-svg/-/taro-iconfont-svg-1.0.7.tgz#953c842b3cd8865be9ee434b7fb9a86e4f7827d7"
-  integrity sha512-sPXvxRQW5EfWLHKdLRgpV2xIId0m7GHhYlSOgGMKqj9a6ibNcATXaklL2KYWfX9ogshi/bdOBTCuPdAqPIgXPg==
+taro-iconfont-svg@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/taro-iconfont-svg/-/taro-iconfont-svg-1.0.8.tgz#7b9c20a45a8ce53bb737816eaba2d1aebe196c2b"
+  integrity sha512-nxKx7yGAd+HUVo7FK0PW1AbAuoZgGyUN3tL4kDKeCaGEAxtyEfET2giYt1uTK/eC4WOAZcQnCqyrFM6j8E/wpg==
  dependencies:
    "@tarojs/taro" "^3.5.5"
    classnames "^2.3.2"