refactor: merge index & member page

2024-03-22 10:23:39 +08:00
parent a7c96b2e8c
commit f3f5be793b
21 changed files with 268 additions and 468 deletions
@@ -4,6 +4,8 @@ import { AtTimeline } from 'taro-ui';
 import pt from '@/plain-text';
 import tick from '@/assets/icons/MainPage/tick.svg';
 import cross from '@/assets/icons/MainPage/cross.svg';
+import clock from '@/assets/icons/MemberPage/clock.svg';
+import wechatUser from '@/wechat';

 export class DutyData {
  constructor() {
@@ -17,7 +19,7 @@ export class DutyData {

  isInDuty: boolean;
  inDutyCnt?: number;
-  currentDuty?: 'off' | '1' | '2' | '3';
+  currentDuty?: 'off' | '1' | '2' | '3' | 'others';
  offDutyReason?: string;
  dutyRecoverTime?: string;
  place: string;
@@ -33,7 +35,7 @@ class Card extends Component {
    const place = this.props.place;
    const dc = pt.get().mainPage.dutyCard;
    const title = inDuty ? dc.inDuty.title : dc.offDuty.title;
-    const iconsrc = inDuty ? tick : cross;
+    const iconsrc = inDuty ? tick : wechatUser.getAccess() ? clock : cross;
    return (
      <View>
        <View
@@ -66,6 +68,11 @@ class Card extends Component {
 }

 export class DutyInfo extends Component {
+  state: {
+    isLoading: false;
+    isDisable: false;
+  };
+
  props = {
    data: new DutyData(),
  };
@@ -2,12 +2,19 @@ import { Component, ReactNode } from 'react';
 import { View } from '@tarojs/components';
 import { AtTimeline } from 'taro-ui';
 import pt from '@/plain-text';
+import wechatUser from '@/wechat';

 export class StepInfo extends Component {
  render(): ReactNode {
    return (
      <View>
-        <AtTimeline items={pt.get().mainPage.stepList}></AtTimeline>
+        <AtTimeline
+          items={
+            wechatUser.getAccess()
+              ? pt.get().memberPage.stepList
+              : pt.get().mainPage.stepList
+          }
+        ></AtTimeline>
      </View>
    );
  }
@@ -17,7 +24,13 @@ export class TipsInfo extends Component {
  render(): ReactNode {
    return (
      <View>
-        <AtTimeline items={pt.get().mainPage.tipsList}></AtTimeline>
+        <AtTimeline
+          items={
+            wechatUser.getAccess()
+              ? pt.get().memberPage.tipsList
+              : pt.get().mainPage.tipsList
+          }
+        ></AtTimeline>
      </View>
    );
  }
@@ -2,24 +2,32 @@ import React from 'react';
 import { View, Image } from '@tarojs/components';
 import pt from '@/plain-text';
 import logo from '@/assets/images/UserPage/logo.png';
+import wechatUser from '@/wechat';

 export default class TitleCard extends React.Component {
  render(): React.ReactNode {
    const mainPage = pt.get().mainPage;
+    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: 100rpx; height: 100rpx; margin-left: 30rpx;'
-            src={logo}
+            src={wechatUser.getAccess() ? wechatUser.getInfo().avatar : logo}
            mode='aspectFit'
          />
        </View>
        <View className='page-title'>
          <View className='at-article__h1' style={{ fontWeight: 'bold' }}>
-            {mainPage.mainTitleLine}
+            {wechatUser.getAccess()
+              ? memberPage.mainTitleLine + wechatUser.getInfo().name
+              : mainPage.mainTitleLine}
+          </View>
+          <View className='at-article__h2'>
+            {wechatUser.getAccess()
+              ? memberPage.subTitleLine
+              : mainPage.subTitleLine}
          </View>
-          <View className='at-article__h2'>{mainPage.subTitleLine}</View>
        </View>
      </View>
    );
@@ -1,16 +1,25 @@
 import { View } from '@tarojs/components';
 import { Component, ReactNode } from 'react';
 import Taro from '@tarojs/taro';
-import { AtCard, AtAccordion } from 'taro-ui';
+import { AtCard, AtAccordion, AtInputNumber, AtButton, AtList } from 'taro-ui';
 import type CustomTabBar from '@/custom-tab-bar';
 import PageFooter from '@/components/PageFooter/PageFooter';
 import pt from '@/plain-text';
 import { getDutyInfo } from '@/service/dutyInfo';
+import { RequestState } from '@/service';
+import moment from 'moment';
+import wechatUser from '@/wechat';
+import { getMemberDutyInfo } from '@/service/memberDutyInfo';
+import { getUncompletedTicketList } from '@/service/uncompletedTicket';
+import { changeDutyCnt } from '@/service/changeDutyCount';
+import { TicketListItem } from '@/components/TicketListItem/TicketListItem';
 import './index.scss';
 import TitleCard from './TitleCard';
 import { DutyInfo, DutyData } from './DutyInfo';
 import { StepInfo, TipsInfo } from './StepTipsInfo';

+const submitInterval = 5000;
+
 class CardContent {
  title: string;
  note: string;
@@ -57,39 +66,77 @@ class ExpandItem extends Component {
 }

 interface MainPageState {
+  fixList: Array<TicketListItem>;
+  rs: RequestState;
  dutyData: DutyData;
+  inDutyCnt: number;
  dutyInfoCard: CardContent;
  stepInfoCard: CardContent;
  tipsInfoCard: CardContent;
-  //rs: RequestState;
+  isLoading: boolean;
+  isDisable: boolean;
 }

 export default class MainPage extends Component<{}, MainPageState> {
  state = {
    dutyData: new DutyData(),
+    inDutyCnt: 0,
    dutyInfoCard: {
-      title: pt.get().mainPage.cardTitle.dutyInfo,
-      note: pt.get().mainPage.cardTips.dutyInfo,
-      extra: pt.get().mainPage.extraInfo.dutyInfo,
-      content: () => <DutyInfo data={this.state.dutyData} />,
+      title: '',
+      note: '',
+      extra: '',
+      content: () => <></>,
    },
    stepInfoCard: {
-      title: pt.get().mainPage.cardTitle.stepInfo,
-      note: pt.get().mainPage.cardTips.stepInfo,
-      extra: pt.get().mainPage.extraInfo.dutyInfo,
-      content: () => <StepInfo />,
+      title: '',
+      note: '',
+      extra: '',
+      content: () => <></>,
    },
    tipsInfoCard: {
-      title: pt.get().mainPage.cardTitle.tipsInfo,
-      note: pt.get().mainPage.cardTips.tipsInfo,
-      extra: pt.get().mainPage.extraInfo.dutyInfo,
-      content: () => <TipsInfo />,
+      title: '',
+      note: '',
+      extra: '',
+      content: () => <></>,
    },
-    // rs: new RequestState(),
+    fixList: [new TicketListItem(0, '', '', 1, moment())],
+    rs: new RequestState(),
+    isLoading: false,
+    isDisable: false,
  };

  componentDidMount(): void {
-    getDutyInfo(this);
+    const ptPage = wechatUser.getAccess() ? 'mainPage' : 'memberPage';
+
+    this.setState({
+      dutyData: new DutyData(),
+      inDutyCnt: 0,
+      dutyInfoCard: {
+        title: pt.get()[ptPage].cardTitle.dutyInfo,
+        note: pt.get()[ptPage].cardTips.dutyInfo,
+        extra: pt.get()[ptPage].extraInfo.dutyInfo,
+        content: () => <DutyInfo data={this.state.dutyData} />,
+      },
+      stepInfoCard: {
+        title: pt.get()[ptPage].cardTitle.stepInfo,
+        note: pt.get()[ptPage].cardTips.stepInfo,
+        extra: pt.get()[ptPage].extraInfo.dutyInfo,
+        content: () => <StepInfo />,
+      },
+      tipsInfoCard: {
+        title: pt.get()[ptPage].cardTitle.tipsInfo,
+        note: pt.get()[ptPage].cardTips.tipsInfo,
+        extra: pt.get()[ptPage].extraInfo.dutyInfo,
+        content: () => <TipsInfo />,
+      },
+    });
+
+    if (wechatUser.getAccess()) {
+      getMemberDutyInfo(this);
+      getUncompletedTicketList(this);
+    } else {
+      getDutyInfo(this);
+    }
  }

  // 以下是TabBar相关
@@ -100,8 +147,35 @@ export default class MainPage extends Component<{}, MainPageState> {
  }
  // 以上是TabBar相关

+  handleCnt(inDutyCnt: number) {
+    this.setState({
+      inDutyCnt: inDutyCnt,
+    });
+    return inDutyCnt;
+  }
+
+  onChangeCnt() {
+    this.setState({
+      isDisable: true,
+    });
+    changeDutyCnt(this);
+    setTimeout(() => {
+      this.setState({
+        isDisable: false,
+      });
+    }, submitInterval);
+  }
+
  render(): ReactNode {
    const mainPage = pt.get().mainPage;
+    const memberPage = pt.get().memberPage;
+    if (this.state.rs.loading) {
+      return <View>loading</View>;
+    }
+    if (!this.state.rs.success) {
+      return <View>Failed</View>;
+    }
+    const fixListRenderer = this.state.fixList.map((item) => item.render());
    return (
      <View>
        <TitleCard />
@@ -109,11 +183,66 @@ export default class MainPage extends Component<{}, MainPageState> {
          <View style={{ marginTop: '60rpx' }}>
            {mainPageCard(this.state.dutyInfoCard)}
            {mainPageCard(this.state.tipsInfoCard)}
+            {wechatUser.getAccess() && this.state.dutyData.isInDuty ? (
+              <ExpandItem
+                title={memberPage.expandTitle.admin}
+                content={
+                  <View
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      marginBottom: '40rpx',
+                    }}
+                  >
+                    <View
+                      className='.at-article__h3'
+                      style={{
+                        marginTop: '40rpx',
+                      }}
+                    >
+                      {pt.get().memberPage.dutyCount.text}
+                    </View>
+                    <View
+                      style={{
+                        marginTop: '40rpx',
+                      }}
+                    >
+                      <AtInputNumber
+                        type='number'
+                        min={0}
+                        max={10}
+                        step={1}
+                        value={this.state.inDutyCnt}
+                        onChange={this.handleCnt.bind(this)}
+                      />
+                    </View>
+                    <View style={{ marginLeft: 'auto', marginTop: '40rpx' }}>
+                      <AtButton
+                        type='secondary'
+                        size='small'
+                        loading={this.state.isLoading}
+                        disabled={this.state.isDisable}
+                        onClick={this.onChangeCnt.bind(this)}
+                      >
+                        {pt.get().memberPage.dutyCount.button}
+                      </AtButton>
+                    </View>
+                  </View>
+                }
+              />
+            ) : (
+              <View></View>
+            )}
            <ExpandItem
              title={mainPage.expandTitle.stepInfo}
              content={mainPageCard(this.state.stepInfoCard)}
            />
          </View>
+          {wechatUser.getAccess() ? (
+            <AtList>{fixListRenderer}</AtList>
+          ) : (
+            <View></View>
+          )}
          <PageFooter />
        </View>
      </View>