refactor ticketListItem

src/components/TicketListItem/TicketListItem.config.ts

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

src/components/TicketListItem/TicketListItem.tsx

@@ -0,0 +1,57 @@
+import { AtListItem } from 'taro-ui';
+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 Taro from '@tarojs/taro';
+
+type FixStatus = 1 | 2 | 3 | 4 | 5;
+
+export class TicketListItem {
+  id: number;
+  brand: string;
+  model: string;
+  status: FixStatus;
+  createAt: moment.Moment;
+  iconMap: Map<FixStatus, string>;
+
+  constructor(
+    id: number,
+    brand: string,
+    model: string,
+    status: FixStatus,
+    createAt: moment.Moment,
+  ) {
+    this.id = id;
+    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)}
+        onClick={() => {
+          Taro.navigateTo({
+            url: '/pages/TicketDetail/TicketDetail?id=' + this.id,
+          });
+        }}
+      />
+    );
+  }
+}