0811

App.js

@@ -9,6 +9,7 @@ import {
   IconRegistry,
 } from "@ui-kitten/components";
 import { Provider } from "@ant-design/react-native";
+import { ThemeProvider } from "react-native-magnus";
 import { EvaIconsPack } from "@ui-kitten/eva-icons";
 import { SplashScreen } from "expo";
 import * as Font from "expo-font";
@@ -25,6 +26,7 @@ import { enableScreens } from "react-native-screens";
 import * as model from "./models";
 import { default as theme } from "./theme.json"; // <-- Import app theme
 import { default as customMapping } from "./mapping.json"; // <-- Import app theme
+import Matheme from "./constants/Theme";
 import Dialog from "./components/Dialog";
 
 import BottomTabNavigator from "./navigation/BottomTabNavigator";
@@ -156,41 +158,43 @@ export default function App(props) {
   return (
     <>
       <IconRegistry icons={EvaIconsPack} />
-      <Provider>
-        <ApplicationProvider
-          {...eva}
-          theme={{ ...eva.light, ...theme }}
-          customMapping={customMapping}
-        >
-          <Dialog />
-          <Layout style={{ flex: 1 }}>
-            <NavigationContainer ref={navigationRef}>
-              <Stack.Navigator
-                headerMode="none"
-                screenOptions={{
-                  gestureEnabled: true,
-                  cardStyleInterpolator:
-                    CardStyleInterpolators.forHorizontalIOS,
-                }}
-                initialRouteName={initRouteName}
-              >
-                {GuideScreens(Stack.Screen)}
-
-                <Stack.Screen
-                  name="Root"
-                  component={BottomTabNavigator}
-                  options={{}}
-                />
-
-                <Stack.Screen name="Login" component={LoginStackNavigator} />
-
-                {/* 基础功能页面 */}
-                {BasicScreens(Stack.Screen)}
-              </Stack.Navigator>
-            </NavigationContainer>
-          </Layout>
-        </ApplicationProvider>
-      </Provider>
+      <ThemeProvider theme={Matheme}>
+        <Provider>
+          <ApplicationProvider
+            {...eva}
+            theme={{ ...eva.light, ...theme }}
+            customMapping={customMapping}
+          >
+            <Dialog />
+            <Layout style={{ flex: 1 }}>
+              <NavigationContainer ref={navigationRef}>
+                <Stack.Navigator
+                  headerMode="none"
+                  screenOptions={{
+                    gestureEnabled: true,
+                    cardStyleInterpolator:
+                      CardStyleInterpolators.forHorizontalIOS,
+                  }}
+                  initialRouteName={initRouteName}
+                >
+                  {GuideScreens(Stack.Screen)}
+
+                  <Stack.Screen
+                    name="Root"
+                    component={BottomTabNavigator}
+                    options={{}}
+                  />
+
+                  <Stack.Screen name="Login" component={LoginStackNavigator} />
+
+                  {/* 基础功能页面 */}
+                  {BasicScreens(Stack.Screen)}
+                </Stack.Navigator>
+              </NavigationContainer>
+            </Layout>
+          </ApplicationProvider>
+        </Provider>
+      </ThemeProvider>
     </>
   );
 }

Utils/MapUtils.ts

@@ -0,0 +1,95 @@
+import * as Location from "expo-location";
+import axios from "axios";
+
+const key = "c4faf80125b298f93bbc1477db10e69c";
+const tengxunKey = "GLFBZ-ZR2W6-76XSA-MF7CQ-GDJ6Z-6FB5K";
+
+let lat = "31.981746";
+let lng = "118.734661";
+
+async function getLocation() {
+  return Location.requestPermissionsAsync()
+    .then(res => {
+      if (res.status === "granted") {
+        return Location.getCurrentPositionAsync({
+          enableHighAccuracy: true,
+        });
+      } 
+        return Promise.reject();
+      
+    })
+    .then(({ coords }) => {
+      lat = coords.latitude;
+      lng = coords.longitude;
+
+      return axios.get(
+        `https://apis.map.qq.com/ws/coord/v1/translate?locations=${lat},${lng}&type=1&key=${tengxunKey}&get_poi=1`,
+        {
+          prefix: "",
+          mode: "no-cors",
+        }
+      );
+    })
+    .then(res => {
+      if (res.status === 0) {
+        lat = res.locations[0].lat;
+        lng = res.locations[0].lng;
+      }
+      return axios.get(
+        `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lng}&key=${tengxunKey}&get_poi=1`,
+        {
+          prefix: "",
+          mode: "no-cors",
+        }
+      );
+    })
+    .then(res => {
+      if (res.status === 0) {
+        return Promise.resolve({
+          addressName: res.result.address,
+          location: res.result.location,
+        });
+      } 
+        return Promise.reject();
+      
+    })
+    .catch(e => {
+      return Promise.resolve({
+        addressName: "定位失败",
+        location: {
+          lat,
+          lng,
+        },
+      });
+    });
+}
+
+function getSearch(searchKey, boundary) {
+  return axios
+    .get(
+      `https://apis.map.qq.com/ws/place/v1/search?boundary=${boundary}&keyword=${searchKey}&page_size=20&page_index=1&orderby=_distance&key=${tengxunKey}`,
+      {
+        prefix: "",
+        mode: "no-cors",
+      }
+    )
+    .then(res => {
+      if (res.status === 0) {
+        return Promise.resolve({
+          pois: res.data,
+        });
+      }
+      return Promise.reject();
+    })
+    .catch(() => {
+      return Promise.resolve({
+        pois: [],
+      });
+    });
+}
+
+function mapMarks(params) {
+  return `https://restapi.amap.com/v3/staticmap?zoom=15&size=500*500&paths=10,0x0000ff,1,,:116.31604,39.96491;116.320816,39.966606;116.321785,39.966827;116.32361,39.966957&key=${key}`;
+}
+
+export { getLocation, getSearch };

