From 0120da0760033c514dcfa8506597f1c6dd6a5f3c Mon Sep 17 00:00:00 2001
From: FrozenArcher <yhy242989105@hotmail.com>
Date: Tue, 12 Mar 2024 14:33:40 +0800
Subject: [PATCH] add ticket detail button

---
 src/components/NoteCard/NoteCard.tsx    | 10 +++++++---
 src/components/NoteList/NoteList.tsx    |  2 +-
 src/pages/TicketDetail/TicketDetail.tsx | 25 ++++++++++++++++++++++---
 src/plain-text/TicketDetail.ts          |  9 +++++++++
 4 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/components/NoteCard/NoteCard.tsx b/src/components/NoteCard/NoteCard.tsx
index f25998b..773ccfb 100644
--- a/src/components/NoteCard/NoteCard.tsx
+++ b/src/components/NoteCard/NoteCard.tsx
@@ -3,6 +3,7 @@ import { Component, ReactNode } from 'react';
 import { TicketNote, StatusStr } from '@/pages/TicketDetail/TicketNote';
 import pt from '@/plain-text';
 import { timeFormat } from '@/utils';
+import { AtDivider } from 'taro-ui';
 import './NoteCard.scss';
 
 interface NoteCardProps {
@@ -13,6 +14,7 @@ export default class NoteCard extends Component<NoteCardProps, {}> {
   props: Readonly<NoteCardProps> = {
     note: new TicketNote(),
   };
+
   render(): ReactNode {
     var message = '';
     const note = this.props.note;
@@ -35,10 +37,12 @@ export default class NoteCard extends Component<NoteCardProps, {}> {
 
     return (
       <View>
-        <View>
-          {note.op} {note.createdTime.format(timeFormat)}
+        <View className='at-article__h2'>{note.op}</View>
+        <View className='at-article__info'>
+          {note.createdTime.format(timeFormat)}
         </View>
-        <View>{message}</View>
+        <View className='at-article__p'>{message}</View>
+        <AtDivider />
       </View>
     );
   }
diff --git a/src/components/NoteList/NoteList.tsx b/src/components/NoteList/NoteList.tsx
index 62b9798..076b157 100644
--- a/src/components/NoteList/NoteList.tsx
+++ b/src/components/NoteList/NoteList.tsx
@@ -15,7 +15,7 @@ export default class NoteList extends Component<NoteListProps, {}> {
     return (
       <View>
         {this.props.noteList.map((note, idx) => (
-          <View key={idx} style={{ marginTop: 8 }}>
+          <View key={idx}>
             <NoteCard note={note} />
           </View>
         ))}
diff --git a/src/pages/TicketDetail/TicketDetail.tsx b/src/pages/TicketDetail/TicketDetail.tsx
index 1027871..ebbb667 100644
--- a/src/pages/TicketDetail/TicketDetail.tsx
+++ b/src/pages/TicketDetail/TicketDetail.tsx
@@ -3,7 +3,7 @@ import { View } from '@tarojs/components';
 import { getCurrentInstance } from '@tarojs/runtime';
 import Taro from '@tarojs/taro';
 import pt from '@/plain-text';
-import { AtCard, AtSteps } from 'taro-ui';
+import { AtCard, AtSteps, AtButton } from 'taro-ui';
 import { RequestState } from '@/service';
 import { getTicketInfo } from '@/service/ticketsInfo';
 import { FixStatus } from '@/common';
@@ -74,11 +74,11 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
             ' ' +
             this.state.ticketInfo.deviceModel}
         </View>
-        <View className='at-article__h3'>
+        <View className='at-article__info'>
           {pt.get().common.createdAtText(this.state.ticketInfo.createdTime)}
         </View>
         <View style={{ marginTop: 10, marginBottom: 10 }}>
-          <AtCard title='问题描述'>
+          <AtCard title={pt.get().ticketDetail.descTitle}>
             <View className='at-article__h3'>
               {this.state.ticketInfo.description}
             </View>
@@ -91,6 +91,25 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
             onChange={() => {}}
           />
         </View>
+        <View
+          className='at-row'
+          style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
+        >
+          <View
+            className='at-col'
+            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
+          >
+            <AtButton type='primary'>{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>
+          </View>
+        </View>
         <View style={{ padding: 10 }}>
           <NoteList noteList={this.state.notes} />
         </View>
diff --git a/src/plain-text/TicketDetail.ts b/src/plain-text/TicketDetail.ts
index 2dd1fd3..dd0518c 100644
--- a/src/plain-text/TicketDetail.ts
+++ b/src/plain-text/TicketDetail.ts
@@ -9,6 +9,9 @@ export interface TicketDetailText {
   createTicketMessage: string;
   statusModifyPrefix: string;
   statusModifyMessage: Map<StatusStr, string>;
+  descTitle: string;
+  tookAway: string;
+  addNote: string;
 }
 
 export const ticketDetailZhCn: TicketDetailText = {
@@ -27,6 +30,9 @@ export const ticketDetailZhCn: TicketDetailText = {
     ['4', '维修成功待取回'],
     ['5', '维修成功已取回'],
   ]),
+  descTitle: '问题描述',
+  tookAway: '已取回',
+  addNote: '添加评论',
 };
 
 export const ticketDetailEnUs: TicketDetailText = {
@@ -45,4 +51,7 @@ export const ticketDetailEnUs: TicketDetailText = {
     ['4', 'Device to be taken home'],
     ['5', 'Ticket finished'],
   ]),
+  descTitle: 'Problem description',
+  tookAway: 'Already took home',
+  addNote: 'Add a comment',
 };