refactor DetailFramework and service/ticketsInfo; create currentTicket service

mock/uncompleted.json

@@ -1,7 +1,7 @@
 {
   "list": [
     {
-      "id": 6830,
+      "id": 6832,
       "type": 1,
       "status": 2,
       "device": "ROG",

src/components/DetailFramework/DetailFramework.tsx

@@ -1,15 +1,36 @@
 import { View } from '@tarojs/components';
 import { Component, ReactNode } from 'react';
 import Taro from '@tarojs/taro';
-import { ShowElements } from '@/pages/TicketDetail/TicketNote';
-import PageFooter from '@/components/PageFooter/PageFooter';
+import {
+  ShowElements,
+  TicketInfo,
+  TicketNote,
+} from '@/pages/TicketDetail/TicketNote';
 import pt from '@/plain-text';
 import { RequestState } from '@/service';
 import { getTicketInfo } from '@/service/ticketsInfo';
+import { FixStatus } from '@/common';
+import { AtCard, AtSteps } from 'taro-ui';
+import NoteList from '../NoteList/NoteList';
+
+interface StepItemData {
+  title: string;
+}
+
+const mapStatusStep: Map<FixStatus, 0 | 1 | 2 | 3> = new Map([
+  [1, 0],
+  [2, 1],
+  [3, 2],
+  [4, 2],
+  [5, 3],
+]);
 
 interface DetailFrameworkState {
+  current: number;
+  items: Array<StepItemData>;
+  ticketInfo: TicketInfo;
+  notes: Array<TicketNote>;
   rs: RequestState;
-  elements: ShowElements;
 }
 
 interface DetailFrameworkProps {
@@ -23,8 +44,11 @@ export default class DetailFramework extends Component<
   DetailFrameworkState
 > {
   state = {
+    current: 0,
+    items: [],
+    ticketInfo: new TicketInfo(),
+    notes: [new TicketNote()],
     rs: new RequestState(),
-    elements: new ShowElements(),
   };
 
   componentDidMount(): void {
@@ -32,7 +56,7 @@ export default class DetailFramework extends Component<
     Taro.setNavigationBarTitle({
       title: navBar.ticketDetail,
     });
-    getTicketInfo(this, this.props.id, this.props.isInfoShow);
+    getTicketInfo(this, this.props.id);
   }
 
   props: Readonly<DetailFrameworkProps> = {
@@ -55,15 +79,74 @@ export default class DetailFramework extends Component<
       return <View>Request failed</View>;
     }
 
+    const status = this.state.ticketInfo.status;
+    this.setState({
+      current: mapStatusStep.get(status) || 0,
+      items: pt.get().ticketDetail.stepItems,
+    });
+
+    const elements: ShowElements = {
+      device: this.props.isInfoShow['device'] ? (
+        <View className='at-article__h1'>
+          {this.state.ticketInfo.device +
+            ' ' +
+            this.state.ticketInfo.deviceModel}
+        </View>
+      ) : (
+        <View></View>
+      ),
+      createdTime: this.props.isInfoShow['createdTime'] ? (
+        <View className='at-article__info'>
+          {pt.get().common.createdAtText(this.state.ticketInfo.createdTime)}
+        </View>
+      ) : (
+        <View></View>
+      ),
+      description: this.props.isInfoShow['description'] ? (
+        <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></View>
+      ),
+      current: this.props.isInfoShow['current'] ? (
+        <View style={{ padding: 10 }}>
+          <AtSteps
+            items={this.state.items}
+            current={this.state.current}
+            onChange={() => {}}
+          />
+        </View>
+      ) : (
+        <View></View>
+      ),
+      notelist: this.props.isInfoShow['notelist'] ? (
+        this.props.isInfoShow['showAllNotes'] ? (
+          <View style={{ padding: 10 }}>
+            <NoteList noteList={this.state.notes} />
+          </View>
+        ) : (
+          <View style={{ padding: 10 }}>
+            <NoteList noteList={[this.state.notes[-1]]} />
+          </View>
+        )
+      ) : (
+        <View></View>
+      ),
+    };
+
     return (
       <View>
-        {this.state.elements.device}
-        {this.state.elements.createdTime}
-        {this.state.elements.description}
-        {this.state.elements.current}
+        {elements.device}
+        {elements.createdTime}
+        {elements.description}
+        {elements.current}
         {this.props.middleButton}
-        {this.state.elements.notelist}
-        <PageFooter />
+        {elements.notelist}
       </View>
     );
   }

src/pages/TicketDetail/TicketDetail.tsx

@@ -4,6 +4,7 @@ import { getCurrentInstance } from '@tarojs/runtime';
 import pt from '@/plain-text';
 import { AtButton } from 'taro-ui';
 import DetailFramework from '@/components/DetailFramework/DetailFramework';
+import PageFooter from '@/components/PageFooter/PageFooter';
 
 interface TicketDetailState {
   id: number;
@@ -59,6 +60,7 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
           id={this.state.id}
           isInfoShow={isInfoShow}
         />
+        <PageFooter />
       </View>
     );
   }

src/pages/repair/repair.tsx

@@ -15,6 +15,7 @@ import PageFooter from '@/components/PageFooter/PageFooter';
 import { submitTicket } from '@/service/submitTicket';
 import type CustomTabBar from '@/custom-tab-bar';
 import repairLogo from '@/assets/icons/RepairPage/repair.svg';
+import DetailFramework from '@/components/DetailFramework/DetailFramework';
 import './repair.scss';
 
 interface RepairPageState {
@@ -145,6 +146,16 @@ export default class RepairPage extends Component<{}, RepairPageState> {
   }
 
   render(): ReactNode {
+    const middleButton = <View></View>;
+
+    const isInfoShow = {
+      device: true,
+      createdTime: true,
+      description: false,
+      current: true,
+      notelist: true,
+      showAllNotes: false,
+    };
     return (
       <View>
         <AtMessage />

src/service/currentTicket.ts

@@ -0,0 +1,19 @@
+import RepairPage from '@/pages/repair/repair';
+import Taro from '@tarojs/taro';
+import { getUrl } from '.';
+
+export function getCurrentTicket(that: RepairPage) {
+  Taro.request({
+    url: getUrl('/user/mytickets'),
+    method: 'GET',
+    data: {
+      token: 'token_test',
+    },
+  })
+    .then((res) => {
+      const data = res.data.data;
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}

src/service/ticketsInfo.tsx

@@ -1,36 +1,10 @@
-import {
-  TicketInfo,
-  TicketNote,
-  ShowElements,
-} from '@/pages/TicketDetail/TicketNote';
+import { TicketInfo, TicketNote } from '@/pages/TicketDetail/TicketNote';
 import DetailFramework from '@/components/DetailFramework/DetailFramework';
 import Taro from '@tarojs/taro';
-import { View } from '@tarojs/components';
-import pt from '@/plain-text';
-import { AtCard, AtSteps } from 'taro-ui';
 import moment from 'moment';
-import NoteList from '@/components/NoteList/NoteList';
-import { FixStatus } from '@/common';
 import { getUrl } from '.';
 
-const mapStatusStep: Map<FixStatus, 0 | 1 | 2 | 3> = new Map([
-  [1, 0],
-  [2, 1],
-  [3, 2],
-  [4, 2],
-  [5, 3],
-]);
-
-interface StepItemData {
-  title: string;
-}
-
-export function getTicketInfo(
-  that: DetailFramework,
-  id: number,
-  isInfoShow: { [key: string]: boolean },
-) {
-  const items: Array<StepItemData> = pt.get().ticketDetail.stepItems;
+export function getTicketInfo(that: DetailFramework, id: number) {
   Taro.request({
     url: getUrl('/tickets/info'),
     method: 'GET',
@@ -65,60 +39,10 @@ export function getTicketInfo(
             createdTime: moment(item.createdTime as string),
           });
         });
-        const elements: ShowElements = {
-          device: isInfoShow['device'] ? (
-            <View className='at-article__h1'>
-              {ticketDetail.device + ' ' + ticketDetail.deviceModel}
-            </View>
-          ) : (
-            <View></View>
-          ),
-          createdTime: isInfoShow['createdTime'] ? (
-            <View className='at-article__info'>
-              {pt.get().common.createdAtText(ticketDetail.createdTime)}
-            </View>
-          ) : (
-            <View></View>
-          ),
-          description: isInfoShow['description'] ? (
-            <View style={{ marginTop: 10, marginBottom: 10 }}>
-              <AtCard title={pt.get().ticketDetail.descTitle}>
-                <View className='at-article__h3'>
-                  {ticketDetail.description}
-                </View>
-              </AtCard>
-            </View>
-          ) : (
-            <View></View>
-          ),
-          current: isInfoShow['current'] ? (
-            <View style={{ padding: 10 }}>
-              <AtSteps
-                items={items}
-                current={mapStatusStep.get(ticketDetail.status) || 0}
-                onChange={() => {}}
-              />
-            </View>
-          ) : (
-            <View></View>
-          ),
-          notelist: isInfoShow['notelist'] ? (
-            isInfoShow['showAllNotes'] ? (
-              <View style={{ padding: 10 }}>
-                <NoteList noteList={notes} />
-              </View>
-            ) : (
-              <View style={{ padding: 10 }}>
-                <NoteList noteList={[notes[-1]]} />
-              </View>
-            )
-          ) : (
-            <View></View>
-          ),
-        };
         that.setState({
+          ticketInfo: ticketDetail,
+          notes: notes,
           rs: former.trans(true),
-          elements: elements,
         });
       }
     })