add app/pages/home/Index.js

Strides-SPAPP/app/pages/home/Index.js

@@ -0,0 +1,174 @@
+/**
+ * 首页抽屉菜单
+ * @邠心vbe on 2021/03/23
+ */
+import React, { Component } from 'react';
+import {View, Text, StyleSheet, Image} from 'react-native';
+import { createDrawerNavigator, DrawerContentScrollView } from '@react-navigation/drawer';
+import app from '../../../app.json';
+import Maps from './Home';
+import Dialog from '../../components/Dialog';
+import { setAccessToken } from '../../api/http';
+import { getStorageJsonSync, setStorage, setStorageJson } from '../../utils/storage';
+import { AutoLogin } from '../sign/Login';
+import utils from '../../utils/utils';
+import apiNotification from '../../api/apiNotification';
+import DrawerView from './Drawer.js';
+import DrawerViewV2 from './DrawerV2.js';
+import DrawerViewV3 from './DrawerV3.js';
+import DrawerViewV4 from './DrawerV4.js';
+
+const Drawer = createDrawerNavigator();
+
+export default class Home extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLogin: false,
+      userInfo: {},
+      notificationCount: 0,
+      sideCountInfo: {}
+    }
+  }
+
+  componentDidMount() {
+    AutoLogin(() => {
+      this.setState({
+        userInfo: userInfo
+      });
+    });
+    this.props.navigation.addListener('focus', () => {
+      //console.log('drawer focus');
+      getUserInfo(info => {
+        this.setState({
+          userInfo: info
+        });
+      }, true);
+      if (app.notifications.enable && this.state.isLogin) {
+        this.getNotificationTotal();
+      }
+    });
+    /*BackHandler.addEventListener('hardwareBackPress', (e) => {
+      if (global.dialogId !== 0) {
+        Dialog.dismissLoading();
+        return true;
+      }
+      return false;
+    })*/
+  }
+
+  componentDidUpdate() {
+    const status = isLogin();
+    if (this.state.isLogin != status) {
+      this.setState({
+        isLogin: status
+      }, () => {
+        getUserInfo(info => {
+          this.setState({
+            userInfo: info
+          });
+          if (info.firebaseToken) {
+            let token = isIOS ? info.firebaseToken?.ios : info.firebaseToken?.android
+            if (notifyToken.token) {
+              utils.registerFirebaseToken(token ?? "");
+            }
+          }
+        }, true);
+        if (app.notifications.enable && status) {
+          this.getNotificationTotal();
+        }
+      });
+    }
+  }
+
+  async requestLogout() {
+    const data = await getStorageJsonSync('loginData');
+    if (data && data.email) {
+      delete data.password
+      setStorageJson('loginData', data);
+      setStorage('RegisterTokenDate', "");
+    }
+    global.userInfo = {}
+    this.setState({
+      isLogin: false,
+      userInfo: {}
+    });
+    setAccessToken('');
+    Dialog.dismissLoading();
+  }
+
+  getNotificationTotal() {
+    apiNotification.getUnreadTotal().then(res => {
+      if (res.data) {
+        this.setState({
+          sideCountInfo: res.data,
+          notificationCount: res.data?.toBeReadCount ?? 0
+        })
+      } else {
+        this.setState({
+          sideCountInfo: {},
+          notificationCount: 0
+        })
+      }
+    }).catch(err => {
+      this.setState({
+        sideCountInfo: {},
+        notificationCount: 0
+      })
+    })
+  }
+
+  render () {
+    return (
+      <Drawer.Navigator
+        initialRouteName='maps'
+        drawerContent={props => 
+          <CustomerDrawerContent 
+            {...props}
+            isLogin={this.state.isLogin}
+            userInfo={this.state.userInfo}
+            onLogout={() => this.requestLogout()}
+            sideCountInfo={this.state.sideCountInfo}
+            notificationCount={this.state.notificationCount}
+          />
+        }
+        screenOptions={{
+          headerShown: false,
+          drawerType: global.$width >= 768 ? 'back' : 'front',
+          drawerStyle: {
+            width: (app.v3.drawer && !app.isLumiWhitelabel) ? $vw(100) : ($vw(75) > 320 ? 320 : $vw(75)),
+            backgroundColor: (app.v3.drawer && !app.isLumiWhitelabel) ? 'rgba(0,0,0,0.1)' : colorLight
+          },
+          swipeEnabled: (!app.v3.drawer || app.isLumiWhitelabel), //启用侧滑打开抽屉
+        }}>
+        <Drawer.Screen name="maps" component={Maps} />
+      </Drawer.Navigator>
+    );
+  }
+}
+
+const CustomerDrawerContent = (props) => {
+  return (
+    <DrawerContentScrollView 
+      {...props}
+      canCancelContentTouches={true}
+      style={(app.v3.drawer && !app.isLumiWhitelabel) ? styles.contentV2 : {}}
+      contentContainerStyle={{paddingStart: 0, paddingEnd: 0}}>
+      { app.v4.drawer
+        ? <DrawerViewV4 {...props}/>
+        : app.v3.drawer
+        ? app.isLumiWhitelabel
+          ? <DrawerViewV3 {...props}/>
+          : <DrawerViewV2 {...props}/>
+        : <DrawerView {...props}/>
+      }
+    </DrawerContentScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  contentV2: {
+    width: $vw(75) > 320 ? 320 : $vw(75),
+    backgroundColor: colorLight
+  }
+})