From cc5af58155edf26c2cdf4529d7bbca9af30663ad Mon Sep 17 00:00:00 2001 From: FrozenArcher Date: Fri, 8 Mar 2024 22:10:17 +0800 Subject: [PATCH 1/3] import moment.js --- package-lock.json | 9 +++++++++ package.json | 1 + 2 files changed, 10 insertions(+) diff --git a/package-lock.json b/package-lock.json index c21455d..e9931f3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "@tarojs/runtime": "3.6.24", "@tarojs/shared": "3.6.24", "@tarojs/taro": "3.6.24", + "moment": "^2.30.1", "process": "^0.11.10", "react": "^18.0.0", "react-dom": "^18.0.0", @@ -26380,6 +26381,14 @@ "random": "bin/random" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz", diff --git a/package.json b/package.json index 8868d10..9279e61 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "@tarojs/runtime": "3.6.24", "@tarojs/shared": "3.6.24", "@tarojs/taro": "3.6.24", + "moment": "^2.30.1", "process": "^0.11.10", "react": "^18.0.0", "react-dom": "^18.0.0", From 4e31eb70e2bc5c59d9f2768369833b1b245bf32e Mon Sep 17 00:00:00 2001 From: FrozenArcher Date: Mon, 11 Mar 2024 11:15:02 +0800 Subject: [PATCH 2/3] add ticket list --- src/assets/icons/MyTickets/fail.svg | 1 + src/assets/icons/MyTickets/finished.svg | 1 + src/assets/icons/MyTickets/repair.svg | 1 + src/assets/icons/MyTickets/tick.svg | 1 + src/pages/user/myTicket/myTicket.tsx | 66 +++++++++++++++++++++++-- src/plain-text/TicketList.ts | 32 ++++++++++++ src/plain-text/index.ts | 4 ++ 7 files changed, 103 insertions(+), 3 deletions(-) create mode 100644 src/assets/icons/MyTickets/fail.svg create mode 100644 src/assets/icons/MyTickets/finished.svg create mode 100644 src/assets/icons/MyTickets/repair.svg create mode 100644 src/assets/icons/MyTickets/tick.svg create mode 100644 src/plain-text/TicketList.ts diff --git a/src/assets/icons/MyTickets/fail.svg b/src/assets/icons/MyTickets/fail.svg new file mode 100644 index 0000000..08e6e87 --- /dev/null +++ b/src/assets/icons/MyTickets/fail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/MyTickets/finished.svg b/src/assets/icons/MyTickets/finished.svg new file mode 100644 index 0000000..ba97e48 --- /dev/null +++ b/src/assets/icons/MyTickets/finished.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/MyTickets/repair.svg b/src/assets/icons/MyTickets/repair.svg new file mode 100644 index 0000000..b3a5f19 --- /dev/null +++ b/src/assets/icons/MyTickets/repair.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/MyTickets/tick.svg b/src/assets/icons/MyTickets/tick.svg new file mode 100644 index 0000000..36e2555 --- /dev/null +++ b/src/assets/icons/MyTickets/tick.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/user/myTicket/myTicket.tsx b/src/pages/user/myTicket/myTicket.tsx index 9002a83..ecdb920 100644 --- a/src/pages/user/myTicket/myTicket.tsx +++ b/src/pages/user/myTicket/myTicket.tsx @@ -1,9 +1,69 @@ import { Component, ReactNode } from 'react'; import { View } from '@tarojs/components'; +import { AtList, AtListItem } from 'taro-ui'; +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 './myTicket.scss'; -export default class SettingsPage extends Component { - render(): ReactNode { - return ; +type FixStatus = 1 | 2 | 3 | 4 | 5; + +class TicketListItem { + brand: string; + model: string; + status: FixStatus; + createAt: moment.Moment; + iconMap: Map; + + constructor( + brand: string, + model: string, + status: FixStatus, + createAt: moment.Moment, + ) { + this.brand = brand; + this.model = model; + this.status = status; + this.createAt = createAt; + this.iconMap = new Map([ + [1, repair], + [2, repair], + [3, finished], + [4, tick], + [5, fail], + ]); + } + + render(): JSX.Element { + const tl = pt.get().ticketList; + return ( + + ); + } +} + +export default class SettingsPage extends Component { + state = { + fixList: [ + new TicketListItem('华硕', '天选3', 3, moment()), + new TicketListItem('联想', '拯救者', 5, moment()), + ], + }; + render(): ReactNode { + const fixListRenderer = this.state.fixList.map(item => item.render()); + return ( + + {fixListRenderer} + + ); } } diff --git a/src/plain-text/TicketList.ts b/src/plain-text/TicketList.ts new file mode 100644 index 0000000..ac68ceb --- /dev/null +++ b/src/plain-text/TicketList.ts @@ -0,0 +1,32 @@ +type FixStatus = 1 | 2 | 3 | 4 | 5; + +export interface TicketListText { + createdAt(time: string): string; + statusMap: Map; +} + +export const ticketListZhCn: TicketListText = { + createdAt: time => { + return '创建于' + ' ' + time; + }, + statusMap: new Map([ + [1, '创建成功'], + [2, '维修中'], + [3, '待取回'], + [4, '已取回'], + [5, '已取回'], + ]), +}; + +export const ticketListEnUs: TicketListText = { + createdAt: time => { + return '创建于' + ' ' + time; + }, + statusMap: new Map([ + [1, '创建成功'], + [2, '维修中'], + [3, '待取回'], + [4, '已取回'], + [5, '已取回'], + ]), +}; diff --git a/src/plain-text/index.ts b/src/plain-text/index.ts index c11bc1f..f0ee529 100644 --- a/src/plain-text/index.ts +++ b/src/plain-text/index.ts @@ -5,6 +5,7 @@ import { TabBarText, tabBarEnUs, tabBarZhCn } from './TabBar'; import { ReportPageText, reportPageEnUs, reportPageZhCn } from './ReportPage'; import { InformPageText, informPageZhCn, informtPageEnUs } from './InformPage'; import { AboutPageText, aboutPageEnUs, aboutPageZhCn } from './AboutPage'; +import { TicketListText, ticketListEnUs, ticketListZhCn } from './TicketList'; interface TextRecord { pageFooter: PageFooterText; @@ -14,6 +15,7 @@ interface TextRecord { reportPage: ReportPageText; informPage: InformPageText; aboutPage: AboutPageText; + ticketList: TicketListText; } const textZhCn: TextRecord = { @@ -24,6 +26,7 @@ const textZhCn: TextRecord = { reportPage: reportPageZhCn, informPage: informPageZhCn, aboutPage: aboutPageZhCn, + ticketList: ticketListZhCn, }; const textEnUs: TextRecord = { @@ -34,6 +37,7 @@ const textEnUs: TextRecord = { reportPage: reportPageEnUs, informPage: informtPageEnUs, aboutPage: aboutPageEnUs, + ticketList: ticketListEnUs, }; // type Lang = 'zh_CN' | 'en_US' | ...; From 51106ead5ec3172a527048a8cc414c57fef32a97 Mon Sep 17 00:00:00 2001 From: FrozenArcher Date: Mon, 11 Mar 2024 11:36:51 +0800 Subject: [PATCH 3/3] add request to mytickets --- src/pages/user/myTicket/myTicket.tsx | 55 ++++++++++++++++++++++++++-- 1 file changed, 51 insertions(+), 4 deletions(-) diff --git a/src/pages/user/myTicket/myTicket.tsx b/src/pages/user/myTicket/myTicket.tsx index ecdb920..6f2385c 100644 --- a/src/pages/user/myTicket/myTicket.tsx +++ b/src/pages/user/myTicket/myTicket.tsx @@ -1,12 +1,14 @@ 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; @@ -53,12 +55,57 @@ class TicketListItem { export default class SettingsPage extends Component { state = { - fixList: [ - new TicketListItem('华硕', '天选3', 3, moment()), - new TicketListItem('联想', '拯救者', 5, moment()), - ], + loading: true, + success: false, + fixList: [new TicketListItem('华硕', '天选3', 3, moment())], }; + + componentDidMount(): void { + 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.device, + item.deviceModel, + item.status, + moment(), + ), + ), + }); + }) + .catch(reason => { + this.setState({ + loading: false, + success: false, + }); + console.log(reason); + }); + } + render(): ReactNode { + if (this.state.loading) { + return loading; + } + if (!this.state.success) { + return Failed; + } const fixListRenderer = this.state.fixList.map(item => item.render()); return (