refactor note card to component

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';