add ticket detail data

mock/api.ts

@@ -38,7 +38,7 @@ export default {
     success: true,
     data: mytickets,
   },
-  'GET /tickets/info/': {
+  'GET /tickets/info': {
     success: true,
     data: ticketInfo,
   },

src/pages/TicketDetail/TicketDetail.tsx

@@ -4,15 +4,43 @@ import { getCurrentInstance } from '@tarojs/runtime';
 import Taro from '@tarojs/taro';
 import pt from '@/plain-text';
 import { AtSteps } from 'taro-ui';
+import moment from 'moment';
+import { RequestState } from '@/service';
+import { getTicketInfo } from '@/service/ticketsInfo';
 
 interface StepItemData {
   title: string;
 }
 
+export class TicketInfo {
+  id: number;
+  type: 0 | 1;
+  device: string;
+  deviceModel: string;
+  description: string;
+  createdTime: moment.Moment;
+  status: 1 | 2 | 3 | 4 | 5;
+}
+
+export class TicketNote {
+  id: number;
+  op: string;
+  type: 0 | 1 | 2;
+  content: string;
+  createdTime: moment.Moment;
+}
+
+function renderNote(n: TicketNote): JSX.Element {
+  return <View>{n.id}</View>;
+}
+
 interface TicketDetailState {
   id: number;
   current: number;
   items: Array<StepItemData>;
+  ticketInfo: TicketInfo;
+  notes: Array<TicketNote>;
+  rs: RequestState;
 }
 
 export default class TicketDetail extends Component<{}, TicketDetailState> {
@@ -20,7 +48,11 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
     id: 0,
     current: 0,
     items: [],
+    ticketInfo: new TicketInfo(),
+    notes: [new TicketNote()],
+    rs: new RequestState(),
   };
+
   componentDidMount(): void {
     const navBar = pt.get().navBar;
     Taro.setNavigationBarTitle({
@@ -33,16 +65,27 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
       id: id,
       items: items,
     });
+
+    getTicketInfo(this);
   }
+
   render(): ReactNode {
+    if (this.state.rs.loading) {
+      return <View>Loading</View>;
+    } else if (!this.state.rs.success) {
+      return <View>Request failed</View>;
+    }
+
     return (
       <View>
+        <View>{this.state.ticketInfo.deviceModel}</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>
       </View>
     );
   }

src/service/ticketsInfo.ts

@@ -0,0 +1,65 @@
+import TicketDetail, {
+  TicketInfo,
+  TicketNote,
+} from '@/pages/TicketDetail/TicketDetail';
+import Taro from '@tarojs/taro';
+import moment from 'moment';
+import { getUrl } from '.';
+
+export function getTicketInfo(that: TicketDetail) {
+  Taro.request({
+    url: getUrl('/tickets/info'),
+    method: 'GET',
+    data: {
+      id: that.state.id,
+    },
+  })
+    .then(res => {
+      if (!res.data.success) {
+        that.setState({
+          rs: {
+            loading: false,
+            success: false,
+          },
+        });
+      } else {
+        const data = res.data.data;
+        const ticketDetail: TicketInfo = {
+          id: data.id,
+          type: data.type,
+          device: data.device,
+          deviceModel: data.deviceModel,
+          description: data.description,
+          createdTime: moment(),
+          status: data.status,
+        };
+        const notes: Array<TicketNote> = [];
+        data.notes.map(item => {
+          notes.push({
+            id: item.id,
+            op: item.op,
+            type: item.type,
+            content: item.content,
+            createdTime: moment(),
+          });
+        });
+        that.setState({
+          ticketInfo: ticketDetail,
+          notes: notes,
+          rs: {
+            loading: false,
+            success: true,
+          },
+        });
+      }
+    })
+    .catch(reason => {
+      that.setState({
+        rs: {
+          loading: false,
+          success: false,
+        },
+      });
+      console.log(reason);
+    });
+}