add modal in ticketdetail-addtooreo

src/pages/TicketDetail/TicketDetail.tsx

@@ -2,19 +2,21 @@ import { Component, ReactNode } from 'react';
 import { View } from '@tarojs/components';
 import { getCurrentInstance } from '@tarojs/runtime';
 import pt from '@/plain-text';
-import { AtButton } from 'taro-ui';
+import { AtButton, AtModal } from 'taro-ui';
 import DetailFramework from '@/components/DetailFramework/DetailFramework';
 import PageFooter from '@/components/PageFooter/PageFooter';
 
 interface TicketDetailState {
   id: number;
   isMember: boolean;
+  showModel: boolean;
 }
 
 export default class TicketDetail extends Component<{}, TicketDetailState> {
   state: Readonly<TicketDetailState> = {
     id: 0,
     isMember: false,
+    showModel: false,
   };
 
   componentDidMount(): void {
@@ -27,6 +29,22 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
     });
   }
 
+  onAddToOreo(): void {
+    this.setState({
+      showModel: true,
+    });
+  }
+
+  handleCancel(): void {
+    this.setState({
+      showModel: false,
+    });
+  }
+
+  handleConfirm(): void {
+    return;
+  }
+
   render(): ReactNode {
     const middleButton = this.state.isMember ? (
       <View
@@ -35,13 +53,20 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
       >
         <View
           className='at-col'
-          style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
+          style={{ marginLeft: 10, paddingRight: 5, width: '33%' }}
+        >
+          <AtButton type='secondary'>{pt.get().ticketDetail.pick}</AtButton>
+        </View>
+        <View
+          className='at-col'
+          style={{ marginLeft: 10, paddingRight: 5, width: '33%' }}
+          onClick={this.onAddToOreo.bind(this)}
         >
           <AtButton type='primary'>{pt.get().ticketDetail.addToOreo}</AtButton>
         </View>
         <View
           className='at-col'
-          style={{ marginRight: 10, paddingLeft: 5, width: '50%' }}
+          style={{ marginRight: 10, paddingLeft: 5, width: '33%' }}
         >
           <AtButton type='secondary'>{pt.get().ticketDetail.addNote}</AtButton>
         </View>
@@ -77,6 +102,15 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
 
     return (
       <View>
+        <AtModal
+          isOpened={this.state.showModel}
+          title={pt.get().modal.addToOreo.title}
+          cancelText={pt.get().modal.cancel}
+          confirmText={pt.get().modal.confirm}
+          onCancel={this.handleCancel.bind(this)}
+          onConfirm={this.handleConfirm.bind(this)}
+          content={pt.get().modal.addToOreo.content}
+        />
         <DetailFramework
           middleButton={middleButton}
           id={this.state.id}