add main page items

src/pages/index/index.tsx

@@ -1,12 +1,84 @@
 import { View, Text } from '@tarojs/components';
 import { Component, ReactNode } from 'react';
 import Taro from '@tarojs/taro';
+import { AtCard, AtTimeline } from 'taro-ui';
 import type CustomTabBar from '../../custom-tab-bar';
 import './index.scss';
 
-class Index extends Component {
+interface CardContent {
+  title: string;
+  note: string;
+  extra: JSX.Element | string;
+  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}
+      </AtCard>
+    </View>
+  );
+}
+
+class DutyInfo extends Component {
+  render(): ReactNode {
+    return (
+      <View>
+        <Text>x人在岗</Text>
+      </View>
+    );
+  }
+}
+
+class StepInfo extends Component {
+  render(): ReactNode {
+    return (
+      <View>
+        <AtTimeline
+          items={[
+            { title: '线上填写工单' },
+            { title: '去东三-204教室维修电脑' },
+            { title: '等待电脑维修' },
+            { title: '维修结束，取回电脑' },
+          ]}
+        ></AtTimeline>
+      </View>
+    );
+  }
+}
+
+class TipsInfo extends Component {
+  render(): ReactNode {
+    return (
+      <View>
+        <Text>提示：</Text>
+      </View>
+    );
+  }
+}
+
+export default class Index extends Component {
   state = {
-    msg: 'Hello World!',
+    dutyInfoCard: {
+      title: '204值班情况',
+      note: 'Tips',
+      extra: '额外信息',
+      content: <DutyInfo />,
+    },
+    stepInfoCard: {
+      title: '维修步骤',
+      note: 'Tips',
+      extra: '额外信息',
+      content: <StepInfo />,
+    },
+    tipsInfoCard: {
+      title: '提醒事项',
+      note: 'Tips',
+      extra: '额外信息',
+      content: <TipsInfo />,
+    },
   };
 
   // 以下是TabBar相关
@@ -20,10 +92,16 @@ class Index extends Component {
   render(): ReactNode {
     return (
       <View>
-        <Text>{this.state.msg}</Text>
+        <View className='page-title'>
+          <View className='at-article__h1'>您好，这里是E志者协会。</View>
+          <View className='at-article__h1'>维修请移步东三-204教室。</View>
+        </View>
+        <View style={{ marginTop: 30 }}>
+          {mainPageCard(this.state.dutyInfoCard)}
+          {mainPageCard(this.state.stepInfoCard)}
+          {mainPageCard(this.state.tipsInfoCard)}
+        </View>
       </View>
     );
   }
 }
-
-export default Index;