109 lines
2.5 KiB
TypeScript
109 lines
2.5 KiB
TypeScript
import { Component, ReactNode } from 'react';
|
|
import { View, Image } from '@tarojs/components';
|
|
import { AtTimeline } from 'taro-ui';
|
|
import pt from '@/plain-text';
|
|
import tick from '@/assets/icons/MainPage/tick.svg';
|
|
import cross from '@/assets/icons/MainPage/cross.svg';
|
|
|
|
export class DutyData {
|
|
constructor() {
|
|
this.isInDuty = false;
|
|
this.inDutyCnt = 3;
|
|
this.currentDuty = '2';
|
|
this.offDutyReason = '学园维修';
|
|
this.dutyRecoverTime = '下周一';
|
|
}
|
|
|
|
isInDuty: boolean;
|
|
inDutyCnt?: number;
|
|
currentDuty?: 'off' | '1' | '2' | '3';
|
|
offDutyReason?: string;
|
|
dutyRecoverTime?: string;
|
|
}
|
|
|
|
class Card extends Component {
|
|
props = {
|
|
isInDuty: false,
|
|
};
|
|
render(): ReactNode {
|
|
const inDuty = this.props.isInDuty;
|
|
const dc = pt.get().mainPage.dutyCard;
|
|
const title = inDuty ? dc.inDuty.title : dc.offDuty.title;
|
|
const iconsrc = inDuty ? tick : cross;
|
|
return (
|
|
<View>
|
|
<View
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
marginBottom: '40rpx',
|
|
}}
|
|
>
|
|
<Image
|
|
src={iconsrc}
|
|
style={{
|
|
width: '48rpx',
|
|
height: '48rpx',
|
|
}}
|
|
/>
|
|
<View
|
|
style={{
|
|
marginLeft: '20rpx',
|
|
fontSize: '60rpx',
|
|
fontWeight: 'bold',
|
|
}}
|
|
>
|
|
{title}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
export class DutyInfo extends Component {
|
|
props = {
|
|
data: new DutyData(),
|
|
};
|
|
|
|
offDutyContent(): ReactNode {
|
|
const data = this.props.data;
|
|
const od = pt.get().mainPage.dutyCard.offDuty;
|
|
return (
|
|
<View>
|
|
<Card isInDuty={data.isInDuty} />
|
|
<AtTimeline
|
|
items={[
|
|
{ title: od.reason(data.offDutyReason as string) },
|
|
{ title: od.recoverTime(data.dutyRecoverTime as string) },
|
|
]}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
inDutyContent(): ReactNode {
|
|
const data = this.props.data;
|
|
const id = pt.get().mainPage.dutyCard.inDuty;
|
|
return (
|
|
<View>
|
|
<Card isInDuty={data.isInDuty} />
|
|
<AtTimeline
|
|
items={[
|
|
{ title: id.currentDutyText(data.currentDuty || 'off') },
|
|
{ title: id.inDutyCnt(data.inDutyCnt as number) },
|
|
]}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
render(): ReactNode {
|
|
if (this.props.data.isInDuty) {
|
|
return this.inDutyContent();
|
|
} else {
|
|
return this.offDutyContent();
|
|
}
|
|
}
|
|
}
|