From 563a0c42ea814748931ed8bdf3085252031501c4 Mon Sep 17 00:00:00 2001 From: Dawn_Ocean <1785590531@qq.com> Date: Sun, 17 Mar 2024 01:00:06 +0800 Subject: [PATCH] add memberpage layout --- mock/api.ts | 9 ++ src/assets/icons/MemberPage/clock.svg | 1 + src/pages/member/MemberDutyInfo.tsx | 108 ++++++++++++++++++++++++ src/pages/member/MemberStepTipsInfo.tsx | 24 ++++++ src/pages/member/MemberTitleCard.tsx | 27 ++++++ src/pages/member/member.tsx | 99 ++++++++++++++++++++-- src/plain-text/MemberPage.ts | 106 +++++++++++++++++++++++ src/service/memberDutyInfo.ts | 43 ++++++++++ 8 files changed, 411 insertions(+), 6 deletions(-) create mode 100644 src/assets/icons/MemberPage/clock.svg create mode 100644 src/pages/member/MemberDutyInfo.tsx create mode 100644 src/pages/member/MemberStepTipsInfo.tsx create mode 100644 src/pages/member/MemberTitleCard.tsx create mode 100644 src/service/memberDutyInfo.ts diff --git a/mock/api.ts b/mock/api.ts index 3d40a49..ed7ce70 100644 --- a/mock/api.ts +++ b/mock/api.ts @@ -62,4 +62,13 @@ export default { 'POST /member/logout': { success: true, }, + 'GET /member/duty/info': { + success: true, + data: { + token: 'token_test', + isInDuty: false, + offDutyReason: '废弃元器件创意设计大赛', + dutyRecoverTime: '下周一', + }, + }, }; diff --git a/src/assets/icons/MemberPage/clock.svg b/src/assets/icons/MemberPage/clock.svg new file mode 100644 index 0000000..b79ea85 --- /dev/null +++ b/src/assets/icons/MemberPage/clock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/member/MemberDutyInfo.tsx b/src/pages/member/MemberDutyInfo.tsx new file mode 100644 index 0000000..46e807e --- /dev/null +++ b/src/pages/member/MemberDutyInfo.tsx @@ -0,0 +1,108 @@ +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 clock from '@/assets/icons/MemberPage/clock.svg'; + +export class MemberDutyData { + constructor() { + this.isInDuty = false; + this.currentDuty = '2'; + this.inDutyCnt = 3; + this.offDutyReason = '学园维修'; + this.dutyRecoverTime = '下周一'; + } + + isInDuty: boolean; + currentDuty?: 'off' | '1' | '2' | '3' | 'others'; + offDutyReason?: string; + dutyRecoverTime?: string; + inDutyCnt?: number; +} + +class Card extends Component { + props = { + isInDuty: false, + }; + render(): ReactNode { + const inDuty = this.props.isInDuty; + const dc = pt.get().memberPage.dutyCard; + const title = inDuty ? dc.inDuty.title : dc.offDuty.title; + const iconsrc = inDuty ? tick : clock; + return ( + + + + + {title} + + + + ); + } +} + +export class MemberDutyInfo extends Component { + props = { + data: new MemberDutyData(), + }; + + offDutyContent(): ReactNode { + const data = this.props.data; + const od = pt.get().memberPage.dutyCard.offDuty; + return ( + + + + + ); + } + + inDutyContent(): ReactNode { + const data = this.props.data; + const id = pt.get().memberPage.dutyCard.inDuty; + return ( + + + + + ); + } + + render(): ReactNode { + if (this.props.data.isInDuty) { + return this.inDutyContent(); + } else { + return this.offDutyContent(); + } + } +} diff --git a/src/pages/member/MemberStepTipsInfo.tsx b/src/pages/member/MemberStepTipsInfo.tsx new file mode 100644 index 0000000..1f5a967 --- /dev/null +++ b/src/pages/member/MemberStepTipsInfo.tsx @@ -0,0 +1,24 @@ +import { Component, ReactNode } from 'react'; +import { View } from '@tarojs/components'; +import { AtTimeline } from 'taro-ui'; +import pt from '@/plain-text'; + +export class MemberStepInfo extends Component { + render(): ReactNode { + return ( + + + + ); + } +} + +export class MemberTipsInfo extends Component { + render(): ReactNode { + return ( + + + + ); + } +} diff --git a/src/pages/member/MemberTitleCard.tsx b/src/pages/member/MemberTitleCard.tsx new file mode 100644 index 0000000..0f90598 --- /dev/null +++ b/src/pages/member/MemberTitleCard.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { View, Image } from '@tarojs/components'; +import pt from '@/plain-text'; +import logo from '@/assets/images/UserPage/logo.png'; + +export default class MemberTitleCard extends React.Component { + render(): React.ReactNode { + const memberPage = pt.get().memberPage; + return ( + + + + + + + {memberPage.mainTitleLine} + + {memberPage.subTitleLine} + + + ); + } +} diff --git a/src/pages/member/member.tsx b/src/pages/member/member.tsx index b230569..f77e3f5 100644 --- a/src/pages/member/member.tsx +++ b/src/pages/member/member.tsx @@ -1,6 +1,6 @@ import { View } from '@tarojs/components'; import { Component, ReactNode } from 'react'; -import { AtButton, AtCard, AtList } from 'taro-ui'; +import { AtAccordion, AtButton, AtCard, AtList } from 'taro-ui'; import Taro from '@tarojs/taro'; import pt from '@/plain-text'; import { getUncompletedTicketList } from '@/service/uncompletedTicket'; @@ -8,20 +8,96 @@ import type CustomTabBar from '@/custom-tab-bar'; import { TicketListItem } from '@/components/TicketListItem/TicketListItem'; import { RequestState } from '@/service'; import moment from 'moment'; +import { getMemberDutyInfo } from '@/service/memberDutyInfo'; +import PageFooter from '@/components/PageFooter/PageFooter'; import './member.scss'; +import { MemberDutyData, MemberDutyInfo } from './MemberDutyInfo'; +import { MemberStepInfo, MemberTipsInfo } from './MemberStepTipsInfo'; +import MemberTitleCard from './MemberTitleCard'; -interface UncompletedTicketState { - fixList: Array; - rs: RequestState; +class CardContent { + title: string; + note: string; + extra: JSX.Element | string; + content: () => JSX.Element; } -export default class MemberPage extends Component<{}, UncompletedTicketState> { +function memberPageCard(c: CardContent): JSX.Element { + return ( + + + {c.content()} + + + ); +} + +class ExpandItem extends Component { state = { - fixList: [new TicketListItem(0, '', '', 1, moment(), false)], + open: false, + }; + props = { + title: '', + content: , + }; + + handleClick(value: boolean) { + this.setState({ open: value }); + } + + render(): ReactNode { + return ( + + + {this.props.content} + + + ); + } +} + +interface MemberPageState { + fixList: Array; + rs: RequestState; + dutyData: MemberDutyData; + dutyInfoCard: CardContent; + stepInfoCard: CardContent; + tipsInfoCard: CardContent; + //rs: RequestState; +} + +export default class MemberPage extends Component<{}, MemberPageState> { + state = { + dutyData: new MemberDutyData(), + dutyInfoCard: { + title: pt.get().mainPage.cardTitle.dutyInfo, + note: pt.get().mainPage.cardTips.dutyInfo, + extra: pt.get().mainPage.extraInfo.dutyInfo, + content: () => , + }, + stepInfoCard: { + title: pt.get().mainPage.cardTitle.stepInfo, + note: pt.get().mainPage.cardTips.stepInfo, + extra: pt.get().mainPage.extraInfo.dutyInfo, + content: () => , + }, + tipsInfoCard: { + title: pt.get().mainPage.cardTitle.tipsInfo, + note: pt.get().mainPage.cardTips.tipsInfo, + extra: pt.get().mainPage.extraInfo.dutyInfo, + content: () => , + }, + // rs: new RequestState(), + fixList: [new TicketListItem(0, '', '', 1, moment())], rs: new RequestState(), }; componentDidMount(): void { + getMemberDutyInfo(this); Taro.setNavigationBarTitle({ title: pt.get().navBar.user.member, }); @@ -37,6 +113,7 @@ export default class MemberPage extends Component<{}, UncompletedTicketState> { // 以上是TabBar相关 render(): ReactNode { + const memberPage = pt.get().memberPage; if (this.state.rs.loading) { return loading; } @@ -46,7 +123,17 @@ export default class MemberPage extends Component<{}, UncompletedTicketState> { const fixListRenderer = this.state.fixList.map((item) => item.render()); return ( + + + {memberPageCard(this.state.dutyInfoCard)} + {memberPageCard(this.state.tipsInfoCard)} + + {fixListRenderer} + ); } diff --git a/src/plain-text/MemberPage.ts b/src/plain-text/MemberPage.ts index 5d00e46..d8806b0 100644 --- a/src/plain-text/MemberPage.ts +++ b/src/plain-text/MemberPage.ts @@ -1,4 +1,6 @@ export interface MemberPageText { + mainTitleLine: string; + subTitleLine: string; stuidText: { title: string; placeholder: string; @@ -10,9 +12,29 @@ export interface MemberPageText { uncompletedTicket: { extra: string; }; + dutyCard: { + offDuty: { + title: string; + reason: (s: string) => string; + recoverTime: (t: string) => string; + }; + inDuty: { + title: string; + currentDutyText: (c: 'off' | '1' | '2' | '3' | 'others') => string; + inDutyCnt: (n: number) => string; + }; + }; + expandTitle: { + stepInfo: string; + tipsInfo: string; + }; + stepList: Array<{ title: string }>; + tipsList: Array<{ title: string }>; } export const memberPageZhCn: MemberPageText = { + mainTitleLine: '您好，这里是E志者协会', + subTitleLine: '祝你满绩每一天', stuidText: { title: '学号', placeholder: '与统一身份认证学号一致', @@ -24,9 +46,52 @@ export const memberPageZhCn: MemberPageText = { uncompletedTicket: { extra: '详细信息', }, + dutyCard: { + offDuty: { + title: '空闲', + reason: (s) => '未值班原因：' + s, + recoverTime: (t) => '恢复值班时间：' + t, + }, + inDuty: { + title: '值班中', + currentDutyText: (c) => { + switch (c) { + case 'off': + return '当前未值班'; + case '1': + return '第一班 13:30-16:00'; + case '2': + return '第二班 16:00-18:00'; + case '3': + return '第三班 18:00-20:30'; + case 'others': + return '其他值班时间，见通知'; + } + }, + inDutyCnt: (n) => '当前值班人数：' + n, + }, + }, + expandTitle: { + stepInfo: '查看维修步骤', + tipsInfo: '查看注意事项', + }, + stepList: [ + { title: '机主线上填写工单，审核接取维修后加入 Oreo' }, + { title: '进行维修工作，认领工单，通过小程序与机主交流' }, + { title: '维修结束，清点机主物品，待机主取回' }, + { title: '机主取回确认无误后，修改工单状态' }, + ], + tipsList: [ + { title: '戴尔/外星人、Surface、苹果电脑不能拆机' }, + { title: '数据无价，请提醒机主随时做好数据备份' }, + { title: '204 是实验室，请勿在内饮食' }, + { title: '螺丝上了吗？电源排线插了吗？' }, + ], }; export const memberPageEnUs: MemberPageText = { + mainTitleLine: '您好，这里是E志者协会', + subTitleLine: '祝你满绩每一天', stuidText: { title: 'Student ID', placeholder: 'Consistent with EVA Auth', @@ -38,4 +103,45 @@ export const memberPageEnUs: MemberPageText = { uncompletedTicket: { extra: 'Details', }, + dutyCard: { + offDuty: { + title: '空闲', + reason: (s) => '未值班原因：' + s, + recoverTime: (t) => '恢复值班时间：' + t, + }, + inDuty: { + title: '值班中', + currentDutyText: (c) => { + switch (c) { + case 'off': + return '当前未值班'; + case '1': + return '第一班 13:30-16:00'; + case '2': + return '第二班 16:00-18:00'; + case '3': + return '第三班 18:00-20:30'; + case 'others': + return '其他值班时间，见通知'; + } + }, + inDutyCnt: (n) => '当前值班人数：' + n, + }, + }, + expandTitle: { + stepInfo: '查看维修步骤', + tipsInfo: '查看注意事项', + }, + stepList: [ + { title: '机主线上填写工单，审核接取维修后加入 Oreo' }, + { title: '进行维修工作，认领工单，通过小程序与机主交流' }, + { title: '维修结束，清点机主物品，待机主取回' }, + { title: '机主取回确认无误后，修改工单状态' }, + ], + tipsList: [ + { title: '戴尔/外星人、Surface、苹果电脑不能拆机' }, + { title: '数据无价，请提醒机主随时做好数据备份' }, + { title: '204 是实验室，请勿在内饮食' }, + { title: '螺丝上了吗？电源排线插了吗？' }, + ], }; diff --git a/src/service/memberDutyInfo.ts b/src/service/memberDutyInfo.ts new file mode 100644 index 0000000..fcf633f --- /dev/null +++ b/src/service/memberDutyInfo.ts @@ -0,0 +1,43 @@ +import MemberPage from '@/pages/member/member'; +import Taro from '@tarojs/taro'; +import { getUrl } from '.'; + +export function getMemberDutyInfo(that: MemberPage) { + Taro.request({ + url: getUrl('/member/duty/info'), + method: 'GET', + data: { + token: 'token_test', + }, + }) + .then((res) => { + const data = res.data.data; + if (data.isInDuty) { + that.setState({ + dutyData: { + isInDuty: data.isInDuty, + inDutyCnt: data.inDutyCnt, + currentDuty: data.currentDuty, + }, + }); + } else { + that.setState({ + dutyData: { + isInDuty: data.isInDuty, + offDutyReason: data.offDutyReason, + dutyRecoverTime: data.dutyRecoverTime, + }, + }); + } + }) + .catch((err) => { + console.log(err); + that.setState({ + dutyData: { + isInDuty: false, + offDutyReason: '获取失败！Network Error!', + dutyRecoverTime: '获取失败！Network Error!', + }, + }); + }); +}