Utils/SmsUtil.js

@@ -0,0 +1,44 @@
+import axios from "axios";
+
+const templateMap = new Map([
+  [
+    "changePhone",
+    {
+      name: "修改手机号",
+      key: 676939,
+    },
+  ],
+  [
+    "register",
+    {
+      name: "注册",
+      key: 674906,
+    },
+  ],
+  [
+    "forgetPsd",
+    {
+      name: "忘记密码",
+      key: "674832",
+    },
+  ],
+  [
+    "login",
+    {
+      name: "通用",
+      key: "674851",
+    },
+  ],
+]);
+
+function sendSms(phone, type) {
+  return axios.get("http://dingdong.izouma.com/sms/tencentSend", {
+    params: {
+      phone: `+86${phone}`,
+      templateId: templateMap.get(type).key,
+    },
+  });
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export { sendSms };

app.json

@@ -1,6 +1,6 @@
 {
   "expo": {
-    "name": "Dingdong",
+    "name": "叮咚外卖商家端",
     "slug": "Dingdong",
     "platforms": ["android"],
     "version": "1.0.0",

components/SmsInput.jsx

@@ -0,0 +1,71 @@
+import * as WebBrowser from "expo-web-browser";
+import * as React from "react";
+import { Div, Image, Text, Avatar, Input } from "react-native-magnus";
+import { Toast } from "@ant-design/react-native";
+import { Button } from "@ui-kitten/components";
+import { useInterval } from "ahooks";
+import { sendSms } from "../Utils/SmsUtil";
+
+export default function SmsInput({
+  label,
+  placeholder,
+  labelWidth,
+  phone,
+  onCodeChange,
+  type,
+}) {
+  const [code, setCode] = React.useState();
+  const [interval, setInterval] = React.useState(null);
+  const [count, setCount] = React.useState(60);
+
+  useInterval(
+    () => {
+      setCount(count - 1);
+      if (count === 0) {
+        setInterval(null);
+      }
+    },
+    interval,
+    { immediate: true }
+  );
+
+  return (
+    <Div row alignItems="center" px={4} py={10}>
+      <Text mr={19} textAlign="right" fontSize="sm" w={labelWidth || 80}>
+        {label}
+      </Text>
+      <Input
+        placeholder={placeholder}
+        fontSize="sm"
+        bg="gray100"
+        flex={1}
+        h={32}
+        mr={10}
+        value={code}
+        onChangeText={value => {
+          setCode(value);
+          onCodeChange(value);
+        }}
+        borderColor="gray200"
+      />
+      <Button
+        onPress={() => {
+          sendSms(phone, type || "register")
+            .then(() => {
+              setCount(60);
+              setInterval(1000);
+            })
+            .catch(e => {
+              console.log(e);
+              Toast.info(e.response.data.error);
+            });
+        }}
+        appearance="ghost"
+        size="tiny"
+        disabled={!phone || interval}
+      >
+        {interval ? `已发送(${count})S` : "发送验证码"}
+      </Button>
+    </Div>
+  );
+}

constants/Theme.js

@@ -0,0 +1,179 @@
+export default {
+  colors: {
+    gray900: "#262626",
+    gray800: "#404040",
+    gray700: "#595959",
+    gray600: "#737373",
+    gray500: "#8c8c8c",
+    gray400: "#a6a6a6",
+    gray300: "#bfbfbf",
+    gray200: "rgb(228, 233, 242)",
+    gray100: "#F0F0F0",
+
+    brand900: "#420a2b",
+    brand800: "#6e1147",
+    brand700: "#9a1864",
+    brand600: "#c61f80",
+    brand500: "#e0399a",
+    brand400: "#e765b0",
+    brand300: "#ee91c7",
+    brand200: "#f5bddd",
+    brand100: "#fce9f4",
+
+    red100: "#fce8ea",
+    red200: "#f7bac1",
+    red300: "#f28c98",
+    red400: "#ed5e6f",
+    red500: "#e83045",
+    red600: "#cf172c",
+    red700: "#a11222",
+    red800: "#730d18",
+    red900: "#45080f",
+
+    yellow100: "#fef9e6",
+    yellow200: "#FFF2C7",
+    yellow300: "#fae084",
+    yellow400: "#f8d453",
+    yellow500: "#FFC21C",
+    yellow600: "#ddae09",
+    yellow700: "#ac8707",
+    yellow800: "#7b6005",
+    yellow900: "#4a3a03",
+
+    green100: "#eefbe9",
+    green200: "#cdf4bd",
+    green300: "#84CCC9",
+    green400: "#8be665",
+    green500: "#69df39",
+    green600: "#50c620",
+    green700: "#3e9a19",
+    green800: "#2c6e12",
+    green900: "#1b420b",
+
+    blue100: "#e8f2fc",
+    blue200: "#bad7f7",
+    blue300: "#8cbcf2",
+    blue400: "#5ea1ed",
+    blue500: "#3087e8",
+    blue600: "#176dcf",
+    blue700: "#1255a1",
+    blue800: "#0d3d73",
+    blue900: "#082445",
+
+    teal100: "#e8fdfc",
+    teal200: "#b9f8f5",
+    teal300: "#8bf4ee",
+    teal400: "#5cefe7",
+    teal500: "#2eebe0",
+    teal600: "#14d1c6",
+    teal700: "#10a39a",
+    teal800: "#0b746e",
+    teal900: "#074642",
+
+    white: "#FFFFFF",
+    black: "#000000",
+    transparent: "rgba(0,0,0,0)",
+    black600: "rgba(0,0,0,0.6)",
+  },
+
+  fontSize: {
+    xs: 10,
+    sm: 12,
+    md: 14,
+    lg: 15,
+    xl: 16,
+    "2xl": 19,
+    "3xl": 21,
+    "4xl": 24,
+    "5xl": 27,
+    "6xl": 32,
+  },
+
+  shadowColor: "#000",
+
+  shadow: {
+    none: {},
+    xs: {
+      shadowOffset: {
+        width: 0,
+        height: 1,
+      },
+      shadowOpacity: 0.18,
+      shadowRadius: 1.0,
+
+      elevation: 1,
+    },
+    sm: {
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 0.23,
+      shadowRadius: 2.62,
+
+      elevation: 4,
+    },
+    md: {
+      shadowOffset: {
+        width: 0,
+        height: 4,
+      },
+      shadowOpacity: 0.3,
+      shadowRadius: 4.65,
+
+      elevation: 8,
+    },
+    lg: {
+      shadowOffset: {
+        width: 0,
+        height: 6,
+      },
+      shadowOpacity: 0.37,
+      shadowRadius: 7.49,
+
+      elevation: 12,
+    },
+    xl: {
+      shadowOffset: {
+        width: 0,
+        height: 8,
+      },
+      shadowOpacity: 0.44,
+      shadowRadius: 10.32,
+
+      elevation: 16,
+    },
+    "2xl": {
+      shadowOffset: {
+        width: 0,
+        height: 10,
+      },
+      shadowOpacity: 0.51,
+      shadowRadius: 13.16,
+
+      elevation: 20,
+    },
+  },
+
+  borderRadius: {
+    none: 0,
+    xs: 2,
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 12,
+    "2xl": 16,
+    circle: 1000000,
+  },
+
+  spacing: {
+    none: 0,
+    xs: 4,
+    sm: 6,
+    md: 8,
+    lg: 12,
+    xl: 24,
+    "2xl": 32,
+    "3xl": 64,
+  },
+};

map/SearchMapScreen.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable react/style-prop-object */
+import * as WebBrowser from "expo-web-browser";
+import * as React from "react";
+import { WebView } from "react-native-webview";
+
+import { useMount } from "ahooks";
+import { useModel } from "flooks";
+import { getLocation } from "../Utils/MapUtils.ts";
+
+export default function SearchMapScreen({ navigation }) {
+  const [location, setLocation] = React.useState<any>();
+  const { saveLocation } = useModel("userModel");
+  const [show, setshow] = React.useState<boolean>(false);
+  useMount(() => {
+    getLocation().then(res => {
+      setLocation(res.location);
+      setTimeout(() => {
+        setshow(true);
+      }, 500);
+    });
+  });
+  return (
+    <>
+      {show && (
+        <WebView
+          source={{
+            uri: `http://dingdong.izouma.com/map/chooseLocation?location=${location.lat},${location.lng}`,
+          }}
+          style={{ flexGrow: 1, width: "100%" }}
+          onMessage={({ nativeEvent }) => {
+            const info = JSON.parse(nativeEvent.data);
+            console.log(info);
+            saveLocation(
+              info.poiaddress + info.poiname,
+              info.latlng.lat,
+              info.latlng.lng
+            );
+            navigation.goBack();
+          }}
+        />
+      )}
+    </>
+  );
+}

models/userModel.js

@@ -95,18 +95,38 @@ export default {
     },
     loginByCode(phone, code) {
       console.log(phone, code);
-      // httpPost("/auth/phoneLogin", {
-      //     phone,
-      //     code,
-      // })
-      //     .then(res => {
-      //         if (res) {
-      //             updateUser(res);
-      //         }
-      //     })
-      //     .catch(e => {
-      //         console.log(e);
-      //     });
+      const { httpPost, addAsyncStorage } = model("httpModel");
+      const { success, warnning } = model("loadingModel");
+      const { getUserInfo } = model();
+      httpPost("/auth/phoneLogin", {
+        phone,
+        code,
+        identity: "MERCHANT",
+      })
+        .then(res => {
+          success("登录成功");
+          return addAsyncStorage("token", res);
+        })
+        .then(() => {
+          return getUserInfo();
+        })
+        .catch(e => {
+          warnning(e.error);
+        });
+    },
+    saveLocation(address, latitude, longitude) {
+      const { mid, registerInfo, updateMerchant } = model();
+      if (mid) {
+        updateMerchant({
+          address,
+          latitude,
+          longitude,
+        });
+      } else {
+        setState({
+          registerInfo: { ...registerInfo, address, latitude, longitude },
+        });
+      }
     },
     registerFirst({ ...data }) {
       setState({ registerInfo: data });

navigation/BasicNavigator.js

@@ -13,6 +13,7 @@ import Coupon from "../screens/Coupon";
 import Appraisal from "../screens/Appraisal";
 import Goods from "../screens/Goods";
 import Attestation from "../screens/Attestation";
+import SearchMapScreen from "../map/SearchMapScreen.tsx";
 
 export default function BasicScreens(Screen) {
   return (
@@ -24,6 +25,7 @@ export default function BasicScreens(Screen) {
       <Screen name="FullReduction" component={FullReduction} />
       <Screen name="AddNewClass" component={Guide2Screen} />
       <Screen name="Money" component={MoneyListScreen} />
+      <Screen name="SearchMap" component={SearchMapScreen} />
 
       {Bank(Screen)}
 

navigation/LoginStackNavigator.js

@@ -1,6 +1,6 @@
 import {
-    createStackNavigator,
-    CardStyleInterpolators,
+  createStackNavigator,
+  CardStyleInterpolators,
 } from "@react-navigation/stack";
 import * as React from "react";
 import { useModel } from "flooks";
@@ -11,22 +11,21 @@ import RegisterSeScreen from "../screens/RegisterSeScreen";
 
 const LoginStack = createStackNavigator();
 
-
 export default function LoginStackNavigator() {
-	const {initRoute}=useModel('userModel')
+  const { initRoute } = useModel("userModel");
 
-    return (
-      <LoginStack.Navigator
-        headerMode="none"
-        screenOptions={{
-          gestureEnabled: true,
-          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
-        }}
-        initialRouteName={initRoute}
-      >
-        <LoginStack.Screen name="Login" component={LoginScreen} />
-        <LoginStack.Screen name="Register" component={RegisterScreen} />
-        <LoginStack.Screen name="RegisterSe" component={RegisterSeScreen} />
-      </LoginStack.Navigator>
-    );
+  return (
+    <LoginStack.Navigator
+      headerMode="none"
+      screenOptions={{
+        gestureEnabled: true,
+        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
+      }}
+      initialRouteName={__DEV__ ? "Login" : initRoute}
+    >
+      <LoginStack.Screen name="Login" component={LoginScreen} />
+      <LoginStack.Screen name="Register" component={RegisterScreen} />
+      <LoginStack.Screen name="RegisterSe" component={RegisterSeScreen} />
+    </LoginStack.Navigator>
+  );
 }

package.json

@@ -17,7 +17,7 @@
     "@babel/polyfill": "^7.8.7",
     "@eva-design/eva": "^2.0.0",
     "@expo/vector-icons": "^10.0.0",
-    "@react-native-community/masked-view": "0.1.6",
+    "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/bottom-tabs": "^5.0.0",
     "@react-navigation/core": "^3.7.6",
     "@react-navigation/material-top-tabs": "^5.2.8",
@@ -27,51 +27,57 @@
     "@ui-kitten/components": "^5.0.0",
     "@ui-kitten/eva-icons": "^5.0.0",
     "@umijs/hooks": "^1.9.3",
+    "ahooks": "^2.4.0",
     "axios": "^0.19.2",
     "beeshell": "^2.0.11",
     "chokidar": "^3.4.0",
-    "expo": "^37.0.0",
-    "expo-asset": "~8.1.5",
-    "expo-constants": "~9.0.0",
-    "expo-file-system": "~8.1.0",
-    "expo-font": "~8.1.0",
-    "expo-image-picker": "~8.1.0",
+    "color": "^3.1.2",
+    "expo": "^38.0.0",
+    "expo-asset": "~8.1.7",
+    "expo-constants": "~9.1.1",
+    "expo-file-system": "~9.0.1",
+    "expo-font": "~8.2.1",
+    "expo-image-picker": "~8.3.0",
     "expo-linking": "~1.0.1",
-    "expo-localization": "~8.1.0",
-    "expo-splash-screen": "^0.2.3",
-    "expo-web-browser": "~8.2.1",
+    "expo-localization": "~8.2.1",
+    "expo-splash-screen": "^0.3.1",
+    "expo-web-browser": "~8.3.1",
     "flooks": "^1.2.0",
     "i18n-js": "^3.5.1",
     "moment": "^2.25.3",
     "qs": "^6.9.4",
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
+    "react": "16.11.0",
+    "react-dom": "16.11.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
     "react-native-action-button": "^2.8.5",
+    "react-native-animatable": "^1.3.3",
     "react-native-gesture-handler": "~1.6.0",
-    "react-native-maps": "0.26.1",
+    "react-native-gifted-chat": "^0.16.3",
+    "react-native-magnus": "^1.0.41",
+    "react-native-maps": "0.27.1",
     "react-native-modal": "^11.5.6",
     "react-native-number-please": "^1.0.5",
-    "react-native-reanimated": "~1.7.0",
-    "react-native-safe-area-context": "0.7.3",
-    "react-native-screens": "~2.2.0",
+    "react-native-reanimated": "~1.9.0",
+    "react-native-safe-area-context": "~3.0.7",
+    "react-native-screens": "~2.9.0",
     "react-native-tab-view": "^2.14.0",
     "react-native-textarea": "^1.0.4",
-    "react-native-web": "^0.11.7",
-    "teaset": "^0.7.4",
-    "zarm": "^2.3.2"
+    "react-native-vector-icons": "^7.0.0",
+    "react-native-web": "~0.11.7",
+    "react-native-webview": "9.4.0",
+    "expo-location": "~8.2.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.10.0",
     "@babel/core": "^7.10.0",
     "@babel/preset-env": "^7.9.6",
-    "@expo/webpack-config": "^0.11.25",
+    "@expo/webpack-config": "^0.12.16",
     "@typescript-eslint/eslint-plugin": "^3.0.2",
     "@typescript-eslint/parser": "^3.0.2",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-import": "^1.13.0",
-    "babel-preset-expo": "^8.1.0",
+    "babel-preset-expo": "^8.2.3",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-config-prettier": "^6.11.0",
@@ -82,10 +88,10 @@
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^2.5.1",
     "eslint-plugin-react-native": "^3.8.1",
-    "jest-expo": "^37.0.0",
+    "jest-expo": "^38.0.0",
     "metro-react-native-babel-preset": "^0.59.0",
     "prettier": "^2.0.5",
-    "react-native-svg": "11.0.1"
+    "react-native-svg": "12.1.0"
   },
   "private": true
 }

screens/Guide1Screen.js

@@ -76,7 +76,7 @@ export default function Guide1Screen({ navigation }) {
   const { changeBackground } = useModel("barModel");
   const { httpGet, httpPost } = useModel("httpModel", true);
   const { success, loading, clearLoading } = useModel("loadingModel", true);
-  const { mid, changeGuideStep } = useModel("userModel", true);
+  const { mid, userInfo, changeGuideStep } = useModel("userModel", true);
   const {
     addClassification,
     editGoodsMap,
@@ -150,7 +150,7 @@ export default function Guide1Screen({ navigation }) {
     changeIntroduction(res.introduction || "");
     // if (res.img && res.img.length) {
     changeImg(res.img);
-    // 
+    //
   }
 
   useMount(() => {
@@ -169,6 +169,11 @@ export default function Guide1Screen({ navigation }) {
             clearLoading();
           });
       }
+    } else if (mid) {
+      console.log(userInfo);
+      changeWeek(userInfo.week || "");
+      changeStartTime(userInfo.startTime || "");
+      changeEndTime(userInfo.endTime || "");
     }
   });
   useUnmount(() => {

screens/LoginScreen.js

@@ -2,284 +2,260 @@
 /* eslint-disable camelcase */
 import * as WebBrowser from "expo-web-browser";
 import * as React from "react";
-import {
-    Image,
-    StyleSheet,
-    View,
-} from "react-native";
-import {
-    Layout,
-    Tab,
-    TabView,
-    useTheme,
-    Button,
-} from "@ui-kitten/components";
+import { Image, StyleSheet, View } from "react-native";
+import { Layout, Tab, TabView, useTheme, Button } from "@ui-kitten/components";
 import { useModel } from "flooks";
 import { useFocusEffect } from "@react-navigation/native";
 import * as RootNavigation from "../navigation/RootNavigation";
 import FormInput from "../components/FormInput";
+import SmsInput from "../components/SmsInput";
 // import { useAndroidBackHandler } from "react-navigation-backhandler";
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    center: {
-        alignSelf: "stretch",
-        marginHorizontal: 13,
-        backgroundColor: "#fff",
-        paddingTop: 20,
-        paddingBottom: 10,
-        borderRadius: 7,
-    },
-    tabContent: {
-        backgroundColor: "#fff",
-        marginTop: 20,
-        paddingHorizontal: 9,
-    },
-    tabMain: {
-        // paddingVertical: 10,
-        width: "100%",
-        paddingTop: 10,
-        borderTopWidth: 1,
-        borderColor: "#E5E5E5",
-    },
-    logo: {
-        width: 217,
-        height: 100,
-        alignSelf: "center",
-    },
-    image: {
-        width: 256,
-        height: 100,
-        position: "absolute",
-        left: "50%",
-        top: -65,
-        marginLeft: -128,
-    },
-    tab: {
-        borderBottomWidth: 1,
-        borderColor: "#e5e5e5",
-        marginHorizontal: 10,
-    },
-    tabItem: {
-        paddingTop: 20,
-        paddingBottom: 10,
-        textAlign: "center",
-        color: "#000",
-        fontSize: 13,
-    },
-    tabItemActive: {
-        paddingTop: 20,
-        paddingBottom: 11,
-        textAlign: "center",
-        fontSize: 13,
-        color: "#FFC21C",
-    },
-    form: {
-        paddingTop: 10,
-    },
-    layoutLeft: {
-        paddingLeft: 70,
-        flexDirection: "row",
-        paddingBottom: 10,
-    },
-    btnList: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        paddingLeft: 60,
-        marginTop: -10,
-        marginBottom: 10,
-    },
-    btn: {
-        paddingVertical: 0,
-    },
-    formSub: {
-        alignItems: "flex-start",
-    },
-    primary: {
-        minWidth: 112,
-        paddingHorizontal: 10,
-    },
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  center: {
+    alignSelf: "stretch",
+    marginHorizontal: 13,
+    backgroundColor: "#fff",
+    paddingTop: 20,
+    paddingBottom: 10,
+    borderRadius: 7,
+  },
+  tabContent: {
+    backgroundColor: "#fff",
+    marginTop: 20,
+    paddingHorizontal: 9,
+  },
+  tabMain: {
+    // paddingVertical: 10,
+    width: "100%",
+    paddingTop: 10,
+    borderTopWidth: 1,
+    borderColor: "#E5E5E5",
+  },
+  logo: {
+    width: 217,
+    height: 100,
+    alignSelf: "center",
+  },
+  image: {
+    width: 256,
+    height: 100,
+    position: "absolute",
+    left: "50%",
+    top: -65,
+    marginLeft: -128,
+  },
+  tab: {
+    borderBottomWidth: 1,
+    borderColor: "#e5e5e5",
+    marginHorizontal: 10,
+  },
+  tabItem: {
+    paddingTop: 20,
+    paddingBottom: 10,
+    textAlign: "center",
+    color: "#000",
+    fontSize: 13,
+  },
+  tabItemActive: {
+    paddingTop: 20,
+    paddingBottom: 11,
+    textAlign: "center",
+    fontSize: 13,
+    color: "#FFC21C",
+  },
+  form: {
+    paddingTop: 10,
+  },
+  layoutLeft: {
+    paddingLeft: 70,
+    flexDirection: "row",
+    paddingBottom: 10,
+  },
+  btnList: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingLeft: 60,
+    marginTop: -10,
+    marginBottom: 10,
+  },
+  btn: {
+    paddingVertical: 0,
+  },
+  formSub: {
+    alignItems: "flex-start",
+  },
+  primary: {
+    minWidth: 112,
+    paddingHorizontal: 10,
+  },
 });
 
-
-const img1 = require("../assets/images/loginImg.png")
-const img2 = require("../assets/images/loginLogo.png")
-
-
-
-
+const img1 = require("../assets/images/loginImg.png");
+const img2 = require("../assets/images/loginLogo.png");
 
 export default function LoginScreen() {
-    const theme = useTheme();
-    const { changeBackground } = useModel("barModel", true);
-    const {
-        welcom,
-        login_tab_1,
-        login_tab_2,
-        login_form_1,
-        login_pla_1,
-        login_form_2,
-        login_pla_2,
-        login_form_3,
-        login_pla_3,
-        login_btn_sub,
-        login_btn_forget,
-        login_btn_rej,
-        login_btn_code_1,
-        login_btn_code_2,
-    } = useModel("wordsModel");
+  const theme = useTheme();
+  const { changeBackground } = useModel("barModel", true);
+  const {
+    welcom,
+    login_tab_1,
+    login_tab_2,
+    login_form_1,
+    login_pla_1,
+    login_form_2,
+    login_pla_2,
+    login_form_3,
+    login_pla_3,
+    login_btn_sub,
+    login_btn_forget,
+    login_btn_rej,
+    login_btn_code_1,
+    login_btn_code_2,
+  } = useModel("wordsModel");
 
-    const tabs = [
-        {
-            value: 1,
-            label: login_tab_1,
-        },
-        {
-            value: 2,
-            label: login_tab_2,
-        },
-    ];
+  const tabs = [
+    {
+      value: 1,
+      label: login_tab_1,
+    },
+    {
+      value: 2,
+      label: login_tab_2,
+    },
+  ];
 
-    const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const [selectedIndex, setSelectedIndex] = React.useState(1);
 
-    const [phone, changePhone] = React.useState("");
-    const [password, changePassword] = React.useState("");
-    const [code, changeCode] = React.useState("");
-    const [sendNum, changeNum] = React.useState(60);
-    const [isSend, changeSend] = React.useState(false);
+  const [phone, changePhone] = React.useState("");
+  const [password, changePassword] = React.useState("");
+  const [code, changeCode] = React.useState("");
+  const [sendNum, changeNum] = React.useState(60);
+  const [isSend, changeSend] = React.useState(false);
 
-    const canLogin = React.useMemo(() => {
-        if (
-            (selectedIndex === 0 && phone && password) ||
-            (selectedIndex === 1 && phone && code)
-        ) {
-            return true;
-        // eslint-disable-next-line no-else-return
-        } else {
-            return false;
-        }
-    }, [phone, password, code, selectedIndex]);
+  const canLogin = React.useMemo(() => {
+    if (
+      (selectedIndex === 0 && phone && password) ||
+      (selectedIndex === 1 && phone && code)
+    ) {
+      return true;
+      // eslint-disable-next-line no-else-return
+    } else {
+      return false;
+    }
+  }, [phone, password, code, selectedIndex]);
 
-    const { loginByPassword, loginByCode } = useModel("userModel", true);
-    useFocusEffect(
-        React.useCallback(() => {
-            changeBackground(theme["color-primary-100"]);
-        }, [])
-    );
-    return (
-      <View
-        style={[
-                styles.container,
-                { backgroundColor: theme["color-primary-100"] },
-            ]}
-      >
-        <View style={styles.center}>
-          <Image
-            source={img1}
-            style={styles.image}
-          />
+  const { loginByPassword, loginByCode } = useModel("userModel", true);
+  useFocusEffect(
+    React.useCallback(() => {
+      changeBackground(theme["color-primary-100"]);
+    }, [])
+  );
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: theme["color-primary-100"] },
+      ]}
+    >
+      <View style={styles.center}>
+        <Image source={img1} style={styles.image} />
 
-          <Image
-            source={img2}
-            style={styles.logo}
-          />
+        <Image source={img2} style={styles.logo} />
 
-          <View style={styles.tabContent}>
-            <TabView
-              selectedIndex={selectedIndex}
-              onSelect={index => setSelectedIndex(index)}
-              indicatorStyle={{ height: 0 }}
-            >
-              <Tab title={login_tab_1}>
-                <Layout style={styles.tabMain}>
-                  {/* 手机号 */}
-                  <FormInput
-                    label={`${login_form_1  }:`}
-                    value={phone}
-                    type='phone'
-                    placeholder={login_pla_1}
-                    onChange={changePhone}
-                    textAlign='right'
-                    labelStyle={{ width: 50 }}
-                  />
+        <View style={styles.tabContent}>
+          <TabView
+            selectedIndex={selectedIndex}
+            onSelect={index => setSelectedIndex(index)}
+            indicatorStyle={{ height: 0 }}
+          >
+            <Tab title={login_tab_1}>
+              <Layout style={styles.tabMain}>
+                {/* 手机号 */}
+                <FormInput
+                  label={`${login_form_1}:`}
+                  value={phone}
+                  type="phone"
+                  placeholder={login_pla_1}
+                  onChange={changePhone}
+                  textAlign="right"
+                  labelStyle={{ width: 50 }}
+                />
 
-                  {/* 密码 */}
-                  <FormInput
-                    label={`${login_form_2  }:`}
-                    value={password}
-                    type='password'
-                    placeholder={login_pla_2}
-                    onChange={changePassword}
-                    textAlign='right'
-                    labelStyle={{ width: 50 }}
-                  />
-                </Layout>
-              </Tab>
-              <Tab title={login_tab_2}>
-                <Layout style={styles.tabMain}>
-                  {/* 手机号 */}
-                  <FormInput
-                    label={`${login_form_1  }:`}
-                    value={phone}
-                    type='phone'
-                    placeholder={login_pla_1}
-                    onChange={changePhone}
-                    textAlign='right'
-                    labelStyle={{ width: 50 }}
-                  />
+                {/* 密码 */}
+                <FormInput
+                  label={`${login_form_2}:`}
+                  value={password}
+                  type="password"
+                  placeholder={login_pla_2}
+                  onChange={changePassword}
+                  textAlign="right"
+                  labelStyle={{ width: 50 }}
+                />
+              </Layout>
+            </Tab>
+            <Tab title={login_tab_2}>
+              <Layout style={styles.tabMain}>
+                {/* 手机号 */}
+                <FormInput
+                  label={`${login_form_1}:`}
+                  value={phone}
+                  type="phone"
+                  placeholder={login_pla_1}
+                  onChange={changePhone}
+                  textAlign="right"
+                  labelStyle={{ width: 50 }}
+                />
 
-                  {/* 验证码 */}
-                  <FormInput
-                    label={`${login_form_3  }:`}
-                    value={code}
-                    type='code'
-                    placeholder={login_pla_3}
-                    onChange={changeCode}
-                    textAlign='right'
-                    btnText={login_btn_code_1}
-                    labelStyle={{ width: 50 }}
-                  />
-                </Layout>
-              </Tab>
-            </TabView>
+                {/* 验证码 */}
+                <SmsInput
+                  label={`${login_form_3}:`}
+                  placeholder={login_pla_3}
+                  labelWidth={50}
+                  phone={phone}
+                  onCodeChange={changeCode}
+                  type="login"
+                />
+              </Layout>
+            </Tab>
+          </TabView>
 
-            {/* 注册找回密码 */}
-            <Layout style={styles.btnList} level='1'>
-              <Button appearance='ghost' status='basic' size='small'>
-                {login_btn_forget}
-              </Button>
-              <Button
-                appearance='ghost'
-                status='basic'
-                size='tiny'
-                onPress={() => RootNavigation.navigate("Register")}
-              >
-                {login_btn_rej}
-              </Button>
-            </Layout>
-            {/* 登录 */}
-            <Layout style={styles.layoutLeft} level='1'>
-              <Button
-                status='primary'
-                disabled={!canLogin}
-                onPress={() => {
-                                if (selectedIndex === 0) {
-                                    loginByPassword(phone, password);
-                                } else {
-                                    loginByCode(phone, code).then(_ => {});
-                                }
-                            }}
-              >
-                {login_btn_sub}
-              </Button>
-            </Layout>
-          </View>
+          {/* 注册找回密码 */}
+          <Layout style={styles.btnList} level="1">
+            <Button appearance="ghost" status="basic" size="small">
+              {login_btn_forget}
+            </Button>
+            <Button
+              appearance="ghost"
+              status="basic"
+              size="tiny"
+              onPress={() => RootNavigation.navigate("Register")}
+            >
+              {login_btn_rej}
+            </Button>
+          </Layout>
+          {/* 登录 */}
+          <Layout style={styles.layoutLeft} level="1">
+            <Button
+              status="primary"
+              disabled={!canLogin}
+              onPress={() => {
+                if (selectedIndex === 0) {
+                  loginByPassword(phone, password);
+                } else {
+                  loginByCode(phone, code);
+                }
+              }}
+            >
+              {login_btn_sub}
+            </Button>
+          </Layout>
         </View>
       </View>
-    );
+    </View>
+  );
 }
