feats

src/components/Uploader/ImageUploader.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import Uploader from '.';
-
-export default (props) => {
-  const {value, onChange} = props;
-
-  const onDelete = (e) => {
-    const { file } = e.detail
-    const newVals = value.filter(x => x.url != file.url);
-    onChange(newVals);
-  }
-  
-  return (
-    <Uploader deletable fileList={value} onDelete={onDelete} onChange={onChange} />
-  )
-}

src/components/Uploader/index.jsx

@@ -1,21 +1,83 @@
 import React from 'react';
-import { Uploader } from '@antmjs/vantui';
+import Taro from '@tarojs/taro';
+import { View, Image, Video } from '@tarojs/components';
+import { Loading } from '@antmjs/vantui';
 import { uploadFiles } from '@/utils/request';
+import icon from '@/assets/icons/uploader.png';
+import closeIcon from '@/assets/icons/close.png';
+import style from './style.modules.less';
 
 export default (props) => {
-  const { fileList = [] } = props;
+  // value 为数组
+  // 单个元素结构为 { url, fileType }
+  const { value = [], onChange } = props;
+  const [loading, setLoading] = React.useState(false);
 
-  const onAfterRead = (e) => {
-    const { file, name } = e.detail
+  const onAdd = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
 
-    uploadFiles([file.url]).then(res => {
-      if (props.onChange) {
-        props.onChange(fileList.concat([{url: res[0], name}]));
+    setLoading(true);
+    Taro.chooseMedia({
+      maxDuration: 60,
+      sizeType: 'compressed',
+      success: (res) => {
+        const { tempFiles } = res;
+        uploadFiles(tempFiles).then(resp => {
+          setLoading(false);          
+          onChange(value.concat(resp));
+        }).catch((err) => {
+          console.error(err);
+          setLoading(false);
+        })
+      },
+      fail: (err) => {
+        console.error(err);
+        setLoading(false);
       }
-    });
+    })
+  }
+
+  const onDelete = (item) => {
+    const newVal = value.filter(x => x.url != item.url);
+    onChange(newVal);
+  }
+
+  const onPreview = (inx) => {
+    Taro.previewMedia({
+      sources: value.map(x => ({ url: x.url, type: x.fileType })),
+      current: inx,
+    })
   }
 
   return (
-    <Uploader onAfterRead={onAfterRead} {...props} />
+    <View className={style['uploader-wrapper']}>
+      <View className={style['uploader-box']}>
+        <View className={style['uploader-add']}>
+          <Image src={icon} onClick={onAdd} />
+          {
+            loading && (
+              <View>
+                <Loading color="#fff" />
+              </View>
+            )
+          }
+        </View>
+        {
+          value.map((item, inx) => (
+            <View key={item.url} className={style['uploader-item']}>
+              {
+                item.fileType == 'image' ?
+                  <Image src={item.url} onClick={() => onPreview(inx)} /> :
+                  <Video src={item.url} controls={false} onClick={() => onPreview(inx)} />
+              }
+              <View onClick={() => onDelete(item)}>
+                <Image src={closeIcon} />
+              </View>
+            </View>
+          ))
+        }
+      </View>
+    </View>
   )
 }

src/components/Uploader/style.modules.less

@@ -0,0 +1,64 @@
+
+.uploader-wrapper {
+  display: inline-block;
+  .uploader-box {
+    display: flex;
+
+    & > view {
+      flex: none;
+      width: 160px;
+      height: 160px;
+      position: relative;
+
+      image {
+        width: 100%;
+        height: 100%;
+      }
+
+      video {
+        width: 100%;
+        height: 100%;
+      }
+
+      & + view {
+        margin-left: 20px;
+      }
+    }
+
+    .uploader-add {
+      & > view {
+        position: absolute;
+        z-index: 2;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+
+        display: grid;
+        place-items: center;
+        background-color: rgba(0, 0, 0, .75);
+      }
+    }
+
+    .uploader-item {
+      background-color: rgba(0, 0, 0, .05);
+
+      & > view {
+        position: absolute;
+        z-index: 2;
+        width: 40%;
+        height: 40%;
+        top: 0;
+        right: 0;
+
+        & > image {
+          position: absolute;
+          width: 60%;
+          height: 60%;
+          top: -10px;
+          right: -10px;
+        }
+      }
+    }
+  }
+}

src/pages/issue/add/index.jsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components';
-import { Button, Notify, Field, Cell, CellGroup, Uploader } from '@antmjs/vantui';
+import { Button, Notify, Field, Cell, CellGroup } from '@antmjs/vantui';
 import Page from '@/layouts/index';
 import LocType from '@/components/locType';
 import IssueType from '@/components/issueType';
 import Map from '@/components/map';
-import ImageUploader from '@/components/Uploader/ImageUploader';
-import getAuthorize from '@/utils/authorize';
+import Uploader from '@/components/Uploader/index';
+import { getLocation } from '@/utils/authorize';
 import { ROLE_INSPECTOR } from '@/utils/user';
 import mapIcon from '@/assets/icons/marker.png';
+import { postTaIssue } from '@/services/taissue';
+import { warn } from '@/utils/message';
 
 export default (props) => {
 
@@ -21,10 +23,11 @@ export default (props) => {
     location: undefined,
     addr: undefined,
     content: undefined,
-    images: [],
+    attachList: [],
   });
   const [showLocType, setShowLocType] = React.useState(false);
   const [showIssueType, setShowIssueType] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
 
   const onLocTypeChange = (_, it) => {
     setFormData({
@@ -50,23 +53,33 @@ export default (props) => {
       [field]: value,
     })
   }
+
+  const onSubmit = () => {
+    try {
+      warn(!formData.addr, '请填写地址')
+      warn(!formData.locId, '请选择点位')
+      warn(!formData.content, '请填写问题描述')
+      warn(!formData.typeId, '请选择问题分类')
+      warn(!formData.attachList || formData.attachList.length < 1, '请上传照片')
+    } catch (e) {
+      return;
+    }
+
+    setLoading(true)
+    postTaIssue(formData).then(() => {
+      setLoading(false);
+      Taro.navigateBack({delta: 1});
+    }).catch(() => {
+      setLoading(false);
+    })
+  }
   
   React.useMemo(() => {
-    getAuthorize('scope.userLocation').then(() => {
-      Taro.getLocation({
-        success(res) {
-          onFieldChange('location', `${res.longitude},${res.latitude}`);
-        },
-        fail() {
-          Notify.show({
-            message: '获取位置失败, 请退出重试',
-            type: 'warning',
-          })
-        }
-      });
+    getLocation().then((res) => {
+      onFieldChange('location', `${res.longitude},${res.latitude}`);
     }).catch((err) => {
       Notify.show({
-        message: '未能获取位置, 程序部分功能将不能正常使用',
+        message: '获取位置失败, 请退出重试',
         type: 'warning',
       })
     });
@@ -130,13 +143,13 @@ export default (props) => {
 
         <Cell
           renderTitle={
-            <ImageUploader value={formData.images} onChange={e => onFieldChange('images',e)} />
+            <Uploader value={formData.attachList} onChange={e => onFieldChange('attachList',e)} />
           }
         />
       </CellGroup>
 
       <View style={{margin: '20px auto', padding: '0 1em'}}>
-        <Button block type="primary">提交</Button>
+        <Button block type="primary" loading={loading} onClick={onSubmit}>提交</Button>
       </View>
     </Page>
   )

src/services/taissue.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request';
+
+/*
+ * 分页查询
+ */
+export const getTaIssue = (params) => request('/api/taIssue', { params });
+
+/*
+ * 新增数据
+ */
+export const postTaIssue = (data) => request('/api/taIssue', { data, method: 'post' });
+
+/*
+ * 通过ID查询单条数据
+ */
+export const getTaIssueById = (id) => request(`/api/taIssue/${id}`);
+
+/*
+ * 更新数据
+ */
+export const putTaIssue = (id, data) => request(`/api/taIssue/${id}`, { data, method: 'put' });
+
+/*
+ * 通过主键删除数据
+ */
+export const deleteTaIssue = (id) => request(`/api/taIssue/${id}`, { method: 'delete' });

src/utils/authorize.js

@@ -1,6 +1,6 @@
 import Taro from '@tarojs/taro';
 
-export default (scope) => {
+export default function getAuthorize(scope) {
   return new Promise((resolve, reject) => {
     Taro.getSetting({
       success(res) {
@@ -24,3 +24,22 @@ export default (scope) => {
     });
   });
 }
+
+export const getLocation = () => {
+  return new Promise((resolve, reject) => {
+    getAuthorize('scope.userLocation').then(() => {
+      Taro.getLocation({
+        success(res) {
+          resolve(res);
+        },
+        fail(err) {
+          console.error(err);
+          reject(err);
+        }
+      });
+    }).catch((err) => {
+      console.error(err);
+      reject(err);
+    });
+  });
+}

src/utils/message.js

@@ -0,0 +1,12 @@
+
+import { Notify } from '@antmjs/vantui';
+
+export function warn(predicate, message) {
+  if (predicate) {
+    Notify.show({
+      message,
+      type: 'warning',
+    })
+    throw new Error(message);
+  }
+}

src/utils/request.js

@@ -80,12 +80,16 @@ export const uploadFiles = async (files, url) => {
   for (var i = 0; i < files.length; i++) {
     uploads[i] = new Promise((resolve, reject) => {
       Taro.uploadFile({
-        url: url || `${HOST}/api/ma/image`,
-        filePath: files[i],
+        // eslint-disable-next-line no-undef
+        url: url || `${HOST}/api/ma/file`,
+        filePath: files[i].tempFilePath,
         header: {
           'authorization': token,
         },
         name: 'file',
+        formData: {
+          fileType: files[i].fileType,
+        },
         success: function (res) {
           // debugger
           const _data = JSON.parse(res.data)