热力图

locales/zh-CN.json

@@ -117,5 +117,8 @@
   "chao-zan": "超赞",
   "wu-shu-ju": "无数据",
   "dao-di-le": "到底了",
-  "wo-de-tou-su": "我的投诉"
+  "wo-de-tou-su": "我的投诉",
+  "she-zhi": "设置",
+  "tong-zhi-he-ti-shi-yin-she-zhi": "通知和提示音设置",
+  "qi-shou-fu-wu-he-zuo-xie-yi": "骑手服务合作协议"
 }

map/Heat3DScreen.tsx

@@ -0,0 +1,65 @@
+import * as WebBrowser from 'expo-web-browser';
+import * as React from 'react';
+import { StatusBar } from 'expo-status-bar';
+import { Div, Button } from 'react-native-magnus';
+import { Appbar } from 'react-native-paper';
+import { WebView } from 'react-native-webview';
+import { useTranslation } from 'react-i18next';
+
+import useModel from 'flooks';
+import { useRequest } from 'ahooks';
+import MapModel from './model';
+import {
+  toastShow,
+  toastHide,
+  toastInfo,
+  toastSuccess,
+} from '../utils/SystemUtils';
+
+export default function SearchMapScreen() {
+  const { t } = useTranslation();
+
+  const webRef = React.useRef();
+  const { getNowLocation } = useModel(MapModel);
+  const { run } = useRequest(
+    (location) =>
+      `/merchant/heatMap?longitude=${location.lng}&latitude=${location.lat}`,
+    {
+      manual: true,
+    }
+  );
+
+  return (
+    <>
+      <WebView
+        ref={webRef}
+        source={{
+          uri: `http://dingdong.izouma.com/map/heat3D`,
+        }}
+        style={{ flexGrow: 1, width: '100%' }}
+        onMessage={({ nativeEvent }) => {
+          console.log(nativeEvent);
+        }}
+        onLoadEnd={() => {
+          getNowLocation().then((res) => {
+            const { location } = res;
+            run(location).then((res) => {
+              var list = res.map((item) => {
+                return {
+                  count: item.count,
+                  lng: item.longitude,
+                  lat: item.latitude,
+                };
+              });
+              webRef.current.injectJavaScript(
+                `window.draw(${JSON.stringify(list)},'${JSON.stringify(
+                  location
+                )}')`
+              );
+            });
+          });
+        }}
+      />
+    </>
+  );
+}

mine/MineScreen.tsx

@@ -34,7 +34,7 @@ export default function RegisterScreen({ navigation }: StackScreenProps) {
             }
           >
             <Div flex={1} row alignItems="center">
-              <Image w={53} h={53} source={avatar || logo} />
+              <Image w={53} h={53} source={avatar ? { uri: avatar } : logo} />
               <Div flex={1} ml={14}>
                 <Div row alignItems="center">
                   <Text fontSize="xl" fontWeight="bold" flex={1}>
