Merge branch 'develop' of http://git.hikcreate.com/hikrn/project/banma_credit into develop

7781b610 · CaryaLiu · 4bd4b4ea · 00ce019b · 0d1c0f28 · 7781b610
Commit 7781b610 authored Oct 10, 2020 by CaryaLiu
10 changed files
--- a/android @ 0d1c0f28
+++ b/android @ 0d1c0f28
-Subproject commit 1587df5e459ddf3c7241bad88cd66613a4347939
+Subproject commit 0d1c0f28436083a4e7fbc31ab9d4fab192013f7b
--- a/src/components/BackButton/index.js
+++ b/src/components/BackButton/index.js
+import { Image, View } from 'react-native';
+import { HeaderBackButton } from '@react-navigation/stack';
+import { IC_BACK_BLACK } from '../assets/images'
+export default BackButton = (props) => (
+    <HeaderBackButton
+        {...props}
+        backImage={() => (
+            <View style={{ paddingStart: 5, paddingEnd: 10, paddingTop: 10, paddingBottom: 10 }}>
+                <Image source={IC_BACK_BLACK} style={{ width: 10, height: 18 }} />
+            </View>
+        )}
+    />
+);
\ No newline at end of file
--- a/src/components/status-view/index.js
+++ b/src/components/status-view/index.js
-import React from 'react'
+import React, { useState } from "react";
-import { View, Text } from 'react-native'
+import { Button, Text, StyleSheet, StatusBar, View } from "react-native";
-import styles from './index.scss'
+import { HEADER_HEIGHT } from "../../config"
+const StatusHeader = (props) => {
+  const styleTypes = ['default', 'dark-content', 'light-content'];
+  const [visibleStatusBar, setVisibleStatusBar] = useState(false);
+  const [styleStatusBar, setStyleStatusBar] = useState(styleTypes[0]);
+  const changeVisibilityStatusBar = () => {
+    setVisibleStatusBar(!visibleStatusBar);
+  };
+  const changeStyleStatusBar = () => {
+    const styleId = styleTypes.indexOf(styleStatusBar) + 1;
+    if (styleId === styleTypes.length) {
+      return setStyleStatusBar(styleTypes[0]);
+    }
+    return setStyleStatusBar(styleTypes[styleId]);
+  };
-const StatusView = ({
-  loading = true,
-  empty = false,
-  error = false,
-  // 是否填充
-  fill = true,
-  loadingText = '加载中...',
-  errorText = '加载失败了',
-  emptyText = '暂无相关数据',
-  emptyIcon = null,
-  errorIcon = null,
-  onClick = null,
-  style = {},
-  children = null,
-}) => {
  return (
-    <View style={[styles.statusContainer, fill ? styles.full : null]}>
+    <View style={styles.container}>
-      {children ? children : <Text>加载中...</Text>}
+      <View>
+        <Text style={styles.textStyle}>StatusBar Style: {styleStatusBar}</Text>
+        <Text style={styles.textStyle}>StatusBar Visibility: {!visibleStatusBar ? 'Visible' : 'Hidden'}</Text>
+      </View>
+      <StatusBar backgroundColor="blue" barStyle={styleStatusBar} />
+      <View>
+        <StatusBar hidden={visibleStatusBar} />
+      </View>
+      <View style={styles.buttonContainer}>
+        <Button title="Toggle StatusBar" onPress={() => changeVisibilityStatusBar()} />
+      </View>
+      <View style={styles.buttonContainer}>
+        <Button title="Change StatusBar Style" onPress={() => changeStyleStatusBar()} />
+      </View>
    </View>
-  )
+  );
-}
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingTop: HEADER_HEIGHT,
+    backgroundColor: '#ECF0F1',
+    padding: 8
+  },
+  buttonContainer: {
+    padding: 10
+  },
+  textStyle: {
+    textAlign: 'center'
+  }
+});
-export default StatusView
+export default StatusHeader;
--- a/src/config/index.js
+++ b/src/config/index.js
+import { NativeModules, StatusBar, Dimensions } from 'react-native';
+const { BMCInfo: { getEnvInfo } } = NativeModules;
 const dev = {
  API_ROOT: 'http://devbmcapp.hikcreate.com',
 }
