From c5cbf0d1969b563933770970a0a75d1dc3784ddb Mon Sep 17 00:00:00 2001
From: czm <2192718639@qq.com>
Date: Fri, 30 Dec 2022 14:13:39 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(=E5=AE=8C=E6=88=90=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E7=A0=81=E5=8D=95=E5=AF=B9=E6=8E=A5):?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../productBlock/index.module.scss            |  5 +++-
 .../colorSetting/productBlock/index.tsx       |  2 +-
 .../components/productItem/index.module.scss  |  6 +++++
 .../productBlock/index.module.scss            |  5 +++-
 .../productSetting/productBlock/index.tsx     |  2 +-
 .../components/wholeOrderSetting/index.tsx    |  2 +-
 .../productBlock/index.module.scss            |  6 +++--
 .../wholeOrderSetting/productBlock/index.tsx  | 26 ++++++++++++++++---
 8 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/pages/codeSetting/components/colorSetting/productBlock/index.module.scss b/src/pages/codeSetting/components/colorSetting/productBlock/index.module.scss
index a918300..5a83d68 100644
--- a/src/pages/codeSetting/components/colorSetting/productBlock/index.module.scss
+++ b/src/pages/codeSetting/components/colorSetting/productBlock/index.module.scss
@@ -35,9 +35,12 @@
     }
   }
   .product_list__item--con {
-    transition: height 0.3s ease-in-out;
+    // transition: height 0.3s ease-in-out;
     overflow: hidden;
   }
+  .product_list__item--con_close {
+    height: 0px !important;
+  }
   .open_up_icon {
     transform: rotate(180deg);
   }
diff --git a/src/pages/codeSetting/components/colorSetting/productBlock/index.tsx b/src/pages/codeSetting/components/colorSetting/productBlock/index.tsx
index 879658d..3048eb3 100644
--- a/src/pages/codeSetting/components/colorSetting/productBlock/index.tsx
+++ b/src/pages/codeSetting/components/colorSetting/productBlock/index.tsx
@@ -66,7 +66,7 @@ const Index = memo((props: IndexParam) => {
           <IconFont name="icon-rukou" size={35} />
         </View>
       </View>
-      <View style={{ height: upStatus ? '0rpx' : `${194 * productInfo?.product_color_details?.length}rpx` }} className={classNames(styles['product_list__item--con'])}>
+      <View className={classNames(styles['product_list__item--con'], upStatus && styles['product_list__item--con_close'])}>
         {productInfo?.product_color_details?.map(citem => <View key={citem?.product_color_id}><ProductItem codeItem={citem} /></View>)}
       </View>
       <View className={styles.up_btn} onClick={() => setStatus(!upStatus)}>{upStatus ? '查看更多' : '收起'}<View className={classNames(styles.up_icon, upStatus ? styles.open_up_icon : styles.close_up_icon)}><IconFont name="icon-shangla" size={35} /></View></View>
diff --git a/src/pages/codeSetting/components/productItem/index.module.scss b/src/pages/codeSetting/components/productItem/index.module.scss
index 2355556..b139283 100644
--- a/src/pages/codeSetting/components/productItem/index.module.scss
+++ b/src/pages/codeSetting/components/productItem/index.module.scss
@@ -19,6 +19,12 @@
         flex: 1;
         font-size: 28px;
         align-items: center;
+        text {
+          &:nth-child(1) {
+            max-width: 350px;
+            @include common_ellipsis();
+          }
+        }
       }
       .number {
         justify-self: self-end;
diff --git a/src/pages/codeSetting/components/productSetting/productBlock/index.module.scss b/src/pages/codeSetting/components/productSetting/productBlock/index.module.scss
index 12991b2..4625cc4 100644
--- a/src/pages/codeSetting/components/productSetting/productBlock/index.module.scss
+++ b/src/pages/codeSetting/components/productSetting/productBlock/index.module.scss
@@ -23,9 +23,12 @@
     }
   }
   .product_list__item--con {
-    transition: height 0.3s ease-in-out;
+    // transition: height 0.3s ease-in-out;
     overflow: hidden;
   }
+  .product_list__item--con_close {
+    height: 0px !important;
+  }
   .open_up_icon {
     transform: rotate(180deg);
   }
