refactor: split comment layout from ticketdetail

src/pages/TicketDetail/Comment.tsx

@@ -0,0 +1,79 @@
+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';
+
+const submitInterval = 5000;
+
+export class Comment extends Component {
+  state = {
+    isLoading: false,
+    isDisable: false,
+    comment: '',
+  };
+
+  props = {
+    setFloatLayout: (_: boolean) => {},
+    id: 0,
+    didMount: false,
+  };
+
+  handleCommentChange(comment: string) {
+    this.setState({
+      comment: comment,
+    });
+    return comment;
+  }
+
+  onCommentSubmit() {
+    this.setState({
+      isDisable: true,
+    });
+    this.props.setFloatLayout(false);
+    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 {
+    return this.props.didMount ? (
+      <AtForm onSubmit={this.onCommentSubmit.bind(this)}>
+        <AtTextarea
+          value={this.state.comment}
+          onChange={this.handleCommentChange.bind(this)}
+          maxLength={200}
+          height='400rpx'
+          placeholder={pt.get().ticketDetail.comment.placeholder}
+        />
+        <View style={{ height: '40rpx' }}></View>
+        <AtButton
+          loading={this.state.isLoading}
+          disabled={this.state.isDisable}
+          formType='submit'
+          type='primary'
+        >
+          {pt.get().button.buttonText.submit}
+        </AtButton>
+      </AtForm>
+    ) : (
+      <View></View>
+    );
+  }
+}

src/pages/TicketDetail/TicketDetail.tsx

@@ -11,11 +11,9 @@ import {
   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';
 import wechatUser from '@/wechat';
 import { addToOreo } from '@/service/addToOreo';
@@ -24,6 +22,7 @@ import { retrieve } from '@/service/retrieve';
 import { changeStatus } from '@/service/changeStatus';
 import { getDisable } from '@/service/getDisable';
 import { StatusStr } from './TicketNote';
+import { Comment } from './Comment';
 
 const submitInterval = 5000;
 
@@ -44,7 +43,6 @@ interface TicketDetailState {
       status: boolean;
     };
   };
-  comment: string;
   isLoading: {
     oreo: boolean;
     pick: boolean;
@@ -89,7 +87,6 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
         status: false,
       },
     },
-    comment: '',
     isLoading: {
       oreo: false,
       pick: false,
@@ -385,51 +382,16 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
     return;
   }
 
-  handleCommentChange(comment: string) {
+  setFloatLayout(show: boolean) {
     this.setState({
-      comment: comment,
-    });
-    return comment;
-  }
-
-  onCommentSubmit() {
-    this.setState({
-      isDisable: {
-        ...this.state.isDisable,
-        comment: true,
-      },
       show: {
         ...this.state.show,
         layout: {
           ...this.state.show.layout,
-          comment: false,
+          comment: show,
         },
       },
     });
-    if (this.state.comment == '') {
-      Taro.atMessage({
-        message: pt.get().button.submitText.blank,
-        type: 'error',
-      });
-      setTimeout(() => {
-        this.setState({
-          isDisable: {
-            ...this.state.isDisable,
-            comment: false,
-          },
-        });
-      }, submitInterval);
-      return;
-    }
-    submitComment(this);
-    setTimeout(() => {
-      this.setState({
-        isDisable: {
-          ...this.state.isDisable,
-          comment: false,
-        },
-      });
-    }, submitInterval);
   }
 
   handleReminderChange(reminderList: Array<number>) {
@@ -676,18 +638,11 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
           title={pt.get().ticketDetail.comment.title}
           onClose={this.handleCommentCancel.bind(this)}
         >
-          <AtForm onSubmit={this.onCommentSubmit.bind(this)}>
+          <Comment
-            <AtTextarea
+            setFloatLayout={this.setFloatLayout.bind(this)}
-              value={this.state.comment}
+            id={this.state.id}
-              onChange={this.handleCommentChange.bind(this)}
+            didMount={this.state.show.layout.comment}
-              maxLength={200}
-              height='400rpx'
-              placeholder={pt.get().ticketDetail.comment.placeholder}
           />
-            <AtButton formType='submit' type='primary'>
-              {pt.get().button.buttonText.submit}
-            </AtButton>
-          </AtForm>
         </AtFloatLayout>
         <AtFloatLayout
           isOpened={this.state.show.layout.reminder}

src/service/submitComment.ts

@@ -1,4 +1,4 @@
-import TicketDetail from '@/pages/TicketDetail/TicketDetail';
+import { Comment } from '@/pages/TicketDetail/Comment';
 import Taro from '@tarojs/taro';
 import pt from '@/plain-text';
 import wechatUser from '@/wechat';
@@ -6,12 +6,9 @@ import { getUrl } from '.';
 
 const reLaunchInterval = 1000;
 
-export function submitComment(that: TicketDetail) {
+export function submitComment(that: Comment) {
   that.setState({
-    isLoading: {
+    isLoading: true,
-      ...that.state.isLoading,
-      comment: true,
-    },
   });
   Taro.request({
     url: getUrl('/report'),
@@ -24,10 +21,7 @@ export function submitComment(that: TicketDetail) {
     .then((res) => {
       console.log(res.data);
       that.setState({
-        isLoading: {
+        isLoading: false,
-          ...that.state.isLoading,
-          comment: false,
-        },
       });
       Taro.atMessage({
         message: pt.get().button.submitText.success,
@@ -35,17 +29,14 @@ export function submitComment(that: TicketDetail) {
       });
       setTimeout(() => {
         Taro.reLaunch({
-          url: '/pages/TicketDetail/TicketDetail?id=' + that.state.id,
+          url: '/pages/TicketDetail/TicketDetail?id=' + that.props.id,
         });
       }, reLaunchInterval);
     })
     .catch((err) => {
       console.log(err.errMsg);
       that.setState({
-        isLoading: {
+        isLoading: false,
-          ...that.state.isLoading,
-          comment: false,
-        },
       });
       Taro.atMessage({
         message: pt.get().button.submitText.error + err.errMsg,