add comment floatlayout in ticketdetail

src/pages/TicketDetail/TicketDetail.tsx

@@ -2,21 +2,40 @@ import { Component, ReactNode } from 'react';
 import { View } from '@tarojs/components';
 import { getCurrentInstance } from '@tarojs/runtime';
 import pt from '@/plain-text';
-import { AtButton, AtModal } from 'taro-ui';
+import {
+  AtButton,
+  AtFloatLayout,
+  AtForm,
+  AtMessage,
+  AtModal,
+  AtTextarea,
+} from 'taro-ui';
 import DetailFramework from '@/components/DetailFramework/DetailFramework';
 import PageFooter from '@/components/PageFooter/PageFooter';
+import { submitComment } from '@/service/submitComment';
+import Taro from '@tarojs/taro';
+
+const submitInterval = 5000;
 
 interface TicketDetailState {
   id: number;
   isMember: boolean;
-  showModel: boolean;
+  showOreoModal: boolean;
+  showCommentModal: boolean;
+  comment: string;
+  isLoading: boolean;
+  isDisable: boolean;
 }
 
 export default class TicketDetail extends Component<{}, TicketDetailState> {
   state: Readonly<TicketDetailState> = {
     id: 0,
     isMember: false,
-    showModel: false,
+    showOreoModal: false,
+    showCommentModal: false,
+    comment: '',
+    isLoading: false,
+    isDisable: false,
   };
 
   componentDidMount(): void {
@@ -31,20 +50,67 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
 
   onAddToOreo(): void {
     this.setState({
-      showModel: true,
+      showOreoModal: true,
     });
   }
 
-  handleCancel(): void {
+  onAddComment(): void {
     this.setState({
-      showModel: false,
+      showCommentModal: true,
     });
   }
 
-  handleConfirm(): void {
+  handleOreoCancel(): void {
+    this.setState({
+      showOreoModal: false,
+    });
+  }
+
+  handleCommentCancel(): void {
+    this.setState({
+      showCommentModal: false,
+    });
+  }
+
+  handleOreoConfirm(): void {
     return;
   }
 
+  handleCommentConfirm(): void {
+    return;
+  }
+
+  handleCommentChange(comment: string) {
+    this.setState({
+      comment: comment,
+    });
+    return comment;
+  }
+
+  onCommentSubmit() {
+    this.setState({
+      isDisable: true,
+    });
+    if (this.state.comment == '') {
+      Taro.atMessage({
+        message: pt.get().button.submitText.blank,
+        type: 'error',
+      });
+      setTimeout(() => {
+        this.setState({
+          isDisable: false,
+        });
+      }, submitInterval);
+      return;
+    }
+    submitComment(this);
+    setTimeout(() => {
+      this.setState({
+        isDisable: false,
+      });
+    }, submitInterval);
+  }
+
   render(): ReactNode {
     const middleButton = this.state.isMember ? (
       <View
@@ -67,6 +133,7 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
         <View
           className='at-col'
           style={{ marginRight: 10, paddingLeft: 5, width: '33%' }}
+          onClick={this.onAddComment.bind(this)}
         >
           <AtButton type='secondary'>{pt.get().ticketDetail.addNote}</AtButton>
         </View>
@@ -103,14 +170,38 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
     return (
       <View>
         <AtModal
-          isOpened={this.state.showModel}
+          isOpened={this.state.showOreoModal}
           title={pt.get().modal.addToOreo.title}
           cancelText={pt.get().modal.cancel}
           confirmText={pt.get().modal.confirm}
-          onCancel={this.handleCancel.bind(this)}
+          onCancel={this.handleOreoCancel.bind(this)}
-          onConfirm={this.handleConfirm.bind(this)}
+          onConfirm={this.handleOreoConfirm.bind(this)}
           content={pt.get().modal.addToOreo.content}
         />
+        <AtFloatLayout
+          isOpened={this.state.showCommentModal}
+          title={pt.get().ticketDetail.comment.title}
+          onClose={this.handleCommentCancel.bind(this)}
+        >
+          <AtForm onSubmit={this.onCommentSubmit.bind(this)}>
+            <AtMessage />
+            <AtTextarea
+              value={this.state.comment}
+              onChange={this.handleCommentChange.bind(this)}
+              maxLength={200}
+              height={200}
+              placeholder={pt.get().ticketDetail.comment.placeholder}
+            />
+            <AtButton
+              loading={this.state.isLoading}
+              formType='submit'
+              type='primary'
+              disabled={this.state.isDisable}
+            >
+              {pt.get().button.buttonText.submit}
+            </AtButton>
+          </AtForm>
+        </AtFloatLayout>
         <DetailFramework
           middleButton={middleButton}
           id={this.state.id}

src/pages/user/inform/inform.tsx

@@ -44,6 +44,11 @@ export default class InformPage extends Component {
         message: pt.get().button.submitText.blank,
         type: 'error',
       });
+      setTimeout(() => {
+        this.setState({
+          isDisable: false,
+        });
+      }, submitInterval);
       return;
     }
     updateUserInfo(this);

src/plain-text/TicketDetail.ts

@@ -14,6 +14,10 @@ export interface TicketDetailText {
   addToOreo: string;
   addNote: string;
   pick: string;
+  comment: {
+    title: string;
+    placeholder: string;
+  };
 }
 
 export const ticketDetailZhCn: TicketDetailText = {
@@ -37,6 +41,10 @@ export const ticketDetailZhCn: TicketDetailText = {
   addToOreo: '加入 Oreo',
   addNote: '添加评论',
   pick: '认领',
+  comment: {
+    title: '添加评论',
+    placeholder: '可以在这里交流机器情况、维修进度、提出问题~',
+  },
 };
 
 export const ticketDetailEnUs: TicketDetailText = {
@@ -60,4 +68,8 @@ export const ticketDetailEnUs: TicketDetailText = {
   addToOreo: 'Add to Oreo',
   addNote: 'Comment',
   pick: 'Pick',
+  comment: {
+    title: '添加评论',
+    placeholder: '可以在这里交流机器情况、维修进度、提出问题~',
+  },
 };

src/service/submitComment.ts

@@ -0,0 +1,38 @@
+import TicketDetail from '@/pages/TicketDetail/TicketDetail';
+import Taro from '@tarojs/taro';
+import pt from '@/plain-text';
+import { getUrl } from '.';
+
+export function submitComment(that: TicketDetail) {
+  that.setState({
+    isLoading: true,
+  });
+  Taro.request({
+    url: getUrl('/report'),
+    method: 'POST',
+    data: {
+      token: 'token_test',
+      comment: that.state.comment,
+    },
+  })
+    .then((res) => {
+      console.log(res.data);
+      that.setState({
+        isLoading: false,
+      });
+      Taro.atMessage({
+        message: pt.get().button.submitText.success,
+        type: 'success',
+      });
+    })
+    .catch((err) => {
+      console.log(err);
+      that.setState({
+        isLoading: false,
+      });
+      Taro.atMessage({
+        message: pt.get().button.submitText.error + err.toString(),
+        type: 'error',
+      });
+    });
+}