diff --git a/src/pages/codeSetting/components/productSetting/productBlock/index.tsx b/src/pages/codeSetting/components/productSetting/productBlock/index.tsx
index 0d406b0..f8ce31c 100644
--- a/src/pages/codeSetting/components/productSetting/productBlock/index.tsx
+++ b/src/pages/codeSetting/components/productSetting/productBlock/index.tsx
@@ -107,7 +107,7 @@ const Index = memo((props: IndexParam) => {
         <Text className={styles.mode_status}>{sale_mode_name}</Text>
       </View>
       <SettingNumber sale_mode={productInfo?.sale_mode} onNumber={getNumber} defaultValue={defaultNum} />
-      <View style={{ height: upStatus ? '0rpx' : `${194 * productInfo?.product_color_details?.length}rpx` }} className={classNames(styles['product_list__item--con'])}>
+      <View className={classNames(styles['product_list__item--con'], upStatus && styles['product_list__item--con_close'])}>
         {productInfo?.product_color_details?.map(citem => <View key={citem?.product_color_id}><ProductItem codeItem={citem} /></View>)}
       </View>
       <View className={styles.up_btn} onClick={() => setStatus(!upStatus)}>{upStatus ? '查看更多' : '收起'}<View className={classNames(styles.up_icon, upStatus ? styles.open_up_icon : styles.close_up_icon)}><IconFont name="icon-shangla" size={35} /></View></View>
diff --git a/src/pages/codeSetting/components/wholeOrderSetting/index.tsx b/src/pages/codeSetting/components/wholeOrderSetting/index.tsx
index 389634a..c190dbd 100644
--- a/src/pages/codeSetting/components/wholeOrderSetting/index.tsx
+++ b/src/pages/codeSetting/components/wholeOrderSetting/index.tsx
@@ -79,7 +79,7 @@ export default memo((props: Parma) => {
     <SettingNumber sale_mode={orderData?.sale_mode} onNumber={getNumber} defaultValue={defaultNum} />
     <View className={styles.product_list}>
       {productList?.map((item) => {
-        return <ProductBlock key={item.id} productInfo={item} sale_mode_name={orderData?.sale_mode_name} />
+        return <ProductBlock key={item.product_id} productInfo={item} sale_mode_name={orderData?.sale_mode_name} />
       })}
     </View>
   </>
diff --git a/src/pages/codeSetting/components/wholeOrderSetting/productBlock/index.module.scss b/src/pages/codeSetting/components/wholeOrderSetting/productBlock/index.module.scss
index 0bb29c9..63b1829 100644
--- a/src/pages/codeSetting/components/wholeOrderSetting/productBlock/index.module.scss
+++ b/src/pages/codeSetting/components/wholeOrderSetting/productBlock/index.module.scss
@@ -24,9 +24,11 @@
     }
   }
   .product_list__item--con {
-    transition: height 0.3s ease-in-out;
+    // transition: height 3s ease-in-out;
     overflow: hidden;
-    max-height: 5000px;
+  }
+  .product_list__item--con_close {
+    height: 0px !important;
   }
   .open_up_icon {
     transform: rotate(180deg);
diff --git a/src/pages/codeSetting/components/wholeOrderSetting/productBlock/index.tsx b/src/pages/codeSetting/components/wholeOrderSetting/productBlock/index.tsx
index ff57436..718fed0 100644
--- a/src/pages/codeSetting/components/wholeOrderSetting/productBlock/index.tsx
+++ b/src/pages/codeSetting/components/wholeOrderSetting/productBlock/index.tsx
@@ -1,5 +1,6 @@
 import { CustomWrapper, Text, View } from '@tarojs/components'
-import { memo, useCallback, useContext, useState } from 'react'
+import Taro from '@tarojs/taro'
+import { memo, useCallback, useContext, useEffect, useState } from 'react'
 import classNames from 'classnames'
 import ProductItem from '../../productItem'
 import styles from './index.module.scss'
@@ -45,6 +46,23 @@ const Index = memo((props: IndexParam) => {
   const onConfirm = (item) => {
     props.onChange?.(item)
   }
+
+  // const [height, setHeight] = useState('0rpx')
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     Taro.nextTick(() => {
+  //       const query = Taro.createSelectorQuery()
+  //       query
+  //         .select(`.product_list__item__con_${productInfo.}`)
+  //         .boundingClientRect((rect) => {
+  //           const clientHeight = rect.height
+  //           setHeight(Taro.pxTransform(clientHeight))
+  //         })
+  //         .exec()
+  //     })
+  //   }, 100)
+  // }, [productInfo])
+
   return <>
     <View key={productInfo.product_id} className={styles.product_list__item}>
       <View className={styles['product_list__item--title']} onClick={onUpdate}>
@@ -52,8 +70,10 @@ const Index = memo((props: IndexParam) => {
         <IconFont name="icon-shuru" size={50} />
         <Text className={styles.mode_status}>{sale_mode_name}</Text>
       </View>
-      <View style={{ height: upStatus ? '0rpx' : `${194 * productInfo?.product_color_details?.length}rpx` }} className={classNames(styles['product_list__item--con'])}>
-        {productInfo?.product_color_details?.map(citem => <View key={citem?.product_color_id}><ProductItem codeItem={citem} /></View>)}
+      <View className={classNames(styles['product_list__item--con'], upStatus && styles['product_list__item--con_close'])}>
+        <View className={`product_list__item__con_${productInfo.product_id}`}>
+          {productInfo?.product_color_details?.map(citem => <View key={citem?.product_color_id}><ProductItem codeItem={citem} /></View>)}
+        </View>
       </View>
       <View className={styles.up_btn} onClick={() => setStatus(!upStatus)}>{upStatus ? '查看更多' : '收起'}<View className={classNames(styles.up_icon, upStatus ? styles.open_up_icon : styles.close_up_icon)}><IconFont name="icon-shangla" size={35} /></View></View>
     </View>