EVA-Notify/src/pages/TicketDetail/TicketDetail.tsx

124 lines
3.2 KiB
TypeScript

import { Component, ReactNode } from 'react';
import { View } from '@tarojs/components';
import { getCurrentInstance } from '@tarojs/runtime';
import pt from '@/plain-text';
import { AtButton, AtModal } from 'taro-ui';
import DetailFramework from '@/components/DetailFramework/DetailFramework';
import PageFooter from '@/components/PageFooter/PageFooter';
interface TicketDetailState {
id: number;
isMember: boolean;
showModel: boolean;
}
export default class TicketDetail extends Component<{}, TicketDetailState> {
state: Readonly<TicketDetailState> = {
id: 0,
isMember: false,
showModel: false,
};
componentDidMount(): void {
const { router } = getCurrentInstance();
const id = router?.params.id as number;
const isMember = router?.params.isMember as boolean;
this.setState({
id: id,
isMember: isMember,
});
}
onAddToOreo(): void {
this.setState({
showModel: true,
});
}
handleCancel(): void {
this.setState({
showModel: false,
});
}
handleConfirm(): void {
return;
}
render(): ReactNode {
const middleButton = this.state.isMember ? (
<View
className='at-row'
style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
>
<View
className='at-col'
style={{ marginLeft: 10, paddingRight: 5, width: '33%' }}
>
<AtButton type='secondary'>{pt.get().ticketDetail.pick}</AtButton>
</View>
<View
className='at-col'
style={{ marginLeft: 10, paddingRight: 5, width: '33%' }}
onClick={this.onAddToOreo.bind(this)}
>
<AtButton type='primary'>{pt.get().ticketDetail.addToOreo}</AtButton>
</View>
<View
className='at-col'
style={{ marginRight: 10, paddingLeft: 5, width: '33%' }}
>
<AtButton type='secondary'>{pt.get().ticketDetail.addNote}</AtButton>
</View>
</View>
) : (
<View
className='at-row'
style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
>
<View
className='at-col'
style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
>
<AtButton type='primary'>{pt.get().ticketDetail.tookAway}</AtButton>
</View>
<View
className='at-col'
style={{ marginRight: 10, paddingLeft: 5, width: '50%' }}
>
<AtButton type='secondary'>{pt.get().ticketDetail.addNote}</AtButton>
</View>
</View>
);
const isInfoShow = {
device: true,
createdTime: true,
description: true,
current: true,
notelist: true,
showAllNotes: true,
};
return (
<View>
<AtModal
isOpened={this.state.showModel}
title={pt.get().modal.addToOreo.title}
cancelText={pt.get().modal.cancel}
confirmText={pt.get().modal.confirm}
onCancel={this.handleCancel.bind(this)}
onConfirm={this.handleConfirm.bind(this)}
content={pt.get().modal.addToOreo.content}
/>
<DetailFramework
middleButton={middleButton}
id={this.state.id}
isInfoShow={isInfoShow}
/>
<PageFooter />
</View>
);
}
}