feat: 增加发货图片

src/apis/deliver.js

@@ -5,7 +5,7 @@ const BASE_URL = '/dispatch';
 /**
  * 上传发货单
  *
- * [
+ *
     {
       "dataList": [
         {
@@ -15,8 +15,8 @@ const BASE_URL = '/dispatch';
       ],
       "customer": "tempor quis anim",
       "truckNo": "anim commodo velit est consequat"
+      "presentImages": ""
     }
-  ]
  * */
 export function addDeliver(data) {
   return post({url: `${BASE_URL}/addDispatch`, data});

src/components/index.js

@@ -1,3 +1,4 @@
 export {default as TextGroup} from './text-group';
 export {default as Refresh} from './refresh';
 export {default as Empty} from './empty';
+export {default as Upload} from './upload';

src/components/upload/index.jsx

@@ -0,0 +1,49 @@
+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='my-3 bg-white px-4 py-2'>
+      <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>
+    </View>
+
+  );
+}

src/hooks/index.js

@@ -3,3 +3,4 @@ export * from './use-navigate';
 export * from './use-infinite-fetch';
 export * from './use-success-toast';
 export * from './use-params';
+export * from './use-upload';

src/hooks/use-upload/index.js

@@ -0,0 +1,52 @@
+import {useState} from 'react';
+import {showLoading, hideLoading, chooseMedia, showModal} from '@tarojs/taro';
+import {useMutation} from '@tanstack/react-query';
+import {uploadImg} from '@apis';
+
+export function useUpload() {
+  const [files, setFiles] = useState([]);
+
+  const {mutate} = useMutation({
+    mutationFn: uploadImg,
+    onMutate() {
+      showLoading({title: '正在提交图片', mask: true});
+    },
+    onSettled() {
+      hideLoading({noConflict: true});
+    },
+    onSuccess(data) {
+      data.code === '200' && setFiles(prev => [...prev, data.data.data]);
+    },
+  });
+
+  function onAdd() {
+    chooseMedia({
+      count: 1,
+      mediaType: ['image'],
+      sourceType: ['album', 'camera'],
+      success(res) {
+        const {tempFiles} = res;
+        mutate(tempFiles[0].tempFilePath);
+      },
+    });
+  }
+
+  function onRemove(idx) {
+    return function() {
+      showModal({
+        title: '删除图片',
+        content: `你确定要删除第${idx + 1}张图片吗？`,
+        success({confirm}) {
+          confirm
+            && setFiles(function(prev) {
+              const next = [...prev];
+              next.splice(idx, 1);
+              return next;
+            });
+        },
+      });
+    };
+  }
+
+  return [files, {onAdd, onRemove, setFiles}];
+}

src/pages/deliver/hooks.js

@@ -38,7 +38,7 @@ export function useDate(customerNo) {
   return [date, onDateChagne];
 }
 
