add member status judgement

mock/api.ts

@@ -50,10 +50,16 @@ export default {
     data: {},
   },
   'POST /member/login': {
-    data: {},
+    success: true,
+    data: {
+      isMember: true,
+    },
   },
   'GET /member/tickets/uncompleted': {
     success: true,
     data: uncompleted,
   },
+  'POST /member/logout': {
+    success: true,
+  },
 };

src/components/TicketListItem/TicketListItem.tsx

@@ -15,6 +15,7 @@ export class TicketListItem {
   status: FixStatus;
   createAt: moment.Moment;
   iconMap: Map<FixStatus, string>;
+  isMember: boolean;
 
   constructor(
     id: number,
@@ -22,12 +23,14 @@ export class TicketListItem {
     model: string,
     status: FixStatus,
     createAt: moment.Moment,
+    isMember: boolean,
   ) {
     this.id = id;
     this.brand = brand;
     this.model = model;
     this.status = status;
     this.createAt = createAt;
+    this.isMember = isMember;
     this.iconMap = new Map<FixStatus, string>([
       [1, repair],
       [2, repair],
@@ -48,7 +51,11 @@ export class TicketListItem {
         thumb={this.iconMap.get(this.status)}
         onClick={() => {
           Taro.navigateTo({
-            url: '/pages/TicketDetail/TicketDetail?id=' + this.id,
+            url:
+              '/pages/TicketDetail/TicketDetail?id=' +
+              this.id +
+              '&isMember=' +
+              this.isMember,
           });
         }}
       />

src/custom-tab-bar/index.tsx

@@ -6,7 +6,9 @@ import wechatUser from '@/wechat';
 import 'taro-ui/dist/style/index.scss';
 import './index.scss';
 
-const navList: Array<Taro.TabBarItem> = [
+const navList: () => Array<Taro.TabBarItem> = () => {
+  return wechatUser.getAccess()
+    ? [
         {
           pagePath: '/pages/index/index',
           text: pt.get().tabBar.indexText,
@@ -23,12 +25,25 @@ const navList: Array<Taro.TabBarItem> = [
           pagePath: '/pages/user/user',
           text: pt.get().tabBar.userText,
         },
+      ]
+    : [
+        {
+          pagePath: '/pages/index/index',
+          text: pt.get().tabBar.indexText,
+        },
+        {
+          pagePath: '/pages/repair/repair',
+          text: pt.get().tabBar.repairText,
+        },
+        {
+          pagePath: '/pages/user/user',
+          text: pt.get().tabBar.userText,
+        },
       ];
+};
 
-export default class Index extends Component {
+const tabList = () => {
-  state = {
+  return wechatUser.getAccess()
-    selected: 0,
-    tabList: wechatUser.getAccess()
     ? [
         {
           title: pt.get().tabBar.indexText,
@@ -60,11 +75,16 @@ export default class Index extends Component {
           title: pt.get().tabBar.userText,
           iconType: 'user',
         },
-        ],
+      ];
+};
+
+export default class Index extends Component {
+  state = {
+    selected: 0,
   };
 
   handleClick(idx: number) {
-    this.switchTab(idx, navList[idx].pagePath);
+    this.switchTab(idx, navList()[idx].pagePath);
   }
 
   switchTab(idx: number, url: string) {
@@ -82,7 +102,7 @@ export default class Index extends Component {
     return (
       <AtTabBar
         fixed
-        tabList={this.state.tabList}
+        tabList={tabList()}
         onClick={this.handleClick.bind(this)}
         current={this.state.selected}
       />

src/pages/TicketDetail/TicketDetail.tsx

@@ -8,23 +8,45 @@ import PageFooter from '@/components/PageFooter/PageFooter';
 
 interface TicketDetailState {
   id: number;
+  isMember: boolean;
 }
 
 export default class TicketDetail extends Component<{}, TicketDetailState> {
   state: Readonly<TicketDetailState> = {
     id: 0,
+    isMember: false,
   };
 
   componentDidMount(): void {
     const { router } = getCurrentInstance();
     const id = router?.params.id as number;
+    const isMember = router?.params.isMember as boolean;
     this.setState({
       id: id,
+      isMember: isMember,
     });
   }
 
   render(): ReactNode {
-    const middleButton = (
+    const middleButton = this.state.isMember ? (
+      <View
+        className='at-row'
+        style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
+      >
+        <View
+          className='at-col'
+          style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
+        >
+          <AtButton type='primary'>{pt.get().ticketDetail.addToOreo}</AtButton>
+        </View>
+        <View
+          className='at-col'
+          style={{ marginRight: 10, paddingLeft: 5, width: '50%' }}
+        >
+          <AtButton type='secondary'>{pt.get().ticketDetail.addNote}</AtButton>
+        </View>
+      </View>
+    ) : (
       <View
         className='at-row'
         style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}

src/pages/member/member.tsx

@@ -1,10 +1,33 @@
-import { View, Text } from '@tarojs/components';
+import { View } from '@tarojs/components';
 import { Component, ReactNode } from 'react';
+import { AtButton, AtCard, AtList } from 'taro-ui';
 import Taro from '@tarojs/taro';
-import type CustomTabBar from '../../custom-tab-bar';
+import pt from '@/plain-text';
+import { getUncompletedTicketList } from '@/service/uncompletedTicket';
+import type CustomTabBar from '@/custom-tab-bar';
+import { TicketListItem } from '@/components/TicketListItem/TicketListItem';
+import { RequestState } from '@/service';
+import moment from 'moment';
 import './member.scss';
 
-export default class MemberPage extends Component {
+interface UncompletedTicketState {
+  fixList: Array<TicketListItem>;
+  rs: RequestState;
+}
+
+export default class MemberPage extends Component<{}, UncompletedTicketState> {
+  state = {
+    fixList: [new TicketListItem(0, '', '', 1, moment(), false)],
+    rs: new RequestState(),
+  };
+
+  componentDidMount(): void {
+    Taro.setNavigationBarTitle({
+      title: pt.get().navBar.user.member,
+    });
+    getUncompletedTicketList(this);
+  }
+
   // 以下是TabBar相关
   pageCtx = Taro.getCurrentInstance().page;
   componentDidShow() {
@@ -14,9 +37,16 @@ export default class MemberPage extends Component {
   // 以上是TabBar相关
 
   render(): ReactNode {
+    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>
-        <Text>Member Page</Text>
+        <AtList>{fixListRenderer}</AtList>
       </View>
     );
   }

src/pages/repair/repair.tsx

@@ -186,7 +186,6 @@ export default class RepairPage extends Component<{}, RepairPageState> {
         />
       </AtCard>
     ));
-    console.log(ticketsRenderer);
     return (
       <View>
         <AtMessage />

src/pages/user/member/member.tsx

@@ -1,13 +1,12 @@
 import { Component, ReactNode } from 'react';
 import { AtForm, AtInput, AtButton, AtMessage } from 'taro-ui';
-import { getUrl } from '@/service';
 import Taro from '@tarojs/taro';
 import pt from '@/plain-text';
+import { memberLogin, memberLogout } from '@/service/memberLogin';
+import wechatUser from '@/wechat';
 import './member.scss';
 
-const loginInterval = 5000;
+export default class UserMemberPage extends Component {
-
-export default class MemberPage extends Component {
   state = {
     stuid: '',
     passwd: '',
@@ -16,7 +15,7 @@ export default class MemberPage extends Component {
   };
   componentDidMount(): void {
     Taro.setNavigationBarTitle({
-      title: pt.get().navBar.user.member,
+      title: pt.get().navBar.user.memberLogin,
     });
   }
   handleChangeStuid(stuid: string) {
@@ -32,46 +31,15 @@ export default class MemberPage extends Component {
     return passwd;
   }
   onSubmit() {
-    this.setState({
+    memberLogin(this);
-      isLoading: true,
+  }
-      isDisable: true,
+
-    });
+  onLogout() {
-    console.log([this.state.stuid, this.state.passwd]);
+    memberLogout(this);
-    Taro.request({
-      url: getUrl('/member/login'),
-      method: 'POST',
-      data: {
-        token: 'token_test',
-        name: this.state.stuid,
-        passwd: this.state.passwd,
-      },
-    })
-      .then((res) => {
-        console.log(res.data);
-        Taro.atMessage({
-          message: pt.get().button.loginText.success,
-          type: 'success',
-        });
-      })
-      .catch((err) => {
-        console.log(err);
-        Taro.atMessage({
-          message: pt.get().button.loginText.error + err.toString(),
-          type: 'error',
-        });
-      });
-    this.setState({
-      isLoading: false,
-    });
-    setTimeout(() => {
-      this.setState({
-        isDisable: false,
-      });
-    }, loginInterval);
   }
 
   render(): ReactNode {
-    return (
+    return !wechatUser.getAccess() ? (
       <AtForm onSubmit={this.onSubmit.bind(this)}>
         <AtMessage />
         <AtInput
@@ -103,6 +71,10 @@ export default class MemberPage extends Component {
           {pt.get().button.buttonText.login}
         </AtButton>
       </AtForm>
+    ) : (
+      <AtButton type='primary' onClick={this.onLogout.bind(this)}>
+        {pt.get().button.buttonText.logout}
+      </AtButton>
     );
   }
 }

src/pages/user/myTicket/myTicket.tsx

@@ -16,7 +16,7 @@ interface MyTicketState {
 
 export default class MyTicketPage extends Component<{}, MyTicketState> {
   state = {
-    fixList: [new TicketListItem(0, '', '', 1, moment())],
+    fixList: [new TicketListItem(0, '', '', 1, moment(), false)],
     rs: new RequestState(),
   };
 

src/pages/user/user.tsx

@@ -24,14 +24,13 @@ export default class UserPage extends Component {
     clicks: memberClickTimes,
     isToastOpen: false,
     toastText: '',
-    haveAccess: wechatUser.getAccess(),
   };
 
   // 以下是TabBar相关
   pageCtx = Taro.getCurrentInstance().page;
   componentDidShow() {
     const tabbar = Taro.getTabBar<CustomTabBar>(this.pageCtx);
-    tabbar?.setSelected(this.state.haveAccess ? 3 : 2);
+    tabbar?.setSelected(wechatUser.getAccess() ? 3 : 2);
   }
   // 以上是TabBar相关
 

src/plain-text/Button.ts

@@ -3,6 +3,7 @@ export interface ButtonText {
     submit: string;
     reset: string;
     login: string;
+    logout: string;
   };
   submitText: {
     success: string;
@@ -12,6 +13,10 @@ export interface ButtonText {
     success: string;
     error: string;
   };
+  logoutText: {
+    success: string;
+    error: string;
+  };
 }
 
 export const buttonZhCn: ButtonText = {
@@ -19,6 +24,7 @@ export const buttonZhCn: ButtonText = {
     submit: '提交',
     reset: '清空',
     login: '登录',
+    logout: '登出',
   },
   submitText: {
     success: '提交成功',
@@ -28,6 +34,10 @@ export const buttonZhCn: ButtonText = {
     success: '登录成功',
     error: '登录失败',
   },
+  logoutText: {
+    success: '登出成功',
+    error: '登出失败',
+  },
 };
 
 export const buttonEnUs: ButtonText = {
@@ -35,6 +45,7 @@ export const buttonEnUs: ButtonText = {
     submit: 'Submit',
     reset: 'Reset',
     login: 'Login',
+    logout: 'Logout',
   },
   submitText: {
     success: 'Success',
@@ -44,4 +55,8 @@ export const buttonEnUs: ButtonText = {
     success: 'Login Success',
     error: 'Login Failed',
   },
+  logoutText: {
+    success: 'Logout Success',
+    error: 'Logout Failed',
+  },
 };

src/plain-text/MemberPage.ts

@@ -7,6 +7,9 @@ export interface MemberPageText {
     title: string;
     placeholder: string;
   };
+  uncompletedTicket: {
+    extra: string;
+  };
 }
 
 export const memberPageZhCn: MemberPageText = {
@@ -18,6 +21,9 @@ export const memberPageZhCn: MemberPageText = {
     title: '密码',
     placeholder: '与 EVA 统一身份认证一致',
   },
+  uncompletedTicket: {
+    extra: '详细信息',
+  },
 };
 
 export const memberPageEnUs: MemberPageText = {
@@ -29,4 +35,7 @@ export const memberPageEnUs: MemberPageText = {
     title: 'Password',
     placeholder: 'Consistent with EVA Auth',
   },
+  uncompletedTicket: {
+    extra: 'Details',
+  },
 };

src/plain-text/NavBarTitle.ts

@@ -3,9 +3,10 @@ export interface NavBarTitle {
   user: {
     myTicket: string;
     report: string;
-    member: string;
+    memberLogin: string;
     inform: string;
     about: string;
+    member: string;
   };
 }
 
@@ -16,7 +17,8 @@ export const navBarTitleZhCn: NavBarTitle = {
     report: '意见反馈',
     inform: '我的信息',
     about: '关于我们',
-    member: '协会成员登录',
+    memberLogin: '协会成员登录',
+    member: '协会成员',
   },
 };
 
@@ -27,6 +29,7 @@ export const navBarTitleEnUs: NavBarTitle = {
     report: 'Report',
     inform: 'Information',
     about: 'About us',
-    member: 'Member login',
+    memberLogin: 'Member login',
+    member: 'Member Page',
   },
 };

src/plain-text/TicketDetail.ts

@@ -11,6 +11,7 @@ export interface TicketDetailText {
   statusModifyMessage: Map<StatusStr, string>;
   descTitle: string;
   tookAway: string;
+  addToOreo: string;
   addNote: string;
 }
 
@@ -32,6 +33,7 @@ export const ticketDetailZhCn: TicketDetailText = {
   ]),
   descTitle: '问题描述',
   tookAway: '已取回',
+  addToOreo: '加入 Oreo',
   addNote: '添加评论',
 };
 
@@ -53,5 +55,6 @@ export const ticketDetailEnUs: TicketDetailText = {
   ]),
   descTitle: 'Problem description',
   tookAway: 'Already retrieved',
+  addToOreo: 'Add to Oreo',
   addNote: 'Add a comment',
 };

src/service/memberLogin.ts

@@ -0,0 +1,93 @@
+import UserMemberPage from '@/pages/user/member/member';
+import Taro from '@tarojs/taro';
+import pt from '@/plain-text';
+import wechatUser from '@/wechat';
+import { getUrl } from '.';
+
+const logInterval = 5000;
+
+export function memberLogin(that: UserMemberPage) {
+  that.setState({
+    isLoading: true,
+  });
+  Taro.request({
+    url: getUrl('/member/login'),
+    method: 'POST',
+    data: {
+      token: 'token_test',
+      name: that.state.stuid,
+      phone: that.state.passwd,
+    },
+  })
+    .then((res) => {
+      console.log(res.data);
+      that.setState({
+        isLoading: false,
+      });
+      Taro.atMessage({
+        message: pt.get().button.loginText.success,
+        type: 'success',
+      });
+      wechatUser.setAccess(true);
+      Taro.reLaunch({
+        url: '/pages/member/member',
+      });
+    })
+    .catch((err) => {
+      console.log(err);
+      that.setState({
+        isLoading: false,
+      });
+      Taro.atMessage({
+        message: pt.get().button.loginText.error + err.toString(),
+        type: 'error',
+      });
+      setTimeout(() => {
+        this.setState({
+          isDisable: false,
+        });
+      }, logInterval);
+    });
+}
+
+export function memberLogout(that: UserMemberPage) {
+  that.setState({
+    isLoading: true,
+  });
+  Taro.request({
+    url: getUrl('/member/logout'),
+    method: 'POST',
+    data: {
+      token: 'token_test',
+    },
+  })
+    .then((res) => {
+      console.log(res.data);
+      that.setState({
+        isLoading: false,
+      });
+      Taro.atMessage({
+        message: pt.get().button.logoutText.success,
+        type: 'success',
+      });
+      wechatUser.setAccess(false);
+      Taro.reLaunch({
+        url: '/pages/index/index',
+      });
+    })
+    .catch((err) => {
+      console.log(err);
+      that.setState({
+        isLoading: false,
+      });
+      Taro.atMessage({
+        message: pt.get().button.logoutText.error + err.toString(),
+        type: 'error',
+      });
+      setTimeout(() => {
+        this.setState({
+          isDisable: false,
+        });
+      }, logInterval);
+    });
+}

src/service/uncompletedTicket.ts

@@ -0,0 +1,45 @@
+import MemberPage from '@/pages/member/member';
+import Taro from '@tarojs/taro';
+import { TicketListItem } from '@/components/TicketListItem/TicketListItem';
+import moment from 'moment';
+import { getUrl } from '.';
+
+export function getUncompletedTicketList(that: MemberPage) {
+  Taro.request({
+    url: getUrl('/member/tickets/uncompleted'),
+    method: 'GET',
+    data: {
+      token: 'token_test',
+    },
+  })
+    .then((res) => {
+      let former = that.state.rs;
+      if (!res.data.success) {
+        that.setState({
+          rs: former.trans(false),
+        });
+        return;
+      }
+      that.setState({
+        rs: former.trans(true),
+        fixList: res.data.data.list.map(
+          (item) =>
+            new TicketListItem(
+              item.id,
+              item.device,
+              item.deviceModel,
+              item.status,
+              moment(item.createdTime),
+              true,
+            ),
+        ),
+      });
+    })
+    .catch((reason) => {
+      let former = that.state.rs;
+      that.setState({
+        rs: former.trans(false),
+      });
+      console.log(reason);
+    });
+}

src/wechat/index.ts

@@ -6,7 +6,7 @@ class WechatUser {
   constructor() {
     this.userInfo = '';
     this.hasUserInfo = false;
-    this.isMember = true;
+    this.isMember = false;
   }
 
   getAccess() {