dutycard add data

src/pages/index/index.tsx

@@ -1,4 +1,4 @@
-import { View, Text } from '@tarojs/components';
+import { View } from '@tarojs/components';
 import { Component, ReactNode } from 'react';
 import Taro from '@tarojs/taro';
 import { AtCard, AtTimeline, AtAccordion } from 'taro-ui';
@@ -11,19 +11,37 @@ interface CardContent {
   title: string;
   note: string;
   extra: JSX.Element | string;
-  content: JSX.Element;
+  content: () => JSX.Element;
 }
 
 function mainPageCard(c: CardContent): JSX.Element {
   return (
     <View style={{ marginTop: 10 }}>
       <AtCard note={c.note} extra={c.extra} title={c.title}>
-        {c.content}
+        {c.content()}
       </AtCard>
     </View>
   );
 }
 
+type DutyState = 'off' | '1' | '2' | '3';
+
+class DutyData {
+  constructor() {
+    this.isInDuty = false;
+    this.inDutyCnt = 3;
+    this.currentDuty = '2';
+    this.offDutyReason = '学园维修';
+    this.dutyRecoverTime = '下周一';
+  }
+
+  isInDuty: boolean;
+  inDutyCnt: number;
+  currentDuty: DutyState;
+  offDutyReason: string;
+  dutyRecoverTime: string;
+}
+
 class ExpandItem extends Component {
   state = {
     open: false,
@@ -53,13 +71,39 @@ class ExpandItem extends Component {
 }
 
 class DutyInfo extends Component {
-  render(): ReactNode {
+  props = {
+    data: new DutyData(),
+  };
+
+  offDutyContent(): ReactNode {
+    const data = this.props.data;
     return (
       <View>
-        <Text>x人在岗</Text>
+        <View>当前未值班</View>
+        <View>{data.offDutyReason}</View>
+        <View>恢复值班时间：{data.dutyRecoverTime}</View>
       </View>
     );
   }
+
+  inDutyContent(): ReactNode {
+    const data = this.props.data;
+    return (
+      <View>
+        <View>值班中</View>
+        <View>当前班次 {data.currentDuty}</View>
+        <View>当前{data.inDutyCnt}人在岗</View>
+      </View>
+    );
+  }
+
+  render(): ReactNode {
+    if (this.props.data.isInDuty) {
+      return this.inDutyContent();
+    } else {
+      return this.offDutyContent();
+    }
+  }
 }
 
 class StepInfo extends Component {
@@ -84,23 +128,24 @@ class TipsInfo extends Component {
 
 export default class Index extends Component {
   state = {
+    dutyData: new DutyData(),
     dutyInfoCard: {
       title: pt.get().mainPage.cardTitle.dutyInfo,
       note: 'Tips',
       extra: '额外信息',
-      content: <DutyInfo />,
+      content: () => <DutyInfo data={this.state.dutyData} />,
     },
     stepInfoCard: {
       title: pt.get().mainPage.cardTitle.stepInfo,
       note: 'Tips 请在20:30以前取走自己的物品哦',
       extra: '额外信息',
-      content: <StepInfo />,
+      content: () => <StepInfo />,
     },
     tipsInfoCard: {
       title: pt.get().mainPage.cardTitle.tipsInfo,
       note: 'Tips',
       extra: '额外信息',
-      content: <TipsInfo />,
+      content: () => <TipsInfo />,
     },
   };