add memberpage layout

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 {
-  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>
     );
   }