add pic uploader in ticketnote

src/pages/TicketDetail/Comment.tsx

@@ -1,9 +1,10 @@
+import { ExpandItem } from '@/components/ExpandItem/ExpandItem';
 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, AtTextarea } from 'taro-ui';
+import { AtButton, AtForm, AtImagePicker, AtTextarea } from 'taro-ui';
 
 const submitInterval = 5000;
 
@@ -12,6 +13,7 @@ export class Comment extends Component {
     isLoading: false,
     isDisable: false,
     comment: '',
+    files: [],
   };
 
   props = {
@@ -27,6 +29,13 @@ export class Comment extends Component {
     return comment;
   }
 
+  handlePicChange(files: string[]) {
+    this.setState({
+      files: files,
+    });
+    return files;
+  }
+
   onCommentSubmit() {
     this.setState({
       isDisable: true,
@@ -62,7 +71,19 @@ export class Comment extends Component {
           height='400rpx'
           placeholder={pt.get().ticketDetail.comment.placeholder}
         />
-        <View style={{ height: '40rpx' }}></View>
+        <ExpandItem
+          title={pt.get().ticketDetail.comment.uploadPic.title}
+          content={
+            <View>
+              <AtImagePicker
+                showAddBtn={this.state.files.length !== 3}
+                count={3}
+                files={this.state.files}
+                onChange={this.handlePicChange.bind(this)}
+              />
+            </View>
+          }
+        />
         <AtButton
           loading={this.state.isLoading}
           disabled={this.state.isDisable}
@@ -71,6 +92,7 @@ export class Comment extends Component {
         >
           {pt.get().button.buttonText.submit}
         </AtButton>
+        <View style={{ marginBottom: '20rpx' }}></View>
       </AtForm>
     ) : (
       <View></View>

src/plain-text/TicketDetail.ts

@@ -35,6 +35,9 @@ export interface TicketDetailText {
     placeholder: string;
     createTicketMessage: string;
     statusModifyPrefix: string;
+    uploadPic: {
+      title: string;
+    };
   };
   status: {
     title: string;
@@ -79,6 +82,9 @@ export const ticketDetailZhCn: TicketDetailText = {
     placeholder: '可以在这里交流机器情况、维修进度、提出问题~',
     createTicketMessage: '创建了维修',
     statusModifyPrefix: '将维修状态改为：',
+    uploadPic: {
+      title: '上传说明图片处',
+    },
   },
   reminder: {
     title: '注意事项！',
@@ -132,6 +138,9 @@ export const ticketDetailEnUs: TicketDetailText = {
       'You can exchange information the device, the progress of repairs, and ask questions here.',
     createTicketMessage: 'Created ticket',
     statusModifyPrefix: 'Modified repair status to: ',
+    uploadPic: {
+      title: 'Upload description images',
+    },
   },
   reminder: {
     title: 'Reminder',