diff --git a/src/api/shopping/index.ts b/src/api/shopping/index.ts index fecbcb5..604a5e8 100644 --- a/src/api/shopping/index.ts +++ b/src/api/shopping/index.ts @@ -15,7 +15,7 @@ export const ShoppingCartUpdateApi = () => { */ export const ShoppingCartDeleteApi = () => { return useRequest({ - url: `/v1/mp/shoppingCart/productColor`, + url: `/v2/mp/shoppingCart/productColor`, method: "delete", }) } diff --git a/src/pages/shopping/components/bottomEditBar/index.module.scss b/src/pages/shopping/components/bottomEditBar/index.module.scss index 7ea37b1..3ff314d 100644 --- a/src/pages/shopping/components/bottomEditBar/index.module.scss +++ b/src/pages/shopping/components/bottomEditBar/index.module.scss @@ -5,30 +5,26 @@ justify-content: space-between; background-color: white; padding: 16px 24px; - - .bottomLeft{ - margin-left: 12px; - .moneyText{ + + .bottomLeft { + margin-left: 12px; + .moneyText { font-size: 24px; font-family: $font_family; font-weight: 400; color: rgba($color: #000000, $alpha: 0.6); } - .moneyNumber{ - + .moneyNumber { font-size: 28px; font-family: $font_family; font-weight: 500; color: $color_money; } } - .bottomRight{ - + .bottomRight { + display: flex; + flex-flow: row nowrap; + align-items: center; } - - .bottomButton { - - } } - diff --git a/src/pages/shopping/components/bottomEditBar/index.tsx b/src/pages/shopping/components/bottomEditBar/index.tsx index 1bedafb..13edf57 100644 --- a/src/pages/shopping/components/bottomEditBar/index.tsx +++ b/src/pages/shopping/components/bottomEditBar/index.tsx @@ -8,23 +8,23 @@ import MCheckbox from '@/components/checkbox' type PropsType = { onDelete?: Function onSelectCheckbox?: (bool: boolean) => void + disabled?: boolean } -export default memo((props) => { - const { onDelete, onSelectCheckbox } = props +export default memo(props => { + const { onDelete, onSelectCheckbox, disabled = false } = props - const handleSettle = () => { + const handleDelete = () => { onDelete && onDelete() } const selectCallBack = () => { - setSelectAll(true) onSelectCheckbox && onSelectCheckbox(true) + setSelectAll(true) } const closeCallBack = () => { setSelectAll(false) onSelectCheckbox && onSelectCheckbox(false) - } const [isSelectAll, setSelectAll] = useState(false) @@ -34,6 +34,7 @@ export default memo((props) => { ((props) => { - + 删除 diff --git a/src/pages/shopping/components/bottomSettleBar/index.tsx b/src/pages/shopping/components/bottomSettleBar/index.tsx index ad1dacf..624f486 100644 --- a/src/pages/shopping/components/bottomSettleBar/index.tsx +++ b/src/pages/shopping/components/bottomSettleBar/index.tsx @@ -1,4 +1,3 @@ -import { formatPriceDiv } from '@/common/format' import NormalButton from '@/components/normalButton' import { View, Text } from '@tarojs/components' import { memo } from 'react' @@ -9,7 +8,7 @@ type PropsType = { onSettleAccount?: Function } -export default memo((props) => { +export default memo(props => { const { onSettleAccount, amount = 0 } = props const handleSettle = () => { @@ -26,8 +25,8 @@ export default memo((props) => { - - 结算 + + 结算 diff --git a/src/pages/shopping/components/colorKindItem/index.tsx b/src/pages/shopping/components/colorKindItem/index.tsx index 123ea47..98a9d1d 100644 --- a/src/pages/shopping/components/colorKindItem/index.tsx +++ b/src/pages/shopping/components/colorKindItem/index.tsx @@ -45,14 +45,12 @@ const ColorKindItem: FC = memo( setChangedCheckbox({ purchaserId: purchaserId, goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: true } }, - checked: colorStore[purchaserId].checked, }) } const handleClose = () => { setChangedCheckbox({ purchaserId: purchaserId, goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: false } }, - checked: colorStore[purchaserId].checked, }) } diff --git a/src/pages/shopping/components/shoppingCart/index.tsx b/src/pages/shopping/components/shoppingCart/index.tsx index 4da4844..b2e4cff 100644 --- a/src/pages/shopping/components/shoppingCart/index.tsx +++ b/src/pages/shopping/components/shoppingCart/index.tsx @@ -27,6 +27,7 @@ export const ShoppingCart: FC = (props) => { onTriggerCheckboxRef.current = onTriggerCheckbox const [colorStore, setColorStore] = useState(() => initialValues || {}) + // 客户的选中状态 const [changedCheckbox, setChangedCheckbox] = useState({} as GoodsMeta) // 当前高亮的客户 const [currentCheckedPurchaserId, setCurrentCheckedPurchaserId] = useState(-1) @@ -55,7 +56,6 @@ export const ShoppingCart: FC = (props) => { [changedGoods.purchaserId as number]: { purchaserId: changedGoods.purchaserId, goodsKind: currentGoodsKind, - checked: changedGoods.checked, }, } }) diff --git a/src/pages/shopping/components/shoppingCartItem/index.module.scss b/src/pages/shopping/components/shoppingCartItem/index.module.scss index 70c70ca..665fc49 100644 --- a/src/pages/shopping/components/shoppingCartItem/index.module.scss +++ b/src/pages/shopping/components/shoppingCartItem/index.module.scss @@ -1,7 +1,7 @@ .layout { margin: 24px; - padding-left: 0; - padding-right: 0; + // padding-left: 0; + // padding-right: 0; border: 1px solid transparent; .checkbox { padding: 0 24px; diff --git a/src/pages/shopping/components/shoppingCartItem/index.tsx b/src/pages/shopping/components/shoppingCartItem/index.tsx index fe4db10..32f60d1 100644 --- a/src/pages/shopping/components/shoppingCartItem/index.tsx +++ b/src/pages/shopping/components/shoppingCartItem/index.tsx @@ -66,18 +66,9 @@ export default memo(props => { weight_cut_color_list: itemData?.weight_cut_color_list, } - const { setChangedCheckbox, currentCheckedPurchaserId, setCurrentCheckedPurchaserId, isManageStatus, setSelectedAmount, colorStore, currentCheckedSaleMode } = useShoppingContext() + const { setChangedCheckbox, currentCheckedPurchaserId, setCurrentCheckedPurchaserId, setSelectedAmount, colorStore } = useShoppingContext() const memoList = useMemo(() => { - const selectedList = itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? itemData?.[BackEndSaleModeListFieldMap[selected]] : [{}] - // 给每一个客户都初始化一个 checked 状态 - selectedList.forEach(() => { - // 初始化选中状态 - setChangedCheckbox({ - purchaserId: itemData?.purchaser_id!, - checked: false, - }) - }) // 向 context 中初始化数据 return itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? ( itemData?.[BackEndSaleModeListFieldMap[selected]].map(item => { @@ -94,7 +85,6 @@ export default memo(props => { count: selected === EnumSaleMode.Bulk ? item.roll : Number(formatMeterDiv(item.length)), }, }, - checked: false, }) return }) @@ -112,20 +102,6 @@ export default memo(props => { setCurrentCheckedPurchaserId(itemData?.purchaser_id as number) } - const handleChecked = () => { - // 初始化选中状态 - setChangedCheckbox({ - purchaserId: itemData?.purchaser_id!, - checked: true, - }) - } - const handleUnchecked = () => { - // 初始化选中状态 - setChangedCheckbox({ - purchaserId: itemData?.purchaser_id!, - checked: false, - }) - } // 统计已选面料 const materialChecked = useMemo(() => { const targetGoodsKind = colorStore?.[itemData?.purchaser_id!]?.['goodsKind'] @@ -173,70 +149,63 @@ export default memo(props => { circle customClassName={classnames(styles.layout, itemData?.purchaser_id === currentCheckedPurchaserId ? styles.selected : '')} onClick={handleClickLayout}> - - - - - {itemData?.purchaser_name} - - {itemData?.sale_user_name} - - - - - 已选 {materialChecked} 种面料,{colorChecked} 个颜色,共{' '} - {selected === EnumSaleMode.Bulk ? `${lengthOrRollChecked} 条` : `${lengthOrRollChecked} 米`} - - + + + + {itemData?.purchaser_name} + + {itemData?.sale_user_name} + + + + + 已选 {materialChecked} 种面料,{colorChecked} 个颜色,共{' '} + {selected === EnumSaleMode.Bulk ? `${lengthOrRollChecked} 条` : `${lengthOrRollChecked} 米`} + - - + + {/* 减少节点渲染 */} {openDetail && ( - - - - 订单类型 - - onSelectOrderType(EnumSaleMode.Bulk)}> - 大货 - - onSelectOrderType(EnumSaleMode.Plate)}> - 剪板 - - onSelectOrderType(EnumSaleMode.BulkCut)}> - 散剪 - + <> + + + + 订单类型 + + onSelectOrderType(EnumSaleMode.Bulk)}> + 大货 + + onSelectOrderType(EnumSaleMode.Plate)}> + 剪板 + + onSelectOrderType(EnumSaleMode.BulkCut)}> + 散剪 + + - - - - - 布料颜色 - - {selectList[selected].title}单位:{selectList[selected].unit} - + + + + 布料颜色 + + {selectList[selected].title}单位:{selectList[selected].unit} + + + {memoList} - {memoList} - + )} ) diff --git a/src/pages/shopping/context/index.ts b/src/pages/shopping/context/index.ts index 1fa3664..d97b745 100644 --- a/src/pages/shopping/context/index.ts +++ b/src/pages/shopping/context/index.ts @@ -43,7 +43,6 @@ export interface GoodsMeta { goodsKind?: { [id: number]: Goods } - checked: boolean } export interface ShoppingContextValue { diff --git a/src/pages/shopping/index.tsx b/src/pages/shopping/index.tsx index 393d0db..5b4e0d0 100644 --- a/src/pages/shopping/index.tsx +++ b/src/pages/shopping/index.tsx @@ -1,7 +1,7 @@ import Search from '@/components/search' import { View } from '@tarojs/components' -import Taro, { useDidHide, useDidShow, useRouter } from '@tarojs/taro' -import React, { FC, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react' +import Taro, { useDidHide, 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' import IconText from '@/components/iconText' @@ -24,7 +24,6 @@ export const Shopping: FC = memo(() => { if (targetGoodsKind) { const result = Object.values(targetGoodsKind).reduce((prev: number, value: Goods) => { - console.log('value==>', value) if (value.checked) { return prev + Number(formatPriceDiv(value.estimate_amount)) } @@ -47,10 +46,17 @@ export const Shopping: FC = memo(() => { interface InternalContainer {} const ShoppingCartContainer: FC = () => { - let isFirst = useRef(true) - const { isManageStatus, setManageStatus, selectedAmount, currentCheckedPurchaserId, currentCheckedSaleMode, colorStore, setColorStore } = useShoppingContext() + const { + setChangedCheckbox, + isManageStatus, + setManageStatus, + selectedAmount, + currentCheckedPurchaserId, + currentCheckedSaleMode, + colorStore, + } = useShoppingContext() // 管理 const onStartToManage = () => { @@ -64,23 +70,18 @@ const ShoppingCartContainer: FC = () => { const [searchOptions, setSearchOptions] = useState({ short_name_or_phone: '', }) - useDidShow(()=>{ - console.log('onShow'); - if (!isFirst.current){ - + useDidShow(() => { + if (!isFirst.current) { fetchData(searchOptions) - } + } }) - useDidHide(() => { - console.log('onHide'); - }) - console.log('rerender'); + console.log('rerender') useEffect(() => { console.log('useEffect fetchData') - if (!isEmptyObject(getFilterData(searchOptions))){ + if (!isEmptyObject(getFilterData(searchOptions))) { fetchData(searchOptions) - } + } }, [searchOptions]) // 输入了搜索关键字 @@ -142,20 +143,27 @@ const ShoppingCartContainer: FC = () => { const { fetchData: deleteApi } = ShoppingCartDeleteApi() - // TODO: 批量删除商品 + // 批量某个客户的删除商品 const handleDelete = async () => { const targetGoodsKind = colorStore?.[currentCheckedPurchaserId]?.['goodsKind'] - if (targetGoodsKind && Object.values(targetGoodsKind).every((item: Goods) => !item.checked)) { - return Taro.showToast({ title: '请选择商品', icon: 'error' }) + let checked: Goods[] = [] + if (targetGoodsKind) { + checked = Object.values(targetGoodsKind).filter((item: Goods) => item.checked) + if (checked.length === 0) { + return Taro.showToast({ title: '请选择商品', icon: 'error' }) + } } + console.log('checked==>', checked) Taro.showModal({ - title: '要取消这些商品吗?', + title: '要删除这些商品吗?', success: async function(res) { if (res.confirm) { - const res = await deleteApi() + const res = await deleteApi({ + ids: checked.map(item => item.id).join(','), + }) if (res.success) { - alert.success('取消成功') - fetchData() + alert.success('删除成功') + fetchData(searchOptions) } else { alert.none(res.msg) } @@ -166,15 +174,22 @@ const ShoppingCartContainer: FC = () => { // 全选 const handleSelectAllCheckbox = (isSelectAll: boolean) => { console.log('handleSelectAllCheckbox', isSelectAll) + const targetGoodsKind = colorStore?.[currentCheckedPurchaserId]?.['goodsKind'] + if (!targetGoodsKind) return Taro.showToast({ title: '请先选择客户', icon: 'error' }) + console.log('targetGoodsKind==>', targetGoodsKind) + const tempObject = {} - Object.entries(colorStore).forEach(([key, value]) => { + Object.entries(targetGoodsKind).forEach(([key, value]) => { tempObject[key] = { ...value, checked: isSelectAll, } }) - console.log(tempObject) - setColorStore(() => tempObject) + console.log('tempObject==>', tempObject) + setChangedCheckbox({ + purchaserId: currentCheckedPurchaserId, + goodsKind: tempObject, + }) } // 加载刷新数据 @@ -220,7 +235,10 @@ const ShoppingCartContainer: FC = () => { {isManageStatus ? ( - handleSelectAllCheckbox(isAll)}> + handleSelectAllCheckbox(isAll)}> ) : ( )}