feat: 收货ui

src/pages/receive/hooks.js

@@ -0,0 +1,39 @@
+import {useState} from 'react';
+import {showModal, chooseMedia} from '@tarojs/taro';
+
+export function useUpload() {
+  const [files, setFiles] = useState([]);
+
+  function onAdd() {
+    chooseMedia({
+      count: 9,
+      mediaType: ['image'],
+      sourceType: ['album', 'camera'],
+      success(res) {
+        const {tempFiles} = res;
+        setFiles(function (prev) {
+          const imgs = tempFiles.map(val => val.tempFilePath);
+          return [...prev, ...imgs];
+        });
+      },
+    });
+  }
+
+  function onRemove(idx) {
+    return function () {
+      showModal({
+        title: '删除图片',
+        content: `你确定要删除第${idx + 1}张图片吗？`,
+        success() {
+          setFiles(function (prev) {
+            const next = [...prev];
+            next.splice(idx, 1);
+            return next;
+          });
+        },
+      });
+    };
+  }
+
+  return [files, {onAdd, onRemove}];
+}

src/pages/receive/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '确认收货',
+});

src/pages/receive/index.jsx

@@ -0,0 +1,62 @@
+import {View, Image, Text} from '@tarojs/components';
+import icon from '@assets/goods/complate.svg';
+import {TextGroup} from '@components';
+import {useScanOrder} from '@hooks';
+import {Button} from '@nutui/nutui-react-taro';
+import {useUpload} from './hooks';
+import Upload from './upload';
+
+export default function Receive() {
+  const [{goodsList, customerNo, truckNo}, onScan] = useScanOrder();
+  const [files, {onRemove, onAdd}] = useUpload();
+
+  return (
+    <View className='h-screen overflow-auto bg-gray-100 flex flex-col'>
+      <View className='py-4 bg-white'>
+        <Image src={icon} mode='widthFix' className='w-14 mx-auto' />
+
+        <Text className='px-3 text-center mt-2 block text-lg font-semibold text-[#333]'>
+          确认收货单
+        </Text>
+      </View>
+
+      <View className='mt-px bg-white px-4 py-2'>
+        <TextGroup title='卡车号' content={truckNo} />
+        <TextGroup title='客户号' content={customerNo} />
+      </View>
+
+      {goodsList.length > 0 ? (
+        <View className='mt-px bg-white p-4'>
+          <Text className='text-lg font-semibold'>货品信息</Text>
+
+          <View className='mt-3'>
+            {goodsList.map(function ({no, num}) {
+              return (
+                <View
+                  key={no}
+                  className='border-0 border-b border-dashed border-gray-100 last:border-none'
+                >
+                  <TextGroup title='品号' content={no} />
+                  <TextGroup title='数量' content={Number(num)} />
+                </View>
+              );
+            })}
+          </View>
+        </View>
+      ) : null}
+
+      <View className='mt-3 bg-white px-4 py-2  mb-10'>
+        <Upload files={files} onDelete={onRemove} onAdd={onAdd} />
+      </View>
+
+      <View className='flex mt-auto justify-around pb-12'>
+        <Button className='w-36' onClick={onScan}>
+          扫码
+        </Button>
+        <Button type='primary' className='w-36' color='#58C6EA'>
+          确认收货
+        </Button>
+      </View>
+    </View>
+  );
+}

src/pages/receive/upload/hooks.js

@@ -0,0 +1,14 @@
+import {previewMedia} from '@tarojs/taro';
+
+export function usePreview(files) {
+  function onPreview(idx) {
+    return function () {
+      previewMedia({
+        sources: files.map(url => ({url})),
+        current: idx,
+      });
+    };
+  }
+
+  return onPreview;
+}

src/pages/receive/upload/index.jsx

@@ -0,0 +1,46 @@
+import {Image, View} from '@tarojs/components';
+import cameraIcon from '@assets/goods/camera.svg';
+import classNames from 'classnames';
+import {usePreview} from './hooks';
+
+export default function Upload({files, onDelete, onAdd}) {
+  const onClick = usePreview(files);
+
+  return (
+    <View className='w-full grid grid-cols-3 gap-2'>
+      {files.map(function (url, idx) {
+        return (
+          <View
+            key={url}
+            className='w-full pt-[100%] relative rounded-md overflow-hidden'
+          >
+            <View
+              className={classNames(
+                'absolute top-0 left-0 right-0 bottom-0 bg-gray-200',
+                'flex justify-center items-center',
+                'bg-cover bg-no-repeat bg-center',
+              )}
+              style={{
+                backgroundImage: `url(${url})`,
+              }}
+              onClick={onClick(idx)}
+              onLongPress={onDelete(idx)}
+            />
+          </View>
+        );
+      })}
+
+      <View className='w-full pt-[100%] relative rounded-md overflow-hidden'>
+        <View
+          className={classNames(
+            'absolute top-0 left-0 right-0 bottom-0 bg-gray-200',
+            'flex justify-center items-center',
+          )}
+          onClick={onAdd}
+        >
+          <Image src={cameraIcon} mode='widthFix' className='w-8' />
+        </View>
+      </View>
+    </View>
+  );
+}