diff --git a/src/components/counter/index.tsx b/src/components/counter/index.tsx index f6d51f0..5a7cc74 100644 --- a/src/components/counter/index.tsx +++ b/src/components/counter/index.tsx @@ -2,6 +2,7 @@ import { Input, View } from "@tarojs/components" import { useEffect, useMemo, useRef, useState } from "react" import Big from 'big.js' import styles from "./index.module.scss" +import { usePropsValue } from "@/use/useCommon" type params = { minNum?: number, //最小值 maxNum?: number, //最大值 @@ -14,28 +15,31 @@ type params = { unit?: string, disable?: boolean, //是否禁用 } -export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false}: params) => { - const [value, setValue] = useState({count:defaultNum}) - +export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange: onValueChange, onBlue, onClickBtn, unit = '', disable = false}: params) => { + const [value, setValue] = usePropsValue({ + value: defaultNum, + defaultValue: defaultNum, + onChange: (nextValue) => { + onValueChange && onValueChange(nextValue) + } + }) + // 加号 const onPlus = (event) => { event.stopPropagation() if (disable) return false - let { count } = value - let num_res = Big(count).add(step).toNumber() + let num_res = Big(value).add(step).toNumber() num_res = num_res >= maxNum ? maxNum : num_res num_res = formatDigits(num_res) - setValue({ ...value, count: num_res }) - onChange?.(parseFloat(num_res)) + setValue(num_res) onClickBtn?.(parseFloat(num_res)) } + // 减号 const minus = (event) => { event.stopPropagation() if(disable) return false - let {count} = value - let num_res = Big(count).minus(step).toNumber() + let num_res = Big(value).minus(step).toNumber() num_res = num_res < minNum ? minNum : num_res - setValue({...value, count:num_res}) - onChange?.(parseFloat(num_res)) + setValue(num_res) onClickBtn?.(parseFloat(num_res)) } @@ -63,27 +67,23 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, const onInputEven = (e) => { let res = e.detail.value if(res === '') { - setValue({...value, count:minNum}) - onChange?.(minNum) + setValue(minNum) return minNum } else if(!isNaN(Number(res))) { let count = formatDigits(res) count = checkData(count) - setValue({...value, count}) - onChange?.(parseFloat(count as string)) + setValue(count as number) return count } else { let num = parseFloat(res) if (!isNaN(num)) { let count = formatDigits(num) count = checkData(count) - setValue({ ...value, count }) - onChange?.(count as number) + setValue(count as number) return count } else { - setValue({ ...value, count: defaultNum }) - onChange?.(defaultNum) + setValue(defaultNum) return defaultNum } @@ -91,17 +91,17 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, } const onBluerEven = () => { - let num = parseFloat(value.count) + let num = parseFloat(String(value)) console.log('onInputEven res===>', num) if (!isNaN(num)) { let count = formatDigits(num) count = checkData(count) - setValue({ ...value, count }) + setValue(count as number) onBlue?.(count as number) return count } else { - setValue({ ...value, count: defaultNum }) + setValue(defaultNum) onBlue?.(defaultNum) return defaultNum } @@ -116,7 +116,7 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, - - + {unit} diff --git a/src/pages/shopping/components/colorKindItem/index.tsx b/src/pages/shopping/components/colorKindItem/index.tsx index 185868b..5126c4b 100644 --- a/src/pages/shopping/components/colorKindItem/index.tsx +++ b/src/pages/shopping/components/colorKindItem/index.tsx @@ -1,7 +1,7 @@ import { View, Text, Image } from '@tarojs/components' import MCheckbox from '@/components/checkbox' import Counter from '@/components/counter' -import { FC, forwardRef, memo, useCallback } from 'react' +import { FC, forwardRef, memo, useCallback, useEffect, useState } from 'react' import classnames from 'classnames' import styles from './index.module.scss' import { debounce } from '@/common/util' @@ -20,24 +20,35 @@ type PropsType = { } purchaserId: number itemData: Record & object - orderType: EnumSaleMode } -let ColorKindItem: FC = props => { - const { state, purchaserId, itemData, orderType = EnumSaleMode.Bulk } = props +const ColorKindItem: FC = props => { + const { state, purchaserId, itemData } = props const dispatch = useShoppingDispatch() - // console.log('checked==>', checked) + + //格式化数量 + const formatCount = itemData => { + return itemData.sale_mode == EnumSaleMode.Bulk ? itemData.roll : formatMeterDiv(itemData.length) + } + + useEffect(() => { + setCount(formatCount(itemData)) + }, [itemData.roll, itemData.length]) + + + const [count, setCount] = useState(formatCount(itemData)) //格式化金额 const formatPrice = (price: number) => { return Number(formatPriceDiv(price)) } - //格式化数量 - const formatCount = itemData => { - return itemData.sale_mode == EnumSaleMode.Bulk ? itemData.roll : formatMeterDiv(itemData.length) + const handleCountChange = (nextValue: number) => { + setCount(nextValue) } + + //格式化单位 const formatUnit = itemData => { return itemData.sale_mode == EnumSaleMode.Bulk ? '条' : '米' @@ -78,7 +89,7 @@ let ColorKindItem: FC = props => { const { fetchData } = AdjestShoppingCartApi() // 调整条数/米数的接口 并在调整完成后重新请求整个购物车页面 - const getInputValue = debounce(async (num, itemData) => { + const getInputValue = useCallback(debounce(async (num) => { console.log('num===>', num) const targetColor: Record = { roll: 0, @@ -99,7 +110,7 @@ let ColorKindItem: FC = props => { if (res.success) { state?.Observer?.notify(purchaserId) } - }, 460) + }, 460), [itemData]) const labAndImgObj = useCallback(item => { return { lab: item.lab, rgb: item.rgb, texture_url: item.product_color_texture_url } @@ -128,11 +139,12 @@ let ColorKindItem: FC = props => { ¥ {formatPrice(itemData.sale_price)}/{itemData.sale_mode == EnumSaleMode.Plate ? '米' : 'kg'} getInputValue(e, itemData)} - defaultNum={formatCount(itemData)} + onBlue={getInputValue} + defaultNum={count} + onChange={handleCountChange} step={itemData.step} digits={itemData.digits} - onClickBtn={e => getInputValue(e, itemData)} + onClickBtn={getInputValue} unit={formatUnit(itemData)} minNum={itemData.sale_mode == EnumSaleMode.Bulk ? itemData.min_num : formatMeterDiv(itemData.min_num)} maxNum={itemData.sale_mode == EnumSaleMode.Bulk ? itemData.max_num : formatMeterDiv(itemData.max_num)} @@ -153,11 +165,11 @@ const withStateSlice = (comp, slice) => { return memo(forwardRef(Wrapper)) } -ColorKindItem = withStateSlice(ColorKindItem, (state: ShoppingStateContextValue, props: PropsType) => { +const ColorKindItemWithStateSlice = withStateSlice(ColorKindItem, (state: ShoppingStateContextValue, props: PropsType) => { return { multipleSelection: state.colorStore[props.purchaserId]['multipleSelection'], Observer: state.Observer, } }) -export default ColorKindItem +export default ColorKindItemWithStateSlice diff --git a/src/pages/shopping/components/shoppingCartItem/index.tsx b/src/pages/shopping/components/shoppingCartItem/index.tsx index d7a93f1..883e1f9 100644 --- a/src/pages/shopping/components/shoppingCartItem/index.tsx +++ b/src/pages/shopping/components/shoppingCartItem/index.tsx @@ -60,7 +60,7 @@ type PropsType = { } } -let ShoppingCartItem: FC = props => { +const ShoppingCartItem: FC = props => { const { state } = props console.log('props ShoppingCartItem', props) @@ -303,7 +303,7 @@ const GoodsList = memo(props => { itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? ( itemData?.[BackEndSaleModeListFieldMap[selected]].map(item => { console.log('item===>', item) - return + return }) ) : ( 暂无数据 @@ -376,7 +376,7 @@ const withStateSlice = (comp, slice) => { if (JSON.stringify(prevProps.itemData) !== JSON.stringify(nextProps.itemData)) { needMemo = false } - if(prevProps.itemData.purchaser_name === '牛逼哄哄纺织'){ + if(prevProps.itemData.purchaser_name === 'Hhjh'){ console.log('------withStateSlice props-------'); console.log('withStateSlice props prevProps', prevProps); console.log('withStateSlice props nextProps', nextProps); @@ -399,10 +399,10 @@ const withStateSlice = (comp, slice) => { return memo(forwardRef(Wrapper)) } -ShoppingCartItem = withStateSlice(ShoppingCartItem, (state: ShoppingStateContextValue, props) => ({ +const ShoppingCartItemWithStateSlice = withStateSlice(ShoppingCartItem, (state: ShoppingStateContextValue, props) => ({ multipleSelection: state.colorStore?.[props.itemData?.purchaser_id]?.['multipleSelection'], currentCheckedPurchaserId: state.currentCheckedPurchaserId, Observer: state.Observer, })) -export default ShoppingCartItem +export default ShoppingCartItemWithStateSlice diff --git a/src/pages/shopping/index.tsx b/src/pages/shopping/index.tsx index 084f757..3fa50a8 100644 --- a/src/pages/shopping/index.tsx +++ b/src/pages/shopping/index.tsx @@ -74,6 +74,8 @@ const ShoppingCartContainer: FC = () => { useDidShow(() => { // 第二次进入该页面时触发 if (!isFirst.current) { + // 重新刷新 + // setShoppingCartData({ list: [], total: 0 }) fetchData(getFilterData(searchOptions)) } }) @@ -147,9 +149,8 @@ const ShoppingCartContainer: FC = () => { useEffect(() => { if (state.success) { - // startTransition(() => { + console.log('fetch success', state); setShoppingCartData({ list: state.data.list, total: state.data.total }) - // }) } }, [state]) diff --git a/src/use/useCommon.ts b/src/use/useCommon.ts index 0b994e1..8edbc10 100644 --- a/src/use/useCommon.ts +++ b/src/use/useCommon.ts @@ -182,7 +182,7 @@ export function useCustomTabItemTap(callback) { const { selectedId, tabItem } = useSelector(state => { return state.tabBarData }) - const targetPagePayload = tabItem.find(item => item.id === selectedId) + const targetPagePayload = tabItem?.find(item => item.id === selectedId) callback({ index: targetPagePayload?.id, pagePath: targetPagePayload?.pagePath,