add confirm modal for buttons in ticketdetail

2024-03-16 16:45:41 +08:00
parent ac9645b987
commit cce351750d
4 changed files with 202 additions and 38 deletions
@@ -3,6 +3,8 @@ import { View } from '@tarojs/components';
 import { getCurrentInstance } from '@tarojs/runtime';
 import pt from '@/plain-text';
 import {
+  AtActionSheet,
+  AtActionSheetItem,
  AtButton,
  AtFloatLayout,
  AtForm,
@@ -14,6 +16,7 @@ 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';

 const submitInterval = 5000;

@@ -22,6 +25,9 @@ interface TicketDetailState {
  isMember: boolean;
  showOreoModal: boolean;
  showCommentModal: boolean;
+  showRetrieveModal: boolean;
+  showStatusSheet: boolean;
+  showPickModal: boolean;
  comment: string;
  isLoading: boolean;
  isDisable: boolean;
@@ -33,6 +39,9 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
    isMember: false,
    showOreoModal: false,
    showCommentModal: false,
+    showRetrieveModal: false,
+    showStatusSheet: false,
+    showPickModal: false,
    comment: '',
    isLoading: false,
    isDisable: false,
@@ -41,10 +50,9 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
  componentDidMount(): void {
    const { router } = getCurrentInstance();
    const id = router?.params.id as number;
-    const isMember = router?.params.isMember as boolean;
    this.setState({
      id: id,
-      isMember: isMember,
+      isMember: wechatUser.getAccess(),
    });
  }

@@ -60,6 +68,24 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
    });
  }

+  onRetrieved(): void {
+    this.setState({
+      showRetrieveModal: true,
+    });
+  }
+
+  onPick(): void {
+    this.setState({
+      showPickModal: true,
+    });
+  }
+
+  onChangeStatus(): void {
+    this.setState({
+      showStatusSheet: true,
+    });
+  }
+
  handleOreoCancel(): void {
    this.setState({
      showOreoModal: false,
@@ -72,6 +98,24 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
    });
  }

+  handleRetrieveCancel(): void {
+    this.setState({
+      showRetrieveModal: false,
+    });
+  }
+
+  handleStatusCancel(): void {
+    this.setState({
+      showStatusSheet: false,
+    });
+  }
+
+  handlePickCancel(): void {
+    this.setState({
+      showPickModal: false,
+    });
+  }
+
  handleOreoConfirm(): void {
    return;
  }
@@ -80,6 +124,20 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
    return;
  }

+  handleRetrieveConfirm(): void {
+    return;
+  }
+
+  handlePickConfirm(): void {
+    return;
+  }
+
+  handleStatusChange(status: number): void {
+    this.setState({
+      showStatusSheet: false,
+    });
+  }
+
  handleCommentChange(comment: string) {
    this.setState({
      comment: comment,
@@ -113,29 +171,48 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {

  render(): ReactNode {
    const middleButton = this.state.isMember ? (
-      <View
-        className='at-row'
-        style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
-      >
+      <View>
        <View
-          className='at-col'
-          style={{ marginLeft: 10, paddingRight: 5, width: '33%' }}
+          className='at-row'
+          style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
        >
-          <AtButton type='secondary'>{pt.get().ticketDetail.pick}</AtButton>
+          <View
+            className='at-col'
+            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
+          >
+            <AtButton type='secondary' onClick={this.onPick.bind(this)}>
+              {pt.get().ticketDetail.pick}
+            </AtButton>
+          </View>
+          <View
+            className='at-col'
+            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
+          >
+            <AtButton type='primary' onClick={this.onAddToOreo.bind(this)}>
+              {pt.get().ticketDetail.addToOreo}
+            </AtButton>
+          </View>
        </View>
        <View
-          className='at-col'
-          style={{ marginLeft: 10, paddingRight: 5, width: '33%' }}
-          onClick={this.onAddToOreo.bind(this)}
+          className='at-row'
+          style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
        >
-          <AtButton type='primary'>{pt.get().ticketDetail.addToOreo}</AtButton>
-        </View>
-        <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
+            className='at-col'
+            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
+          >
+            <AtButton type='primary' onClick={this.onChangeStatus.bind(this)}>
+              {pt.get().ticketDetail.status.button}
+            </AtButton>
+          </View>
+          <View
+            className='at-col'
+            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
+          >
+            <AtButton type='secondary' onClick={this.onAddComment.bind(this)}>
+              {pt.get().ticketDetail.addNote}
+            </AtButton>
+          </View>
        </View>
      </View>
    ) : (
@@ -147,13 +224,17 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
          className='at-col'
          style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
        >
-          <AtButton type='primary'>{pt.get().ticketDetail.tookAway}</AtButton>
+          <AtButton type='primary' onClick={this.onRetrieved.bind(this)}>
+            {pt.get().ticketDetail.tookAway}
+          </AtButton>
        </View>
        <View
          className='at-col'
          style={{ marginRight: 10, paddingLeft: 5, width: '50%' }}
        >
-          <AtButton type='secondary'>{pt.get().ticketDetail.addNote}</AtButton>
+          <AtButton type='secondary' onClick={this.onChangeStatus.bind(this)}>
+            {pt.get().ticketDetail.addNote}
+          </AtButton>
        </View>
      </View>
    );
@@ -178,6 +259,24 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
          onConfirm={this.handleOreoConfirm.bind(this)}
          content={pt.get().modal.addToOreo.content}
        />
+        <AtModal
+          isOpened={this.state.showRetrieveModal}
+          title={pt.get().modal.retrieve.title}
+          cancelText={pt.get().modal.cancel}
+          confirmText={pt.get().modal.confirm}
+          onCancel={this.handleRetrieveCancel.bind(this)}
+          onConfirm={this.handleRetrieveConfirm.bind(this)}
+          content={pt.get().modal.retrieve.content}
+        />
+        <AtModal
+          isOpened={this.state.showPickModal}
+          title={pt.get().modal.pick.title}
+          cancelText={pt.get().modal.cancel}
+          confirmText={pt.get().modal.confirm}
+          onCancel={this.handlePickCancel.bind(this)}
+          onConfirm={this.handlePickConfirm.bind(this)}
+          content={pt.get().modal.pick.content}
+        />
        <AtFloatLayout
          isOpened={this.state.showCommentModal}
          title={pt.get().ticketDetail.comment.title}
@@ -202,6 +301,32 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
            </AtButton>
          </AtForm>
        </AtFloatLayout>
+        <AtActionSheet
+          isOpened={this.state.showStatusSheet}
+          cancelText={pt.get().ticketDetail.status.cancel}
+          title={pt.get().ticketDetail.status.title}
+          onCancel={this.handleStatusCancel.bind(this)}
+          onClose={this.handleStatusCancel.bind(this)}
+        >
+          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 0)}>
+            {pt.get().ticketDetail.status.status0}
+          </AtActionSheetItem>
+          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 1)}>
+            {pt.get().ticketDetail.status.status1}
+          </AtActionSheetItem>
+          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 2)}>
+            {pt.get().ticketDetail.status.status2}
+          </AtActionSheetItem>
+          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 3)}>
+            {pt.get().ticketDetail.status.status3}
+          </AtActionSheetItem>
+          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 4)}>
+            {pt.get().ticketDetail.status.status4}
+          </AtActionSheetItem>
+          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 5)}>
+            {pt.get().ticketDetail.status.status5}
+          </AtActionSheetItem>
+        </AtActionSheet>
        <DetailFramework
          middleButton={middleButton}
          id={this.state.id}