🐞 fix(ID1001357): 【领取色卡】--添加色卡多个，删除最后一张色卡，没弹框提示，删除全部色卡后，提交订单成功

【【内部商城小程序】-【领取色卡】--添加色卡多个，删除最后一张色卡，没弹框提示，删除全部色卡后，提交订单成功】 https://www.tapd.cn/53459131/bugtrace/bugs/view/1153459131001001357
2023-02-28 11:49:53 +08:00 · 2023-02-28 11:49:53 +08:00 · f50ccb6f80
commit f50ccb6f80
parent a33097c363
4 changed files with 114 additions and 47 deletions
--- a/project.private.config.json
+++ b/project.private.config.json
@ -58,6 +58,13 @@
          "query": "",
          "launchMode": "default",
          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/getColorCard/addColorCard/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
        }
      ]
    }
--- a/src/pages/getColorCard/addColorCard/components/colorCardItem/index.module.scss
+++ b/src/pages/getColorCard/addColorCard/components/colorCardItem/index.module.scss
@ -0,0 +1,39 @@
+.colorCardBottom {
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  overflow: hidden;
+  margin-bottom: 24px;
+  .leftCont {
+    width: 134px;
+    height: 134px;
+    border-radius: 8px;
+    margin-right: 24px;
+  }
+  .rightCont {
+    flex: 1 1 auto;
+    overflow: hidden;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    &__top {
+      font-size: 28px;
+      @include common_ellipsis(1);
+    }
+    &__bottom {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      width: 100%;
+      align-items: flex-end;
+    }
+    &__left {
+      flex: 1 1 auto;
+      overflow: hidden;
+    }
+    &__right {
+      width: 30%;
+    }
+  }
+}
--- a/src/pages/getColorCard/addColorCard/components/colorCardItem/index.tsx
+++ b/src/pages/getColorCard/addColorCard/components/colorCardItem/index.tsx
@ -0,0 +1,57 @@
+import { View } from '@tarojs/components'
+import { useCallback } from 'react'
+import styles from './index.module.scss'
+import LabAndImg from '@/components/LabAndImg'
+import Tag from '@/components/tag'
+import { formatRemoveHashTag } from '@/common/format'
+import Counter from '@/components/counter'
+import Divider from '@/components/divider'
+
+interface PropsType {
+  item: any
+  onChangeCounter?: (value: number, id: number) => void
+}
+
+const ColorCardItem = (props: PropsType) => {
+  const { item, onChangeCounter } = props
+  const labAndImgObj = useCallback((item) => {
+    return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url }
+  }, [])
+
+  const handleCountChange = (value: number) => {
+    onChangeCounter?.(value, item.id)
+  }
+
+  return <View className={styles.colorCardBottom} key={item.id}>
+    <View style={{ minWidth: '24%' }}>
+      <View className={styles.leftCont}>
+        <LabAndImg value={labAndImgObj(item)} />
+      </View>
+    </View>
+    <View className={styles.rightCont}>
+      <View className={styles.rightCont__top}>
+        {item.color_card_name}
+      </View>
+      <View className={styles.rightCont__bottom}>
+        <View className={styles.rightCont__left}>
+          {
+            item.affiliation_product.map((product_color, index) => {
+              return <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} key={index} size="small" circle>{formatRemoveHashTag(product_color.code)}</Tag>
+            })
+          }
+        </View>
+        <View className={styles.rightCont__right}>
+          <Counter
+            defaultNum={item?.count || 1}
+            onChange={handleCountChange}
+            unit="本"
+            minNum={0}
+            maxNum={2}
+          />
+        </View>
+      </View>
+      <Divider direction="horizontal" customStyles={{ margin: '12px 0 0 ' }}></Divider>
+    </View>
+  </View>
+}
+export default ColorCardItem
--- a/src/pages/getColorCard/addColorCard/index.tsx
+++ b/src/pages/getColorCard/addColorCard/index.tsx
@ -1,7 +1,8 @@
 import { Text, View } from '@tarojs/components'
 import Taro, { useDidShow, useUnload } from '@tarojs/taro'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
+import ColorCardItem from './components/colorCardItem'
 import LayoutBlock from '@/components/layoutBlock'
 import NormalButton from '@/components/normalButton'
 import Divider from '@/components/divider'
@ -30,6 +31,9 @@ const AddColorCard = () => {
  const { fetchData: fetchClientData } = ClientListApi()

  const [order, setOrder] = useState<any[]>([])
+  const orderRef = useRef(order)
+  orderRef.current = order
+  console.log('AddColorCard rerender', order)

  useDidShow(() => {
    const colorCardCache = Taro.getStorageSync('colorCardCache')
@ -106,6 +110,7 @@ const AddColorCard = () => {
      })
      return
    }
+    if (order.length === 0) { return alert.none('请选择色卡') }
    // 请求数据
    const res = await fetchData({
      address_id: addressInfo.address_id,
@ -130,26 +135,17 @@ const AddColorCard = () => {
    return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url }
  }, [])

-  const getInputValue = () => {
-
-  }
-
  const deleteColorCard = (id) => {
    setOrder((prev) => {
      return prev.filter(item => item.id !== id)
    })
-    Taro.setStorageSync('colorCardCache', JSON.stringify(order.filter(item => item.id !== id)))
+    Taro.setStorageSync('colorCardCache', JSON.stringify(orderRef.current.filter(item => item.id !== id)))
  }

  const handleCountChange = (value: number, id: number) => {
-    console.log('value', value, order)
-    if (order.length === 1 && value === 0) {
-      Taro.showToast({
-        title: '最后一个色卡不能删除',
-        icon: 'none',
-        duration: 2000,
-      })
-      return
+    console.log('value', value, orderRef.current)
+    if (orderRef.current.length === 1 && value === 0) {
+      return alert.none('最后一个色卡不能删除')
    }
    if (value === 0) {
      Taro.showModal({
@ -328,39 +324,7 @@ const AddColorCard = () => {
        {
          order.map((item) => {
            return (
-              <View className={styles.colorCardBottom} key={item.id}>
-                <View style={{ minWidth: '24%' }}>
-                  <View className={styles.leftCont}>
-                    <LabAndImg value={labAndImgObj(item)} />
-                  </View>
-                </View>
-                <View className={styles.rightCont}>
-                  <View className={styles.rightCont__top}>
-                    {item.color_card_name}
-                  </View>
-                  <View className={styles.rightCont__bottom}>
-                    <View className={styles.rightCont__left}>
-                      {
-                        item.affiliation_product.map((product_color, index) => {
-                          return <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} key={index} size="small" circle>{formatRemoveHashTag(product_color.code)}</Tag>
-                        })
-                      }
-                    </View>
-                    <View className={styles.rightCont__right}>
-                      <Counter
-                        onBlue={getInputValue}
-                        defaultNum={item?.count || 1}
-                        onChange={e => handleCountChange(e, item.id)}
-                        onClickBtn={getInputValue}
-                        unit="本"
-                        minNum={0}
-                        maxNum={2}
-                      />
-                    </View>
-                  </View>
-                  <Divider direction="horizontal" customStyles={{ margin: '12px 0 0 ' }}></Divider>
-                </View>
-              </View>
+              <ColorCardItem item={item} key={item.id} onChangeCounter={handleCountChange} />
            )
          })
        }