update main page

src/pages/index/index.tsx

@@ -1,8 +1,9 @@
 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 { AtCard, AtTimeline, AtAccordion } from 'taro-ui';
+import type CustomTabBar from '@/custom-tab-bar';
+import PageFooter from '@/components/PageFooter/PageFooter';
 import './index.scss';
 
 interface CardContent {
@@ -22,6 +23,34 @@ function mainPageCard(c: CardContent): JSX.Element {
   );
 }
 
+class ExpandItem extends Component {
+  state = {
+    open: false,
+  };
+  props = {
+    title: '',
+    content: <View></View>,
+  };
+
+  handleClick(value: boolean) {
+    this.setState({ open: value });
+  }
+
+  render(): ReactNode {
+    return (
+      <View>
+        <AtAccordion
+          open={this.state.open}
+          onClick={this.handleClick.bind(this)}
+          title={this.props.title}
+        >
+          {this.props.content}
+        </AtAccordion>
+      </View>
+    );
+  }
+}
+
 class DutyInfo extends Component {
   render(): ReactNode {
     return (
@@ -53,7 +82,14 @@ class TipsInfo extends Component {
   render(): ReactNode {
     return (
       <View>
-        <Text>提示：</Text>
+        <AtTimeline
+          items={[
+            { title: '戴尔、Surface、外星人、苹果电脑不能拆机哦~' },
+            { title: '数据无价，请随时做好数据备份哦~' },
+            { title: '204也是实验室，请遵守实验室纪律，请勿饮食~' },
+            { title: '我们是志愿服务，不收任何礼物哦~' },
+          ]}
+        ></AtTimeline>
       </View>
     );
   }
@@ -69,12 +105,12 @@ export default class Index extends Component {
     },
     stepInfoCard: {
       title: '维修步骤',
-      note: 'Tips',
+      note: 'Tips 请在20:30以前取走自己的物品哦',
       extra: '额外信息',
       content: <StepInfo />,
     },
     tipsInfoCard: {
-      title: '提醒事项',
+      title: '注意事项',
       note: 'Tips',
       extra: '额外信息',
       content: <TipsInfo />,
@@ -98,9 +134,16 @@ export default class Index extends Component {
         </View>
         <View style={{ marginTop: 30 }}>
           {mainPageCard(this.state.dutyInfoCard)}
-          {mainPageCard(this.state.stepInfoCard)}
-          {mainPageCard(this.state.tipsInfoCard)}
+          <ExpandItem
+            title='查看维修步骤'
+            content={mainPageCard(this.state.stepInfoCard)}
+          />
+          <ExpandItem
+            title='查看注意事项'
+            content={mainPageCard(this.state.tipsInfoCard)}
+          />
         </View>
+        <PageFooter />
       </View>
     );
   }