-
-

screens/RegisterScreen.js

@@ -16,6 +16,7 @@ import { useFocusEffect } from '@react-navigation/native';
 import FormInput from '../components/FormInput';
 import ScrollPage from '../components/ScrollPage';
 import ConnectButton from '../components/ConnectButton';
+import SmsInput from "../components/SmsInput";
 
 
 const styles = StyleSheet.create({
@@ -116,14 +117,8 @@ export default function RegisterScreen() {
   return (
     <ScrollPage>
       <Layout style={styles.container}>
-        <Image
-          source={img1}
-          style={styles.logo}
-        />
-        <Image
-          source={img2}
-          style={styles.logo2}
-        />
+        <Image source={img1} style={styles.logo} />
+        <Image source={img2} style={styles.logo2} />
         <Text style={styles.text} category="h6">
           {welcom}
         </Text>
@@ -156,14 +151,11 @@ export default function RegisterScreen() {
           />
 
           {/* 验证码 */}
-          <FormInput
+          <SmsInput
             label={`${login_form_3}:`}
-            value={code}
-            type="code"
             placeholder={login_pla_3}
-            onChange={changeCode}
-            textAlign="right"
-            btnText={login_btn_code_1}
+            phone={phone}
+            onCodeChange={changeCode}
           />
 
           {/* 密码 */}
@@ -190,12 +182,14 @@ export default function RegisterScreen() {
             <Button
               status="primary"
               disabled={!canNext}
-              onPress={() => registerFirst({
-                name,
-                showName,
-                phone,
-                password,
-              })}
+              onPress={() =>
+                registerFirst({
+                  name,
+                  showName,
+                  phone,
+                  password,
+                })
+              }
             >
               {next}
             </Button>

screens/RegisterSeScreen.js

@@ -4,10 +4,19 @@ import * as WebBrowser from "expo-web-browser";
 import * as React from "react";
 import { useModel } from "flooks";
 import { StyleSheet } from "react-native";
-import { Layout, Text, useTheme, Button, Card } from "@ui-kitten/components";
+import {
+  Layout,
+  Text,
+  useTheme,
+  Button,
+  Card,
+  SelectItem,
+  Icon,
+} from "@ui-kitten/components";
+import { Div } from "react-native-magnus";
 
 // import { useFocusEffect } from "@react-navigation/native";
-import {  useMount } from "@umijs/hooks";
+import { useMount } from "@umijs/hooks";
 
 import ScrollPage from "../components/ScrollPage";
 import FormInput from "../components/FormInput";
@@ -49,6 +58,8 @@ const styles = StyleSheet.create({
   },
 });
 
+const ForwardIcon = props => <Icon {...props} name="arrow-ios-forward" />;
+
 export default function RegisterScreen() {
   const theme = useTheme();
   const { changeBackground } = useModel("barModel");
@@ -139,8 +150,11 @@ export default function RegisterScreen() {
     if (registerInfo && registerInfo.img) {
       changeImg(registerInfo.img);
     }
+    if (registerInfo && registerInfo.address) {
+      changeAddress(registerInfo.address);
+    }
   }, [registerInfo]);
-  
+
   React.useEffect(() => {
     if (mid) {
       if (userInfo.category.length > 0) {
@@ -227,11 +241,22 @@ export default function RegisterScreen() {
               style={{ paddingVertical: 5 }}
             />
 
-            <FormInput
+            {/* <FormInput
               label={guideHome_form_2}
               value={address}
               onChange={changeAddress}
               textAlign="right"
+            /> */}
+
+            <FormInput
+              label={guideHome_form_2}
+              type="url"
+              value={address || " "}
+              textAlign="right"
+              style={{ paddingVertical: 5 }}
+              changePath={() => {
+                RootNavigation.navigate("SearchMap");
+              }}
             />
 
             <FormInput