refactor PicUploader from TicketDetail/Comment

doc/api.md

@@ -249,7 +249,14 @@ Request
   "token": "token_test",
   "id": "id",
   "content": "为什么 PD 不能充电呢？",
-  "pic": ["https://....jpg"]
+}
+```
+
+Data
+
+```json
+{
+  "id": "id", // 返回的是评论的 id
 }
 ```
 

mock/api.ts

@@ -59,7 +59,9 @@ export default {
   },
   'POST /tickets/addnote': {
     success: true,
-    data: {},
+    data: {
+      id: 114,
+    },
   },
   'POST /tickets/create': {
     success: true,
@@ -138,4 +140,7 @@ export default {
       islogin: true,
     },
   },
+  'POST /upload/pic': {
+    success: true,
+  },
 };

src/components/PicUploader/PicUploader.config.ts

@@ -0,0 +1,3 @@
+export default {
+  component: true,
+};

src/components/PicUploader/PicUploader.tsx

@@ -0,0 +1,66 @@
+import { picUpload } from '@/service/picUpload';
+import { View } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import { Component, ReactNode } from 'react';
+import { AtImagePicker } from 'taro-ui';
+import { File } from 'taro-ui/types/image-picker';
+
+const reLaunchInterval = 1000;
+
+interface PicUploaderState {
+  files: File[];
+}
+
+interface PicUploaderProps {
+  source: string;
+  id: number;
+  superId?: number;
+}
+
+export default class PicUploader extends Component<
+  PicUploaderProps,
+  PicUploaderState
+> {
+  state = {
+    files: [] as File[],
+  };
+  onUpload() {
+    if (this.state.files.length !== 0) {
+      for (let file of this.state.files) {
+        picUpload(this, file.url);
+      }
+    }
+    if (this.props.source == 'comment') {
+      setTimeout(() => {
+        Taro.reLaunch({
+          url: '/pages/TicketDetail/TicketDetail?id=' + this.props.superId,
+        });
+      }, reLaunchInterval);
+    } else if (this.props.source == 'conclusion') {
+      setTimeout(() => {
+        Taro.reLaunch({
+          url: '/pages/index/index',
+        });
+      }, reLaunchInterval);
+    }
+  }
+  handlePicChange(files: File[]) {
+    this.setState({
+      files: files,
+    });
+    return files;
+  }
+  render(): ReactNode {
+    return (
+      <View>
+        <AtImagePicker
+          showAddBtn={this.state.files.length !== 3}
+          count={3}
+          files={this.state.files}
+          sizeType={['compressed']}
+          onChange={this.handlePicChange.bind(this)}
+        />
+      </View>
+    );
+  }
+}

src/pages/TicketDetail/Comment.tsx

@@ -1,21 +1,29 @@
 import { ExpandItem } from '@/components/ExpandItem/ExpandItem';
+import PicUploader from '@/components/PicUploader/PicUploader';
 import pt from '@/plain-text';
 import { submitComment } from '@/service/submitComment';
 import { View } from '@tarojs/components';
 import Taro from '@tarojs/taro';
-import { Component, ReactNode } from 'react';
-import { AtButton, AtForm, AtImagePicker, AtTextarea } from 'taro-ui';
+import React, { Component, ReactNode } from 'react';
+import { AtButton, AtForm, AtTextarea } from 'taro-ui';
 
 const submitInterval = 5000;
 
+export interface commentData {
+  content: string;
+  id: number;
+}
+
 export class Comment extends Component {
   state = {
     isLoading: false,
     isDisable: false,
     comment: '',
-    files: [],
+    commentId: 0,
   };
 
+  uploaderRef = React.createRef<PicUploader>();
+
   props = {
     setFloatLayout: (_: boolean) => {},
     id: 0,
@@ -29,13 +37,6 @@ export class Comment extends Component {
     return comment;
   }
 
-  handlePicChange(files: string[]) {
-    this.setState({
-      files: files,
-    });
-    return files;
-  }
-
   onCommentSubmit() {
     this.setState({
       isDisable: true,
@@ -54,6 +55,7 @@ export class Comment extends Component {
       return;
     }
     submitComment(this);
+    this.uploaderRef.current?.onUpload();
     setTimeout(() => {
       this.setState({
         isDisable: false,
@@ -74,15 +76,12 @@ export class Comment extends Component {
         <ExpandItem
           title={pt.get().ticketDetail.comment.uploadPic.title}
           content={
-            <View>
-              <AtImagePicker
-                showAddBtn={this.state.files.length !== 3}
-                count={3}
-                files={this.state.files}
-                sizeType={['compressed']}
-                onChange={this.handlePicChange.bind(this)}
-              />
-            </View>
+            <PicUploader
+              ref={this.uploaderRef}
+              source='comment'
+              superId={this.props.id}
+              id={this.state.commentId}
+            />
           }
         />
         <AtButton

src/service/picUpload.ts

@@ -0,0 +1,35 @@
+import PicUploader from '@/components/PicUploader/PicUploader';
+import Taro from '@tarojs/taro';
+import pt from '@/plain-text';
+import wechatUser from '@/wechat';
+import { randomString } from '@/utils/random';
+import { getUrl } from '.';
+
+const randomLength = 8;
+
+export function picUpload(that: PicUploader, file: string) {
+  Taro.uploadFile({
+    url: getUrl('/upload/pic'),
+    filePath: file,
+    name: randomString(randomLength),
+    formData: {
+      token: wechatUser.getToken(),
+      source: that.props.source,
+      id: that.props.id,
+    },
+  })
+    .then((res) => {
+      console.log(res.data);
+      Taro.atMessage({
+        message: pt.get().button.submitText.success,
+        type: 'success',
+      });
+    })
+    .catch((err) => {
+      console.log(err.errMsg);
+      Taro.atMessage({
+        message: pt.get().button.submitText.error + err.errMsg,
+        type: 'error',
+      });
+    });
+}

src/service/submitComment.ts

@@ -4,36 +4,29 @@ import pt from '@/plain-text';
 import wechatUser from '@/wechat';
 import { getUrl } from '.';
 
-const reLaunchInterval = 1000;
-
 export function submitComment(that: Comment) {
   that.setState({
     isLoading: true,
   });
   Taro.request({
-    url: getUrl('/ticket/addnote'),
+    url: getUrl('/tickets/addnote'),
     method: 'POST',
     data: {
       token: wechatUser.getToken(),
       content: that.state.comment,
       id: that.props.id,
-      pic: that.state.files,
     },
   })
     .then((res) => {
       console.log(res.data);
       that.setState({
         isLoading: false,
+        commentId: res.data.data.id,
       });
       Taro.atMessage({
         message: pt.get().button.submitText.success,
         type: 'success',
       });
-      setTimeout(() => {
-        Taro.reLaunch({
-          url: '/pages/TicketDetail/TicketDetail?id=' + that.props.id,
-        });
-      }, reLaunchInterval);
     })
     .catch((err) => {
       console.log(err.errMsg);

src/utils/random.ts

@@ -1,3 +1,14 @@
 export const randomInt = (floor: number, ceiling: number) => {
   return Math.floor(Math.random() * (ceiling - floor + 1) + floor);
 };
+
+export const randomString = (length: number) => {
+  const chars =
+    '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  const maxPos = chars.length;
+  let randomStr = '';
+  for (let i = 0; i < length; i++) {
+    randomStr += chars.charAt(Math.floor(Math.random() * maxPos));
+  }
+  return randomStr;
+};