refactor note card to component

src/components/NoteCard/NoteCard.config.ts

@@ -0,0 +1,3 @@
+export default {
+  component: true,
+};

src/components/NoteCard/NoteCard.tsx

@@ -0,0 +1,45 @@
+import { View } from '@tarojs/components';
+import { Component, ReactNode } from 'react';
+import { TicketNote, StatusStr } from '@/pages/TicketDetail/TicketNote';
+import pt from '@/plain-text';
+import { timeFormat } from '@/utils';
+import './NoteCard.scss';
+
+interface NoteCardProps {
+  note: TicketNote;
+}
+
+export default class NoteCard extends Component<NoteCardProps, {}> {
+  props: Readonly<NoteCardProps> = {
+    note: new TicketNote(),
+  };
+  render(): ReactNode {
+    var message = '';
+    const note = this.props.note;
+    const td = pt.get().ticketDetail;
+    const createMessage = td.createTicketMessage;
+    const modifyMessage = td.statusModifyMessage;
+    const prefix = td.statusModifyPrefix;
+
+    switch (note.type) {
+      case 0:
+        message = createMessage;
+        break;
+      case 1:
+        message = note.content;
+        break;
+      case 2:
+        message = prefix + modifyMessage.get(note.content as StatusStr) || '';
+        break;
+    }
+
+    return (
+      <View>
+        <View>
+          {note.op} {note.createdTime.format(timeFormat)}
+        </View>
+        <View>{message}</View>
+      </View>
+    );
+  }
+}

src/components/NoteList/NoteList.config.ts

@@ -0,0 +1,3 @@
+export default {
+  component: true,
+};

src/components/NoteList/NoteList.tsx

@@ -0,0 +1,25 @@
+import { Component, ReactNode } from 'react';
+import NoteCard from '@/components/NoteCard/NoteCard';
+import { TicketNote } from '@/pages/TicketDetail/TicketNote';
+import { View } from '@tarojs/components';
+
+interface NoteListProps {
+  noteList: Array<TicketNote>;
+}
+
+export default class NoteList extends Component<NoteListProps, {}> {
+  props: Readonly<NoteListProps> = {
+    noteList: [],
+  };
+  render(): ReactNode {
+    return (
+      <View>
+        {this.props.noteList.map((note, idx) => (
+          <View key={idx} style={{ marginTop: 8 }}>
+            <NoteCard note={note} />
+          </View>
+        ))}
+      </View>
+    );
+  }
+}

src/pages/TicketDetail/TicketDetail.tsx

@@ -3,13 +3,13 @@ import { View } from '@tarojs/components';
 import { getCurrentInstance } from '@tarojs/runtime';
 import Taro from '@tarojs/taro';
 import pt from '@/plain-text';
-import { AtSteps } from 'taro-ui';
-import moment from 'moment';
+import { AtCard, AtSteps } from 'taro-ui';
 import { RequestState } from '@/service';
 import { getTicketInfo } from '@/service/ticketsInfo';
 import { FixStatus } from '@/common';
-import { timeFormat } from '@/utils';
 import PageFooter from '@/components/PageFooter/PageFooter';
+import NoteList from '@/components/NoteList/NoteList';
+import { TicketNote, TicketInfo } from './TicketNote';
 
 const mapStatusStep: Map<FixStatus, 0 | 1 | 2 | 3> = new Map([
   [1, 0],
@@ -23,55 +23,6 @@ interface StepItemData {
   title: string;
 }
 
-export class TicketInfo {
-  id: number;
-  type: 0 | 1;
-  device: string;
-  deviceModel: string;
-  description: string;
-  createdTime: moment.Moment;
-  status: FixStatus;
-}
-
-export class TicketNote {
-  id: number;
-  op: string;
-  type: 0 | 1 | 2;
-  content: string;
-  createdTime: moment.Moment;
-}
-
-type StatusStr = '1' | '2' | '3' | '4' | '5';
-
-function renderNote(n: TicketNote): JSX.Element {
-  var message = '';
-  const td = pt.get().ticketDetail;
-  const createMessage = td.createTicketMessage;
-  const modifyMessage = td.statusModifyMessage;
-  const prefix = td.statusModifyPrefix;
-
-  switch (n.type) {
-    case 0:
-      message = createMessage;
-      break;
-    case 1:
-      message = n.content;
-      break;
-    case 2:
-      message = prefix + modifyMessage.get(n.content as StatusStr) || '';
-      break;
-  }
-
-  return (
-    <View>
-      <View>
-        {n.op} {n.createdTime.format(timeFormat)}
-      </View>
-      <View>{message}</View>
-    </View>
-  );
-}
-
 interface TicketDetailState {
   current: number;
   items: Array<StepItemData>;
@@ -124,18 +75,25 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
             this.state.ticketInfo.deviceModel}
         </View>
         <View className='at-article__h3'>
-          {'创建于 '}
-          {this.state.ticketInfo.createdTime.format(timeFormat)}
+          {pt.get().common.createdAtText(this.state.ticketInfo.createdTime)}
         </View>
-        <View className='at-article__h3'>
-          {this.state.ticketInfo.description}
+        <View style={{ marginTop: 10, marginBottom: 10 }}>
+          <AtCard title='问题描述'>
+            <View className='at-article__h3'>
+              {this.state.ticketInfo.description}
+            </View>
+          </AtCard>
+        </View>
+        <View style={{ padding: 10 }}>
+          <AtSteps
+            items={this.state.items}
+            current={this.state.current}
+            onChange={() => {}}
+          />
+        </View>
+        <View style={{ padding: 10 }}>
+          <NoteList noteList={this.state.notes} />
         </View>
-        <AtSteps
-          items={this.state.items}
-          current={this.state.current}
-          onChange={() => {}}
-        />
-        <View>{this.state.notes.map(item => renderNote(item))}</View>
         <PageFooter />
       </View>
     );

src/pages/TicketDetail/TicketNote.ts

@@ -0,0 +1,21 @@
+import { FixStatus } from '@/common';
+
+export class TicketInfo {
+  id: number;
+  type: 0 | 1;
+  device: string;
+  deviceModel: string;
+  description: string;
+  createdTime: moment.Moment;
+  status: FixStatus;
+}
+
+export class TicketNote {
+  id: number;
+  op: string;
+  type: 0 | 1 | 2;
+  content: string;
+  createdTime: moment.Moment;
+}
+
+export type StatusStr = '1' | '2' | '3' | '4' | '5';

src/plain-text/index.ts

@@ -15,7 +15,7 @@ import {
   ticketDetailEnUs,
   ticketDetailZhCn,
 } from './TicketDetail';
-import { CommonText, commonTextZhCn } from './common';
+import { CommonText, commonTextEnUs, commonTextZhCn } from './common';
 
 interface TextRecord {
   common: CommonText;
@@ -52,7 +52,7 @@ const textZhCn: TextRecord = {
 };
 
 const textEnUs: TextRecord = {
-  common: commonTextZhCn,
+  common: commonTextEnUs,
   pageFooter: pageFooterEnUs,
   mainPage: mainPageEnUs,
   userPage: userPageEnUs,

src/service/ticketsInfo.ts

@@ -1,7 +1,5 @@
-import TicketDetail, {
-  TicketInfo,
-  TicketNote,
-} from '@/pages/TicketDetail/TicketDetail';
+import TicketDetail from '@/pages/TicketDetail/TicketDetail';
+import { TicketInfo, TicketNote } from '@/pages/TicketDetail/TicketNote';
 import Taro from '@tarojs/taro';
 import moment from 'moment';
 import { getUrl } from '.';