✨ feat(购物界面): 已完成已选汇总
This commit is contained in:
xuan
parent
3b3adcb203
commit
37d9f85c82
@ -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.unit}>{unit}</View>
|
||||
</View>
|
||||
<View className={styles.plus} onClick={onPlus}>+</View>
|
||||
<View className={styles.main}>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -49,14 +49,17 @@ export const ShoppingCart: FC<ShoppingCartPropsType> = (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,
|
||||
|
||||
@ -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 <View className={styles.drawerButton}>{isOpen ? <IconFont name='icon-shouqi' size={52}></IconFont> : <IconFont name='icon-zhankai' size={52}></IconFont>}</View>
|
||||
return (
|
||||
<View className={styles.drawerButton}>
|
||||
{isOpen ? <IconFont name='icon-shouqi' size={52}></IconFont> : <IconFont name='icon-zhankai' size={52}></IconFont>}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
enum BackEndSaleModeListFieldMap {
|
||||
@ -30,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
|
||||
|
||||
@ -40,7 +44,7 @@ export default memo<PropsType>((props) => {
|
||||
const [openDetail, setOpenDetail] = useState(false)
|
||||
|
||||
const handleOpenDetail = () => {
|
||||
setOpenDetail((isOpen) => !isOpen)
|
||||
setOpenDetail(isOpen => !isOpen)
|
||||
handleClickLayout()
|
||||
}
|
||||
|
||||
@ -64,25 +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(() => {
|
||||
|
||||
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 <ColorKindItem purchaserId={itemData.purchaser_id} key={item.id} item={item} orderType={selected}></ColorKindItem>
|
||||
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>
|
||||
@ -115,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
|
||||
@ -139,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} />
|
||||
@ -197,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?.()
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user