0713

App.js

@@ -52,8 +52,8 @@ export default function App() {
           index: 0,
           routes: [
             {
-              // name: initName,
-              name: 'OrderDetail',
+              name: initName,
+              // name: 'OrderDetail',
             },
           ],
         })

screens/Map/MapScreen.jsx

@@ -1,22 +1,27 @@
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
+import { Dimensions, View } from 'react-native';
 import { WebView } from 'react-native-webview';
+import { useCreation } from '@umijs/hooks';
 
 export default function MapScreen({ orderInfo }) {
-  React.useEffect(() => {
-    console.log(webref.postMessage('2836372'));
-  }, [orderInfo]);
+  // console.log(orderInfo);
+
+  const { location, merchant, status, merchantStatus, riderStatus } = orderInfo;
+
+  const merchantLocation = useCreation(() => {
+    if (merchant) {
+      return `${merchant.longitude},${merchant.latitude}`;
+    } else {
+      return '';
+    }
+  }, [merchant]);
 
-  const webref = React.useRef();
   return (
-    <>
-      <WebView
-        ref={webref}
-        source={{
-          uri: `http://dingdong.izouma.com/map/home`,
-        }}
-        javaScriptEnabled
-      />
-    </>
+    <WebView
+      source={{
+        uri: `http://dingdong.izouma.com/map/home?location=${location}&merchantLocation=${merchantLocation}&status=${status}&merchantStatus=${merchantStatus}&riderStatus=${riderStatus}`,
+      }}
+    />
   );
 }

screens/Order/Header.js

@@ -5,12 +5,24 @@ import { StatusBar } from 'expo-status-bar';
 import { Appbar } from 'react-native-paper';
 import { goBack } from '../../navigation/RootNavigation';
 
-export default function Header({ title, noBack }) {
+export default function Header({ title, noBack, bg }) {
   return (
     <>
-      <StatusBar backgroundColor="#FFC21C" style="light" translucent />
+      <StatusBar backgroundColor={bg || '#FFC21C'} style="light" translucent />
 
-      <Appbar.Header dark>
+      <Appbar.Header
+        dark
+        style={{
+          zIndex: 3,
+          elevation: 0,
+          shadowOffset: {
+            width: 0,
+            height: 0,
+          },
+          shadowOpacity: 0,
+        }}
+        theme={{ colors: { primary: bg || '#FFC21C' } }}
+      >
         {!noBack && <Appbar.BackAction onPress={goBack} />}
         <Appbar.Content
           title={title || '我的订单'}

screens/Order/OrderDetailScreen.jsx

@@ -4,16 +4,22 @@ import {
   StyleSheet,
   View,
   Clipboard,
-  RefreshControl,
   Dimensions,
+  Animated,
+  PanResponder,
+  findNodeHandle,
+  UIManager,
 } from 'react-native';
 import { Div, Button, Image, Text } from 'react-native-magnus';
+import Constants from 'expo-constants';
 
 import { Flex } from '@ant-design/react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
-import { useRequest, useCreation } from '@umijs/hooks';
+import { useRequest, useCreation, useMount } from '@umijs/hooks';
+
 import { useRoute } from '@react-navigation/native';
+import { useAnimation } from 'react-native-animation-hooks';
 import useModel from 'flooks';
 import Toast from '../../flooks/Toast';
 
@@ -36,7 +42,7 @@ export default function OrderScreen({ navigation }) {
     orderGoodsSpecs: [],
   });
 
-  const { success, warnning } = useModel(Toast, []);
+  const { loading, success, warnning, clearLoading } = useModel(Toast, []);
 
   const route = useRoute();
   const { params } = route;
@@ -91,20 +97,126 @@ export default function OrderScreen({ navigation }) {
     }
   }, [orderInfo]);
 
