Merge branch 'yhy' into dev

src/pages/user/myTicket/myTicket.tsx

@@ -1,9 +1,116 @@
 import { Component, ReactNode } from 'react';
 import { View } from '@tarojs/components';
+import { AtList, AtListItem } from 'taro-ui';
+import Taro from '@tarojs/taro';
+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 { getUrl } from '@/service';
 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 = {
+    loading: true,
+    success: false,
+    fixList: [new TicketListItem('华硕', '天选3', 3, moment())],
+  };
+
+  componentDidMount(): void {
+    Taro.request({
+      url: getUrl('/user/mytickets'),
+      method: 'GET',
+      data: {
+        token: 'token_test',
+      },
+    })
+      .then(res => {
+        if (!res.data.success) {
+          this.setState({
+            loading: false,
+            success: false,
+          });
+          return;
+        }
+        this.setState({
+          loading: false,
+          success: true,
+          fixList: res.data.data.list.map(
+            item =>
+              new TicketListItem(
+                item.device,
+                item.deviceModel,
+                item.status,
+                moment(),
+              ),
+          ),
+        });
+      })
+      .catch(reason => {
+        this.setState({
+          loading: false,
+          success: false,
+        });
+        console.log(reason);
+      });
+  }
+
   render(): ReactNode {
-    return <View></View>;
+    if (this.state.loading) {
+      return <View>loading</View>;
+    }
+    if (!this.state.success) {
+      return <View>Failed</View>;
+    }
+    const fixListRenderer = this.state.fixList.map(item => item.render());
+    return (
+      <View>
+        <AtList>{fixListRenderer}</AtList>
+      </View>
+    );
   }
 }