From e7b0b3239e7a7fd8408b2b5396fdb1bbf07a065e Mon Sep 17 00:00:00 2001
From: Dawn_Ocean <1785590531@qq.com>
Date: Fri, 15 Mar 2024 15:48:19 +0800
Subject: [PATCH] add modal in ticketdetail-addtooreo

---
 mock/api.ts                             |  2 +-
 src/pages/TicketDetail/TicketDetail.tsx | 40 +++++++++++++++++++++++--
 src/plain-text/Modal.ts                 | 38 +++++++++++++++++++++++
 src/plain-text/TicketDetail.ts          |  5 +++-
 src/plain-text/index.ts                 |  4 +++
 5 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 src/plain-text/Modal.ts

diff --git a/mock/api.ts b/mock/api.ts
index 916629a..3d40a49 100644
--- a/mock/api.ts
+++ b/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': {
diff --git a/src/pages/TicketDetail/TicketDetail.tsx b/src/pages/TicketDetail/TicketDetail.tsx
index 196d2ef..4b37518 100644
--- a/src/pages/TicketDetail/TicketDetail.tsx
+++ b/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}
diff --git a/src/plain-text/Modal.ts b/src/plain-text/Modal.ts
new file mode 100644
index 0000000..c910c19
--- /dev/null
+++ b/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',
+};
diff --git a/src/plain-text/TicketDetail.ts b/src/plain-text/TicketDetail.ts
index c79eafe..0077306 100644
--- a/src/plain-text/TicketDetail.ts
+++ b/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',
 };
diff --git a/src/plain-text/index.ts b/src/plain-text/index.ts
index 4e213c8..189c2c0 100644
--- a/src/plain-text/index.ts
+++ b/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' | ...;