-export function useSubmit({goodsList, customerNo, truckNo, date}) {
+export function useSubmit({goodsList, customerNo, truckNo, date, files}) {
   const dataList = useMemo(
     function() {
       return goodsList.map(function({no, num}) {
@@ -60,6 +60,9 @@ export function useSubmit({goodsList, customerNo, truckNo, date}) {
     if (!customerNo || !truckNo) {
       return showToast({title: '请先扫码', icon: 'error'});
     }
+    if (files.length === 0) {
+      return showToast({title: '请上传图片信息', icon: 'error'});
+    }
 
     showModal({
       title: '提交发货',
@@ -71,6 +74,7 @@ export function useSubmit({goodsList, customerNo, truckNo, date}) {
             customer: customerNo,
             truckNo,
             arrivalTime: date,
+            presentImages: files.join(','),
           });
       },
     });

src/pages/deliver/index.jsx

@@ -1,10 +1,10 @@
 import {Image, Text, View, Picker} from '@tarojs/components';
 import icon from '@assets/goods/sending.svg';
 import {Button} from '@antmjs/vantui';
-import {TextGroup as Item} from '@components';
+import {TextGroup as Item, Upload} from '@components';
 import {useSubmit} from './hooks';
 import dayjs from 'dayjs';
-import {useScanOrder} from '@hooks';
+import {useScanOrder, useUpload} from '@hooks';
 import {BTN_LOADING_SIZE} from '@utils';
 
 export default function DeliverGoods() {
@@ -12,11 +12,13 @@ export default function DeliverGoods() {
     {goodsList, customerNo, truckNo, date},
     {onScan, setDate: onDateChange},
   ] = useScanOrder();
+  const [files, {onAdd, onRemove}] = useUpload();
   const [isLoading, onSubmit] = useSubmit({
     goodsList,
     customerNo,
     truckNo,
     date,
+    files,
   });
 
   return (
@@ -43,7 +45,7 @@ export default function DeliverGoods() {
       </View>
 
       {goodsList.length > 0 ? (
-        <View className='mt-px bg-white p-4 mb-10'>
+        <View className='mt-px bg-white p-4'>
           <Text className='text-lg font-semibold'>货品信息</Text>
 
           <View className='mt-3'>
@@ -62,6 +64,8 @@ export default function DeliverGoods() {
         </View>
       ) : null}
 
+      <Upload files={files} onAdd={onAdd} onDelete={onRemove} />
+
       <View className='flex mt-auto justify-around pb-12'>
         <Button className='w-36' onClick={onScan} round disabled={isLoading}>
           扫码

src/pages/list/item/index.jsx

@@ -20,6 +20,7 @@ export default function Item({
   onClear,
   onEdit,
   name,
+  presentImages,
 }) {
   const onClick = usePreview();
   const {className, msg} = useOrderState(states, anomaly, {time: arrivalTime});
@@ -100,6 +101,17 @@ export default function Item({
       </View>
 
       <View className='flex justify-end mt-4 gap-3'>
+        {presentImages ? (
+          <Button
+            className={classNames(
+              'border border-solid border-gray-300',
+              'text-sm w-28 leading-8 bg-white h-8 rounded-full',
+            )}
+            onClick={onClick(presentImages ? presentImages.split(',') : [])}
+          >
+            查看发货图片
+          </Button>
+        ) : null}
         {imgs ? (
           <Button
             className={classNames(

src/pages/receive/hooks.js

@@ -1,64 +1,10 @@
 import {useState, useEffect} from 'react';
-import {
-  showModal,
-  chooseMedia,
-  showLoading,
-  hideLoading,
-  showToast,
-} from '@tarojs/taro';
+import {showModal, showLoading, hideLoading, showToast} from '@tarojs/taro';
 import {useMutation, useQuery} from '@tanstack/react-query';
-import {confirmDeliver, getInfo, uploadImg} from '@apis';
+import {confirmDeliver, getInfo} from '@apis';
 import {useBoolean} from 'ahooks';
 import {useSuccessToast} from '@hooks';
 
-export function useUpload() {
-  const [files, setFiles] = useState([]);
-
-  const {mutate} = useMutation({
-    mutationFn: uploadImg,
-    onMutate() {
-      showLoading({title: '正在提交图片', mask: true});
-    },
-    onSettled() {
-      hideLoading({noConflict: true});
-    },
-    onSuccess(data) {
-      data.code === '200' && setFiles(prev => [...prev, data.data.data]);
-    },
-  });
-
-  function onAdd() {
-    chooseMedia({
-      count: 1,
-      mediaType: ['image'],
-      sourceType: ['album', 'camera'],
-      success(res) {
-        const {tempFiles} = res;
-        mutate(tempFiles[0].tempFilePath);
-      },
-    });
-  }
-
-  function onRemove(idx) {
-    return function() {
-      showModal({
-        title: '删除图片',
-        content: `你确定要删除第${idx + 1}张图片吗？`,
-        success({confirm}) {
-          confirm
-            && setFiles(function(prev) {
-              const next = [...prev];
-              next.splice(idx, 1);
-              return next;
-            });
-        },
-      });
-    };
-  }
-
-  return [files, {onAdd, onRemove, setFiles}];
-}
-
 export function useAnomaly() {
   const [anomaly, {set: setAnomaly}] = useBoolean();
   const [note, setNote] = useState('');

src/pages/receive/index.jsx

@@ -1,10 +1,9 @@
 import {View, Image, Text} from '@tarojs/components';
 import icon from '@assets/goods/complate.svg';
-import {TextGroup} from '@components';
-import {useScanOrder} from '@hooks';
+import {TextGroup, Upload} from '@components';
+import {useScanOrder, useUpload} from '@hooks';
 import {Button} from '@antmjs/vantui';
-import {useAnomaly, useInfo, useSubmit, useUpload} from './hooks';
-import Upload from './upload';
+import {useAnomaly, useInfo, useSubmit} from './hooks';
 import Exception from './exception';
 import {BTN_LOADING_SIZE} from '@utils';
 
@@ -56,9 +55,7 @@ export default function Receive() {
         </View>
       ) : null}
 
-      <View className='mt-3 bg-white px-4 py-2'>
-        <Upload files={files} onDelete={onRemove} onAdd={onAdd} />
-      </View>
+      <Upload files={files} onDelete={onRemove} onAdd={onAdd} />
 
       <View className='mt-3 bg-white px-4 py-2 mb-10'>
         <Exception

src/pages/receive/upload/index.jsx

@@ -1,46 +0,0 @@
-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>
-  );
-}

src/utils/constants.js

@@ -1,7 +1,7 @@
 /** 请求地址 */
 export const NETWORK_URL
   = process.env.NODE_ENV === 'development'
-    ? 'https://tms.tuyatrip.com'
+    ? 'http://192.168.0.147:8090'
     : 'https://tms.tuyatrip.com';
 /** token存储 */
 export const USER_TOKEN_STORAGE = 'userToken';