From 9a759f67f138004fde6d70823318a59fd53c0480 Mon Sep 17 00:00:00 2001 From: xuan Date: Tue, 18 Oct 2022 19:02:13 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=84=20refactor(=E8=B4=AD=E7=89=A9?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2):=20=E4=BC=98=E5=8C=96=E8=B4=AD=E7=89=A9?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=88=87=E6=8D=A2=E8=AE=A2=E5=8D=95=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=E7=9A=84=E6=B8=B2=E6=9F=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- project.private.config.json | 7 + .../components/bottomSettleBar/index.tsx | 5 +- .../components/colorKindItem/index.tsx | 53 ++++-- .../components/shoppingCart/index.tsx | 101 ++++------- .../shoppingCartItem/index.module.scss | 5 +- .../components/shoppingCartItem/index.tsx | 163 ++++++++++++------ src/pages/shopping/context/index.ts | 117 ++++++++----- src/pages/shopping/index.tsx | 71 +++++--- src/pages/user/index.tsx | 2 +- src/styles/common.scss | 3 + 10 files changed, 323 insertions(+), 204 deletions(-) diff --git a/project.private.config.json b/project.private.config.json index 3cd4c04..b20639c 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -169,6 +169,13 @@ "query": "orderId=28503", "launchMode": "default", "scene": null + }, + { + "name": "", + "pathName": "pages/saleStatistic/index", + "query": "", + "launchMode": "default", + "scene": null } ] } diff --git a/src/pages/shopping/components/bottomSettleBar/index.tsx b/src/pages/shopping/components/bottomSettleBar/index.tsx index 624f486..27111c2 100644 --- a/src/pages/shopping/components/bottomSettleBar/index.tsx +++ b/src/pages/shopping/components/bottomSettleBar/index.tsx @@ -8,8 +8,9 @@ type PropsType = { onSettleAccount?: Function } -export default memo(props => { +export default props => { const { onSettleAccount, amount = 0 } = props + console.log('amount==>', amount) const handleSettle = () => { onSettleAccount && onSettleAccount() @@ -31,4 +32,4 @@ export default memo(props => { ) -}) +} diff --git a/src/pages/shopping/components/colorKindItem/index.tsx b/src/pages/shopping/components/colorKindItem/index.tsx index 98a9d1d..2cb02d2 100644 --- a/src/pages/shopping/components/colorKindItem/index.tsx +++ b/src/pages/shopping/components/colorKindItem/index.tsx @@ -9,7 +9,7 @@ import { formatImgUrl, formatPriceDiv } from '@/common/format' import { EnumSaleMode } from '@/common/Enumerate' import { useNeedMemoCallback } from '@/use/useCommon' import { selectList } from '../../config' -import { useShoppingContext, useWatch } from '../../context' +import { ShoppingDispatchType, useShoppingDispatch, useShoppingState } from '../../context' type PropsType = { purchaserId: number itemData: Record & object @@ -19,39 +19,55 @@ type PropsType = { // 注意：如果在表单控件内部使用 useWatch，由于是直接从Context中取值，memo也会直接失去作用。 const ColorKindItem: FC = memo( - (props) => { + props => { + console.log('Rerender component: ColorKindItem') const { purchaserId, itemData, orderType = EnumSaleMode.Bulk } = props - const { setChangedCheckbox, colorStore } = useShoppingContext() + const { colorStore } = useShoppingState() + const dispatch = useShoppingDispatch() // @ts-ignore - const { checked } = useWatch(purchaserId, itemData?.id) + const { checked } = colorStore[purchaserId]['goodsKind']![itemData.id] || { checked: false } //格式化金额 - const formatPrice = useCallback((price) => { + const formatPrice = (price: number) => { return Number(formatPriceDiv(price)) - }, []) + } //格式化数量 - const formatCount = useCallback((itemData) => { + const formatCount = itemData => { return itemData.sale_mode == EnumSaleMode.Bulk ? itemData.roll : itemData.length / 100 - }, []) + } //格式化单位 - const formatUnit = useCallback((itemData) => { + const formatUnit = itemData => { return itemData.sale_mode == EnumSaleMode.Bulk ? '条' : '米' - }, []) + } const handleSelect = () => { // console.log('handleSelect') - setChangedCheckbox({ - purchaserId: purchaserId, - goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: true } }, + dispatch({ + type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX, + data: { + purchaserId: purchaserId, + goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: true } }, + }, }) + // setChangedCheckbox({ + // purchaserId: purchaserId, + // goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: true } }, + // }) } const handleClose = () => { - setChangedCheckbox({ - purchaserId: purchaserId, - goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: false } }, + dispatch({ + type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX, + data: { + purchaserId: purchaserId, + goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: false } }, + }, }) + // setChangedCheckbox({ + // purchaserId: purchaserId, + // goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: false } }, + // }) } const getInputValue = debounce(async (num, itemData) => { @@ -85,11 +101,11 @@ const ColorKindItem: FC = memo( ￥ {formatPrice(itemData.sale_price)}/kg getInputValue(e, itemData)} + onBlue={e => getInputValue(e, itemData)} defaultNum={formatCount(itemData)} step={selectList[orderType].step} digits={selectList[orderType].digits} - onClickBtn={(e) => getInputValue(e, itemData)} + onClickBtn={e => getInputValue(e, itemData)} unit={formatUnit(itemData)} minNum={selectList[orderType].minNum} maxNum={selectList[orderType].maxNum} @@ -97,6 +113,7 @@ const ColorKindItem: FC = memo( + // 1111 ) }, (preProp, nextProp) => { diff --git a/src/pages/shopping/components/shoppingCart/index.tsx b/src/pages/shopping/components/shoppingCart/index.tsx index b2e4cff..f5b67e3 100644 --- a/src/pages/shopping/components/shoppingCart/index.tsx +++ b/src/pages/shopping/components/shoppingCart/index.tsx @@ -1,92 +1,55 @@ -import { FC, ReactNode, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react' -import { InternalShoppingCartAction, ShoppingCartAction, ShoppingContext, useShoppingCart } from '../../context' -import { GoodsMeta, ColorStore, ShoppingContextValue } from '../../context' +import { Dispatch, FC, ReactNode, useEffect, useMemo, useReducer, useRef, useState } from 'react' +import { ShoppingAction, ShoppingCartAction, ShoppingDispatchContext, ShoppingDispatchContextValue, ShoppingDispatchType, shoppingReducer, ShoppingStateContext } from '../../context' +import { GoodsMeta, ColorStore, ShoppingStateContextValue } from '../../context' export type TriggerCheckboxOptions = { colorStore: ColorStore - changedCheckbox: GoodsMeta - currentCheckedPurchaserId: ShoppingContextValue['currentCheckedPurchaserId'] - setSelectedAmount: ShoppingContextValue['setSelectedAmount'] + currentCheckedPurchaserId: ShoppingStateContextValue['currentCheckedPurchaserId'] + setSelectedAmount: ShoppingDispatchContextValue['UPDATE_SELECTED_AMOUNT'] +} + +type InitialState = { + colorStore: ColorStore + currentCheckedPurchaserId: number + currentCheckedSaleMode: number + isManageStatus: boolean + selectedAmount: number } export interface ShoppingCartPropsType { initialValues?: ColorStore onTriggerCheckbox?: (options: TriggerCheckboxOptions) => void children?: ReactNode - ref?: ShoppingCartAction } // 购物车上下文组件 -export const ShoppingCart: FC = (props) => { - const { children, onTriggerCheckbox, initialValues, ref: refProps } = props - - const defaultShoppingCart = useShoppingCart() - - const ref = (refProps || defaultShoppingCart) as InternalShoppingCartAction +export const ShoppingProvider: FC = props => { + const { children, onTriggerCheckbox, initialValues } = props const onTriggerCheckboxRef = useRef(onTriggerCheckbox) onTriggerCheckboxRef.current = onTriggerCheckbox - const [colorStore, setColorStore] = useState(() => initialValues || {}) - // 客户的选中状态 - const [changedCheckbox, setChangedCheckbox] = useState({} as GoodsMeta) - // 当前高亮的客户 - const [currentCheckedPurchaserId, setCurrentCheckedPurchaserId] = useState(-1) - const [currentCheckedSaleMode, setCurrentCheckedSaleMode] = useState(0) - // 是否管理状态 - const [isManageStatus, setManageStatus] = useState(false) + const [state, dispatch] = useReducer<(state: ShoppingStateContextValue, action: ShoppingAction) => InitialState>(shoppingReducer, { + colorStore: initialValues || {}, + currentCheckedPurchaserId: -1, + currentCheckedSaleMode: 0, + isManageStatus: false, + selectedAmount: 0, + }) - const [selectedAmount, setSelectedAmount] = useState(0) - - const ctx: ShoppingContextValue = useMemo(() => { - // console.log('useMemo ShoppingContextValue') - return { - isManageStatus, - setManageStatus, - currentCheckedPurchaserId, // 当前高亮的客户 - setCurrentCheckedPurchaserId, // 设置高亮当前客户 - currentCheckedSaleMode, - setCurrentCheckedSaleMode, - colorStore, - setChangedCheckbox(changedGoods) { - // console.log('changedGoods==>', colorStore, changedGoods) - setColorStore((prev) => { - const currentGoodsKind = { ...prev[changedGoods.purchaserId]?.goodsKind, ...changedGoods.goodsKind } - return { - ...prev, - [changedGoods.purchaserId as number]: { - purchaserId: changedGoods.purchaserId, - goodsKind: currentGoodsKind, - }, - } - }) - setChangedCheckbox(changedGoods) - }, - setColorStore, - selectedAmount, - setSelectedAmount, - } - }, [colorStore, currentCheckedPurchaserId, isManageStatus, selectedAmount]) - // 暴露给外界 - useImperativeHandle( - ref.__INTERNAL__, - () => ({ - getManageStatus() { - return ctx.isManageStatus - }, - setManageStatus: ctx.setManageStatus, - }), - [ctx.isManageStatus, ctx.setManageStatus], - ) + // 这里要在 useEffect 也就是刷新 state 后再调用，否则如果在 onFieldsChangeRef 修改值会覆盖掉上次修改 useEffect(() => { onTriggerCheckboxRef.current?.({ - colorStore, - changedCheckbox, - currentCheckedPurchaserId, - setSelectedAmount, + colorStore: state.colorStore, + currentCheckedPurchaserId: state.currentCheckedPurchaserId, + setSelectedAmount: (amount) => dispatch({ type: ShoppingDispatchType.UPDATE_SELECTED_AMOUNT,data: amount }), }) - }, [colorStore, changedCheckbox, currentCheckedPurchaserId]) + }, [state.colorStore, state.currentCheckedPurchaserId]) - return {children} + return ( + + {children} + + ) } diff --git a/src/pages/shopping/components/shoppingCartItem/index.module.scss b/src/pages/shopping/components/shoppingCartItem/index.module.scss index 665fc49..c4be662 100644 --- a/src/pages/shopping/components/shoppingCartItem/index.module.scss +++ b/src/pages/shopping/components/shoppingCartItem/index.module.scss @@ -1,10 +1,11 @@ .layout { margin: 24px; - // padding-left: 0; - // padding-right: 0; + padding-left: 0; + padding-right: 0; border: 1px solid transparent; .checkbox { padding: 0 24px; + box-sizing: border-box; &--text { width: 100%; margin-left: 20px; diff --git a/src/pages/shopping/components/shoppingCartItem/index.tsx b/src/pages/shopping/components/shoppingCartItem/index.tsx index 32f60d1..d0f489e 100644 --- a/src/pages/shopping/components/shoppingCartItem/index.tsx +++ b/src/pages/shopping/components/shoppingCartItem/index.tsx @@ -1,20 +1,19 @@ import { Text, View } from '@tarojs/components' -import { FC, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react' +import { FC, memo, useEffect, useMemo, useState, useTransition } from 'react' import styles from './index.module.scss' import classnames from 'classnames' -import { formatMeterDiv, formatPriceDiv } from '@/common/format' -import Taro, { useDidShow } from '@tarojs/taro' +import { formatMeterDiv } from '@/common/format' import LayoutBlock from '@/components/layoutBlock' -import MCheckbox from '@/components/checkbox' import Tag from '@/components/tag' import Divider from '@/components/divider' import ColorKindItem from '../colorKindItem' import { EnumSaleMode } from '@/common/Enumerate' -import { useNeedMemoCallback } from '@/use/useCommon' import { selectList } from '../../config' -import { Goods, useShoppingContext } from '../../context' +import { Goods, ShoppingDispatchType, useShoppingDispatch, useShoppingState } from '../../context' import IconFont from '@/components/iconfont/iconfont' import { isEmptyObject } from '@/common/common' +import classNames from 'classnames' +import LoadingCard from '@/components/loadingCard' type PropsType = { itemData?: ShoppingCartData @@ -37,7 +36,7 @@ enum BackEndSaleModeListFieldMap { export default memo(props => { const { itemData } = props - const { setCurrentCheckedSaleMode } = useShoppingContext() + const dispatch = useShoppingDispatch() const [openDetail, setOpenDetail] = useState(false) @@ -49,57 +48,55 @@ export default memo(props => { const [selected, setSelect] = useState(0) const onSelectOrderType = (type: EnumSaleMode) => { + if (isPending) return setSelect(type) - setCurrentCheckedSaleMode(type) + dispatch({ type: ShoppingDispatchType.UPDATE_CURRENT_CHECKED_SALEMODE, data: type }) // 重置预估金额 - setSelectedAmount(0) + dispatch({ type: ShoppingDispatchType.UPDATE_SELECTED_AMOUNT, data: 0 }) } - const saleModeList = useRef({ - bulk_color_list: itemData?.bulk_color_list, - length_cut_color_list: itemData?.length_cut_color_list, - weight_cut_color_list: itemData?.weight_cut_color_list, - }) - saleModeList.current = { - bulk_color_list: itemData?.bulk_color_list, - length_cut_color_list: itemData?.length_cut_color_list, - weight_cut_color_list: itemData?.weight_cut_color_list, - } + const { currentCheckedPurchaserId, colorStore } = useShoppingState() - const { setChangedCheckbox, currentCheckedPurchaserId, setCurrentCheckedPurchaserId, setSelectedAmount, colorStore } = useShoppingContext() + console.log('Rerender component: shoppingCartItem') - const memoList = useMemo(() => { - // 向 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)), - }, - }, - }) - return - }) - ) : ( - 暂无数据 - ) - }, [itemData, selected]) + // const memoList = useMemo(() => { + // console.log('ext useMemo') + // const component = itemData?.[BackEndSaleModeListFieldMap[selected]].map(item => { + // dispatch({ + // type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX, + // data: { + // 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)), + // }, + // }, + // }, + // }) + // return + // }) + // // 向 context 中初始化数据 + // const result = itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? component : 暂无数据 + + // return result + // }, [itemData, selected]) const handleClickLayout = () => { if (currentCheckedPurchaserId === itemData?.purchaser_id) { return } - setSelectedAmount(0) - setCurrentCheckedSaleMode(selected) - setCurrentCheckedPurchaserId(itemData?.purchaser_id as number) + dispatch({ type: ShoppingDispatchType.UPDATE_SELECTED_AMOUNT, data: 0 }) + // setSelectedAmount(0) + // setCurrentCheckedSaleMode(selected) + dispatch({ type: ShoppingDispatchType.UPDATE_CURRENT_CHECKED_SALEMODE, data: selected }) + dispatch({ type: ShoppingDispatchType.UPDATE_CURRENT_CHECKED_PURCHASERID, data: itemData?.purchaser_id as number }) + // setCurrentCheckedPurchaserId(itemData?.purchaser_id as number) } // 统计已选面料 @@ -144,12 +141,14 @@ export default memo(props => { ) }, [colorStore, currentCheckedPurchaserId, selected, itemData]) + const [isPending, startTransition] = useTransition() + return ( - + {itemData?.purchaser_name} @@ -169,8 +168,10 @@ export default memo(props => { {/* 减少节点渲染 */} {openDetail && ( <> - + + + 订单类型 @@ -203,13 +204,73 @@ export default memo(props => { - {memoList} + + {/* */} + + )} ) -}, useNeedMemoCallback()) +}) + +interface GoodsListPropType { + itemData?: ShoppingCartData + selected: EnumSaleMode + isPending: boolean + startTransition: React.TransitionStartFunction +} +const GoodsList = memo(props => { + console.log('Rerender component: GoodsList') + const { itemData, selected, isPending, startTransition } = props + const dispatch = useShoppingDispatch() + + const [component, setComponent] = useState(null) + + useEffect(() => { + startTransition(() => { + setComponent( + itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? ( + itemData?.[BackEndSaleModeListFieldMap[selected]].map(item => { + dispatch({ + type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX, + data: { + 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)), + }, + }, + }, + }) + return + }) + ) : ( + 暂无数据 + ), + ) + }) + }, [itemData, selected]) + + return ( + <> + {isPending ? ( + + + + ) : ( + component + )} + + ) +}) interface ButtonPropsType { isActive: boolean diff --git a/src/pages/shopping/context/index.ts b/src/pages/shopping/context/index.ts index d97b745..cab5fbe 100644 --- a/src/pages/shopping/context/index.ts +++ b/src/pages/shopping/context/index.ts @@ -1,4 +1,4 @@ -import React, { useRef } from 'react' +import React, { Dispatch, useRef } from 'react' import { useContext } from 'react' /** @@ -27,50 +27,110 @@ export type ColorStore = { export type Goods = { id: number - product_code: number // 面料编号 + product_code: number // 面料编号 product_color_code: number // 颜色编号 estimate_amount: number // 预估金额 - count: 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 } } -export interface ShoppingContextValue { +export interface ShoppingStateContextValue { isManageStatus: boolean - setManageStatus: (isManageStatus: boolean) => void currentCheckedPurchaserId: number // 当前高亮的客户ID - setCurrentCheckedPurchaserId: (purchaserId: number) => void currentCheckedSaleMode: number - setCurrentCheckedSaleMode: (saleMode: number) => void colorStore: ColorStore - setColorStore: (colorStore: React.SetStateAction) => void - setChangedCheckbox: (changedGoods: GoodsMeta) => void selectedAmount: number - setSelectedAmount: (amount: React.SetStateAction) => void } -export const ShoppingContext = React.createContext(null) +export enum ShoppingDispatchType { + UPDATE_MANAGE_STATUS = 'UPDATE_MANAGE_STATUS', + UPDATE_CURRENT_CHECKED_PURCHASERID = 'UPDATE_CURRENT_CHECKED_PURCHASERID', + UPDATE_CURRENT_CHECKED_SALEMODE = 'UPDATE_CURRENT_CHECKED_SALEMODE', + UPDATE_COLOR_STORE = 'UPDATE_COLOR_STORE', + UPDATE_SELECTED_AMOUNT = 'UPDATE_SELECTED_AMOUNT', + UPDATE_CHANGED_CHECKBOX = 'UPDATE_CHANGED_CHECKBOX', +} -export function useShoppingContext() { - const ctx = useContext(ShoppingContext) +export interface ShoppingDispatchContextValue { + [ShoppingDispatchType.UPDATE_MANAGE_STATUS]: (isManageStatus: boolean) => void + [ShoppingDispatchType.UPDATE_CURRENT_CHECKED_PURCHASERID]: (purchaserId: number) => void + [ShoppingDispatchType.UPDATE_CURRENT_CHECKED_SALEMODE]: (saleMode: number) => void + [ShoppingDispatchType.UPDATE_COLOR_STORE]: (colorStore: React.SetStateAction) => void + [ShoppingDispatchType.UPDATE_SELECTED_AMOUNT]: (amount: React.SetStateAction) => void + [ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX]: (amount: React.SetStateAction) => void +} + + +export type ShoppingAction = { + type: ShoppingDispatchType + data?: any +} + +export function shoppingReducer(state: ShoppingStateContextValue, action: ShoppingAction) { + const { type, data } = action + switch (type) { + case ShoppingDispatchType.UPDATE_MANAGE_STATUS: { + return { ...state, isManageStatus: data } + } + case ShoppingDispatchType.UPDATE_CURRENT_CHECKED_PURCHASERID: { + return { ...state, currentCheckedPurchaserId: data } + } + case ShoppingDispatchType.UPDATE_CURRENT_CHECKED_SALEMODE: { + return { ...state, currentCheckedSaleMode: data } + } + case ShoppingDispatchType.UPDATE_COLOR_STORE: { + return { ...state, colorStore: data } + } + case ShoppingDispatchType.UPDATE_SELECTED_AMOUNT: { + return { ...state, selectedAmount: data } + } + case ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX: { + return { + ...state, + colorStore: { + ...state.colorStore, + [data.purchaserId as number]: { + purchaserId: data.purchaserId, + goodsKind: { ...state.colorStore[data.purchaserId]?.goodsKind, ...data.goodsKind }, + }, + }, + } + } + default: + throwError() + } +} + +export const ShoppingStateContext = React.createContext(null) + +export const ShoppingDispatchContext = React.createContext | null>(null) + +export function useShoppingState() { + const ctx = useContext(ShoppingStateContext) if (!ctx) { throw new Error('没有获取到shopping context') } return ctx } +export function useShoppingDispatch() { + const ctx = useContext(ShoppingDispatchContext) + if (!ctx) { + throw new Error('没有获取到shopping dispatch') + } + return ctx +} + export function useWatch(purchaserId: GoodsMeta['purchaserId'], id: number) { - const { colorStore } = useShoppingContext() + const { colorStore } = useShoppingState() return id ? colorStore[purchaserId]['goodsKind']![id] : colorStore[purchaserId]['goodsKind'] } @@ -84,26 +144,5 @@ export interface InternalShoppingCartAction extends ShoppingCartAction { } function throwError(): never { - throw new Error('有没有用 ref 这个props？') -} - -export function useShoppingCart(): ShoppingCartAction { - const __INTERNAL__ = useRef(null) - return { - __INTERNAL__, - setManageStatus(manageStatus: boolean) { - const action = __INTERNAL__.current - if (!action) { - throwError() - } - action.setManageStatus(manageStatus) - }, - getManageStatus() { - const action = __INTERNAL__.current - if (!action) { - throwError() - } - return action.getManageStatus() - }, - } as InternalShoppingCartAction + throw new Error('没有这个action.type') } diff --git a/src/pages/shopping/index.tsx b/src/pages/shopping/index.tsx index 5b4e0d0..a8e36c3 100644 --- a/src/pages/shopping/index.tsx +++ b/src/pages/shopping/index.tsx @@ -1,6 +1,6 @@ import Search from '@/components/search' import { View } from '@tarojs/components' -import Taro, { useDidHide, useDidShow } from '@tarojs/taro' +import Taro, { useDidShow } from '@tarojs/taro' import { FC, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react' import styles from './index.module.scss' import classnames from 'classnames' @@ -12,15 +12,15 @@ import BottomSettleBar from './components/bottomSettleBar' import BottomEditBar from './components/bottomEditBar' import { ShoppingCartDeleteApi, ShoppingCartListApi } from '@/api/index' import { dataLoadingStatus, debounce, getFilterData } from '@/common/util' -import { ShoppingCart } from './components/shoppingCart/index' -import { Goods, useShoppingContext } from './context' +import { ShoppingProvider } from './components/shoppingCart/index' +import { Goods, ShoppingDispatchType, useShoppingDispatch, useShoppingState } from './context' import { alert, goLink, isEmptyObject } from '@/common/common' export const Shopping: FC = memo(() => { // 计算总的预估金额 - const handleTriggerCheckbox = useCallback(({ colorStore, changedCheckbox, currentCheckedPurchaserId, setSelectedAmount }) => { - console.log('handleTriggerCheckbox==>', colorStore, changedCheckbox) + const handleTriggerCheckbox = ({ colorStore, currentCheckedPurchaserId, setSelectedAmount }) => { const targetGoodsKind = colorStore?.[currentCheckedPurchaserId]?.['goodsKind'] + console.log('handleTriggerCheckbox==>', colorStore) if (targetGoodsKind) { const result = Object.values(targetGoodsKind).reduce((prev: number, value: Goods) => { @@ -35,11 +35,11 @@ export const Shopping: FC = memo(() => { } else { setSelectedAmount(0) } - }, []) + } return ( - + - + ) }) @@ -48,19 +48,13 @@ interface InternalContainer {} const ShoppingCartContainer: FC = () => { let isFirst = useRef(true) - const { - setChangedCheckbox, - isManageStatus, - setManageStatus, - selectedAmount, - currentCheckedPurchaserId, - currentCheckedSaleMode, - colorStore, - } = useShoppingContext() + const { isManageStatus, selectedAmount, currentCheckedPurchaserId, currentCheckedSaleMode, colorStore } = useShoppingState() + + const dispatch = useShoppingDispatch() // 管理 const onStartToManage = () => { - setManageStatus(!isManageStatus) + dispatch({ type: ShoppingDispatchType.UPDATE_MANAGE_STATUS, data: !isManageStatus }) } const listHeightRef = useRef('auto') @@ -75,7 +69,7 @@ const ShoppingCartContainer: FC = () => { fetchData(searchOptions) } }) - console.log('rerender') + console.log('Rerender component: ShoppingCartContainer') useEffect(() => { console.log('useEffect fetchData') @@ -186,10 +180,18 @@ const ShoppingCartContainer: FC = () => { } }) console.log('tempObject==>', tempObject) - setChangedCheckbox({ - purchaserId: currentCheckedPurchaserId, - goodsKind: tempObject, + dispatch({ + type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX, + data: { + purchaserId: currentCheckedPurchaserId, + goodsKind: tempObject, + }, }) + + // setChangedCheckbox({ + // purchaserId: currentCheckedPurchaserId, + // goodsKind: tempObject, + // }) } // 加载刷新数据 @@ -246,5 +248,30 @@ const ShoppingCartContainer: FC = () => { ) } +// interface ScrollListPropType { +// height: string +// } +// const ScrollList = memo((props) => { +// const { height } = props +// const [shoppingCartData, setShoppingCartData] = useState<{ list: ShoppingCartData[]; total: number }>({ list: [], total: 0 }) + +// //数据加载状态 +// const statusMore = useMemo(() => { +// return dataLoadingStatus({ list: shoppingCartData.list, total: shoppingCartData.total, status: state.loading }) +// }, [shoppingCartData, state]) + +// return ( +// +// +// +// {!!shoppingCartData?.list?.length && +// shoppingCartData?.list?.map((item, index) => { +// return +// })} +// +// +// +// ) +// }) export default Shopping diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx index 3e6af8b..a5b8458 100644 --- a/src/pages/user/index.tsx +++ b/src/pages/user/index.tsx @@ -180,7 +180,7 @@ const UserInfo: FC = () => { - + {userInfo.userInfo.department_name} diff --git a/src/styles/common.scss b/src/styles/common.scss index d9afae8..7298a10 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -52,6 +52,9 @@ $customTabBarHeight: 100px; .justify-between { justify-content: space-between } +.justify-center { + justify-content: center +} .items-center{ align-items: center; }