render basic data in ticket detail

src/pages/TicketDetail/TicketDetail.tsx

@@ -7,6 +7,17 @@ import { AtSteps } from 'taro-ui';
 import moment from 'moment';
 import { RequestState } from '@/service';
 import { getTicketInfo } from '@/service/ticketsInfo';
+import { FixStatus } from '@/common';
+import { timeFormat } from '@/utils';
+import PageFooter from '@/components/PageFooter/PageFooter';
+
+const mapStatusStep: Map<FixStatus, 0 | 1 | 2 | 3> = new Map([
+  [1, 0],
+  [2, 1],
+  [3, 2],
+  [4, 2],
+  [5, 3],
+]);
 
 interface StepItemData {
   title: string;
@@ -19,7 +30,7 @@ export class TicketInfo {
   deviceModel: string;
   description: string;
   createdTime: moment.Moment;
-  status: 1 | 2 | 3 | 4 | 5;
+  status: FixStatus;
 }
 
 export class TicketNote {
@@ -30,12 +41,44 @@ export class TicketNote {
   createdTime: moment.Moment;
 }
 
+type StatusStr = '1' | '2' | '3' | '4' | '5';
+
+const statusModifyMessage = new Map<StatusStr, string>([
+  ['1', '维修中'],
+  ['2', '2(?)'],
+  ['3', '3(?)'],
+  ['4', '维修成功待取回'],
+  ['5', '维修成功已取回'],
+]);
+
 function renderNote(n: TicketNote): JSX.Element {
-  return <View>{n.id}</View>;
+  var message = '';
+
+  switch (n.type) {
+    case 0:
+      message = '创建了维修';
+      break;
+    case 1:
+      message = n.content;
+      break;
+    case 2:
+      message =
+        '将维修状态更改为：' +
+          statusModifyMessage.get(n.content as StatusStr) || '';
+      break;
+  }
+
+  return (
+    <View>
+      <View>
+        {n.op} {n.createdTime.format(timeFormat)}
+      </View>
+      <View>{message}</View>
+    </View>
+  );
 }
 
 interface TicketDetailState {
-  id: number;
   current: number;
   items: Array<StepItemData>;
   ticketInfo: TicketInfo;
@@ -45,7 +88,6 @@ interface TicketDetailState {
 
 export default class TicketDetail extends Component<{}, TicketDetailState> {
   state = {
-    id: 0,
     current: 0,
     items: [],
     ticketInfo: new TicketInfo(),
@@ -62,11 +104,10 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
     const id = router?.params.id as number;
     const items = pt.get().ticketDetail.stepItems;
     this.setState({
-      id: id,
       items: items,
     });
 
-    getTicketInfo(this);
+    getTicketInfo(this, id);
   }
 
   render(): ReactNode {
@@ -76,16 +117,32 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
       return <View>Request failed</View>;
     }
 
+    const status = this.state.ticketInfo.status;
+    this.setState({
+      current: mapStatusStep.get(status) || 0,
+    });
+
     return (
       <View>
-        <View>{this.state.ticketInfo.deviceModel}</View>
+        <View className='at-article__h1'>
+          {this.state.ticketInfo.device +
+            ' ' +
+            this.state.ticketInfo.deviceModel}
+        </View>
+        <View className='at-article__h3'>
+          {'创建于 '}
+          {this.state.ticketInfo.createdTime.format(timeFormat)}
+        </View>
+        <View className='at-article__h3'>
+          {this.state.ticketInfo.description}
+        </View>
         <AtSteps
           items={this.state.items}
           current={this.state.current}
           onChange={() => {}}
         />
-        <View>TicketDetail: {this.state.id}</View>
         <View>{this.state.notes.map(item => renderNote(item))}</View>
+        <PageFooter />
       </View>
     );
   }