xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev' of ssh://git.online.zzfzyc.com:10022/mp/spider_cloud_warehouse into 订单页

Browse Source
This commit is contained in:
Haiyi 2022-10-20 15:12:16 +08:00
commit c5b74e3dd9
11 changed files with 14339 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/checkbox/index.tsx
View File

@ -1,6 +1,7 @@
import { usePropsValue } from '@/use/useCommon'
import { View } from '@tarojs/components'
import classnames from 'classnames'
import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
import React, { forwardRef, SetStateAction, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
import IconFont from '../iconfont/iconfont'
import styles from './index.module.scss'
@ -37,7 +38,25 @@ export default forwardRef((props: params, ref) => {
customTextClass = '',
hiddenCheckboxIcon = false,
} = props
const [selected, SetSelected] = useState(false)
console.log('Rerender component: checkbox', status)
const [selected, setSelected] = usePropsValue({
value: status,
defaultValue: false
})
// const selectedRef = useRef(status)
// if (status !== undefined){
// selectedRef.current = status
// }
// const [, setForceUpdate] = useState({})
// const setSelected = useCallback((v: SetStateAction<boolean>) => {
// const nextValue = typeof v === 'function' ? (v as (prevValue: boolean) => boolean)(selectedRef.current) : v
// console.log('对比',nextValue, selectedRef.current)
// if (nextValue === selectedRef.current) return
// selectedRef.current = nextValue
// console.log('强制刷新', nextValue, selectedRef.current)
// setForceUpdate({})
// }, [])
const onSelectEven = () => {
if (disabled) return false
let res = !selected
@ -46,10 +65,11 @@ export default forwardRef((props: params, ref) => {
} else {
onClose?.()
}
SetSelected(res)
console.log('res', res)
setSelected(res)
}
const handleClickChildren = (event) => {
const handleClickChildren = event => {
if (!triggerLabel) {
return event.stopPropagation()
}
@ -76,9 +96,9 @@ export default forwardRef((props: params, ref) => {
useImperativeHandle(ref, () => ({
onSelectEven,
}))
useEffect(() => {
SetSelected(status)
}, [status])
// useEffect(() => {
// setSelected(status)
// }, [status])
return (
<View className={classnames(customClassName, styles.checkbox)} style={customStyles} onClick={onSelectEven}>
{!hiddenCheckboxIcon && (

7
src/components/counter/index.tsx
View File

@ -15,6 +15,7 @@ type params = {
disable?: boolean, //是否禁用
}
export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false}: params) => {
console.log('Rerender component: Counter');
const [value, setValue] = useState<any>({count:defaultNum})
const onPlus = (event) => {
@ -65,12 +66,14 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
if(res === '') {
setValue({...value, count:minNum})
onChange?.(minNum)
return minNum
}
else if(!isNaN(Number(res))) {
let count = formatDigits(res)
count = checkData(count)
setValue({...value, count})
onChange?.(parseFloat(count as string))
return count
} else {
let num = parseFloat(res)
if (!isNaN(num)) {
@ -78,9 +81,11 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
count = checkData(count)
setValue({ ...value, count })
onChange?.(count as number)
return count
} else {
setValue({ ...value, count: defaultNum })
onChange?.(defaultNum)
return defaultNum
}
}
@ -93,9 +98,11 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
count = checkData(count)
setValue({ ...value, count })
onBlue?.(count as number)
return count
} else {
setValue({ ...value, count: defaultNum })
onBlue?.(defaultNum)
return defaultNum
}
}
const noop = (e) => {

1
src/pages/login/index.tsx
View File

@ -62,7 +62,6 @@ const Login: FC = () => {
account,
password,
})
console.log('state===>', res)
if (res.success) {
alert.success('登陆成功')
setToken(res.data.token)

23
src/pages/shopping/components/bottomEditBar/index.tsx
View File

@ -1,33 +1,40 @@
import { formatPriceDiv } from '@/common/format'
import NormalButton from '@/components/normalButton'
import { View, Text } from '@tarojs/components'
import { memo, useState } from 'react'
import { memo, SetStateAction, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import MCheckbox from '@/components/checkbox'
import { usePropsValue } from '@/use/useCommon'
import { ShoppingDispatchType, useShoppingDispatch } from '../../context'
type PropsType = {
onDelete?: Function
onSelectCheckbox?: (bool: boolean) => void
disabled?: boolean
isSelectAll?: boolean
}
export default memo<PropsType>(props => {
const { onDelete, onSelectCheckbox, disabled = false } = props
export default (props: PropsType) => {
const { onDelete, onSelectCheckbox, disabled = false, isSelectAll: selectAll = false } = props
const dispatch = useShoppingDispatch()
console.log('isSelectAll==>', selectAll)
const handleDelete = () => {
onDelete && onDelete()
}
const selectCallBack = () => {
onSelectCheckbox && onSelectCheckbox(true)
setSelectAll(true)
dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION, data: true })
}
const closeCallBack = () => {
setSelectAll(false)
dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION, data: false })
onSelectCheckbox && onSelectCheckbox(false)
}
const [isSelectAll, setSelectAll] = useState(false)
const [isSelectAll, setSelectAll] = usePropsValue({
value: selectAll,
defaultValue: false,
})
return (
<View className={styles.bottomBar}>
@ -50,4 +57,4 @@ export default memo<PropsType>(props => {
</View>
</View>
)
})
}

72
src/pages/shopping/components/colorKindItem/index.tsx
View File

@ -1,31 +1,27 @@
import { View, Text, Image } from '@tarojs/components'
import MCheckbox from '@/components/checkbox'
import Counter from '@/components/counter'
import { FC, memo, ReactNode, useCallback, useEffect, useState } from 'react'
import { FC, forwardRef, memo } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import { debounce } from '@/common/util'
import { formatImgUrl, formatPriceDiv } from '@/common/format'
import { EnumSaleMode } from '@/common/Enumerate'
import { useNeedMemoCallback } from '@/use/useCommon'
import { selectList } from '../../config'
import { ShoppingDispatchType, useShoppingDispatch, useShoppingState } from '../../context'
import { Goods, ShoppingDispatchType, ShoppingStateContextValue, useShoppingDispatch, useShoppingState } from '../../context'
type PropsType = {
state?: Goods
purchaserId: number
itemData: Record<string, any> & object
orderType: EnumSaleMode
}
// 注意：如果在表单控件内部使用 useWatch，由于是直接从Context中取值，memo也会直接失去作用。
const ColorKindItem: FC<PropsType> = memo(
props => {
let ColorKindItem: FC<PropsType> = props => {
console.log('Rerender component: ColorKindItem')
const { purchaserId, itemData, orderType = EnumSaleMode.Bulk } = props
const { colorStore } = useShoppingState()
const { state: multipleSelection, purchaserId, itemData, orderType = EnumSaleMode.Bulk } = props
const dispatch = useShoppingDispatch()
// @ts-ignore
const { checked } = colorStore[purchaserId]['goodsKind']![itemData.id] || { checked: false }
// console.log('checked==>', checked)
//格式化金额
const formatPrice = (price: number) => {
@ -43,47 +39,45 @@ const ColorKindItem: FC<PropsType> = memo(
}
const handleSelect = () => {
// console.log('handleSelect')
dispatch({
type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
data: {
purchaserId: purchaserId,
goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: true } },
multipleSelection: { ...multipleSelection, [itemData.id]: itemData },
},
})
// setChangedCheckbox({
// purchaserId: purchaserId,
// goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: true } },
// })
}
const handleClose = () => {
const temp = multipleSelection
delete temp?.[itemData.id]
dispatch({
type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
data: {
purchaserId: purchaserId,
goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: false } },
multipleSelection: temp,
},
})
// setChangedCheckbox({
// purchaserId: purchaserId,
// goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: false } },
// })
}
// TODO：需要新增调整条数/米数的接口 并在调整完成后重新请求整个购物车页面
const getInputValue = debounce(async (num, itemData) => {
if (itemData.sale_mode === EnumSaleMode.Bulk) {
itemData.roll = num
} else {
itemData.length = num
}
}, 300)
}, 260)
return (
<MCheckbox
status={checked}
status={multipleSelection?.hasOwnProperty(itemData.id) || false}
onSelect={handleSelect}
onClose={handleClose}
customClassName={classnames(styles.checkbox, checked ? styles.selected : '')}
customClassName={classnames(styles.checkbox, multipleSelection?.hasOwnProperty(itemData.id) ? styles.selected : '')}
customTextClass={styles.colorKindItem}>
<View className={styles['colorKindItem__left']}>
<Image className={styles['colorKindItem__left--image']} mode='aspectFill' src={formatImgUrl(itemData.product_color_texture_url)}></Image>
@ -113,24 +107,24 @@ const ColorKindItem: FC<PropsType> = memo(
</View>
</View>
</MCheckbox>
// <View>1111</View>
)
},
(preProp, nextProp) => {
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) {
needMemoized = false
}
if (preProp.orderType !== nextProp.orderType) {
needMemoized = false
// State 分割组件 思路就是把 context 直接通过 props 的形式传给组件，这样的话就解决了 context 强制刷新 memo 的问题了
// 那么当 context 内的 value 被更新的时候，react 只会强制渲染 Wrapper
const withStateSlice = (comp, slice) => {
const MemoComp = memo(comp)
const Wrapper = (props, ref) => {
const state = useShoppingState()
return <MemoComp ref={ref} state={slice(state, props)} {...props} />
}
if (stringifyPreProp !== stringifyNextProp) {
needMemoized = false
return memo(forwardRef(Wrapper))
}
return needMemoized
ColorKindItem = withStateSlice(
ColorKindItem,
(state: ShoppingStateContextValue, props: PropsType) => {
return state.colorStore[props.purchaserId]['multipleSelection']
},
)
export default ColorKindItem

19
src/pages/shopping/components/shoppingCart/index.tsx
View File

@ -1,6 +1,13 @@
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'
import { FC, ReactNode, useEffect, useReducer, useRef } from 'react'
import {
ShoppingAction,
ShoppingDispatchContext,
ShoppingDispatchContextValue,
ShoppingDispatchType,
shoppingReducer,
ShoppingStateContext,
} from '../../context'
import { ColorStore, ShoppingStateContextValue } from '../../context'
export type TriggerCheckboxOptions = {
colorStore: ColorStore
@ -13,6 +20,7 @@ type InitialState = {
currentCheckedPurchaserId: number
currentCheckedSaleMode: number
isManageStatus: boolean
isMultipleSelection: boolean
selectedAmount: number
}
@ -33,17 +41,16 @@ export const ShoppingProvider: FC<ShoppingCartPropsType> = props => {
currentCheckedPurchaserId: -1,
currentCheckedSaleMode: 0,
isManageStatus: false,
isMultipleSelection: false,
selectedAmount: 0,
})
// 这里要在 useEffect 也就是刷新 state 后再调用，否则如果在 onFieldsChangeRef 修改值会覆盖掉上次修改
useEffect(() => {
onTriggerCheckboxRef.current?.({
colorStore: state.colorStore,
currentCheckedPurchaserId: state.currentCheckedPurchaserId,
setSelectedAmount: (amount) => dispatch({ type: ShoppingDispatchType.UPDATE_SELECTED_AMOUNT,data: amount }),
setSelectedAmount: amount => dispatch({ type: ShoppingDispatchType.UPDATE_SELECTED_AMOUNT, data: amount }),
})
}, [state.colorStore, state.currentCheckedPurchaserId])

146
src/pages/shopping/components/shoppingCartItem/index.tsx
View File

@ -1,5 +1,5 @@
import { Text, View } from '@tarojs/components'
import { FC, memo, useEffect, useMemo, useState, useTransition } from 'react'
import { FC, forwardRef, memo, useEffect, useMemo, useState, useTransition } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
import { formatMeterDiv } from '@/common/format'
@ -9,14 +9,29 @@ import Divider from '@/components/divider'
import ColorKindItem from '../colorKindItem'
import { EnumSaleMode } from '@/common/Enumerate'
import { selectList } from '../../config'
import { Goods, ShoppingDispatchType, useShoppingDispatch, useShoppingState } from '../../context'
import { Goods, GoodsMeta, ShoppingDispatchType, ShoppingStateContextValue, 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
interface ButtonPropsType {
isActive: boolean
onClick?: Function
children?: React.ReactNode
customStyle?: React.CSSProperties
}
// 订单类型
const SaleModeButton: FC<ButtonPropsType> = props => {
const { onClick, children, isActive = false, customStyle } = props
const handleClick = () => {
onClick?.()
}
return (
<View className={classnames(styles.saleModeButton, isActive && styles['saleModeButton--active'])} style={customStyle} onClick={handleClick}>
<View className={classnames(styles['saleModeButton--text'])}>{children}</View>
</View>
)
}
const DrawerButton = memo<{ isOpen: boolean }>(({ isOpen }) => {
@ -33,9 +48,17 @@ enum BackEndSaleModeListFieldMap {
weight_cut_color_list = 2,
}
export default memo<PropsType>(props => {
const { itemData } = props
type PropsType = {
itemData?: ShoppingCartData
state?: {
multipleSelection?: GoodsMeta['multipleSelection']
currentCheckedPurchaserId?: number
}
}
let ShoppingCartItem: FC<PropsType> = props => {
const { itemData, state } = props
const { multipleSelection, currentCheckedPurchaserId } = state!
const dispatch = useShoppingDispatch()
const [openDetail, setOpenDetail] = useState(false)
@ -53,93 +76,59 @@ export default memo<PropsType>(props => {
dispatch({ type: ShoppingDispatchType.UPDATE_CURRENT_CHECKED_SALEMODE, data: type })
// 重置预估金额
dispatch({ type: ShoppingDispatchType.UPDATE_SELECTED_AMOUNT, data: 0 })
dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION, data: false })
}
const { currentCheckedPurchaserId, colorStore } = useShoppingState()
console.log('Rerender component: shoppingCartItem')
// 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 <ColorKindItem purchaserId={itemData.purchaser_id} key={item.id} itemData={item} orderType={selected}></ColorKindItem>
// })
// // 向 context 中初始化数据
// const result = itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? component : <View className={styles.noList}>暂无数据</View>
// return result
// }, [itemData, selected])
const handleClickLayout = () => {
if (currentCheckedPurchaserId === itemData?.purchaser_id) {
return
}
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)
dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION, data: false })
}
// 统计已选面料
const materialChecked = useMemo(() => {
const targetGoodsKind = colorStore?.[itemData?.purchaser_id!]?.['goodsKind']
if (!targetGoodsKind || isEmptyObject(targetGoodsKind)) return 0
if (!multipleSelection || isEmptyObject(multipleSelection)) return 0
return new Set(
Object.values(targetGoodsKind)?.reduce((prev, item: Goods) => {
if (item.checked && item.sale_mode === selected) {
Object.values(multipleSelection)?.reduce((prev, item: Goods) => {
if (item.sale_mode === selected) {
return [...prev, item.product_code]
}
return prev
}, []),
).size
}, [colorStore, currentCheckedPurchaserId, selected, itemData])
}, [multipleSelection, currentCheckedPurchaserId, selected, itemData])
// 统计已选颜色
const colorChecked = useMemo(() => {
const targetGoodsKind = colorStore?.[itemData?.purchaser_id!]?.['goodsKind']
if (!targetGoodsKind || isEmptyObject(targetGoodsKind)) return 0
if (!multipleSelection || isEmptyObject(multipleSelection)) return 0
return new Set(
Object.values(targetGoodsKind).reduce((prev, item: Goods) => {
if (item.checked && item.sale_mode === selected) {
Object.values(multipleSelection).reduce((prev, item: Goods) => {
if (item.sale_mode === selected) {
return [...prev, item.product_color_code]
}
return prev
}, []),
).size
}, [colorStore, currentCheckedPurchaserId, selected, itemData])
}, [multipleSelection, currentCheckedPurchaserId, selected, itemData])
// 统计已选条数 / 米数
const lengthOrRollChecked = useMemo(() => {
const targetGoodsKind = colorStore?.[itemData?.purchaser_id!]?.['goodsKind']
if (!targetGoodsKind || isEmptyObject(targetGoodsKind)) return 0
if (!multipleSelection || isEmptyObject(multipleSelection)) return 0
return (
Object.values(targetGoodsKind).reduce((prev, item: Goods) => {
if (item.checked && item.sale_mode === selected) {
Object.values(multipleSelection).reduce((prev, item: Goods) => {
if (item.sale_mode === selected) {
return prev + item.count
}
return prev
}, 0) || 0
)
}, [colorStore, currentCheckedPurchaserId, selected, itemData])
}, [multipleSelection, currentCheckedPurchaserId, selected, itemData])
const [isPending, startTransition] = useTransition()
@ -205,7 +194,6 @@ export default memo<PropsType>(props => {
</View>
</View>
<View className={styles.orderContainer}>
{/* <GoodsList itemData={itemData} selected={selected} /> */}
<GoodsList itemData={itemData} selected={selected} isPending={isPending} startTransition={startTransition} />
</View>
</View>
@ -213,7 +201,7 @@ export default memo<PropsType>(props => {
)}
</LayoutBlock>
)
})
}
interface GoodsListPropType {
itemData?: ShoppingCartData
@ -241,13 +229,13 @@ const GoodsList = memo<GoodsListPropType>(props => {
[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)),
},
},
multipleSelection: {},
},
})
return <ColorKindItem purchaserId={itemData.purchaser_id} key={item.id} itemData={item} orderType={selected}></ColorKindItem>
@ -271,22 +259,30 @@ const GoodsList = memo<GoodsListPropType>(props => {
</>
)
})
// State 分割组件 思路就是把 context 直接通过 props 的形式传给组件，这样的话就解决了 context 强制刷新 memo 的问题了
// 那么当 context 内的 value 被更新的时候，react 只会强制渲染 Wrapper
const withStateSlice = (comp, slice) => {
const MemoComp = memo(comp, (prevProps, nextProps)=>{
let needMemo = true
if (JSON.stringify(prevProps.itemData) !== JSON.stringify(nextProps.itemData)) {
needMemo = false
}
if(JSON.stringify(prevProps.state) !== JSON.stringify(nextProps.state)){
needMemo = false
}
return needMemo
})
const Wrapper = (props, ref) => {
const state = useShoppingState()
console.log('state===>', state)
return <MemoComp ref={ref} state={slice(state, props)} {...props} />
}
return memo(forwardRef(Wrapper))
}
interface ButtonPropsType {
isActive: boolean
onClick?: Function
children?: React.ReactNode
customStyle?: React.CSSProperties
}
// 订单类型
const SaleModeButton: FC<ButtonPropsType> = props => {
const { onClick, children, isActive = false, customStyle } = props
const handleClick = () => {
onClick?.()
}
return (
<View className={classnames(styles.saleModeButton, isActive && styles['saleModeButton--active'])} style={customStyle} onClick={handleClick}>
<View className={classnames(styles['saleModeButton--text'])}>{children}</View>
</View>
)
}
ShoppingCartItem = withStateSlice(ShoppingCartItem, (state: ShoppingStateContextValue, props) => ({
multipleSelection: state.colorStore?.[props.itemData?.purchaser_id]?.['multipleSelection'],
currentCheckedPurchaserId: state.currentCheckedPurchaserId,
}))
export default ShoppingCartItem

34
src/pages/shopping/context/index.ts
View File

@ -1,4 +1,5 @@
import React, { Dispatch, useRef } from 'react'
import { EnumSaleMode } from '@/common/Enumerate'
import React, { Dispatch } from 'react'
import { useContext } from 'react'
/**
@ -31,41 +32,46 @@ export type Goods = {
product_color_code: number // 颜色编号
estimate_amount: number // 预估金额
count: number // 已选的条数或米数
sale_mode: number
checked: boolean
sale_mode: EnumSaleMode
}
// 分组
export interface GoodsMeta {
purchaserId: number
goodsKind?: {
[id: number]: Goods
[id: Goods['id']]: Goods
}
multipleSelection: {
[id: Goods['id']]: Goods
}
}
export interface ShoppingStateContextValue {
isManageStatus: boolean
isManageStatus: boolean // 管理按钮的状态
isMultipleSelection: boolean // 全选按钮的状态
currentCheckedPurchaserId: number // 当前高亮的客户ID
currentCheckedSaleMode: number
currentCheckedSaleMode: EnumSaleMode
colorStore: ColorStore
selectedAmount: number
}
export enum ShoppingDispatchType {
UPDATE_MANAGE_STATUS = 'UPDATE_MANAGE_STATUS',
UPDATE_MULTIPLE_SELECTION = 'UPDATE_MULTIPLE_SELECTION',
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',
}
// UPDATE_MultipleSelection
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_MANAGE_STATUS]: (isManageStatus: ShoppingStateContextValue['isManageStatus']) => void
[ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION]: (isMultipleSelection: ShoppingStateContextValue['isMultipleSelection']) => void
[ShoppingDispatchType.UPDATE_CURRENT_CHECKED_PURCHASERID]: (purchaserId: ShoppingStateContextValue['currentCheckedPurchaserId']) => void
[ShoppingDispatchType.UPDATE_CURRENT_CHECKED_SALEMODE]: (saleMode: ShoppingStateContextValue['currentCheckedSaleMode']) => void
[ShoppingDispatchType.UPDATE_COLOR_STORE]: (colorStore: React.SetStateAction<ColorStore>) => void
[ShoppingDispatchType.UPDATE_SELECTED_AMOUNT]: (amount: React.SetStateAction<number>) => void
[ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX]: (amount: React.SetStateAction<number>) => void
[ShoppingDispatchType.UPDATE_SELECTED_AMOUNT]: (amount: React.SetStateAction<ShoppingStateContextValue['selectedAmount']>) => void
[ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX]: (amount: React.SetStateAction<ShoppingStateContextValue['selectedAmount']>) => void
}
@ -80,6 +86,9 @@ export function shoppingReducer(state: ShoppingStateContextValue, action: Shoppi
case ShoppingDispatchType.UPDATE_MANAGE_STATUS: {
return { ...state, isManageStatus: data }
}
case ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION: {
return { ...state, isMultipleSelection: data }
}
case ShoppingDispatchType.UPDATE_CURRENT_CHECKED_PURCHASERID: {
return { ...state, currentCheckedPurchaserId: data }
}
@ -100,6 +109,7 @@ export function shoppingReducer(state: ShoppingStateContextValue, action: Shoppi
[data.purchaserId as number]: {
purchaserId: data.purchaserId,
goodsKind: { ...state.colorStore[data.purchaserId]?.goodsKind, ...data.goodsKind },
multipleSelection: { ...data.multipleSelection },
},
},
}

46
src/pages/shopping/index.tsx
View File

@ -20,15 +20,12 @@ import LoadingCard from '@/components/loadingCard'
export const Shopping: FC = memo(() => {
// 计算总的预估金额
const handleTriggerCheckbox = ({ colorStore, currentCheckedPurchaserId, setSelectedAmount }) => {
const targetGoodsKind = colorStore?.[currentCheckedPurchaserId]?.['goodsKind']
const multipleSelection = colorStore?.[currentCheckedPurchaserId]?.multipleSelection
console.log('handleTriggerCheckbox==>', colorStore)
if (targetGoodsKind) {
const result = Object.values(targetGoodsKind).reduce((prev: number, value: Goods) => {
if (value.checked) {
if (multipleSelection) {
const result = Object.values(multipleSelection).reduce((prev: number, value: Goods) => {
return prev + Number(formatPriceDiv(value.estimate_amount))
}
return prev
}, 0) as number
console.log('result==>', result)
// 同步修改上下文的 预估金额
@ -49,12 +46,15 @@ interface InternalContainer {}
const ShoppingCartContainer: FC<InternalContainer> = () => {
let isFirst = useRef(true)
const { isManageStatus, selectedAmount, currentCheckedPurchaserId, currentCheckedSaleMode, colorStore } = useShoppingState()
const { isMultipleSelection, isManageStatus, selectedAmount, currentCheckedPurchaserId, currentCheckedSaleMode, colorStore } = useShoppingState()
const dispatch = useShoppingDispatch()
// 管理
const onStartToManage = () => {
if(isManageStatus){
handleSelectAllCheckbox(false) // 取消全选
}
dispatch({ type: ShoppingDispatchType.UPDATE_MANAGE_STATUS, data: !isManageStatus })
}
@ -125,13 +125,10 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
// 结算
const handleSettleAccount = debounce(() => {
const targetGoodsKind = colorStore?.[currentCheckedPurchaserId]?.['goodsKind']
if (!targetGoodsKind) return Taro.showToast({ title: '请先选择客户', icon: 'error' })
const checkedGoodsKind = Object.values(targetGoodsKind).reduce((prev, item: Goods) => {
if (item.checked) {
const multipleSelection = colorStore?.[currentCheckedPurchaserId]?.['multipleSelection']
if (!multipleSelection) return Taro.showToast({ title: '请先选择客户', icon: 'error' })
const checkedGoodsKind = Object.values(multipleSelection).reduce((prev, item: Goods) => {
return [...prev, item.id]
}
return prev
}, [])
if (checkedGoodsKind.length === 0) return Taro.showToast({ title: '请先选择商品', icon: 'error' })
goLink('/pages/submitOrder/index', {
@ -146,14 +143,11 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
// 批量某个客户的删除商品
const handleDelete = async () => {
const targetGoodsKind = colorStore?.[currentCheckedPurchaserId]?.['goodsKind']
let checked: Goods[] = []
if (targetGoodsKind) {
checked = Object.values(targetGoodsKind).filter((item: Goods) => item.checked)
const multipleSelection = colorStore?.[currentCheckedPurchaserId]?.['multipleSelection']
let checked: Goods[] = Object.values(multipleSelection)
if (checked.length === 0) {
return Taro.showToast({ title: '请选择商品', icon: 'error' })
}
}
console.log('checked==>', checked)
Taro.showModal({
title: '要删除这些商品吗？',
@ -179,26 +173,15 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
if (!targetGoodsKind) return Taro.showToast({ title: '请先选择客户', icon: 'error' })
console.log('targetGoodsKind==>', targetGoodsKind)
const tempObject = {}
Object.entries(targetGoodsKind).forEach(([key, value]) => {
tempObject[key] = {
...value,
checked: isSelectAll,
}
})
const tempObject = { ...targetGoodsKind }
console.log('tempObject==>', tempObject)
dispatch({
type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
data: {
purchaserId: currentCheckedPurchaserId,
goodsKind: tempObject,
multipleSelection: isSelectAll ? tempObject : {},
},
})
// setChangedCheckbox({
// purchaserId: currentCheckedPurchaserId,
// goodsKind: tempObject,
// })
}
// 加载刷新数据
@ -250,6 +233,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
{isManageStatus ? (
<BottomEditBar
disabled={currentCheckedPurchaserId < 0}
isSelectAll={isMultipleSelection}
onDelete={handleDelete}
onSelectCheckbox={isAll => handleSelectAllCheckbox(isAll)}></BottomEditBar>
) : (

50
src/use/useCommon.ts
View File

@ -1,5 +1,5 @@
import dayjs from 'dayjs'
import { useEffect, useRef, useState } from 'react'
import { useEffect, useRef, useState, SetStateAction, useMemo, useCallback } from 'react'
//倒计时hook
export const useTimeCountDown = () => {
@ -33,7 +33,7 @@ export const useTimeCountDown = () => {
setTimeStatus(() => 1)
if (startData >= endDate) {
clearInterval(timeObj.current)
setShowTime((e) => ({ ...e, DD: '00', HH: '00', MM: '00', SS: '00' }))
setShowTime(e => ({ ...e, DD: '00', HH: '00', MM: '00', SS: '00' }))
setTimeStatus(() => 2)
return false
}
@ -51,7 +51,7 @@ export const useTimeCountDown = () => {
var MM = ('00' + mm).slice(-2)
var SS = ('00' + ss).slice(-2)
// console.log('endTime::', `${DD}-${HH}-${MM}-${SS}`)
setShowTime((e) => ({ ...e, DD, HH, MM, SS }))
setShowTime(e => ({ ...e, DD, HH, MM, SS }))
}
return {
showTime,
@ -93,7 +93,7 @@ type Options = {
}
const defaultOptions = {
deep: false
deep: false,
}
/**
* 适用于 memo 第二个入参 手动触发渲染
@ -148,21 +148,29 @@ export const useNeedMemoCallback = (options: Options = defaultOptions) => {
}
}
const needMemo = useNeedMemoCallback()
const hobby = {
play1: 1,
play2: 2
type UsePropsValueOptions<T> = {
value?: T
defaultValue: T
onChange?: (v: T) => void
}
export function usePropsValue<T>(options: UsePropsValueOptions<T>) {
const { value, defaultValue, onChange } = options
const [, setForceUpdate] = useState({})
const stateRef = useRef<T>(value !== undefined ? value : defaultValue)
if (value !== undefined) {
stateRef.current = value
}
const setState = useCallback((v: SetStateAction<T>, forceTrigger: boolean = false) => {
// `forceTrigger` means trigger `onChange` even if `v` is the same as `stateRef.current`
const nextValue = typeof v === 'function' ? (v as (prevState: T) => T)(stateRef.current) : v
if (!forceTrigger && nextValue === stateRef.current) return
stateRef.current = nextValue
setForceUpdate({})
return onChange?.(nextValue)
}, [])
return [stateRef.current, setState] as const
}
const bool = needMemo(
{
name: '小明',
age: 18,
hobby: hobby,
},
{
name: '小明',
age: 18,
hobby: hobby,
},
)
// console.log('bool==>', bool)

13993
yarn-error.log Normal file
View File

File diff suppressed because it is too large Load Diff