121 lines
3.0 KiB
TypeScript
121 lines
3.0 KiB
TypeScript
import { View } from '@tarojs/components';
|
|
import { Component, ReactNode } from 'react';
|
|
import Taro from '@tarojs/taro';
|
|
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 { getDutyInfo } from '@/service/dutyInfo';
|
|
import './index.scss';
|
|
import TitleCard from './TitleCard';
|
|
import { DutyInfo, DutyData } from './DutyInfo';
|
|
import { StepInfo, TipsInfo } from './StepTipsInfo';
|
|
|
|
class 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>
|
|
);
|
|
}
|
|
}
|
|
|
|
interface MainPageState {
|
|
dutyData: DutyData;
|
|
dutyInfoCard: CardContent;
|
|
stepInfoCard: CardContent;
|
|
tipsInfoCard: CardContent;
|
|
//rs: RequestState;
|
|
}
|
|
|
|
export default class MainPage extends Component<{}, MainPageState> {
|
|
state = {
|
|
dutyData: new DutyData(),
|
|
dutyInfoCard: {
|
|
title: pt.get().mainPage.cardTitle.dutyInfo,
|
|
note: pt.get().mainPage.cardTips.dutyInfo,
|
|
extra: pt.get().mainPage.extraInfo.dutyInfo,
|
|
content: () => <DutyInfo data={this.state.dutyData} />,
|
|
},
|
|
stepInfoCard: {
|
|
title: pt.get().mainPage.cardTitle.stepInfo,
|
|
note: pt.get().mainPage.cardTips.stepInfo,
|
|
extra: pt.get().mainPage.extraInfo.dutyInfo,
|
|
content: () => <StepInfo />,
|
|
},
|
|
tipsInfoCard: {
|
|
title: pt.get().mainPage.cardTitle.tipsInfo,
|
|
note: pt.get().mainPage.cardTips.tipsInfo,
|
|
extra: pt.get().mainPage.extraInfo.dutyInfo,
|
|
content: () => <TipsInfo />,
|
|
},
|
|
// rs: new RequestState(),
|
|
};
|
|
|
|
componentDidMount(): void {
|
|
getDutyInfo(this);
|
|
}
|
|
|
|
// 以下是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>
|
|
<TitleCard />
|
|
<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>
|
|
);
|
|
}
|
|
}
|