add ticket list

src/pages/user/myTicket/myTicket.tsx

@@ -1,9 +1,69 @@
 import { Component, ReactNode } from 'react';
 import { View } from '@tarojs/components';
+import { AtList, AtListItem } from 'taro-ui';
+import moment from 'moment';
+import repair from '@/assets/icons/MyTickets/repair.svg';
+import finished from '@/assets/icons/MyTickets/finished.svg';
+import tick from '@/assets/icons/MyTickets/tick.svg';
+import fail from '@/assets/icons/MyTickets/fail.svg';
+import pt from '@/plain-text';
 import './myTicket.scss';
 
+type FixStatus = 1 | 2 | 3 | 4 | 5;
+
+class TicketListItem {
+  brand: string;
+  model: string;
+  status: FixStatus;
+  createAt: moment.Moment;
+  iconMap: Map<FixStatus, string>;
+
+  constructor(
+    brand: string,
+    model: string,
+    status: FixStatus,
+    createAt: moment.Moment,
+  ) {
+    this.brand = brand;
+    this.model = model;
+    this.status = status;
+    this.createAt = createAt;
+    this.iconMap = new Map<FixStatus, string>([
+      [1, repair],
+      [2, repair],
+      [3, finished],
+      [4, tick],
+      [5, fail],
+    ]);
+  }
+
+  render(): JSX.Element {
+    const tl = pt.get().ticketList;
+    return (
+      <AtListItem
+        title={this.brand + ' ' + this.model}
+        note={tl.createdAt(this.createAt.format('YYYY-MM-DD HH:mm'))}
+        extraText={tl.statusMap.get(this.status)}
+        arrow='right'
+        thumb={this.iconMap.get(this.status)}
+      />
+    );
+  }
+}
+
 export default class SettingsPage extends Component {
+  state = {
+    fixList: [
+      new TicketListItem('华硕', '天选3', 3, moment()),
+      new TicketListItem('联想', '拯救者', 5, moment()),
+    ],
+  };
   render(): ReactNode {
-    return <View></View>;
+    const fixListRenderer = this.state.fixList.map(item => item.render());
+    return (
+      <View>
+        <AtList>{fixListRenderer}</AtList>
+      </View>
+    );
   }
 }