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

@@ -3,23 +3,90 @@ import { View } from '@tarojs/components';
 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';
 
-export default class TicketDetail extends Component {
+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> {
   state = {
     id: 0,
+    current: 0,
+    items: [],
+    ticketInfo: new TicketInfo(),
+    notes: [new TicketNote()],
+    rs: new RequestState(),
   };
+
   componentDidMount(): void {
     const navBar = pt.get().navBar;
     Taro.setNavigationBarTitle({
       title: navBar.ticketDetail,
     });
     const { router } = getCurrentInstance();
-    const id = router?.params.id;
+    const id = router?.params.id as number;
+    const items = pt.get().ticketDetail.stepItems;
     this.setState({
       id: id,
+      items: items,
     });
+
+    getTicketInfo(this);
   }
+
   render(): ReactNode {
-    return <View>TicketDetail: {this.state.id}</View>;
+    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/plain-text/TicketDetail.ts

@@ -0,0 +1,19 @@
+interface StepItem {
+  title: string;
+}
+
+export interface TicketDetailText {
+  stepItems: Array<StepItem>;
+}
+
+export const ticketDetailZhCn: TicketDetailText = {
+  stepItems: [{ title: '创建成功' }, { title: '维修中' }, { title: '待取回' }],
+};
+
+export const ticketDetailEnUs: TicketDetailText = {
+  stepItems: [
+    { title: 'Ticket created' },
+    { title: 'Repairing' },
+    { title: 'Take home' },
+  ],
+};

src/plain-text/index.ts

@@ -9,6 +9,11 @@ import { ButtonText, buttonEnUs, buttonZhCn } from './Button';
 import { MemberPageText, memberPageEnUs, memberPageZhCn } from './MemberPage';
 import { TicketListText, ticketListEnUs, ticketListZhCn } from './TicketList';
 import { NavBarTitle, navBarTitleEnUs, navBarTitleZhCh } from './NavBarTitle';
+import {
+  TicketDetailText,
+  ticketDetailEnUs,
+  ticketDetailZhCn,
+} from './TicketDetail';
 
 interface TextRecord {
   pageFooter: PageFooterText;
@@ -22,6 +27,7 @@ interface TextRecord {
   memberPage: MemberPageText;
   ticketList: TicketListText;
   navBar: NavBarTitle;
+  ticketDetail: TicketDetailText;
 }
 
 const textZhCn: TextRecord = {
@@ -36,6 +42,7 @@ const textZhCn: TextRecord = {
   memberPage: memberPageZhCn,
   ticketList: ticketListZhCn,
   navBar: navBarTitleZhCh,
+  ticketDetail: ticketDetailZhCn,
 };
 
 const textEnUs: TextRecord = {
@@ -50,6 +57,7 @@ const textEnUs: TextRecord = {
   memberPage: memberPageEnUs,
   ticketList: ticketListEnUs,
   navBar: navBarTitleEnUs,
+  ticketDetail: ticketDetailEnUs,
 };
 
 // type Lang = 'zh_CN' | 'en_US' | ...;

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);
+    });
+}