版本07.08.2(新增用户选址)

App.js

@@ -53,7 +53,7 @@ export default function App() {
           routes: [
             {
               name: initName,
-              // name: 'ReportBusiness',
+              // name: 'RewardRider',
             },
           ],
         })

Utils/TimeUtils.js

@@ -38,21 +38,17 @@ export default class Time {
         if (min <= 45) {
           minList.push(45);
         }
-        list.push(
-          minList.map((item) => {
-            return moment(`${i}:${item}`, 'H:m').format('HH:mm');
-          })
-        );
+        minList.forEach((item) => {
+          list.push(moment(`${i}:${item}`, 'H:m').format('HH:mm'));
+        });
       } else {
-        list.push(
-          [0, 15, 30, 45].map((item) => {
-            return moment(`${i}:${item}`, 'H:m').format('HH:mm');
-          })
-        );
+        [0, 15, 30, 45].forEach((item) => {
+          list.push(moment(`${i}:${item}`, 'H:m').format('HH:mm'));
+        });
       }
     }
 
-    return list.flat();
+    return list;
   }
 
   getFormat(formatType) {

constants/ThemeMagnus.js

@@ -8,6 +8,7 @@ export default {
     brand500: 'rgba(255,194,28,1)',
     brand600: '#FFB11E',
     red500: '#B00020',
+    gray100: 'rgb(221, 221, 221)',
     gray200: 'rgb(238, 238, 238)',
     gray300: '#B5B5B5',
     gray400: '#BFBFBF',

navigation/BaseNavigator.jsx

@@ -16,6 +16,7 @@ import OrderDetail from '../screens/Order/OrderDetailScreen';
 import Complaint from '../screens/Order/ComplaintScreen';
 import ComplaintNext from '../screens/Order/ComplaintNextScreen';
 import EvaluateScreen from '../screens/Order/EvaluateScreen';
+import RewardRider from '../screens/Order/RewardRiderScreen';
 
 // 用户
 import Setting from '../screens/User/SettingScreen';
@@ -40,9 +41,10 @@ import HomeAddress from '../screens/Main/AddressScreen';
 import MerchantsList from '../screens/Main/MerchantsListScreen';
 // 搜索地图
 import SearchMap from '../screens/Map/SearchMapScreen';
+
 // 搜索地图
 import MapScreen from '../screens/Map/MapScreen';
-// 搜索地图
+// 地图标记
 import MapMarkScreen from '../screens/Map/MapMarkScreen';
 
 export default function BasicScreens(Screen) {
@@ -89,6 +91,9 @@ export default function BasicScreens(Screen) {
       <Screen name="ComplaintNext" component={ComplaintNext} />
       {/* 评论 */}
       <Screen name="Evaluate" component={EvaluateScreen} />
+      {/* 打赏骑手 */}
+      <Screen name="RewardRider" component={RewardRider} />
+
       {/* *************************用户*********************************** */}
       {/* 设置 */}
       <Screen name="Setting" component={Setting} />

screens/Address/AddressCom.jsx

@@ -1,10 +1,17 @@
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { Div, Button, Select, Image, Text, Avatar } from 'react-native-magnus';
+import {
+  Div,
+  Button,
+  Select,
+  Image,
+  Text,
+  Avatar,
+  Icon,
+} from 'react-native-magnus';
 import { ScrollView } from 'react-native-gesture-handler';
 import { Modal, Portal, TouchableRipple, Badge } from 'react-native-paper';
-import Icon from 'react-native-vector-icons/FontAwesome';
 
 import { useRequest, useCreation, useUnmount } from '@umijs/hooks';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
@@ -92,11 +99,19 @@ export default function AddressCom() {
           setvisible(true);
         }}
       >
-        <Div row alignItems="center" h={56}>
+        <Div row alignItems="center" minH={56} py={10}>
           {chooseAddressId ? (
-            <Div>
-              <Text fontSize="xl" textAlign="left">
-                {chooseaddressInfo.addressInfo}
+            <Div flex={1} overflow="hidden">
+              <Text
+                fontSize="xl"
+                textAlign="left"
+                // numberOfLines={1}
+                // ellipsizeMode="tail"
+              >
+                {chooseaddressInfo.addressName}
+              </Text>
+              <Text fontSize="sm" color="gray300" textAlign="left">
+                {chooseaddressInfo.number}
               </Text>
               <Div row>
                 <Text fontSize="xs" color="gray300" textAlign="left">
@@ -111,10 +126,13 @@ export default function AddressCom() {
               </Div>
             </Div>
           ) : (
-            <Text color="gray300">请选择地址</Text>
+            <>
+              <Text color="gray300">请选择地址</Text>
+              <Div flex={1} />
+            </>
           )}
-          <Div flex={1} />
-          <Icon name="angle-right" color="#000" />
+
+          <Icon name="right" color="#000" />
         </Div>
       </TouchableRipple>
       <Div h={1} bg="gray200" />

screens/Address/EditAddressScreen.jsx

@@ -1,6 +1,6 @@
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
-import { Div, Button, Text, Tag, Toggle } from 'react-native-magnus';
+import { Div, Button, Text, Tag, Toggle, Icon } from 'react-native-magnus';
 import { ScrollView } from 'react-native-gesture-handler';
 import { InputItem } from '@ant-design/react-native';
 
@@ -21,7 +21,7 @@ export default function EditAddressScreen({ navigation }) {
   const route = useRoute();
   const { params } = route;
 
-  const { id } = params || { id: 0 };
+  const { id, locationInfo } = params || { id: 0 };
 
   const { saveAddress } = useModel(AddressModel, []);
 
@@ -33,11 +33,23 @@ export default function EditAddressScreen({ navigation }) {
   const [number, setnumber] = React.useState('');
   const isDefaultEvent = useBoolean();
   const [addressTag, setaddressTag] = React.useState('');
+  const [longitude, setlongitude] = React.useState('');
+  const [latitude, setlatitude] = React.useState('');
 
   const sexEvent = useToggle('先生', '女士');
 
+  React.useEffect(() => {
+    if (locationInfo) {
+      const { poiaddress, poiname, latlng } = locationInfo;
+      setaddressName(poiaddress + poiname);
+
+      setlatitude(latlng.lat);
+      setlongitude(latlng.lng);
+    }
+  }, [locationInfo]);
+
   const canSub = useCreation(() => {
-    if (phone && name && addressName && number) {
+    if (phone && name && addressName && number && longitude && latitude) {
       return true;
     } else {
       return false;
@@ -50,6 +62,8 @@ export default function EditAddressScreen({ navigation }) {
     isDefaultEvent.state,
     sexEvent.state,
     addressTag,
+    longitude,
+    latitude,
   ]);
 
   useRequest(
@@ -80,6 +94,8 @@ export default function EditAddressScreen({ navigation }) {
       setnumber(addressInfo.number);
       isDefaultEvent.toggle(addressInfo.isDefault);
       setaddressTag(addressInfo.addressTag);
+      setlatitude(addressInfo.latitude);
+      setlongitude(addressInfo.longitude);
     }
   }, [addressInfo]);
 
@@ -135,17 +151,36 @@ export default function EditAddressScreen({ navigation }) {
               手机号
             </Text>
           </InputItem>
-          <InputItem
-            clear
-            value={addressName}
-            onChange={setaddressName}
-            placeholder="请输入收货地址"
-            style={{ fontSize: 14 }}
+          <Button
+            bg="hide"
+            block
+            p={0}
+            rounded="none"
+            onPress={() =>
+              navigation.navigate('SearchMap', {
+                type: 'addAddress',
+              })
+            }
           >
-            <Text fontSize="xs" textAlign="left">
-              收货地址
-            </Text>
-          </InputItem>
+            <Div
+              flex={1}
+              row
+              py={15}
+              ml={15}
+              borderBottomWidth={1}
+              borderColor="gray100"
+              mr={0}
+            >
+              <Text fontSize="xs" w={71}>
+                收货地址
+              </Text>
+              <Text color={addressName ? 'gray600' : 'gray300'} flex={1}>
+                {addressName || '请选址收货地址'}
+              </Text>
+              <Icon mr={15} fontSize="sm" name="right" color="#000" />
+            </Div>
+          </Button>
+
           <InputItem
             clear
             value={number}
@@ -205,7 +240,9 @@ export default function EditAddressScreen({ navigation }) {
               addressName,
               number,
               addressTag,
-              isDefaultEvent.state
+              isDefaultEvent.state,
+              latitude,
+              longitude
             ).then(() => {
               navigation.goBack();
             });

screens/Address/HomeAddressCom.jsx

@@ -10,31 +10,34 @@ import { useRequest, useCreation, useUnmount } from '@umijs/hooks';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import useModel from 'flooks';
 import AddressModel from './model'; // detail模块通用方法
+import MapModel from '../Map/model';
 
-const AddressItem = ({ info, editEvent, isChoose, leftEvent }) => {
+const AddressItem = ({ info, onPress }) => {
   return (
     <>
-      <Div row alignItems="center" py={15}>
-        <Div flex={1} mx={15}>
-          <Text fontSize="sm" textAlign="left">
-            {info.addressName}
-          </Text>
-          <Text fontSize="sm" color="gray300" textAlign="left">
-            {info.number}
-          </Text>
-          <Div row>
-            <Text fontSize="sm" color="gray300" textAlign="left">
-              {info.name}
+      <Button onPress={onPress} bg="hide" p={0} block>
+        <Div flex={1} row alignItems="center" py={15}>
+          <Div flex={1} mx={15}>
+            <Text fontSize="sm" textAlign="left">
+              {info.addressName}
             </Text>
             <Text fontSize="sm" color="gray300" textAlign="left">
-              ({info.sex})
-            </Text>
-            <Text ml={15} fontSize="sm" color="gray300" textAlign="left">
-              {info.phone}
+              {info.number}
             </Text>
+            <Div row>
+              <Text fontSize="sm" color="gray300" textAlign="left">
+                {info.name}
+              </Text>
+              <Text fontSize="sm" color="gray300" textAlign="left">
+                ({info.sex})
+              </Text>
+              <Text ml={15} fontSize="sm" color="gray300" textAlign="left">
+                {info.phone}
+              </Text>
+            </Div>
           </Div>
         </Div>
-      </Div>
+      </Button>
 
       <Div h={1} bg="gray200" />
     </>
@@ -54,21 +57,11 @@ export default function HomeAddressCom() {
   useRequest(getAddressList);
 
   const navigation = useNavigation();
-
+  const { changeChooseInfo } = useModel(MapModel, []);
   useUnmount(() => {
     setShow(false);
   });
 
-  const chooseaddressInfo = useCreation(() => {
-    if (chooseAddressId) {
-      return addressList.find((item) => {
-        return item.id === chooseAddressId;
-      });
-    } else {
-      return {};
-    }
-  }, [chooseAddressId, addressList]);
-
   return (
     <>
       <Div bg="white" px={15} pb={15}>
@@ -83,15 +76,15 @@ export default function HomeAddressCom() {
               key={item.id}
               info={item}
               isChoose={chooseAddressId === item.id}
-              leftEvent={() => {
-                setChoose(item.id);
-                setvisible(false);
-                setShow(false);
-              }}
-              editEvent={() => {
-                setvisible(false);
-                navigation.navigate('EditAddress', { id: item.id });
-                setShow(true);
+              onPress={() => {
+                changeChooseInfo({
+                  addressName: item.addressName,
+                  location: {
+                    lat: item.latitude,
+                    lng: item.longitude,
+                  },
+                });
+                navigation.navigate('Home');
               }}
             />
           );

screens/Address/model.js

@@ -20,6 +20,9 @@ const AddressModel = (now) => ({
         },
       })
       .then((res) => {
+        res.content = res.content.filter((item) => {
+          return item.latitude && item.longitude;
+        });
         now({
           addressList: res.content,
         });
@@ -42,7 +45,9 @@ const AddressModel = (now) => ({
     addressName,
     number,
     addressTag,
-    isDefault
+    isDefault,
+    latitude,
+    longitude
   ) {
     const { id } = now(User);
     const { success } = now(Toast);
@@ -59,6 +64,8 @@ const AddressModel = (now) => ({
           number,
           addressTag,
           isDefault,
+          latitude,
+          longitude,
         },
       })
       .then(() => {

screens/Detail/MerchantDetailScreen.jsx

@@ -153,9 +153,13 @@ export default function MerchantDetail({ navigation }) {
         </Div>
         <Div minH={Dimensions.get('window').height}>
           <Tab.Navigator
-            lazy={false}
             initialRouteName="Order"
             tabBarOptions={{ showLabel: false, style: { height: 0 } }}
+            initialLayout={{
+              height: Dimensions.get('window').height,
+              width: Dimensions.get('window').width,
+            }}
+            backBehavior="initialRoute"
           >
             <Tab.Screen name="Order" component={Order} />
             <Tab.Screen name="Comment" component={Comment} />

screens/Detail/SelectSpecification.jsx

@@ -1,17 +1,16 @@
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
-import { StyleSheet, View, Image } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 import { Modal, Portal } from 'react-native-paper';
+import { Div, Image, Text, Button } from 'react-native-magnus';
 import { Flex } from '@ant-design/react-native';
 import { useCreation, useMap } from '@umijs/hooks';
 
 import useModel from 'flooks';
 import Detail from './model';
 
-import Text from '../../components/Text';
 import Plus from '../../components/Plus';
-import Button from '../../components/Button';
 
 export default function SelectSpecification() {
   const { showSelect, selectInfo, addCart, changeSelect } = useModel(Detail, [
@@ -52,10 +51,12 @@ export default function SelectSpecification() {
 
   // 全部选中的二级分类 list
   const selectClassify2 = useCreation(() => {
-    const list = [...selectMap.values()].map((item) => {
-      return [...item.values()];
+    let list = [];
+    [...selectMap.values()].forEach((item) => {
+      list = list.concat([...item.values()]);
     });
-    return [...selectMap.values()].length > 0 ? list.flat() : [];
+
+    return list;
   }, [selectMap]);
 
   // 全部选中的二级分类id list
@@ -81,56 +82,6 @@ export default function SelectSpecification() {
     return money;
   }, [discountAmount, amount, selectClassify2]);
 
-  const classify2 = (list) => {
-    return list.map((item, index) => {
-      const choosed = selectClassifyIds.indexOf(item.id) !== -1;
-      return (
-        <Button
-          key={item.id}
-          width="100%"
-          height={23}
-          color={choosed ? '#FFF5D8' : '#EEEEEE'}
-          fontColor={choosed ? '#FFC21C' : '#000000'}
-          size="mini"
-          style={{
-            width: '30%',
-            marginTop: 5,
-            marginRight: (index + 1) % 3 ? '5%' : 0,
-          }}
-          onPress={() => {
-            if (choosed) {
-              const selects = selectMapEvent.get(item.parent);
-              selects.delete(item.id);
-              selectMapEvent.set(item.parent, selects);
-            } else if (
-              classify1Map.get(item.parent).multiple &&
-              selectMapEvent.get(item.parent)
-            ) {
-              const selects = selectMapEvent.get(item.parent);
-              selects.set(item.id, item);
-              selectMapEvent.set(item.parent, selects);
-            } else {
-              selectMapEvent.set(item.parent, new Map([[item.id, item]]));
-            }
-          }}
-        >
-          {item.name}
-        </Button>
-      );
-    });
-  };
-
-  const classify1 = (list) => {
-    return list.map((item) => {
-      return (
-        <View key={item.id} style={styles.list}>
-          <Text>{item.name}</Text>
-          <Flex wrap="wrap">{classify2(item.children)}</Flex>
-        </View>
-      );
-    });
-  };
-
   return (
     <Portal>
       <Modal
@@ -140,13 +91,19 @@ export default function SelectSpecification() {
         contentContainerStyle={styles.contentContainerStyle}
       >
         <Flex align="stretch">
-          <Image style={styles.icon} resizeMode="cover" source={{ uri: img }} />
+          <Image
+            w={80}
+            h={80}
+            style={styles.icon}
+            resizeMode="cover"
+            source={{ uri: img }}
+          />
           <Flex.Item style={styles.info}>
             <Text size="s1" bold>
               {name}
             </Text>
             {selectClassify2.length !== 0 && (
-              <Text size="c1" type="info">
+              <Text fontSize="sm" color="gray300">
                 已选择{' '}
                 {selectClassify2
                   .map((item) => {
@@ -157,16 +114,14 @@ export default function SelectSpecification() {
             )}
 
             <Flex.Item />
-            <Text size="s1" type="error">
+            <Text fontSize="sm" color="red500">
               ¥{totalAmount}
               {discountAmount !== null && (
                 <Text
-                  size="c1"
-                  type="info"
-                  style={{
-                    textDecorationLine: 'line-through',
-                    marginLeft: 10,
-                  }}
+                  textdecorationline="line-through"
+                  fontSize="sm"
+                  color="gray300"
+                  ml={10}
                 >
                   ¥{amount}
                 </Text>
@@ -181,14 +136,58 @@ export default function SelectSpecification() {
         </Flex>
 
         <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
-          {classify1(selectspecifications)}
+          {selectspecifications.map((item) => {
+            return (
+              <Div key={item.id} py={20}>
+                <Text>{item.name}</Text>
+                <Div row flexWrap="wrap" justifyContent="space-between">
+                  {item.children.map((child) => {
+                    const choosed = selectClassifyIds.indexOf(child.id) !== -1;
+
+                    return (
+                      <Div key={child.id} w="32%" mt={5}>
+                        <Button
+                          rounded="xs"
+                          bg={choosed ? 'brand200' : 'gray200'}
+                          color={choosed ? 'brand500' : 'gray600'}
+                          fontSize="xs"
+                          block
+                          onPress={() => {
+                            if (choosed) {
+                              const selects = selectMapEvent.get(child.parent);
+                              selects.delete(child.id);
+                              selectMapEvent.set(child.parent, selects);
+                            } else if (
+                              classify1Map.get(child.parent).multiple &&
+                              selectMapEvent.get(child.parent)
+                            ) {
+                              const selects = selectMapEvent.get(child.parent);
+                              selects.set(child.id, child);
+                              selectMapEvent.set(child.parent, selects);
+                            } else {
+                              selectMapEvent.set(
+                                child.parent,
+                                new Map([[child.id, child]])
+                              );
+                            }
+                          }}
+                        >
+                          {child.name}
+                        </Button>
+                      </Div>
+                    );
+                  })}
+                </Div>
+              </Div>
+            );
+          })}
         </ScrollView>
 
         <Button
           disabled={notSelectClassify1.length}
           block
-          size="large"
-          type="primary"
+          bg="brand500"
+          fontSize="xl"
           onPress={() => addCart(id, selectClassifyIds.join(','), 1)}
         >
           选好了

screens/Main/Home/HomeHeader.js

@@ -93,7 +93,7 @@ export default function Header() {
             }}
             title={local ? TchangeToChinese : TchangeToth}
           />
-          <Menu.Item onPress={() => {}} title="版本07.08.1" />
+          <Menu.Item onPress={() => {}} title="版本07.08.2(新增用户选址)" />
         </Menu>
       </Appbar.Header>
     </>

screens/Map/MapMarkImg.jsx

@@ -7,8 +7,12 @@ import MapModel from './model'; // detail模块通用方法
 
 export default function MapMarkImg({ imgType, info, label }) {
   const { personImg, merchatImg, riderImg } = useModel(MapModel, []);
-  const { merchant } = info;
-  const persoMark = `markers=icon:${personImg}%7C31.982155,118.734716`;
+  const { merchant, location } = info;
+  const locations = location ? location.split(',') : [];
+  const persoMark =
+    locations.length > 0
+      ? `markers=icon:${personImg}%7C${locations[1]},${locations[0]}`
+      : '';
   const merchatMark = `markers=icon:${merchatImg}%7C${merchant.latitude},${merchant.longitude}`;
   const riderMark = `markers=icon:${riderImg}%7C31.981746,118.734661`;
 

screens/Map/SearchMapScreen.jsx

@@ -1,31 +1,31 @@
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
 import { StatusBar } from 'expo-status-bar';
-import {
-  Div,
-  Button,
-  Image,
-  Text,
-  Avatar,
-  Icon,
-  Input,
-} from 'react-native-magnus';
+import { Div } from 'react-native-magnus';
 import { Appbar } from 'react-native-paper';
-import { ScrollView } from 'react-native-gesture-handler';
 import { WebView } from 'react-native-webview';
 
+import { useRoute } from '@react-navigation/native';
 import useModel from 'flooks';
 import MapModel from './model';
 
-import Header from '../../components/Header';
-
-import { alert } from '../../Utils/TotastUtils';
-
 export default function MapScreen({ navigation }) {
   const { locationInfo, changeChooseInfo } = useModel(MapModel, [
     'locationInfo',
   ]);
   const { location } = locationInfo;
+
+  const [pageType, setpageType] = React.useState('homeSearch');
+
+  const route = useRoute();
+
+  React.useEffect(() => {
+    const { params } = route;
+    const { type } = params || {};
+    if (type) {
+      setpageType('addAddress');
+    }
+  }, [route]);
   return (
     <>
       <StatusBar backgroundColor="#fff" style="dark" translucent />
@@ -56,11 +56,17 @@ export default function MapScreen({ navigation }) {
         style={{ flexGrow: 1, width: '100%' }}
         onMessage={({ nativeEvent }) => {
           const info = JSON.parse(nativeEvent.data);
-          changeChooseInfo({
-            addressName: info.poiname,
-            location: info.latlng,
-          });
-          navigation.navigate('Home');
+          if (pageType === 'homeSearch') {
+            changeChooseInfo({
+              addressName: info.poiname,
+              location: info.latlng,
+            });
+            navigation.navigate('Home');
+          } else {
+            navigation.navigate('EditAddress', {
+              locationInfo: info,
+            });
+          }
         }}
       />
     </>

screens/Order/RewardRiderScreen.jsx

@@ -0,0 +1,27 @@
+import * as WebBrowser from 'expo-web-browser';
+import * as React from 'react';
+import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
+import { ScrollView } from 'react-native-gesture-handler';
+
+import useModel from 'flooks';
+import User from '../../flooks/User'; // detail模块通用方法
+
+import Header from '../../components/Header';
+
+export default function RewardRiderScreen() {
+  const { userInfo } = useModel(User, ['id']);
+
+  return (
+    <>
+      <Header title="" />
+      <ScrollView
+        contentContainerStyle={{
+          flexGrow: 1,
+          backgroundColor: '#eee',
+        }}
+      >
+        <Div />
+      </ScrollView>
+    </>
+  );
+}