+const mock = {
+  API_ROOT: 'http://yapi.hikcreate.com',
+}
 const test = {
  API_ROOT: 'http://testbmcapp.hikcreate.com',
 }
+const pre_prod = {
+  API_ROOT: 'https://prebmcapp.hikcreate.com',
+}
 const prod = {
  API_ROOT: 'https://bmcapp.hikcreate.com',
 }
-const configs = {
+const configs = [
+  dev,
  dev,
+  mock,
  test,
+  pre_prod,
  prod,
+]
+let envInfo
+export const getEnv = async () => {
+  if (!envInfo) {
+    envInfo = await getEnvInfo();
+  }
+  return configs[envInfo.env];
 }
-export default configs[process.env.buildEnv || 'dev']
+// iPhone X、iPhone XS
+const X_WIDTH = 375;
+const X_HEIGHT = 812;
+// iPhone XR、iPhone XS Max
+const XSMAX_WIDTH = 414;
+const XSMAX_HEIGHT = 896;
+const DEVICE_SIZE = Dimensions.get('window');
+const { height: D_HEIGHT, width: D_WIDTH } = DEVICE_SIZE;
+export const isiOS = () => Platform.OS === 'ios'
+export const isiPhoneX = () => {
+  return (
+    isiOS() &&
+    ((D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH) ||
+      (D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT)) ||
+    ((D_HEIGHT === XSMAX_HEIGHT && D_WIDTH === XSMAX_WIDTH) ||
+      (D_HEIGHT === XSMAX_WIDTH && D_WIDTH === XSMAX_HEIGHT))
+  );
+};
+export const HEADER_HEIGHT = 44
+export const STATUS_BAR_HEIGHT = isiOS() ? (isiPhoneX() ? 34 : 20) : StatusBar.currentHeight
\ No newline at end of file
--- a/src/pages/ChangeNickname/index.js
+++ b/src/pages/ChangeNickname/index.js
@@ -4,7 +4,7 @@
 * */
 import React, { useEffect, useState } from 'react'
-import { TextInput, Text, TouchableHighlight, View, NativeModules, StatusBar, Platform } from 'react-native';
+import { TextInput, Text, TouchableHighlight, View, NativeModules, StatusBar } from 'react-native';
 // import Tabbar from '../../components/Tabbar';
 import { user as userServices } from '../../services';
 import styles from './style';
@@ -36,6 +36,7 @@ const Equipment = () => {
  return (
    <View style={styles.container}>
+      <StatusBar translucent={false} backgroundColor='#fff' barStyle="dark-content" />
      <View>
        <TextInput
          style={styles.input}

--- a/src/pages/Equipment/index.js
+++ b/src/pages/Equipment/index.js
@@ -4,7 +4,7 @@
 * */
 import React, { useEffect, useState } from 'react'
-import { ScrollView, View, Text, SafeAreaView, NativeModules, FlatList } from 'react-native';
+import { ScrollView, View, Text, SafeAreaView, NativeModules, FlatList, StatusBar } from 'react-native';
 // import Tabbar from '../../components/Tabbar';
 import { equiment as equimentServices } from '../../services';
 import styles from './style';
@@ -15,38 +15,43 @@ const Equipment = () => {
  const [equimentList, setEquimentList] = useState([]);
  useEffect(() => {
    getEquimentList();
-  }, []);
+  }, []);//seEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合,传递一个空数组（[]）作为第二个参数。
+  //这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。即只运行一次的 effect（仅在组件挂载和卸载时执行）
+  //[count]即仅在 count 更改时更新
  const getEquimentList = async () => {
-   try {
+    try {
-     const data = await equimentServices.getArticleList();
+      const data = await equimentServices.getBindEquipmentList();
-     setEquimentList(data[0].devices || []);
+      setEquimentList(data[0].devices || []);
-   } catch (e) {
+    } catch (e) {
-     BMCUI.showToast('e');
+      BMCUI.showToast(e && e.message);
-   }
+      console.log("error:")
+      console.log(e)
+    }
  };
  return (
    <SafeAreaView style={styles.container}>
-      <View style={styles.main}>
+      <StatusBar translucent={false} backgroundColor='#fff' barStyle="dark-content" />
-        <Text style={styles.tip}>
+      <FlatList
-          标题文字点击无反馈，文字超长则隐藏，文字超长则隐藏
+        style={styles.content}
-        </Text>
+        data={equimentList}
-        <View style={styles.content}>
+        keyExtractor={(item, index) => item.deviceId + ''}
-          <FlatList
+        ListHeaderComponent={() => {
-            data={equimentList}
+          return <Text style={styles.tip}>
-            keyExtractor={(item, index) => item.deviceId + ''}
+            列表呈现用户登录的常用设备，以及在常用设备上的最后登录时间
-            renderItem={({ item }) => {
+          </Text>
-              return <View style={styles.ceil}>
+        }}
-                <View style={styles.ceilTitle}>
+        renderItem={({ item }) => {
-                  <Text style={styles.ceilName}>{item.title}</Text>
+          return <View style={styles.ceil}>
-                  {item.currentDevice && <Text style={styles.ceilTag}>本机</Text>}
+            <View style={styles.ceilTitle}>
-                </View>
+              <Text style={styles.ceilName}>{item.title}</Text>
-                <Text style={styles.ceilInfo}>最后登录时间：{item.gmtLoginDisplay}</Text>
+              {item.currentDevice && <Text style={styles.ceilTag}>本机</Text>}
-              </View>;
+            </View>
-            }}
+            <Text style={styles.ceilInfo}>最后登录时间：{item.gmtLoginDisplay}</Text>
-          />
+          </View>;
-        </View>
+        }}
-      </View>
+      />
    </SafeAreaView>
  )
 };

--- a/src/pages/Equipment/style.js
+++ b/src/pages/Equipment/style.js
@@ -8,20 +8,23 @@ export default StyleSheet.create({
    flex: 1,
  },
  tip: {
-    fontSize: 16,
+    fontSize: 14,
-    paddingLeft: 12,
+    paddingLeft: 15,
-    paddingRight: 12,
+    paddingRight: 15,
-    paddingTop: 20,
+    paddingTop: 15,
-    paddingBottom: 20,
+    paddingBottom: 15,
-    color: 'rgba(182, 182, 182, 1)',
+    color: '#C3C3C3',
  },
  content: {
    flex: 1,
  },
  ceil: {
    backgroundColor: '#fff',
-    padding: 12,
+    paddingLeft: 15,
-    marginBottom: 12,
+    paddingRight: 15,
+    paddingTop: 10,
+    paddingBottom: 15,
+    marginBottom: 10,
  },
  ceilTitle: {
    flexDirection: 'row',
@@ -29,16 +32,22 @@ export default StyleSheet.create({
  },
  ceilName: {
    fontSize: 16,
-    color: '#000',
+    color: '#141414',
  },
  ceilTag: {
-    marginLeft: 10,
+    marginLeft: 5,
-    backgroundColor: 'rgba(195, 195, 195, 0.5)',
+    marginRight: 5,
+    fontSize: 10,
+    color: '#5A5A5A',
+    backgroundColor: '#00000010',
    padding: 2,
-    borderRadius: 4,
+    borderRadius: 1,
+    borderColor: "#979797"
  },
  ceilInfo: {
    paddingTop: 6,
+    fontSize: 12,
+    color: "#7B7B7B"
  },
 });
--- a/src/router/index.js
+++ b/src/router/index.js
 import React from 'react'
 import { NavigationContainer } from '@react-navigation/native';
-import { NativeModules } from 'react-native';
+import { NativeModules, Image, View } from 'react-native';
 import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';
+import { IC_BACK_BLACK } from '../assets/images'
+import { HEADER_HEIGHT } from '../config'
 import Equipment from '../pages/Equipment'
 import ChangeNickname from '../pages/ChangeNickname'
@@ -18,6 +20,11 @@ function AllStack(props) {
  const headerLeft = (props) => (
    <HeaderBackButton
      {...props}
+      backImage={() => (
+        <View style={{ paddingStart: 5, paddingEnd: 10, paddingTop: 10, paddingBottom: 10 }}>
+          <Image source={IC_BACK_BLACK} style={{ width: 10, height: 18 }} />
+        </View>
+      )}
      onPress={() => {
        exit()
      }}
@@ -25,23 +32,20 @@ function AllStack(props) {
  );
  return (
-    <Stack.Navigator initialRouteName={pathMap[path] || 'changeNickname'}>
+    <Stack.Navigator initialRouteName={pathMap[path] || 'changeNickname'}
-      <Stack.Screen options={{
+      screenOptions={{
-        title: '常用设备',
        headerLeft: headerLeft,
-        headerTitleStyle: {
+        headerStyle: {
-          flex: 1,
+          height: HEADER_HEIGHT, // Specify the height of your custom header
-          justifyContent: 'center'
        },
-      }} name="equiment" component={Equipment} />
-      <Stack.Screen options={{
-        title: '修改昵称',
-        headerLeft: headerLeft,
        headerTitleStyle: {
-          flex: 1,
+          alignItems: "center",
-          justifyContent: 'center'
+          fontSize: 18
        },
-      }} name="changeNickname" component={ChangeNickname} />
+        headerTitleAlign: "center"
+      }}>
+      <Stack.Screen options={{ title: '常用设备', }} name="equiment" component={Equipment} />
+      <Stack.Screen options={{ title: '修改昵称' }} name="changeNickname" component={ChangeNickname} />
    </Stack.Navigator>
  );
 }

--- a/src/services/equiment.js
+++ b/src/services/equiment.js
@@ -2,7 +2,7 @@ import { $request } from '../utils/request';
 export default {
-  getArticleList(params = {}) {
+  getBindEquipmentList(params = {}) {
    return $request.get('/user/loginDevices')
  },
 }
--- a/src/utils/request.js
+++ b/src/utils/request.js
 const { BMCUI } = NativeModules;
 import { NativeModules } from 'react-native';
-import appConfig from '../config'
+import { getEnv } from '../config'
 const { BMCInfo: { getLoginInfo, getDeviceInfo } } = NativeModules;
 // 服务器地址
-export const API_SERVER = appConfig.API_ROOT
+export let API_SERVER = null;
 // 是否外部的服务器
 export const isOutServer = url => url.indexOf('/') !== 0
@@ -74,6 +74,11 @@ export const $request = {
  _requestConfig: () => { return getRequestInfo(); },
  async _request(url, method, params, config = {}) {
    const isOutRequest = isOutServer(url)
+    if (!API_SERVER) {
+      const serverConfig = await getEnv();
+      API_SERVER = serverConfig.API_ROOT;
+    }
+    console.log(API_SERVER)
    let headers = config.headers || {}
    let body = {}
    let errorToast = config.errorToast || true
@@ -109,9 +114,21 @@ export const $request = {
          errorProcess(res, reject, errorToast)
        })
        .then(json => {
+          console.log(`{
+            ${method} request url=${url}
+            Token=${headers.Token}
+            Pvt-Token=${headers['Pvt-Token']}
+            response success:{${json && JSON.stringify(json)}}
+          }`)
          responseProcess(json, resolve, reject, isOutRequest, errorToast)
        })
        .catch(e => {
+          console.log(`{
+            ${method} request url=${url}
+            Token=${headers.Token}
+            Pvt-Token=${headers['Pvt-Token']}
+            response error:{${e && e.toJSONString()}}
+          }`)
          errorProcess({ data: { message: e.message } }, reject, errorToast)
        })
    })