Dawn_Ocean
/
EVA-Notify
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add memberpage layout

main
Dawn_Ocean 2024-03-17 01:00:06 +08:00
parent cce351750d
commit 563a0c42ea
8 changed files with 411 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
mock/api.ts
View File

@ -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: '下周一',
},
},
};

1
src/assets/icons/MemberPage/clock.svg 100644
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1710604932901" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4288" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><path d="M512 121.6c217.6 0 390.4 172.8 390.4 390.4S729.6 902.4 512 902.4 121.6 729.6 121.6 512 294.4 121.6 512 121.6m0-89.6C246.4 32 32 249.6 32 512s217.6 480 480 480 480-217.6 480-480S774.4 32 512 32z" p-id="4289"></path><path d="M675.2 512H508.8V284.8c0-25.6-19.2-41.6-41.6-41.6H464c-25.6 0-41.6 19.2-41.6 41.6v272c0 25.6 19.2 41.6 41.6 41.6h214.4c25.6 0 44.8-22.4 44.8-44.8s-22.4-41.6-48-41.6z" p-id="4290"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 746 B

108
src/pages/member/MemberDutyInfo.tsx 100644
View File

@ -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 (
<View>
<View
style={{
display: 'flex',
alignItems: 'center',
marginBottom: 20,
}}
>
<Image
src={iconsrc}
style={{
width: 24,
height: 24,
}}
/>
<View
style={{
marginLeft: 10,
fontSize: 30,
fontWeight: 'bold',
}}
>
{title}
</View>
</View>
</View>
);
}
}
export class MemberDutyInfo extends Component {
props = {
data: new MemberDutyData(),
};
offDutyContent(): ReactNode {
const data = this.props.data;
const od = pt.get().memberPage.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().memberPage.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();
}
}
}

24
src/pages/member/MemberStepTipsInfo.tsx 100644
View File

@ -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 (
<View>
<AtTimeline items={pt.get().memberPage.stepList}></AtTimeline>
</View>
);
}
}
export class MemberTipsInfo extends Component {
render(): ReactNode {
return (
<View>
<AtTimeline items={pt.get().memberPage.tipsList}></AtTimeline>
</View>
);
}
}

27
src/pages/member/MemberTitleCard.tsx 100644
View File

@ -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 (
<View className='at-row at-row__align--center'>
<View className='at-col at-col-1 at-col--auto'>
<Image
style='width: 50px; height: 50px; margin-left: 15px;'
src={logo}
mode='aspectFit'
/>
</View>
<View className='page-title'>
<View className='at-article__h1' style={{ fontWeight: 'bold' }}>
{memberPage.mainTitleLine}
</View>
<View className='at-article__h2'>{memberPage.subTitleLine}</View>
</View>
</View>
);
}
}

99
src/pages/member/member.tsx
View File

@ -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<TicketListItem>;
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 (
<View style={{ marginTop: 10 }}>
<AtCard note={c.note} extra={c.extra} title={c.title}>
{c.content()}
</AtCard>
</View>
);
}
class ExpandItem extends Component {
state = {
fixList: [new TicketListItem(0, '', '', 1, moment(), false)],
open: false,
};
props = {
title: '',
content: <View></View>,
};
handleClick(value: boolean) {
this.setState({ open: value });
}
render(): ReactNode {
return (
<View>
<AtAccordion
open={this.state.open}
onClick={this.handleClick.bind(this)}
title={this.props.title}
>
{this.props.content}
</AtAccordion>
</View>
);
}
}
interface MemberPageState {
fixList: Array<TicketListItem>;
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: () => <MemberDutyInfo data={this.state.dutyData} />,
},
stepInfoCard: {
title: pt.get().mainPage.cardTitle.stepInfo,
note: pt.get().mainPage.cardTips.stepInfo,
extra: pt.get().mainPage.extraInfo.dutyInfo,
content: () => <MemberStepInfo />,
},
tipsInfoCard: {
title: pt.get().mainPage.cardTitle.tipsInfo,
note: pt.get().mainPage.cardTips.tipsInfo,
extra: pt.get().mainPage.extraInfo.dutyInfo,
content: () => <MemberTipsInfo />,
},
// 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 <View>loading</View>;
}
@ -46,7 +123,17 @@ export default class MemberPage extends Component<{}, UncompletedTicketState> {
const fixListRenderer = this.state.fixList.map((item) => item.render());
return (
<View>
<MemberTitleCard />
<View style={{ marginTop: 30 }}>
{memberPageCard(this.state.dutyInfoCard)}
{memberPageCard(this.state.tipsInfoCard)}
<ExpandItem
title={memberPage.expandTitle.stepInfo}
content={memberPageCard(this.state.stepInfoCard)}
/>
</View>
<AtList>{fixListRenderer}</AtList>
<PageFooter />
</View>
);
}

106
src/plain-text/MemberPage.ts
View File

@ -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: '螺丝上了吗？电源排线插了吗？' },
],
};

43
src/service/memberDutyInfo.ts 100644
View File

@ -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!',
},
});
});
}