@@ -82,7 +82,18 @@ export default function RegisterScreen({ navigation }: StackScreenProps) {
             </Div>
           </Button>
         </Div>
-        <Button block bg="white" p={20} rounded="sm" mb={10}>
+        <Button
+          block
+          bg="white"
+          p={20}
+          rounded="sm"
+          mb={10}
+          onPress={() =>
+            navigation.navigate('MineStack', {
+              screen: 'Heat3D',
+            })
+          }
+        >
           <Div flex={1} row>
             <Text flex={1}>单量热力图</Text>
             <Icon name="right" />
@@ -143,7 +154,18 @@ export default function RegisterScreen({ navigation }: StackScreenProps) {
             <Icon name="right" />
           </Div>
         </Button>
-        <Button block bg="white" p={20} rounded="sm" mb={10}>
+        <Button
+          block
+          bg="white"
+          p={20}
+          rounded="sm"
+          mb={10}
+          onPress={() => {
+            navigation.navigate('MineStack', {
+              screen: 'Setting',
+            });
+          }}
+        >
           <Div flex={1} row>
             <Text flex={1}>设置</Text>
             <Icon name="right" />

mine/SettingScreen.tsx

@@ -0,0 +1,85 @@
+import { StackScreenProps } from '@react-navigation/stack';
+import * as React from 'react';
+import { Div, Button, Image, Text, Avatar, Icon } from 'react-native-magnus';
+import { ScrollView } from 'react-native-gesture-handler';
+import { useTranslation } from 'react-i18next';
+
+import useModel from 'flooks';
+import User from '../stores/User';
+
+import { alert } from '../utils/SystemUtils';
+
+export default function SettingScreen({ navigation }: StackScreenProps) {
+  const { t } = useTranslation();
+
+  const { logout } = useModel(User, []);
+  return (
+    <Div bg="gray100">
+      <ScrollView
+        contentContainerStyle={{
+          flexGrow: 1,
+          backgroundColor: '#f2f2f2',
+        }}
+      >
+        <Button
+          bg="white"
+          px={12}
+          h={52}
+          py={0}
+          block
+          mt={10}
+          rounded="none"
+          onPress={() => {
+            navigation.navigate('SettingSys');
+          }}
+        >
+          <Div row justifyContent="space-between" flex={1}>
+            <Text fontSize="sm">{t('tong-zhi-he-ti-shi-yin-she-zhi')}</Text>
+            <Icon name="right" />
+          </Div>
+        </Button>
+        <Button bg="white" px={12} h={52} py={0} block mt={10} rounded="none">
+          <Div row justifyContent="space-between" flex={1}>
+            <Text fontSize="sm">
+              {t('ding-dong-wai-mai-qi-shou-zhu-ce-xie-yi')}
+            </Text>
+            <Icon name="right" />
+          </Div>
+        </Button>
+        <Button bg="white" px={12} h={52} py={0} block mt={10} rounded="none">
+          <Div row justifyContent="space-between" flex={1}>
+            <Text fontSize="sm">
+              {t('ding-dong-wai-mai-qi-shou-yin-si-zheng-ce')}
+            </Text>
+            <Icon name="right" />
+          </Div>
+        </Button>
+        <Button bg="white" px={12} h={52} py={0} block mt={10} rounded="none">
+          <Div row justifyContent="space-between" flex={1}>
+            <Text fontSize="sm">{t('qi-shou-fu-wu-he-zuo-xie-yi')}</Text>
+            <Icon name="right" />
+          </Div>
+        </Button>
+
+        <Button
+          w={112}
+          bg="white"
+          color="black"
+          borderWidth={1}
+          borderColor="yellow500"
+          fontSize="sm"
+          alignSelf="center"
+          my={30}
+          onPress={() => {
+            alert(navigation, {
+              msg: '确认要退出当前账号吗?',
+              submitEvent: () => logout(),
+            });
+          }}
+        >
+          退出当前账户
+        </Button>
+      </ScrollView>
+    </Div>
+  );
+}

mine/SettingSysScreen.tsx

@@ -0,0 +1,115 @@
+import { StackScreenProps } from '@react-navigation/stack';
+import * as React from 'react';
+import { Div, Button, Image, Text, Avatar, Toggle } from 'react-native-magnus';
+import { ScrollView } from 'react-native-gesture-handler';
+import useModel from 'flooks';
+import User from '../stores/User';
+
+import request from '../utils/RequestUtils';
+import { toastShow, toastInfo, toastSuccess } from '../utils/SystemUtils';
+
+export default function SettingSysScreen({ navigation }: StackScreenProps) {
+  const { riderInfo, setRider } = useModel(User, ['riderInfo']);
+  const {
+    newNews,
+    newOrderTone,
+    reminderTone,
+    chatMessageReminder,
+  } = riderInfo;
+
+  function saveRider(key, val) {
+    toastShow();
+    request
+      .post('/rider/save', {
+        data: {
+          id: riderInfo.id,
+          [key]: val,
+        },
+      })
+      .then((res) => {
+        toastSuccess('设置成功');
+        setRider(res);
+      })
+      .catch((e) => {
+        toastInfo(e.error);
+      });
+  }
+
+  return (
+    <Div bg="gray100">
+      <ScrollView
+        contentContainerStyle={{
+          flexGrow: 1,
+          backgroundColor: '#f2f2f2',
+        }}
+      >
+        <Div
+          h={60}
+          alignItems="center"
+          justifyContent="space-between"
+          mt={10}
+          bg="white"
+          row
+          px={14}
+        >
+          <Text fontSize="sm">新消息通知</Text>
+          <Toggle
+            on={newNews}
+            onPress={() => {
+              saveRider('newNews', !newNews);
+            }}
+            bg="gray200"
+            circleBg="white"
+            activeBg="yellow500"
+            h={30}
+            w={60}
+          />
+        </Div>
+        <Div bg="white" px={14} py={10} my={10}>
+          <Div row alignItems="center" justifyContent="space-between" py={10}>
+            <Text fontSize="sm">新单提示音</Text>
+            <Toggle
+              on={newOrderTone}
+              onPress={() => {
+                saveRider('newOrderTone', !newOrderTone);
+              }}
+              bg="gray200"
+              circleBg="white"
+              activeBg="yellow500"
+              h={30}
+              w={60}
+            />
+          </Div>
+          <Div row alignItems="center" justifyContent="space-between" py={10}>
+            <Text fontSize="sm">催单提示音</Text>
+            <Toggle
+              on={reminderTone}
+              onPress={() => {
+                saveRider('reminderTone', !reminderTone);
+              }}
+              bg="gray200"
+              circleBg="white"
+              activeBg="yellow500"
+              h={30}
+              w={60}
+            />
+          </Div>
+          <Div row alignItems="center" justifyContent="space-between" py={10}>
+            <Text fontSize="sm">聊天消息提醒</Text>
+            <Toggle
+              on={chatMessageReminder}
+              onPress={() => {
+                saveRider('chatMessageReminder', !chatMessageReminder);
+              }}
+              bg="gray200"
+              circleBg="white"
+              activeBg="yellow500"
+              h={30}
+              w={60}
+            />
+          </Div>
+        </Div>
+      </ScrollView>
+    </Div>
+  );
+}

navigation/MineStackNavigator.tsx

@@ -18,6 +18,8 @@ import MineInfoScreen from '../mine/MineInfoScreen';
 import ChangePasswordScreen from '../mine/ChangePasswordScreen';
 import MineAppraisalScreen from '../mine/MineAppraisalScreen';
 import MineComplaintScreen from '../mine/MineComplaint';
+import SettingScreen from '../mine/SettingScreen';
+import SettingSysScreen from '../mine/SettingSysScreen';
 
 //叮咚币
 import MineWalletScreen from '../wallet/MineWalletScreen';
@@ -27,6 +29,8 @@ import AddBankCardScreen from '../wallet/AddBankCardScreen';
 import WithdrawResultScreen from '../wallet/WithdrawResultScreen';
 import MineRecordScreen from '../wallet/MineRecordScreen';
 
+import Heat3DScreen from '../map/Heat3DScreen';
+
 const MineStack = createStackNavigator<MineStackParamList>();
 export default function Navigation({
   colorScheme,
@@ -36,7 +40,7 @@ export default function Navigation({
   const { t } = useTranslation();
   return (
     <MineStack.Navigator
-      initialRouteName="MineComplaint"
+      initialRouteName="Setting"
       screenOptions={{
         cardOverlayEnabled: true,
         cardStyle: { backgroundColor: '#f2f2f2', flex: 1 },
@@ -106,7 +110,6 @@ export default function Navigation({
           title: t('wo-de-tou-su'),
         }}
       />
-
       <MineStack.Screen
         name="MineRecord"
         component={MineRecordScreen}
@@ -114,6 +117,27 @@ export default function Navigation({
           title: t('wo-de-dui-zhang-dan'),
         }}
       />
+      <MineStack.Screen
+        name="Setting"
+        component={SettingScreen}
+        options={{
+          title: t('she-zhi'),
+        }}
+      />
+      <MineStack.Screen
+        name="SettingSys"
+        component={SettingSysScreen}
+        options={{
+          title: t('tong-zhi-he-ti-shi-yin-she-zhi'),
+        }}
+      />
+      <MineStack.Screen
+        name="Heat3D"
+        component={Heat3DScreen}
+        options={{
+          title: '单量热力图',
+        }}
+      />
     </MineStack.Navigator>
   );
 }

navigation/index.tsx

@@ -42,6 +42,7 @@ export default function Navigation({
   const navRef = React.useRef();
 
   const initRoute = useCreation(() => {
+    console.log(initialRouteName);
     if (__DEV__) {
       return {
         name: 'Main',
@@ -93,7 +94,13 @@ function RootNavigator({ initRoute }) {
         headerShown: false,
       }}
     >
-      <Stack.Screen name="Login" component={LoginStackNavigator} />
+      <Stack.Screen
+        name="Login"
+        component={LoginStackNavigator}
+        options={{
+          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
+        }}
+      />
 
       <Stack.Screen
         name="Main"

stores/User.ts

@@ -65,10 +65,13 @@ const user = (now) => ({
         return Promise.reject(userInfo.id);
       });
   },
+  setRider(info) {
+    now({ riderInfo: info });
+  },
   logout() {
     removeAsyncStorage('token').then(() => {
       // 清除用户信息
-      now({ id: 0, userInfo: {} });
+      now({ id: 0, userInfo: {}, riderInfo: {}, verifiedInfo: {} });
       toastSuccess(i18n.t('tui-chu-cheng-gong'));
     });
   },
@@ -110,10 +113,13 @@ const user = (now) => ({
           }
         } else if (id && verifiedInfo.id) {
           now({ initialRouteName: 'Transportation' });
+          return Promise.reject();
         } else if (id) {
           now({ initialRouteName: 'Certification' });
+          return Promise.reject();
         } else {
           now({ initialRouteName: 'Login' });
+          return Promise.reject();
         }
       })
       .then((res) => {
@@ -128,7 +134,8 @@ const user = (now) => ({
         } else {
           now({ initialRouteName: 'Main' });
         }
-      });
+      })
+      .catch(() => {});
   },
 });
 

utils/SystemUtils.ts

@@ -32,6 +32,21 @@ function promot(
   });
 }
 
+function alert(
+  navigation,
+  params = {
+    msg: '',
+    submitEvent: (val) => {},
+    submitText: '',
+    hasCancel: true,
+  }
+) {
+  navigation.navigate('Modal', {
+    screen: 'Alert',
+    params,
+  });
+}
+
 function toastShow() {
   if (Platform.OS === 'web') return;
   ModalIndicator.show(i18n.t('jia-zai-zhong'));
@@ -64,4 +79,5 @@ export {
   toastInfo,
   toastSuccess,
   getMoney,
+  alert,
 };