129 lines
3.0 KiB
TypeScript
129 lines
3.0 KiB
TypeScript
import { Component, ReactNode } from 'react';
|
|
import { View } from '@tarojs/components';
|
|
import { AtList, AtListItem } from 'taro-ui';
|
|
import Taro from '@tarojs/taro';
|
|
import moment from 'moment';
|
|
import repair from '@/assets/icons/MyTickets/repair.svg';
|
|
import finished from '@/assets/icons/MyTickets/finished.svg';
|
|
import tick from '@/assets/icons/MyTickets/tick.svg';
|
|
import fail from '@/assets/icons/MyTickets/fail.svg';
|
|
import pt from '@/plain-text';
|
|
import { getUrl } from '@/service';
|
|
import './myTicket.scss';
|
|
|
|
type FixStatus = 1 | 2 | 3 | 4 | 5;
|
|
|
|
class TicketListItem {
|
|
id: number;
|
|
brand: string;
|
|
model: string;
|
|
status: FixStatus;
|
|
createAt: moment.Moment;
|
|
iconMap: Map<FixStatus, string>;
|
|
|
|
constructor(
|
|
id: number,
|
|
brand: string,
|
|
model: string,
|
|
status: FixStatus,
|
|
createAt: moment.Moment,
|
|
) {
|
|
this.id = id;
|
|
this.brand = brand;
|
|
this.model = model;
|
|
this.status = status;
|
|
this.createAt = createAt;
|
|
this.iconMap = new Map<FixStatus, string>([
|
|
[1, repair],
|
|
[2, repair],
|
|
[3, finished],
|
|
[4, tick],
|
|
[5, fail],
|
|
]);
|
|
}
|
|
|
|
render(): JSX.Element {
|
|
const tl = pt.get().ticketList;
|
|
return (
|
|
<AtListItem
|
|
title={this.brand + ' ' + this.model}
|
|
note={tl.createdAt(this.createAt.format('YYYY-MM-DD HH:mm'))}
|
|
extraText={tl.statusMap.get(this.status)}
|
|
arrow='right'
|
|
thumb={this.iconMap.get(this.status)}
|
|
onClick={() => {
|
|
Taro.navigateTo({
|
|
url: '/pages/TicketDetail/TicketDetail?id=' + this.id,
|
|
});
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default class SettingsPage extends Component {
|
|
state = {
|
|
loading: true,
|
|
success: false,
|
|
fixList: [new TicketListItem(0, '', '', 1, moment())],
|
|
};
|
|
|
|
componentDidMount(): void {
|
|
Taro.setNavigationBarTitle({
|
|
title: pt.get().navBar.user.myTicket,
|
|
});
|
|
Taro.request({
|
|
url: getUrl('/user/mytickets'),
|
|
method: 'GET',
|
|
data: {
|
|
token: 'token_test',
|
|
},
|
|
})
|
|
.then(res => {
|
|
if (!res.data.success) {
|
|
this.setState({
|
|
loading: false,
|
|
success: false,
|
|
});
|
|
return;
|
|
}
|
|
this.setState({
|
|
loading: false,
|
|
success: true,
|
|
fixList: res.data.data.list.map(
|
|
item =>
|
|
new TicketListItem(
|
|
item.id,
|
|
item.device,
|
|
item.deviceModel,
|
|
item.status,
|
|
moment(),
|
|
),
|
|
),
|
|
});
|
|
})
|
|
.catch(reason => {
|
|
this.setState({
|
|
loading: false,
|
|
success: false,
|
|
});
|
|
console.log(reason);
|
|
});
|
|
}
|
|
|
|
render(): ReactNode {
|
|
if (this.state.loading) {
|
|
return <View>loading</View>;
|
|
}
|
|
if (!this.state.success) {
|
|
return <View>Failed</View>;
|
|
}
|
|
const fixListRenderer = this.state.fixList.map(item => item.render());
|
|
return (
|
|
<View>
|
|
<AtList>{fixListRenderer}</AtList>
|
|
</View>
|
|
);
|
|
}
|
|
}
|