✨ feat(ID1000928): 【领取色卡】新增色卡只能购买5种色卡

【【领取色卡】新增色卡只能购买5种色卡】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000928

project.private.config.json

@@ -51,6 +51,13 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/getColorCard/colorCardList/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }

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) {
+        success: ({ confirm }) => {
-          if (res.confirm) {
+          if (confirm) {
             deleteColorCard(id)
           }
         },
@@ -354,7 +354,7 @@ const AddColorCard = () => {
                         onClickBtn={getInputValue}
                         unit="本"
                         minNum={0}
-                        maxNum={999}
+                        maxNum={2}
                       />
                     </View>
                   </View>

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<number[]>([])
+
   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 (isDisabled(item.id)) {
-      if (item.status) {
+      return alert.none(`最多选择${limit}种色卡`)
-        onUnSelect(item)
+    }
-      }
+    if (item.is_add) { return }
-      else {
+    if (item.status) {
-        onSelect(item)
+      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 <View className={styles.main}>
     <View className={styles.search}>
       <Search placeholder="请输入搜索面料/色卡" showBtn={false} changeOnSearch={getSearchData} >
@@ -197,7 +215,7 @@ const ColorCardList = () => {
                 <View className={styles.addButton} onClick={noop}>
                   {/* multipleSelection.current.some(mul => mul.id === item.id) 确保加载新数据时保持选中状态 */}
                   <MCheckbox
-                    disabled={item.is_add}
+                    disabled={item.is_add || isDisabled(item.id)}
                     status={item.is_add || item.status || multipleSelection.current.some(mul => mul.id === item.id)}
                     onSelect={() => onSelect(item)}
                     onClose={() => onUnSelect(item)}

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;

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) => {
             <View className={styles.productName}>{data.color_card_info?.[0]?.name}</View>
             <View className={styles.shipMode}>{data.shipment_mode_name}</View>
           </View>
+          <View className={styles.rightContTags}>
+            {
+              data.color_card_info?.[0]?.affiliation_product?.map((item, index) => {
+                return <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} key={index} size="small" circle>{formatRemoveHashTag(item.code)}</Tag>
+              })
+            }
+
+          </View>
           <View className={styles.colorsBox}>
             <View className={styles.colorName}>x{data.color_card_info?.[0]?.count || 0}本</View>
           </View>