From 45d49e7e28b15b85b121e7ccdca4fc6d478a1418 Mon Sep 17 00:00:00 2001
From: czm <2192718639@qq.com>
Date: Mon, 20 Feb 2023 15:05:57 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(=E9=A2=86=E5=8F=96=E5=89=AA?=
 =?UTF-8?q?=E6=A0=B7=E5=AF=B9=E6=8E=A5):?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/productCard/index.tsx          | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 src/pages/cutSampleListOrder/components/productCard/index.tsx

diff --git a/src/pages/cutSampleListOrder/components/productCard/index.tsx b/src/pages/cutSampleListOrder/components/productCard/index.tsx
new file mode 100644
index 0000000..f4f80b1
--- /dev/null
+++ b/src/pages/cutSampleListOrder/components/productCard/index.tsx
@@ -0,0 +1,80 @@
+import { Text, View } from '@tarojs/components'
+import Taro, { getCurrentPages, useDidShow } from '@tarojs/taro'
+import { memo, useCallback, useEffect, useState } from 'react'
+import styles from './index.module.scss'
+import Counter from '@/components/counter'
+import LabAndImg from '@/components/LabAndImg'
+
+interface ProductItemParamType {
+  code: string
+  id: number
+  name: string
+}
+
+export interface ParamItem {
+  id: number
+  affiliation_product: ProductItemParamType[]
+  color_card_name: string
+  texture_url: string
+  lab: { l: number; a: number; b: number }
+  rgb: { r: number; g: number; b: number }
+  is_add: boolean
+  count?: number
+}
+
+export interface Param {
+  value: ParamItem
+  onChangeNum?: (val: { id: number; count: number }) => void
+  onDelData?: (val: number) => void
+}
+
+export default memo((props: Param) => {
+  return <ProductItem onChangeNum={props.onChangeNum} onDelData={props.onDelData} value={props.value} />
+})
+
+const ProductItem = memo((props: Param) => {
+  const { value } = props
+  const labAndImgObj = useCallback(
+    (item) => {
+      return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
+    },
+    [value],
+  )
+  const onChangeNum = (num) => {
+    props.onChangeNum?.({ id: value.id, count: num })
+  }
+  const onMin = () => {
+    Taro.showModal({
+      title: '确认删除所选色卡？',
+      success(res) {
+        if (res.confirm) {
+          props?.onDelData?.(value.id)
+        }
+        else if (res.cancel) {
+          props.onChangeNum?.({ id: value.id, count: 1 })
+        }
+      },
+    })
+  }
+  return <>
+    <View key={value.id} className={styles.card_item}>
+      <View className={styles.img}><LabAndImg value={labAndImgObj(props)} /></View>
+      <View className={styles.name_count}>
+        <Text>{value.color_card_name}</Text>
+        <View className={styles.btns}>
+          <View className={styles.count_btn}>
+            <Counter
+              minNum={1}
+              maxNum={2}
+              defaultNum={value.count}
+              onClickBtn={onChangeNum}
+              onBlue={onChangeNum}
+              unit="件"
+              onMin={onMin}
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  </>
+})