From 5e7af08483f036e4a853f0a7d3c0e5a8bca4d4fe Mon Sep 17 00:00:00 2001 From: xuan Date: Tue, 28 Feb 2023 10:18:01 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(ID1000928):=20=E3=80=90?= =?UTF-8?q?=E9=A2=86=E5=8F=96=E8=89=B2=E5=8D=A1=E3=80=91=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E8=89=B2=E5=8D=A1=E5=8F=AA=E8=83=BD=E8=B4=AD=E4=B9=B05?= =?UTF-8?q?=E7=A7=8D=E8=89=B2=E5=8D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 【【领取色卡】新增色卡只能购买5种色卡】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000928 --- project.private.config.json | 7 ++++ src/pages/getColorCard/addColorCard/index.tsx | 8 ++-- .../getColorCard/colorCardList/index.tsx | 38 ++++++++++++++----- .../components/itemList/index.module.scss | 4 ++ .../components/itemList/index.tsx | 9 +++++ 5 files changed, 52 insertions(+), 14 deletions(-) diff --git a/project.private.config.json b/project.private.config.json index 1c2ff94..7f413cf 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -51,6 +51,13 @@ "query": "", "launchMode": "default", "scene": null + }, + { + "name": "", + "pathName": "pages/getColorCard/colorCardList/index", + "query": "", + "launchMode": "default", + "scene": null } ] } diff --git a/src/pages/getColorCard/addColorCard/index.tsx b/src/pages/getColorCard/addColorCard/index.tsx index 6301d32..dba9cb7 100644 --- a/src/pages/getColorCard/addColorCard/index.tsx +++ b/src/pages/getColorCard/addColorCard/index.tsx @@ -142,7 +142,7 @@ const AddColorCard = () => { } const handleCountChange = (value: number, id: number) => { - console.log('value', value) + console.log('value', value, order) if (order.length === 1 && value === 0) { Taro.showToast({ title: '最后一个色卡不能删除', @@ -156,8 +156,8 @@ const AddColorCard = () => { content: '确认删除所选色卡？', confirmText: '删除', confirmColor: '#337fff', - success(res) { - if (res.confirm) { + success: ({ confirm }) => { + if (confirm) { deleteColorCard(id) } }, @@ -354,7 +354,7 @@ const AddColorCard = () => { onClickBtn={getInputValue} unit="本" minNum={0} - maxNum={999} + maxNum={2} /> diff --git a/src/pages/getColorCard/colorCardList/index.tsx b/src/pages/getColorCard/colorCardList/index.tsx index bf6dbd9..fabb191 100644 --- a/src/pages/getColorCard/colorCardList/index.tsx +++ b/src/pages/getColorCard/colorCardList/index.tsx @@ -12,6 +12,8 @@ import { dataLoadingStatus, debounce, getFilterData } from '@/common/util' import { alert, goLink } from '@/common/common' import { GetCanAddCardList } from '@/api/colorCard' import { formatRemoveHashTag } from '@/common/format' +// 限制5种色卡 +const limit = 5 const ColorCardList = () => { const { fetchData, state } = GetCanAddCardList() @@ -79,10 +81,14 @@ const ColorCardList = () => { getData() }, [searchField]) + const selectedList = useRef([]) + useDidShow(() => { const cache = Taro.getStorageSync('colorCardCache') if (cache) { - setSearchField(val => ({ ...val, color_card_ids: JSON.parse(cache).map(item => item.id) })) + // 已选的列入 selectedList + selectedList.current = JSON.parse(cache).map(item => item.id) + setSearchField(val => ({ ...val, color_card_ids: selectedList.current })) } }) @@ -110,12 +116,13 @@ const ColorCardList = () => { }, [orderList]) // 选择 const onSelect = (item: any) => { - console.log('item==>', item) + console.log('item==>', item, selectedList.current) setOrderList((prev: any) => { prev.list?.forEach((val) => { if (val.id === item.id) { val.status = true multipleSelection.current = [...multipleSelection.current, val] + selectedList.current = [...selectedList.current, item.id] } }) return { list: prev.list, total: prev.total } @@ -128,6 +135,7 @@ const ColorCardList = () => { if (val.id === item.id) { val.status = false multipleSelection.current = multipleSelection.current.filter(mul => mul.id !== val.id) + selectedList.current = selectedList.current.filter(mul => mul !== val.id) } }) return { list: prev.list, total: prev.total } @@ -137,13 +145,15 @@ const ColorCardList = () => { const handleClickCheckBox = (item: any) => { console.log('item', item) - if (!item.is_add) { - if (item.status) { - onUnSelect(item) - } - else { - onSelect(item) - } + if (isDisabled(item.id)) { + return alert.none(`最多选择${limit}种色卡`) + } + if (item.is_add) { return } + if (item.status) { + onUnSelect(item) + } + else { + onSelect(item) } } const noop = (e) => { @@ -157,6 +167,14 @@ const ColorCardList = () => { } }) + const isDisabled = (currentId: number) => { + console.log('selectedList', selectedList.current) + if (selectedList.current.includes(currentId)) { + return false + } + return selectedList.current.length >= limit + } + return @@ -197,7 +215,7 @@ const ColorCardList = () => { {/* multipleSelection.current.some(mul => mul.id === item.id) 确保加载新数据时保持选中状态 */} mul.id === item.id)} onSelect={() => onSelect(item)} onClose={() => onUnSelect(item)} diff --git a/src/pages/getColorCard/components/itemList/index.module.scss b/src/pages/getColorCard/components/itemList/index.module.scss index d366ea9..0a56386 100644 --- a/src/pages/getColorCard/components/itemList/index.module.scss +++ b/src/pages/getColorCard/components/itemList/index.module.scss @@ -74,6 +74,10 @@ text-align: right; } } + &Tags{ + display: flex; + flex-flow: row wrap; + } .colorsBox { display: flex; diff --git a/src/pages/getColorCard/components/itemList/index.tsx b/src/pages/getColorCard/components/itemList/index.tsx index a0407de..5e94874 100644 --- a/src/pages/getColorCard/components/itemList/index.tsx +++ b/src/pages/getColorCard/components/itemList/index.tsx @@ -8,6 +8,7 @@ import Divider from '@/components/divider' import Tag from '@/components/tag' import LayoutBlock from '@/components/layoutBlock' import { goLink } from '@/common/common' +import { formatRemoveHashTag } from '@/common/format' interface PropsType { data?: any @@ -52,6 +53,14 @@ const ItemList = (props: PropsType) => { {data.color_card_info?.[0]?.name} {data.shipment_mode_name} + + { + data.color_card_info?.[0]?.affiliation_product?.map((item, index) => { + return {formatRemoveHashTag(item.code)} + }) + } + + x{data.color_card_info?.[0]?.count || 0}本