feat: 发货单列表默认收起物料信息

config/index.js

@@ -73,7 +73,7 @@ const config = {
         },
       },
       cssModules: {
-        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
         config: {
           namingPattern: 'module', // 转换模式，取值为 global/module
           generateScopedName: '[local]-[hash:base64:5]',

src/pages/list/item/index.jsx

@@ -3,6 +3,8 @@ import {View, Text, Button, Picker} from '@tarojs/components';
 import classNames from 'classnames';
 import {TextGroup} from '@components';
 import dayjs from 'dayjs';
+import {useState} from 'react';
+import {useBoolean} from 'ahooks';
 
 export default function Item({
   anomaly,
@@ -21,6 +23,8 @@ export default function Item({
 }) {
   const onClick = usePreview();
   const {className, msg} = useOrderState(states, anomaly, {time: arrivalTime});
+  const [expansion, {toggle}] = useBoolean();
+  const listHeight = dataList.length * 20;
 
   return (
     <View className='bg-white mx-4 rounded-lg px-3 py-4 mt-3 first:mt-0'>
@@ -45,17 +49,28 @@ export default function Item({
 
       <View className='mt-4 overflow-hidden border-0 border-b border-dashed border-gray-200 pb-4'>
         <View className='flex overflow-hidden text-sm text-gray-500'>
-          <Text className='flex-1 block text-over mr-2'>品号</Text>
-          <Text className='w-[7em]'>数量</Text>
+          <Text className='flex-1 block text-over mr-2' onClick={toggle}>
+            品号
+          </Text>
+          <Text className='w-[7em]' onClick={toggle}>
+            数量
+          </Text>
+        </View>
+        <View
+          className='transition-all overflow-hidden duration-500 ease-in-out'
+          style={{height: expansion ? listHeight : 0}}
+        >
+          {dataList.map(function ({id, partNumber, qty}) {
+            return (
+              <View className='flex overflow-hidden text-sm mt-2' key={id}>
+                <Text className='flex-1 block text-over mr-2'>
+                  {partNumber}
+                </Text>
+                <Text className='w-[7em]'>{qty}</Text>
+              </View>
+            );
+          })}
         </View>
-        {dataList.map(function ({id, partNumber, qty}) {
-          return (
-            <View className='flex overflow-hidden text-sm mt-2' key={id}>
-              <Text className='flex-1 block text-over mr-2'>{partNumber}</Text>
-              <Text className='w-[7em]'>{qty}</Text>
-            </View>
-          );
-        })}
       </View>
 
       <View className='mt-4'>