From 553445f111167ff4a425997a07156e0bee309dd9 Mon Sep 17 00:00:00 2001 From: xuan Date: Thu, 22 Sep 2022 19:31:49 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=AA=20test(context):=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9Eshopping=E8=B4=AD=E7=89=A9=E6=A8=A1=E5=9D=97=E7=9A=84c?= =?UTF-8?q?ontext?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/shopping/index.ts | 2 +- .../components/shoppingCart/index.tsx | 37 +++++++ .../shoppingCartItem/index.module.scss | 44 +++++++- .../components/shoppingCartItem/index.tsx | 104 ++++++++++++------ src/pages/shopping/context/index.ts | 36 ++++++ src/pages/shopping/index.tsx | 21 ++-- src/pages/shopping/types.ts | 6 +- 7 files changed, 198 insertions(+), 52 deletions(-) create mode 100644 src/pages/shopping/components/shoppingCart/index.tsx create mode 100644 src/pages/shopping/context/index.ts diff --git a/src/api/shopping/index.ts b/src/api/shopping/index.ts index afd11f5..fecbcb5 100644 --- a/src/api/shopping/index.ts +++ b/src/api/shopping/index.ts @@ -25,7 +25,7 @@ export const ShoppingCartUpdateApi = () => { */ export const ShoppingCartListApi = () => { return useRequest({ - url: `/v1/mp/shoppingCart/productColor`, + url: `/v2/mp/shoppingCart/productColor`, method: "get", }) } diff --git a/src/pages/shopping/components/shoppingCart/index.tsx b/src/pages/shopping/components/shoppingCart/index.tsx new file mode 100644 index 0000000..344d1b2 --- /dev/null +++ b/src/pages/shopping/components/shoppingCart/index.tsx @@ -0,0 +1,37 @@ +import { FC, ReactNode, useEffect, useMemo, useRef, useState } from 'react' +import { ShoppingContext } from '../../context' +import { ColorMeta, ColorStore, ShoppingContextValue } from '../../context' + +export interface ShoppingCartPropsType { + initialValues?: ColorStore + onTriggerCheckbox?: (options: { colorStore: ColorStore; changedCheckbox: ColorMeta }) => void + children?: ReactNode +} + +export const ShoppingCart: FC = (props) => { + const { children, onTriggerCheckbox, initialValues } = props + + const onTriggerCheckboxRef = useRef(onTriggerCheckbox) + onTriggerCheckboxRef.current = onTriggerCheckbox + + const [colorStore, setColorStore] = useState(() => initialValues || {}) + const [changedCheckbox, setChangedCheckbox] = useState({}) + + const ctx: ShoppingContextValue = useMemo(() => { + return { + colorStore, + setChangedCheckbox() {}, + } + }, [colorStore]) + + useEffect(() => { + onTriggerCheckboxRef.current?.({ + colorStore, + changedCheckbox, + }) + + }, [colorStore, changedCheckbox]) + + + return {children} +} diff --git a/src/pages/shopping/components/shoppingCartItem/index.module.scss b/src/pages/shopping/components/shoppingCartItem/index.module.scss index d1ac740..0c96ad2 100644 --- a/src/pages/shopping/components/shoppingCartItem/index.module.scss +++ b/src/pages/shopping/components/shoppingCartItem/index.module.scss @@ -12,7 +12,7 @@ } } -.selected{ +.selected { border-color: $color_main; } @@ -81,9 +81,49 @@ } } -.drawerOpen{ +.drawerOpen { height: auto; } .drawerClose { height: 0; } + +.saleModeButton { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: center; + padding: 0 20px; + box-sizing: border-box; + border: 0 solid transparent; + background-color: #f6f6f6; + border-radius: 8px; + font-size: 28px; + height: 72px; + &--text { + color: #909090; + display: flex; + flex-flow: row nowrap; + justify-content: center; + align-items: center; + } + &:hover { + opacity: 0.7; + } + &--active { + border: 1px solid $color_main; + background-color: #eaf2ff; + .saleModeButton--text { + color: $color_main; + } + } +} +.noList { + margin: 100px 0; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + color: #707070; + font-size: 26px; +} diff --git a/src/pages/shopping/components/shoppingCartItem/index.tsx b/src/pages/shopping/components/shoppingCartItem/index.tsx index c02a6ab..8462c56 100644 --- a/src/pages/shopping/components/shoppingCartItem/index.tsx +++ b/src/pages/shopping/components/shoppingCartItem/index.tsx @@ -1,5 +1,5 @@ import { Text, View } from '@tarojs/components' -import { FC, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react' +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' @@ -13,7 +13,6 @@ import ColorKindItem from '../colorKindItem' import { EnumSaleMode } from '@/common/Enumerate' import { useNeedMemoCallback } from '@/use/useCommon' import { selectList } from '../../config' -import { ShoppingContext } from '../../index' type PropsType = { itemData?: ShoppingCartData @@ -27,6 +26,12 @@ const DrawerButton = memo<{ isOpen: boolean }>(({ isOpen }) => { ) }) +enum BackEndSaleModeListFieldMap { + bulk_color_list = 0, + length_cut_color_list = 1, + weight_cut_color_list = 2, +} + export default memo((props) => { console.log('props==>', props) const { itemData, selectedId } = props @@ -44,6 +49,17 @@ export default memo((props) => { setSelect(type) } + 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 [mockList, setMockList] = useState({ 0: [ { id: 0, sale_mode: 0, roll: 5, length: 0, checked: true }, @@ -62,9 +78,9 @@ export default memo((props) => { }) const handleChecked = useCallback( - (current) => { + (current: any) => { console.log('handleChecked', current) - const tempList = mockList[selected].map((item) => { + const tempList = itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => { if (item.id === current.id) { item = current } @@ -79,10 +95,11 @@ export default memo((props) => { }, [mockList, selected], ) + const handleUnChecked = useCallback( - (current) => { + (current: any) => { console.log('handleChecked', current) - const tempList = mockList[selected].map((item) => { + const tempList = itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => { if (item.id === current.id) { item = current } @@ -99,17 +116,21 @@ export default memo((props) => { ) const memoList = useMemo(() => { - return mockList[selected].map((item, index) => { - return ( - - ) - }) + return itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? ( + itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => { + return ( + + ) + }) + ) : ( + 暂无数据 + ) }, [mockList, selected]) const handleClickLayout = () => { @@ -145,30 +166,24 @@ export default memo((props) => { 订单类型 - onSelectOrderType(EnumSaleMode.Bulk)}> 大货 - - + onSelectOrderType(EnumSaleMode.Plate)}> 剪板 - - + onSelectOrderType(EnumSaleMode.BulkCut)}> 散剪 - + @@ -186,3 +201,22 @@ export default memo((props) => { ) }, useNeedMemoCallback()) + +interface ButtonPropsType { + isActive: boolean + onClick?: Function + children?: React.ReactNode + customStyle?: React.CSSProperties +} +// 订单类型 +const SaleModeButton: FC = (props) => { + const { onClick, children, isActive = false, customStyle } = props + const handleClick = () => { + onClick?.() + } + return ( + + {children} + + ) +} diff --git a/src/pages/shopping/context/index.ts b/src/pages/shopping/context/index.ts new file mode 100644 index 0000000..9406a79 --- /dev/null +++ b/src/pages/shopping/context/index.ts @@ -0,0 +1,36 @@ +import React from 'react' +import { useContext } from 'react' + +/** + * 456: { + * id: 456, + * name: 'asdfasf', + * checked: true + * }, + * 457: { + * id: 457, + * name: 'dsfaf654', + * checked: true + * } + */ +export type ColorStore = Record + +export interface ColorMeta { + id?: number + checked?: boolean +} + +export interface ShoppingContextValue { + colorStore: ColorStore + setChangedCheckbox: (color: ColorMeta) => void +} + +export const ShoppingContext = React.createContext(null) + +export function useShoppingContext() { + const ctx = useContext(ShoppingContext) + if (!ctx) { + throw new Error('没有获取到shopping context') + } + return ctx +} diff --git a/src/pages/shopping/index.tsx b/src/pages/shopping/index.tsx index fdee71b..e0a7d81 100644 --- a/src/pages/shopping/index.tsx +++ b/src/pages/shopping/index.tsx @@ -13,12 +13,7 @@ import BottomSettleBar from './components/bottomSettleBar' import BottomEditBar from './components/bottomEditBar' import { ShoppingCartListApi } from '@/api/index' import { dataLoadingStatus } from '@/common/util' - -const defaultContext = { - isManager: false -} - -export const ShoppingContext = React.createContext(defaultContext) +import { ShoppingCart } from './components/shoppingCart/index' export const Shopping: FC = () => { //输入了搜索关键字 @@ -59,7 +54,7 @@ export const Shopping: FC = () => { }, [shoppingCartData, state]) useDidShow(() => { - (async () => { + ;(async () => { await fetchData() let query = Taro.createSelectorQuery() console.log('query', query) @@ -81,9 +76,7 @@ export const Shopping: FC = () => { setShoppingCartData({ list: state.data, total: state.data.length }) }, [state]) - useDidShow(() => { - - }) + useDidShow(() => {}) const [selectedId, setSelectedId] = useState() @@ -91,6 +84,10 @@ export const Shopping: FC = () => { setSelectedId(item.purchaser_id) } + const handleTriggerCheckbox = () => { + + } + return ( @@ -106,7 +103,7 @@ export const Shopping: FC = () => { - + {!!shoppingCartData?.list?.length && shoppingCartData?.list?.map((item, index) => { @@ -114,7 +111,7 @@ export const Shopping: FC = () => { return })} - + {isManage ? ( diff --git a/src/pages/shopping/types.ts b/src/pages/shopping/types.ts index 24e9a0f..7404159 100644 --- a/src/pages/shopping/types.ts +++ b/src/pages/shopping/types.ts @@ -6,8 +6,10 @@ interface ShoppingCartData { purchaser_short_name: string sale_user_id: number sale_user_name: string - color_list: ColorList - [Property:string]: any + bulk_color_list: ColorList + length_cut_color_list: ColorList // 剪板 + weight_cut_color_list: ColorList // 散剪 + [Property: string]: any } interface ColorList { estimate_amount: number