feats

src/components/Uploader/ImageUploader.jsx

+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

+import React from 'react';
+import { Uploader } from '@antmjs/vantui';
+import { uploadFiles } from '@/utils/request';
+
+export default (props) => {
+  const { fileList = [] } = props;
+
+  const onAfterRead = (e) => {
+    const { file, name } = e.detail
+
+    uploadFiles([file.url]).then(res => {
+      if (props.onChange) {
+        props.onChange(fileList.concat([{url: res[0], name}]));
+      }
+    });
+  }
+
+  return (
+    <Uploader onAfterRead={onAfterRead} {...props} />
+  )
+}

src/pages/issue/add/index.jsx

 import React from 'react';
 import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components';
-import { Notify, Field, Cell, CellGroup, Uploader } from '@antmjs/vantui';
+import { Button, Notify, Field, Cell, CellGroup, Uploader } 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 { ROLE_INSPECTOR } from '@/utils/user';
 import mapIcon from '@/assets/icons/marker.png';
 
 export default (props) => {
 
+  const [formData, setFormData] = React.useState({
+    typeId: undefined,
+    typeName: undefined,
+    locId: undefined,
+    locName: undefined,
+    location: undefined,
+    addr: undefined,
+    content: undefined,
+    images: [],
+  });
   const [showLocType, setShowLocType] = React.useState(false);
   const [showIssueType, setShowIssueType] = React.useState(false);
-  const [loc, setLoc] = React.useState();
-  const [locType, setLocType] = React.useState();
-  const [issueType, setIssueType] = React.useState();
-  const [address, setAddress] = React.useState();
 
   const onLocTypeChange = (_, it) => {
-    setLocType(it);
+    setFormData({
+      ...formData,
+      locId: it.typeId,
+      locName: it.name,
+    });
     setShowLocType(false);
   }
+
   const onIssueTypeChange = (_, it) => {
-    setIssueType(it);
+    setFormData({
+      ...formData,
+      typeId: it.typeId,
+      typeName: it.name,
+    });
     setShowIssueType(false);
   }
+
+  const onFieldChange = (field, value) => {
+    setFormData({
+      ...formData,
+      [field]: value,
+    })
+  }
   
   React.useMemo(() => {
     getAuthorize('scope.userLocation').then(() => {
       Taro.getLocation({
         success(res) {
-          setLoc(`${res.longitude},${res.latitude}`);
+          onFieldChange('location', `${res.longitude},${res.latitude}`);
         },
         fail() {
           Notify.show({
     <Page roles={[ROLE_INSPECTOR]}>
       <LocType
         show={showLocType}
-        value={locType?.typeId}
+        value={formData.addr}
         onCancel={() => setShowLocType(false)}
         onChange={onLocTypeChange}
       />
 
       <IssueType
         show={showIssueType}
-        value={issueType?.typeId}
+        value={formData.typeName}
         onCancel={() => setShowIssueType(false)}
         onChange={onIssueTypeChange}
       />
 
-      <Map location={loc} />
+      <Map location={formData.location} />
 
       <Field
-        value={address}
+        value={formData.addr}
         leftIcon={mapIcon}
         placeholder="请输入地址"
-        onChange={e => setAddress(e.detail)}
+        onChange={e => onFieldChange('addr', e.detail)}
       />
 
       <CellGroup style={{marginTop: '20px'}}>
         <Cell
           isLink
           title="点位"
-          value={locType?.name}
+          value={formData.locName}
           onClick={() => setShowLocType(true)}
         />
 
           type="textarea"
           placeholder="请输入问题描述"
           autosize={{ minHeight: '120px' }}
+          value={formData.content}
+          onChange={e => onFieldChange('content', e.detail)}
         />
       </CellGroup>
       
         isLink
         title="问题分类"
         style={{marginTop: '20px'}}
-        value={issueType?.name}
+        value={formData.typeName}
         onClick={() => setShowIssueType(true)}
       />
 
 
         <Cell
           renderTitle={
-            <Uploader
-              deletable
-            />
+            <ImageUploader value={formData.images} onChange={e => onFieldChange('images',e)} />
           }
         />
       </CellGroup>
+
+      <View style={{margin: '20px auto', padding: '0 1em'}}>
+        <Button block type="primary">提交</Button>
+      </View>
     </Page>
   )
 }

src/utils/request.js

 
   });
 }
+
+
+export const uploadFiles = async (files, url) => {
+  const uploads = []
+  const token = getToken();
+  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],
+        header: {
+          'authorization': token,
+        },
+        name: 'file',
+        success: function (res) {
+          // debugger
+          const _data = JSON.parse(res.data)
+          // if (_data.code !== CODE_SUCCESS) {
+          //   reject(new Error(_data.message))
+          // }
+
+          resolve(_data.data)
+        },
+        fail(err) {
+          reject(err)
+        }
+      })
+    })
+  }
+
+  return Promise.all(uploads)
+}