feat: 订单列表ui

src/app.config.js

@@ -1,5 +1,10 @@
 export default defineAppConfig({
-  pages: ['pages/index/index', 'pages/receive/index', 'pages/deliver/index'],
+  pages: [
+    'pages/index/index',
+    'pages/list/index',
+    'pages/receive/index',
+    'pages/deliver/index',
+  ],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',

src/components/text-group/index.jsx

@@ -1,8 +1,9 @@
 import {Text, View} from '@tarojs/components';
+import classNames from 'classnames';
 
-export default function Item({title, content}) {
+export default function Item({title, content, className}) {
   return (
-    <View className='text-sm flex py-2'>
+    <View className={classNames('text-sm flex py-2', className)}>
       <Text className='w-20 text-gray-500'>{title}:</Text>
       <Text className='flex-1 text-[#333] font-bold break-all'>{content}</Text>
     </View>

src/pages/index/index.jsx

@@ -6,7 +6,7 @@ import orderIcon from '@assets/order.svg';
 import face from '@assets/face.svg';
 import Login from './login';
 import {useBoolean} from 'ahooks';
-import {DELIVER_GOODS_PATH, RECEIVE_GOODS_PATH} from '@routes';
+import {DELIVER_GOODS_PATH, ORDER_PATH, RECEIVE_GOODS_PATH} from '@routes';
 
 const btnList = [
   {
@@ -16,7 +16,10 @@ const btnList = [
       {title: '收货', icon: complateIcon, url: RECEIVE_GOODS_PATH},
     ],
   },
-  {title: '历史记录', children: [{title: '订单', icon: orderIcon, url: ''}]},
+  {
+    title: '历史记录',
+    children: [{title: '发货单', icon: orderIcon, url: ORDER_PATH}],
+  },
 ];
 
 export default function App() {

src/pages/list/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '发货单记录',
+});

src/pages/list/index.jsx

@@ -0,0 +1,64 @@
+import {TextGroup} from '@components';
+import {Text, View} from '@tarojs/components';
+import classNames from 'classnames';
+import {Button} from '@nutui/nutui-react-taro';
+
+export default function List() {
+  return (
+    <View className='h-screen overflow-auto bg-gray-200 py-4'>
+      <View className='bg-white mx-4 rounded-lg px-3 py-4'>
+        <View
+          className={classNames(
+            'flex items-center overflow-hidden border-0 border-b border-gray-200 border-solid',
+            'pb-3',
+          )}
+        >
+          <Text className='flex-1 text-over text-[#333] mr-2 text-sm'>
+            TSDFSDFTSDF
+          </Text>
+          <View className='text-center w-16 h-7 leading-7 text-sm text-white bg-primary rounded-md'>
+            已送达
+          </View>
+        </View>
+
+        <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>
+          </View>
+          <View className='flex overflow-hidden text-sm mt-2'>
+            <Text className='flex-1 block text-over mr-2'>12312</Text>
+            <Text className='w-[7em]'>9871876</Text>
+          </View>
+          <View className='flex overflow-hidden text-sm mt-2'>
+            <Text className='flex-1 block text-over mr-2'>12312</Text>
+            <Text className='w-[7em]'>9871876</Text>
+          </View>
+          <View className='flex overflow-hidden text-sm mt-2'>
+            <Text className='flex-1 block text-over mr-2'>12312</Text>
+            <Text className='w-[7em]'>9871876</Text>
+          </View>
+        </View>
+
+        <View className='mt-4'>
+          <TextGroup title='卡车号' content='123' className='py-0' />
+          <TextGroup title='客户编号' content='123555' className='py-0 mt-2' />
+          <TextGroup
+            title='发货时间'
+            content='2020-12-22'
+            className='py-0 mt-2'
+          />
+          <TextGroup
+            title='送达时间'
+            content='2020-12-23'
+            className='py-0 mt-2'
+          />
+        </View>
+
+        <View className='flex justify-end mt-2'>
+          <Button className='!h-9 !text-sm'>查看图片</Button>
+        </View>
+      </View>
+    </View>
+  );
+}

src/routes/name.js

@@ -2,3 +2,5 @@
 export const DELIVER_GOODS_PATH = '/pages/deliver/index';
 /** 确认收货 */
 export const RECEIVE_GOODS_PATH = '/pages/receive/index';
+/** 发货单列表 */
+export const ORDER_PATH = '/pages/list/index';

src/styles/app.css

@@ -38,3 +38,9 @@ button {
     border: unset;
   }
 }
+
+.text-over {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}