diff --git a/project.private.config.json b/project.private.config.json
index 7f413cf..c66a3ea 100644
--- 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
         }
       ]
     }
diff --git a/src/pages/getColorCard/addColorCard/components/colorCardItem/index.module.scss b/src/pages/getColorCard/addColorCard/components/colorCardItem/index.module.scss
new file mode 100644
index 0000000..5a9dd7a
--- /dev/null
+++ 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%;
+    }
+  }
+}
diff --git a/src/pages/getColorCard/addColorCard/components/colorCardItem/index.tsx b/src/pages/getColorCard/addColorCard/components/colorCardItem/index.tsx
new file mode 100644
index 0000000..add85dc
--- /dev/null
+++ 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
diff --git a/src/pages/getColorCard/addColorCard/index.tsx b/src/pages/getColorCard/addColorCard/index.tsx
index dba9cb7..46b5350 100644
--- 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} />
             )
           })
         }