136 lines
3.0 KiB
TypeScript
136 lines
3.0 KiB
TypeScript
import { View, Text } from '@tarojs/components';
|
|
import { Component, ReactNode } from 'react';
|
|
import Taro from '@tarojs/taro';
|
|
import { AtCard, AtTimeline, AtAccordion } from 'taro-ui';
|
|
import type CustomTabBar from '@/custom-tab-bar';
|
|
import PageFooter from '@/components/PageFooter/PageFooter';
|
|
import pt from '@/plain-text';
|
|
import './index.scss';
|
|
|
|
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 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 (
|
|
<View>
|
|
<Text>x人在岗</Text>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
class StepInfo extends Component {
|
|
render(): ReactNode {
|
|
return (
|
|
<View>
|
|
<AtTimeline items={pt.get().mainPage.stepList}></AtTimeline>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
class TipsInfo extends Component {
|
|
render(): ReactNode {
|
|
return (
|
|
<View>
|
|
<AtTimeline items={pt.get().mainPage.tipsList}></AtTimeline>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default class Index extends Component {
|
|
state = {
|
|
dutyInfoCard: {
|
|
title: pt.get().mainPage.cardTitle.dutyInfo,
|
|
note: 'Tips',
|
|
extra: '额外信息',
|
|
content: <DutyInfo />,
|
|
},
|
|
stepInfoCard: {
|
|
title: pt.get().mainPage.cardTitle.stepInfo,
|
|
note: 'Tips 请在20:30以前取走自己的物品哦',
|
|
extra: '额外信息',
|
|
content: <StepInfo />,
|
|
},
|
|
tipsInfoCard: {
|
|
title: pt.get().mainPage.cardTitle.tipsInfo,
|
|
note: 'Tips',
|
|
extra: '额外信息',
|
|
content: <TipsInfo />,
|
|
},
|
|
};
|
|
|
|
// 以下是TabBar相关
|
|
pageCtx = Taro.getCurrentInstance().page;
|
|
componentDidShow() {
|
|
const tabbar = Taro.getTabBar<CustomTabBar>(this.pageCtx);
|
|
tabbar?.setSelected(0);
|
|
}
|
|
// 以上是TabBar相关
|
|
|
|
render(): ReactNode {
|
|
const mainPage = pt.get().mainPage;
|
|
return (
|
|
<View>
|
|
<View className='page-title'>
|
|
<View className='at-article__h1'>{mainPage.mainTitleLine}</View>
|
|
<View className='at-article__h1'>{mainPage.subTitleLine}</View>
|
|
</View>
|
|
<View style={{ marginTop: 30 }}>
|
|
{mainPageCard(this.state.dutyInfoCard)}
|
|
{mainPageCard(this.state.tipsInfoCard)}
|
|
<ExpandItem
|
|
title={mainPage.expandTitle.stepInfo}
|
|
content={mainPageCard(this.state.stepInfoCard)}
|
|
/>
|
|
</View>
|
|
<PageFooter />
|
|
</View>
|
|
);
|
|
}
|
|
}
|