diff --git a/src/common.ts b/src/common.ts
new file mode 100644
index 0000000..1335f8f
--- /dev/null
+++ b/src/common.ts
@@ -0,0 +1 @@
+export type FixStatus = 1 | 2 | 3 | 4 | 5;
diff --git a/src/pages/TicketDetail/TicketDetail.tsx b/src/pages/TicketDetail/TicketDetail.tsx
index b0455d9..ce1446e 100644
--- a/src/pages/TicketDetail/TicketDetail.tsx
+++ b/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>
     );
   }
diff --git a/src/plain-text/TicketDetail.ts b/src/plain-text/TicketDetail.ts
index 5de15ab..c82c7a9 100644
--- a/src/plain-text/TicketDetail.ts
+++ b/src/plain-text/TicketDetail.ts
@@ -7,7 +7,12 @@ export interface TicketDetailText {
 }
 
 export const ticketDetailZhCn: TicketDetailText = {
-  stepItems: [{ title: '创建成功' }, { title: '维修中' }, { title: '待取回' }],
+  stepItems: [
+    { title: '创建成功' },
+    { title: '维修中' },
+    { title: '待取回' },
+    { title: '工单完成' },
+  ],
 };
 
 export const ticketDetailEnUs: TicketDetailText = {
@@ -15,5 +20,6 @@ export const ticketDetailEnUs: TicketDetailText = {
     { title: 'Ticket created' },
     { title: 'Repairing' },
     { title: 'Take home' },
+    { title: 'Finished' },
   ],
 };
diff --git a/src/service/ticketsInfo.ts b/src/service/ticketsInfo.ts
index dd561c0..850458c 100644
--- a/src/service/ticketsInfo.ts
+++ b/src/service/ticketsInfo.ts
@@ -6,12 +6,12 @@ import Taro from '@tarojs/taro';
 import moment from 'moment';
 import { getUrl } from '.';
 
-export function getTicketInfo(that: TicketDetail) {
+export function getTicketInfo(that: TicketDetail, id: number) {
   Taro.request({
     url: getUrl('/tickets/info'),
     method: 'GET',
     data: {
-      id: that.state.id,
+      id: id,
     },
   })
     .then(res => {
@@ -30,7 +30,7 @@ export function getTicketInfo(that: TicketDetail) {
           device: data.device,
           deviceModel: data.deviceModel,
           description: data.description,
-          createdTime: moment(),
+          createdTime: moment(data.createdTime as string),
           status: data.status,
         };
         const notes: Array<TicketNote> = [];
@@ -40,7 +40,7 @@ export function getTicketInfo(that: TicketDetail) {
             op: item.op,
             type: item.type,
             content: item.content,
-            createdTime: moment(),
+            createdTime: moment(item.createdTime as string),
           });
         });
         that.setState({
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..402434a
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,3 @@
+import * as Time from './time';
+
+export const timeFormat = Time.timeFormat;
diff --git a/src/utils/time.ts b/src/utils/time.ts
new file mode 100644
index 0000000..5740fc1
--- /dev/null
+++ b/src/utils/time.ts
@@ -0,0 +1 @@
+export const timeFormat = 'YYYY-MM-DD HH:mm';