add memberpage layout

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

src/assets/icons/MemberPage/clock.svg

@@ -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>

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 (
+      <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();
+    }
+  }
+}

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 (
+      <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>
+    );
+  }
+}

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 (
+      <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>
+    );
+  }
+}

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 {
+class CardContent {
-  fixList: Array<TicketListItem>;
+  title: string;
-  rs: RequestState;
+  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>
     );
   }

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

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