add app/pages/home/Drawer.js

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

@@ -0,0 +1,558 @@
+/**
+ * 新版首页
+ * @邠心vbe on 2024/02/01
+ */
+import React from 'react';
+import {View, Text, StyleSheet, Image} from 'react-native';
+import app from '../../../app.json';
+import { PageList } from '../Router';
+import Button from '../../components/Button';
+import { Styles } from '../../components/Toolbar';
+import TextView from '../../components/TextView';
+import apiCharge from '../../api/apiCharge';
+import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
+import { toTopupPage } from '../payment/PaymentConfig';
+import utils from '../../utils/utils';
+
+const DEBUG = app.debug && !app.product;
+
+export default DrawerView = ({isLogin=false, userInfo, onLogout, notificationCount=0, navigation}) => {
+  const getCharging = () => {
+    Dialog.showProgressDialog();
+    apiCharge.getUserCharging().then(res => {
+      Dialog.dismissLoading();
+      if (res.data.sitePk) {
+        utils.toChargeDetailPage(res.data.sitePk, 'view', PageList.home);
+        //startPage(PageList.chargeDetailPage, {stationInfo: {id: res.data.sitePk}, action: 'view', from: PageList.home});
+        //startPage(PageList.chargeDetail, { stationInfo: {id: res.data.sitePk}, action: 'view'});
+      } else if (res.msg) {
+        toastShort(res.msg);
+      } else {
+        toastShort($t("drawer.noChargingSession"));
+      }
+    }).catch((err) => {
+      if (app.debug)
+        console.log(err);
+      Dialog.dismissLoading();
+      toastShort($t("drawer.noChargingSession"));
+    })
+  }
+
+  const logout = () => {
+    Dialog.showDialog({
+      title: $t('profile.signOut'),
+      message: $t('profile.tipSignOut'),
+      callback: btn => {
+        if (btn == Dialog.BUTTON_OK) {
+          Dialog.showProgressDialog();
+          setTimeout(() => {
+            if (onLogout) onLogout();
+          }, 500);
+        }
+      }
+    })
+  }
+
+  return (
+    <View style={styles.drawerView}>
+      <View style={styles.loginView}>
+        { userInfo.photoUrl
+        ? <TouchableWithoutFeedback onPress={() => startPage(PageList.profile)}>
+            <Image
+              style={styles.avatar}
+              source={{uri: utils.getImageUrl(userInfo.photoUrl)}}/>
+          </TouchableWithoutFeedback>
+        : <TouchableWithoutFeedback onPress={() => startPage(isLogin ? PageList.profile : PageList.login)}>
+            <Image
+              style={styles.avatar}
+              source={require('../../images/user/ic-avatar-default.png')}/>
+          </TouchableWithoutFeedback>
+        }
+        <Button
+          style={styles.nickView}
+          viewStyle={styles.nickViewStyle}
+          onClick={() => startPage(isLogin ? PageList.profile : PageList.login)}>
+          <TextView
+            style={styles.nickname}
+            ellipsizeMode='tail'
+            numberOfLines={1}>
+            { isLogin
+              ? userInfo.nickName 
+                ? userInfo.nickName
+                : $t('drawer.logging')
+              : $t('drawer.sign')
+            }
+          </TextView>
+          <FontAwesome
+            size={24}
+            color='#999'
+            name='angle-right'/>
+        </Button>
+      </View> 
+      <View style={styles.divideLogin}></View>
+      { isLogin
+        ? <Button
+            style={styles.itemButton}
+            viewStyle={styles.itemView}
+            onClick={() => getCharging()}>
+            <MaterialCommunityIcons
+              style={styles.icon}
+              name="car-electric-outline"
+              color="#333"
+              size={26}
+            />
+            {/* <Image
+              style={styles.icon}
+              source={require('../../images/icon/draw-charge.png')}/> */}
+            <TextView style={styles.label}>{$t('drawer.charging')}</TextView>
+          </Button>
+        : <View
+            style={styles.disableItem}>
+            <MaterialCommunityIcons
+              style={styles.icon}
+              name="car-electric-outline"
+              color="#999"
+              size={26}
+            />
+            {/* <Image
+              style={styles.icon}
+              source={require('../../images/icon/draw-charge-no.png')}/> */}
+            <TextView style={styles.disable}>{$t('drawer.charging')}</TextView>
+          </View>
+      }
+      {
+        isLogin && <>
+        <Button
+          style={styles.itemButton}
+          viewStyle={styles.itemView}
+          onClick={() => {
+            startPage(PageList.wallet);
+          }}>
+          <Image
+            style={styles.icon}
+            source={require('../../images/icon/draw-transaction.png')}/>
+          <TextView style={styles.label}>{$t('drawer.wallet')}</TextView>
+        </Button>
+        <Button
+          style={styles.itemButton}
+          viewStyle={styles.itemView}
+          onClick={() => toTopupPage()}>
+          <MaterialCommunityIcons
+            style={styles.icon}
+            size={26}
+            name={"wallet-outline"}
+            color={colorDark}/>
+          <TextView style={styles.label}>{$t('drawer.topup')}</TextView>
+          <Text style={styles.balanceText2}>{userInfo.creditStr}</Text>
+        </Button></>
+      }
+
+      {/*附加功能-开始*/}
+      { (app.notifications.enable && isLogin) &&
+        <Button
+          style={styles.itemButton}
+          viewStyle={styles.itemView}
+          onClick={() => {
+            startPage(PageList.notification);
+          }}>
+          <MaterialIcons
+            style={styles.icon}
+            name="notifications"
+            color="#222"
+            size={26}/>
+          <TextView style={styles.label}>{$t('route.notifications')}</TextView>
+          { notificationCount > 0 && (
+            notificationCount < 100
+            ? <TextView
+                style={styles.bridgeText}
+                fixedAlign={false}>{notificationCount}</TextView>
+            : <TextView
+                style={styles.bridgeText2}
+                fixedAlign={false}>99+</TextView>
+            )
+          }
+        </Button>
+      }
+      { (app.modules.bookmarks && isLogin) &&
+        <Button
+          style={styles.itemButton}
+          viewStyle={styles.itemView}
+          onClick={() => {
+            startPage(PageList.bookmarks);
+          }}>
+          <MaterialIcons
+            style={styles.icon}
+            name="stars"
+            color="#222"
+            size={26}/>
+          <TextView style={styles.label}>{$t('route.bookmarks')}</TextView>
+        </Button>
+      }
+      {/*附加功能-结束*/}
+      { (app.modules.membership && isLogin) &&
+        <Button
+          style={styles.itemButton}
+          viewStyle={styles.itemView}
+          onClick={() => {
+            startPage(PageList.membersList);
+          }}>
+          <MaterialIcons
+            style={styles.icon}
+            name="card-membership"
+            color="#222"
+            size={26}/>
+          <TextView style={styles.label}>{$t('drawer.members')}</TextView>
+        </Button>
+      }
+      <Button
+        style={styles.itemButton}
+        viewStyle={styles.itemView}
+        onClick={() => {
+          startPage(PageList.feedback);
+        }}>
+        <MaterialCommunityIcons
+          style={styles.icon2}
+          name="message-alert-outline"
+          color="#222"
+          size={24}/>
+        <TextView style={styles.label}>{$t('drawer.feedback')}</TextView>
+      </Button>
+
+      {/* <Button
+        style={styles.itemButton}
+        viewStyle={styles.itemView}
+        onClick={() => {
+          Linking.openURL(host+"juicePicture/pdf/FAQ.v1.0.pdf")
+        }}>
+        <Feather
+          style={styles.icon2}
+          name="download"
+          color={colorDark}
+          size={24}
+        />
+        <Text style={styles.label}>FAQs</Text>
+      </Button> */}
+      <Button
+        style={styles.itemButton}
+        viewStyle={styles.itemView}
+        onClick={() => {
+          startPage(PageList.settings);
+        }}>
+        <MaterialIcons
+          style={styles.icon}
+          name="settings"
+          color="#222"
+          size={25}
+        />
+        <TextView style={styles.label}>{$t('drawer.settings')}</TextView>
+      </Button>
+      { app.modules.support &&
+        <Button
+          style={styles.itemButton}
+          viewStyle={styles.itemView}
+          onClick={() => {
+            startPage(PageList.supportContact);
+          }}>
+          <MaterialCommunityIcons
+            style={styles.icon}
+            name="face-agent"
+            color="#333"
+            size={26}
+          />
+          <TextView style={styles.label}>{$t('drawer.contactSupport')}</TextView>
+        </Button>
+      }
+      <Button
+        style={styles.itemButton}
+        viewStyle={styles.itemView}
+        onClick={() => {
+          startPage(PageList.about);
+        }}>
+        <MaterialCommunityIcons
+          style={styles.icon}
+          name="information-outline"
+          color="#333"
+          size={26}
+        />
+        <TextView style={styles.label}>{$t('drawer.about')}</TextView>
+      </Button>
+
+      {/* <View style={styles.divided}></View> */}
+      { DEBUG &&
+      <>
+        <View style={styles.divideLogin}></View>
+        <TextView style={{color: "#ccc", paddingLeft: 16, paddingBottom: 8, fontSize: 12}}>{$t('drawer.debugOnly')}</TextView>
+        <Button
+          style={styles.itemButton}
+          viewStyle={styles.itemView}
+          onClick={() => {
+            startPage(PageList.privacy);
+          }}>
+          <MaterialCommunityIcons
+            style={styles.icon}
+            name="file-eye-outline"
+            color="#222"
+            size={26}/>
+          <TextView style={styles.label}>{$t('drawer.privacyPolicy')}</TextView>
+        </Button>
+        <Button
+          style={styles.itemButton}
+          viewStyle={styles.itemView}
+          onClick={() => {
+            startPage(PageList.condition);
+          }}>
+          <MaterialCommunityIcons
+            style={styles.icon}
+            name="file-eye-outline"
+            color="#222"
+            size={26}/>
+          <TextView style={styles.label}>{$t('drawer.termsOfUse')}</TextView>
+        </Button>
+        <Button
+          style={styles.itemButton}
+          viewStyle={styles.itemView}
+          onClick={() => {
+            startPage(PageList.notify);
+          }}>
+          {/* <Image
+            style={styles.icon2}
+            source={require('../../images/icon/draw-terms.png')}/> */}
+          <MaterialIcons
+            style={styles.icon}
+            name="notifications-none"
+            color="#222"
+            size={26}/>
+          <TextView style={styles.label}>{$t('route.notificationTest')}</TextView>
+        </Button>
+        <Button
+          style={styles.itemButton}
+          viewStyle={styles.itemView}
+          onClick={() => {
+            startPage(isIOS ? PageList.notify : PageList.mapTest);
+          }}>
+          <MaterialCommunityIcons
+            style={styles.icon}
+            name="map-legend"
+            color="#222"
+            size={26}/>
+          <TextView style={styles.label}>{$t('drawer.mapsTest')}</TextView>
+        </Button>
+      </>}
+
+      {/* isLogin
+        ? <View style={styles.walletView}>
+            <Pressable
+              style={styles.balanceView}
+              android_ripple={ripple}
+              onPress={() => toTopupPage()}>
+              <Image
+                style={styles.icon}
+                source={require('../../images/icon/draw-wallet.png')}/>
+              <Text style={styles.balanceText}>{currency}{userInfo.credit}</Text>
+            </Pressable>
+            {/* <Pressable
+              style={styles.balanceView}
+              android_ripple={ripple}
+              onPress={() => {
+                startPage(PageList.referral);
+              }}>
+              <Image
+                style={styles.icon}
+                source={require('../../images/icon/draw-gift.png')}/>
+              <Text style={styles.referText}>Refer your friends to get $5 credit!</Text>
+            </Pressable> *}
+          </View>
+        : <View style={ui.flex1}></View>s
+        */}
+
+      <View style={styles.bottomView}>
+        <Image
+          style={Styles.logo}
+          resizeMode='contain'
+          source={require('../../images/drawer-logo.png')}
+        />
+        <Text style={styles.versionText}>{app.displayName + '  ' + app.versionName}</Text>
+      </View>
+      {/* isLogin &&
+        <Button
+          style={styles.logoutView}
+          text='Logout'
+          textColor={textButton}
+          borderRadius={0}
+          onClick={() => logout()}/>
+      */}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  drawerTop: {
+    top: 0,
+    left: 0,
+    right: 0,
+    height: statusHeight,
+    position: 'absolute',
+    fontSize: 10,
+    backgroundColor: pageBackground
+  },
+  drawerView: {
+    paddingTop: 16,
+    paddingBottom: 8,
+    minHeight: $vhs(101)
+  },
+  guessView: {
+    padding: 16
+  },
+  loginView: {
+    paddingTop: 16,
+    paddingBottom: 4
+  },
+  avatar: {
+    width: 66,
+    height: 66,
+    marginLeft: 24,
+    borderWidth: 2,
+    borderRadius: 80,
+    borderColor: colorLight,
+  },
+  nickView: {
+    marginTop: 6,
+    borderRadius: 0,
+    backgroundColor: colorLight
+  },
+  nickViewStyle: {
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row',
+    ...$padding(12, 24, 12, 16),
+  },
+  nickname: {
+    flex: 1,
+    color: textPrimary,
+    fontSize: 20,
+    fontWeight: 'bold',
+    paddingLeft: 16,
+  },
+  divideLogin: {
+    height: 1,
+    marginTop: 4,
+    marginRight: 22,
+    marginBottom: 12,
+    backgroundColor: '#E5E5E5'
+  },
+  itemButton: {
+    borderRadius: 0,
+    backgroundColor: colorLight
+  },
+  itemView: {
+    flex: 1,
+    height: 56,
+    paddingLeft: 16,
+    marginBottom: 6,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  disableItem: {
+    height: 56,
+    paddingLeft: 16,
+    marginBottom: 6,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  icon: {
+    width: 26,
+    height: 26,
+    marginRight: 16
+  },
+  icon2: {
+    width: 24,
+    height: 24,
+    marginLeft: 1,
+    marginRight: 17
+  },
+  label: {
+    flex: 1,
+    color: textPrimary,
+    fontSize: 16,
+  },
+  disable: {
+    color: '#999',
+    fontSize: 18
+  },
+  divided: {
+    height: 1,
+    marginTop: 24,
+    marginLeft: 16,
+    backgroundColor: colorAccent
+  },
+  walletView: {
+    paddingTop: 16,
+    paddingLeft: 48,
+    paddingRight: 48
+  },
+  balanceView: {
+    marginTop: 16,
+    borderRadius: 8,
+    ...$padding(13, 22),
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0, 20, 137, 0.2)'
+  },
+  balanceText: {
+    color: textPrimary,
+    fontSize: 22,
+    fontWeight: 'bold'
+  },
+  referText: {
+    flex: 1,
+    color: textPrimary,
+    fontSize: 13
+  },
+  bottomView: {
+    flex: 1,
+    paddingTop: 48,
+    paddingBottom: 0,
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  },
+  versionText: {
+    color: textPrimary,
+    fontSize: 10,
+    paddingTop: 16
+  },
+  logoutView: {
+    backgroundColor: colorPrimary
+  },
+  balanceText2: {
+    color: textCancel,
+    fontSize: 14,
+    marginRight: 20
+  },
+  bridgeText: {
+    width: 20,
+    height: 20,
+    color: textLight,
+    fontSize: 12,
+    marginRight: 16,
+    borderRadius: 30,
+    fontWeight: 'bold',
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    backgroundColor: "#FF3B30"
+  },
+  bridgeText2: {
+    width: 22,
+    height: 22,
+    color: textLight,
+    fontSize: 10,
+    marginRight: 16,
+    borderRadius: 30,
+    fontWeight: 'bold',
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    backgroundColor: "#FF3B30"
+  }
+});