add modal in ticketdetail-addtooreo

mock/api.ts

@@ -26,7 +26,7 @@ export default {
   'GET /user/locale/get': {
     success: true,
     data: {
-      lang: 'en_US',
+      lang: 'zh_CN',
     },
   },
   'POST /user/locale/update': {

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}

src/plain-text/Modal.ts

@@ -0,0 +1,38 @@
+export interface ModalText {
+  comment: {
+    title: string;
+    content: string;
+  };
+  addToOreo: {
+    title: string;
+    content: string;
+  };
+  cancel: string;
+  confirm: string;
+}
+
+export const modalZhCn: ModalText = {
+  comment: {
+    title: '添加评论',
+    content: '',
+  },
+  addToOreo: {
+    title: '将工单加入 Oreo',
+    content: '确认加入 Oreo？加入后将无法撤回！',
+  },
+  cancel: '取消',
+  confirm: '确认',
+};
+
+export const modalEnUs: ModalText = {
+  comment: {
+    title: 'Add comment',
+    content: '',
+  },
+  addToOreo: {
+    title: 'Add ticket to Oreo',
+    content: 'Once Confirmed, the change will be irrevocably!',
+  },
+  cancel: 'Cancel',
+  confirm: 'Confirm',
+};

src/plain-text/TicketDetail.ts

@@ -13,6 +13,7 @@ export interface TicketDetailText {
   tookAway: string;
   addToOreo: string;
   addNote: string;
+  pick: string;
 }
 
 export const ticketDetailZhCn: TicketDetailText = {
@@ -35,6 +36,7 @@ export const ticketDetailZhCn: TicketDetailText = {
   tookAway: '已取回',
   addToOreo: '加入 Oreo',
   addNote: '添加评论',
+  pick: '认领',
 };
 
 export const ticketDetailEnUs: TicketDetailText = {
@@ -56,5 +58,6 @@ export const ticketDetailEnUs: TicketDetailText = {
   descTitle: 'Problem description',
   tookAway: 'Already retrieved',
   addToOreo: 'Add to Oreo',
-  addNote: 'Add a comment',
+  addNote: 'Comment',
+  pick: 'Pick',
 };

src/plain-text/index.ts

@@ -17,6 +17,7 @@ import {
 } from './TicketDetail';
 import { CommonText, commonTextEnUs, commonTextZhCn } from './common';
 import { TipsText, tipsEnUs, tipsZhCn } from './Tips';
+import { ModalText, modalEnUs, modalZhCn } from './Modal';
 
 interface TextRecord {
   common: CommonText;
@@ -34,6 +35,7 @@ interface TextRecord {
   repairPage: RepairPageText;
   ticketDetail: TicketDetailText;
   tips: TipsText;
+  modal: ModalText;
 }
 
 const textZhCn: TextRecord = {
@@ -52,6 +54,7 @@ const textZhCn: TextRecord = {
   repairPage: repairPageZhCn,
   ticketDetail: ticketDetailZhCn,
   tips: tipsZhCn,
+  modal: modalZhCn,
 };
 
 const textEnUs: TextRecord = {
@@ -70,6 +73,7 @@ const textEnUs: TextRecord = {
   repairPage: repairPageEnUs,
   ticketDetail: ticketDetailEnUs,
   tips: tipsEnUs,
+  modal: modalEnUs,
 };
 
 // type Lang = 'zh_CN' | 'en_US' | ...;