refactor main page service

src/pages/index/DutyInfo.tsx

@@ -15,10 +15,10 @@ export class DutyData {
   }
 
   isInDuty: boolean;
-  inDutyCnt: number;
+  inDutyCnt?: number;
-  currentDuty: 'off' | '1' | '2' | '3';
+  currentDuty?: 'off' | '1' | '2' | '3';
-  offDutyReason: string; // from backend
+  offDutyReason?: string;
-  dutyRecoverTime: string; // from backend
+  dutyRecoverTime?: string;
 }
 
 class Card extends Component {
@@ -73,8 +73,8 @@ export class DutyInfo extends Component {
         <Card isInDuty={data.isInDuty} />
         <AtTimeline
           items={[
-            { title: od.reason(data.offDutyReason) },
+            { title: od.reason(data.offDutyReason as string) },
-            { title: od.recoverTime(data.dutyRecoverTime) },
+            { title: od.recoverTime(data.dutyRecoverTime as string) },
           ]}
         />
       </View>
@@ -89,8 +89,8 @@ export class DutyInfo extends Component {
         <Card isInDuty={data.isInDuty} />
         <AtTimeline
           items={[
-            { title: id.currentDutyText(data.currentDuty) },
+            { title: id.currentDutyText(data.currentDuty || 'off') },
-            { title: id.inDutyCnt(data.inDutyCnt) },
+            { title: id.inDutyCnt(data.inDutyCnt as number) },
           ]}
         />
       </View>

src/pages/index/index.tsx

@@ -5,7 +5,7 @@ import { AtCard, AtAccordion } from 'taro-ui';
 import type CustomTabBar from '@/custom-tab-bar';
 import PageFooter from '@/components/PageFooter/PageFooter';
 import pt from '@/plain-text';
-import { getUrl } from '@/service';
+import { getDutyInfo } from '@/service/MainPage';
 import './index.scss';
 import TitleCard from './TitleCard';
 import { DutyInfo, DutyData } from './DutyInfo';
@@ -56,7 +56,15 @@ class ExpandItem extends Component {
   }
 }
 
-export default class Index extends Component {
+interface MainPageState {
+  dutyData: DutyData;
+  dutyInfoCard: CardContent;
+  stepInfoCard: CardContent;
+  tipsInfoCard: CardContent;
+  //rs: RequestState;
+}
+
+export default class MainPage extends Component<{}, MainPageState> {
   state = {
     dutyData: new DutyData(),
     dutyInfoCard: {
@@ -77,46 +85,11 @@ export default class Index extends Component {
       extra: '额外信息',
       content: () => <TipsInfo />,
     },
+    // rs: new RequestState(),
   };
 
   componentDidMount(): void {
-    Taro.request({
+    getDutyInfo(this);
-      url: getUrl('/dutyinfo'),
-      method: 'GET',
-      data: {
-        token: 'token_test',
-      },
-    })
-      .then(res => {
-        const data = res.data.data;
-        if (data.isInDuty) {
-          this.setState({
-            dutyData: {
-              isInDuty: data.isInDuty,
-              inDutyCnt: data.inDutyCnt,
-              currentDuty: data.currentDuty,
-            },
-          });
-        } else {
-          this.setState({
-            dutyData: {
-              isInDuty: data.isInDuty,
-              offDutyReason: data.offDutyReason,
-              dutyRecoverTime: data.dutyRecoverTime,
-            },
-          });
-        }
-      })
-      .catch(err => {
-        console.log(err);
-        this.setState({
-          dutyData: {
-            isInDuty: false,
-            offDutyReason: '获取失败！Network Error!',
-            dutyRecoverTime: '获取失败！Network Error!',
-          },
-        });
-      });
   }
 
   // 以下是TabBar相关

src/service/MainPage.ts

@@ -0,0 +1,43 @@
+import MainPage from '@/pages/index';
+import Taro from '@tarojs/taro';
+import { getUrl } from '.';
+
+export function getDutyInfo(that: MainPage) {
+  Taro.request({
+    url: getUrl('/dutyinfo'),
+    method: 'GET',
+    data: {
+      token: 'token_test',
+    },
+  })
+    .then(res => {
+      const data = res.data.data;
+      if (data.isInDuty) {
+        that.setState({
+          dutyData: {
+            isInDuty: data.isInDuty,
+            inDutyCnt: data.inDutyCnt,
+            currentDuty: data.currentDuty,
+          },
+        });
+      } else {
+        that.setState({
+          dutyData: {
+            isInDuty: data.isInDuty,
+            offDutyReason: data.offDutyReason,
+            dutyRecoverTime: data.dutyRecoverTime,
+          },
+        });
+      }
+    })
+    .catch(err => {
+      console.log(err);
+      that.setState({
+        dutyData: {
+          isInDuty: false,
+          offDutyReason: '获取失败！Network Error!',
+          dutyRecoverTime: '获取失败！Network Error!',
+        },
+      });
+    });
+}