diff --git a/src/components/counter/index.tsx b/src/components/counter/index.tsx index 9e8a883..eb53efb 100644 --- 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 ( - - - - - - {unit} - - + + + + - + + + {unit} + + + + + + ) } diff --git a/src/pages/shopping/components/colorKindItem/index.tsx b/src/pages/shopping/components/colorKindItem/index.tsx index 41f8614..265f133 100644 --- 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 & object + itemData: Record & object orderType: EnumSaleMode } @@ -20,11 +20,11 @@ type PropsType = { const ColorKindItem: FC = 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 = 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 = memo( customClassName={classnames(styles.checkbox, checked ? styles.selected : '')} customTextClass={styles.colorKindItem}> - + - {item.product_code}# {item.product_name} + {itemData.product_code}# {itemData.product_name} - {item.product_color_code} - {item.product_color_name} + {itemData.product_color_code} + {itemData.product_color_name} - ￥ {formatPrice(item.sale_price)}/kg + ￥ {formatPrice(itemData.sale_price)}/kg 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 = 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) { diff --git a/src/pages/shopping/components/shoppingCart/index.tsx b/src/pages/shopping/components/shoppingCart/index.tsx index 9717eb7..987cfd8 100644 --- a/src/pages/shopping/components/shoppingCart/index.tsx +++ b/src/pages/shopping/components/shoppingCart/index.tsx @@ -49,14 +49,17 @@ export const ShoppingCart: FC = (props) => { colorStore, setChangedCheckbox(changedGoods) { console.log('changedGoods==>', colorStore, changedGoods) - setColorStore((prev) => ({ - ...prev, - [changedGoods.purchaserId as number]: { - purchaserId: changedGoods.purchaserId, - goodsKind: { ...prev[changedGoods.purchaserId]?.goodsKind, ...changedGoods.goodsKind }, - checked: changedGoods.checked, - }, - })) + setColorStore((prev) => { + const currentGoodsKind = { ...prev[changedGoods.purchaserId]?.goodsKind, ...changedGoods.goodsKind } + return { + ...prev, + [changedGoods.purchaserId as number]: { + purchaserId: changedGoods.purchaserId, + goodsKind: currentGoodsKind, + checked: changedGoods.checked, + }, + } + }) setChangedCheckbox(changedGoods) }, setColorStore, diff --git a/src/pages/shopping/components/shoppingCartItem/index.tsx b/src/pages/shopping/components/shoppingCartItem/index.tsx index 25b9521..1abd600 100644 --- a/src/pages/shopping/components/shoppingCartItem/index.tsx +++ b/src/pages/shopping/components/shoppingCartItem/index.tsx @@ -2,26 +2,30 @@ 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 } const DrawerButton = memo<{ isOpen: boolean }>(({ isOpen }) => { - return {isOpen ? : } + return ( + + {isOpen ? : } + + ) }) enum BackEndSaleModeListFieldMap { @@ -30,7 +34,7 @@ enum BackEndSaleModeListFieldMap { weight_cut_color_list = 2, } -export default memo((props) => { +export default memo(props => { console.log('props==>', props) const { itemData } = props @@ -40,7 +44,7 @@ export default memo((props) => { const [openDetail, setOpenDetail] = useState(false) const handleOpenDetail = () => { - setOpenDetail((isOpen) => !isOpen) + setOpenDetail(isOpen => !isOpen) handleClickLayout() } @@ -64,25 +68,37 @@ export default memo((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(() => { - - const selectedList = itemData?.[BackEndSaleModeListFieldMap[selected]].length !==0 ? itemData?.[BackEndSaleModeListFieldMap[selected]] : [{}] - - selectedList.forEach((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 } }, checked: false, }) }) - + // 向 context 中初始化数据 return itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? ( - itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => { - return + 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 }) ) : ( 暂无数据 @@ -115,6 +131,48 @@ export default memo((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 ( ((props) => { - 已选 {itemData?.[BackEndSaleModeListFieldMap[selected]].filter((item) => item.checked).length} 种面料，1 个颜色，共{' '} - {selected === EnumSaleMode.Bulk ? `${4} 条` : `${4} 米`} + 已选 {materialChecked} 种面料，{colorChecked} 个颜色，共{' '} + {selected === EnumSaleMode.Bulk ? `${lengthOrRollChecked} 条` : `${lengthOrRollChecked} 米`} + {/* + 已选 {0} 种面料，{0} 个颜色，共{' '} + {selected === EnumSaleMode.Bulk ? `${0} 条` : `${0} 米`} + */} @@ -197,7 +259,7 @@ interface ButtonPropsType { customStyle?: React.CSSProperties } // 订单类型 -const SaleModeButton: FC = (props) => { +const SaleModeButton: FC = props => { const { onClick, children, isActive = false, customStyle } = props const handleClick = () => { onClick?.() diff --git a/src/pages/shopping/context/index.ts b/src/pages/shopping/context/index.ts index 541feaa..1fa3664 100644 --- a/src/pages/shopping/context/index.ts +++ b/src/pages/shopping/context/index.ts @@ -27,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 }