refactor ticket detail

2024-03-12 23:01:24 +08:00
parent e1c3b464a6
commit 0dac2ad185
5 changed files with 144 additions and 96 deletions
@@ -0,0 +1,3 @@
+export default {
+  component: true,
+};
@@ -0,0 +1,113 @@
+import { View } from '@tarojs/components';
+import { AtCard, AtSteps } from 'taro-ui';
+import { Component, ReactNode } from 'react';
+import Taro from '@tarojs/taro';
+import { TicketInfo, TicketNote } from '@/pages/TicketDetail/TicketNote';
+import NoteList from '@/components/NoteList/NoteList';
+import PageFooter from '@/components/PageFooter/PageFooter';
+import pt from '@/plain-text';
+import { RequestState } from '@/service';
+import { getTicketInfo } from '@/service/ticketsInfo';
+import { FixStatus } from '@/common';
+
+const mapStatusStep: Map<FixStatus, 0 | 1 | 2 | 3> = new Map([
+  [1, 0],
+  [2, 1],
+  [3, 2],
+  [4, 2],
+  [5, 3],
+]);
+
+interface StepItemData {
+  title: string;
+}
+
+interface DetailFrameworkState {
+  current: number;
+  items: Array<StepItemData>;
+  ticketInfo: TicketInfo;
+  notes: Array<TicketNote>;
+  rs: RequestState;
+}
+
+interface DetailFrameworkProps {
+  middleButton: JSX.Element;
+  id: number;
+}
+
+export default class DetailFramework extends Component<
+  DetailFrameworkProps,
+  DetailFrameworkState
+> {
+  state = {
+    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 items = pt.get().ticketDetail.stepItems;
+    this.setState({
+      items: items,
+    });
+    getTicketInfo(this, this.props.id);
+  }
+
+  props: Readonly<DetailFrameworkProps> = {
+    middleButton: <View></View>,
+    id: 0,
+  };
+
+  render(): ReactNode {
+    if (this.state.rs.loading) {
+      return <View>Loading</View>;
+    } else if (!this.state.rs.success) {
+      return <View>Request failed</View>;
+    }
+
+    const status = this.state.ticketInfo.status;
+    this.setState({
+      current: mapStatusStep.get(status) || 0,
+    });
+
+    return (
+      <View>
+        <View className='at-article__h1'>
+          {this.state.ticketInfo.device +
+            ' ' +
+            this.state.ticketInfo.deviceModel}
+        </View>
+        <View className='at-article__info'>
+          {pt.get().common.createdAtText(this.state.ticketInfo.createdTime)}
+        </View>
+        <View style={{ marginTop: 10, marginBottom: 10 }}>
+          <AtCard title={pt.get().ticketDetail.descTitle}>
+            <View className='at-article__h3'>
+              {this.state.ticketInfo.description}
+            </View>
+          </AtCard>
+        </View>
+        <View style={{ padding: 10 }}>
+          <AtSteps
+            items={this.state.items}
+            current={this.state.current}
+            onChange={() => {}}
+          />
+        </View>
+
+        {this.props.middleButton}
+
+        <View style={{ padding: 10 }}>
+          <NoteList noteList={this.state.notes} />
+        </View>
+        <PageFooter />
+      </View>
+    );
+  }
+}