-  return (
-    <Div bg="gray200">
-      <MapScreen orderInfo={orderInfo} />
-      <Header title={statusInfo.name} />
-      <ScrollView
-        contentContainerStyle={styles.scroll}
-        refreshControl={
-          <RefreshControl
-            refreshing={orderRequest.loading}
-            onRefresh={orderRequest.run}
-          />
+  const detailRef = React.useRef();
+  const pan = React.useRef(new Animated.ValueXY()).current;
+  const minMove = React.useRef(new Animated.Value(0)).current;
+  const maxMove = React.useRef(
+    new Animated.Value(Dimensions.get('window').height * 0.6)
+  ).current;
+  const panResponder = React.useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        pan.setOffset({
+          y: pan.y._value,
+        });
+      },
+      onPanResponderMove: (e, ges) => {
+        const y = ges.dy + pan.y._offset;
+        if (y >= minMove._value && y <= maxMove._value) {
+          pan.setValue({
+            y: ges.dy,
+          });
+        } else if (y < minMove._value) {
+          pan.setValue({
+            y: minMove._value - pan.y._offset,
+          });
+        } else {
+          pan.setValue({
+            y: maxMove._value - pan.y._offset,
+          });
+
+          if (ges.moveY > 500) {
+            orderRequest.run();
+          }
+        }
+
+        if (maxMove._value - y < 200) {
+          setbackgorundColor(
+            `rgba(255, 194, 28,${Math.ceil((1 / 200) * (maxMove._value - y))})`
+          );
+          setshowDetail(false);
+        } else {
+          setbackgorundColor('rgba(255, 194, 28,1)');
+          setshowDetail(true);
         }
+      },
+      onPanResponderRelease: () => {
+        pan.flattenOffset();
+      },
+    })
+  ).current;
+
+  React.useEffect(() => {
+    if (finish) {
+      maxMove.setValue(0);
+      pan.setValue({
+        y: 0,
+      });
+      setshowDetail(true);
+    } else {
+      maxMove.setValue(Dimensions.get('window').height * 0.6);
+      pan.setValue({
+        y: Dimensions.get('window').height * 0.6,
+      });
+      setshowDetail(false);
+    }
+  }, [finish]);
+
+  const [backgorundColor, setbackgorundColor] = React.useState(
+    'rgba(255, 194, 28,0)'
+  );
+
+  const [showDetail, setshowDetail] = React.useState(false);
+
+  React.useEffect(() => {
+    if (orderRequest.loading) {
+      loading();
+    } else {
+      clearLoading();
+    }
+  }, [orderRequest.loading]);
+
+  return (
+    <Div bg="gray200" w="100%" flex={1}>
+      <Header title={showDetail ? statusInfo.name : ' '} bg={backgorundColor} />
+
+      {/* <RefreshControl
+        refreshing={orderRequest.loading}
+        onRefresh={orderRequest.run}
+      > */}
+      {!finish && (
+        <Div
+          w={Dimensions.get('window').width}
+          h={Dimensions.get('window').height + Constants.statusBarHeight}
+          position="absolute"
+          top={0}
+          left={0}
+          zIndex={1}
+        >
+          <MapScreen orderInfo={orderInfo} />
+        </Div>
+      )}
+
+      <Animated.View
+        ref={detailRef}
+        style={{
+          zIndex: 2,
+          backgroundColor: 'rgba(0,0,0,0)',
+          transform: [{ translateY: pan.y }],
+        }}
+        {...panResponder.panHandlers}
+        onLayout={({ nativeEvent }) => {
+          minMove.setValue(
+            Dimensions.get('window').height -
+              nativeEvent.layout.height -
+              nativeEvent.layout.y -
+              Constants.statusBarHeight
+          );
+        }}
       >
-        <Div pt={Dimensions.get('window').height * 0.6} pb={50} px={15}>
+        <Div pt={10} pb={10} px={15}>
           <View style={[styles.card]}>
             {finish ? (
               <Text fontSize="xl">
@@ -420,7 +532,8 @@ export default function OrderScreen({ navigation }) {
             </View>
           </View>
         </Div>
-      </ScrollView>
+      </Animated.View>
+      {/* </RefreshControl> */}
     </Div>
   );
 }