0514

App.js

@@ -25,6 +25,9 @@ import * as models from "./models";
 import BottomTabNavigator from "./navigation/BottomTabNavigator";
 import LoginStackNavigator from "./navigation/LoginStackNavigator";
 import GuideStackNavigator from "./navigation/GuideStackNavigator";
+import HomeStackNavigator from "./navigation/HomeStackNavigator";
+
+import * as ApplyStatus from "./config/ApplyStatus";
 
 const Stack = createStackNavigator();
 
@@ -33,7 +36,6 @@ export default function App(props) {
     const { checkLogin, isLogin, status, guideStep } = useModel("userModel");
     const { getWords } = useModel("wordsModel", true);
     const { getToken } = useModel("httpModel", true);
-
     // Load any resources or data that we need prior to rendering the app
     React.useEffect(() => {
         async function loadResourcesAndDataAsync() {
@@ -59,6 +61,19 @@ export default function App(props) {
         loadResourcesAndDataAsync();
     }, [props.skipLoadingScreen]);
 
+    const initialRouteName = React.useMemo(() => {
+        console.log(isLogin);
+        if (isLogin) {
+            if (status !== "PASS") {
+                return "Guide";
+            } else {
+                return "Root";
+            }
+        } else {
+            return "Login";
+        }
+    }, [isLogin, status]);
+
     if (!isLoadingComplete && !props.skipLoadingScreen) {
         return null;
     } else {
@@ -73,26 +88,26 @@ export default function App(props) {
                     <Dialog />
                     <Layout style={{ flex: 1 }}>
                         <NavigationContainer>
-                            <Stack.Navigator headerMode='none'>
-                                {isLogin ? (
-                                    status === "PASS" &&
-                                    guideStep == "finish" ? (
-                                        <Stack.Screen
-                                            name='Root'
-                                            component={BottomTabNavigator}
-                                        />
-                                    ) : (
-                                        <Stack.Screen
-                                            name='Guide'
-                                            component={GuideStackNavigator}
-                                        />
-                                    )
-                                ) : (
-                                    <Stack.Screen
-                                        name='Login'
-                                        component={LoginStackNavigator}
-                                    />
-                                )}
+                            <Stack.Navigator
+                                headerMode='none'
+                                initialRouteName={initialRouteName}
+                            >
+                                <Stack.Screen
+                                    name='Home'
+                                    component={HomeStackNavigator}
+                                />
+                                <Stack.Screen
+                                    name='Root'
+                                    component={BottomTabNavigator}
+                                />
+                                <Stack.Screen
+                                    name='Guide'
+                                    component={GuideStackNavigator}
+                                />
+                                <Stack.Screen
+                                    name='Login'
+                                    component={LoginStackNavigator}
+                                />
                             </Stack.Navigator>
                         </NavigationContainer>
                     </Layout>

app.json

@@ -1,38 +1,41 @@
 {
-  "expo": {
-    "name": "Dingdong",
-    "slug": "Dingdong",
-    "platforms": [
-      "android"
-    ],
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/images/icon.png",
-    "scheme": "myapp",
-    "splash": {
-      "image": "./assets/images/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#FFC21C"
-    },
-    "backgroundColor": "#fff",
-    "primaryColor": "#FFC21C",
-    "updates": {
-      "fallbackToCacheTimeout": 0
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
-    "ios": {
-      "supportsTablet": true
-    },
-    "android": {
-      "package": "com.izouma.izouma",
-      "versionCode": 1
-    },
-    "androidStatusBar": {
-      "backgroundColor": "#FFC21C",
-      "translucent": false
-    },
-    "description": ""
-  }
+    "expo": {
+        "name": "Dingdong",
+        "slug": "Dingdong",
+        "platforms": ["android"],
+        "version": "1.0.0",
+        "orientation": "portrait",
+        "icon": "./assets/images/icon.png",
+        "scheme": "myapp",
+        "splash": {
+            "image": "./assets/images/splash.png",
+            "resizeMode": "contain",
+            "backgroundColor": "#FFC21C"
+        },
+        "backgroundColor": "#fff",
+        "primaryColor": "#FFC21C",
+        "updates": {
+            "fallbackToCacheTimeout": 0
+        },
+        "assetBundlePatterns": ["**/*"],
+        "ios": {
+            "supportsTablet": true
+        },
+        "android": {
+            "package": "com.izouma.izouma",
+            "versionCode": 1,
+            "permissions": [
+                "CAMERA",
+                "READ_INTERNAL_STORAGE",
+                "WRITE_INTERNAL_STORAGE",
+                "READ_EXTERNAL_STORAGE",
+                "WRITE_EXTERNAL_STORAGE"
+            ]
+        },
+        "androidStatusBar": {
+            "backgroundColor": "#FFC21C",
+            "translucent": false
+        },
+        "description": "叮咚外卖测试版"
+    }
 }

components/Dialog.js

@@ -140,7 +140,7 @@ export default function Dialog(props) {
                         underlineColorAndroid={"transparent"}
                     />
                 ) : (
-                    <Text {...props} category='p1' status={status || ""}>
+                    <Text {...props} category='p1' status={showAllInfo.status || ""}>
                         {showAllInfo.bodyText || "确认删除吗"}
                     </Text>
                 )}

components/FormInput.js

@@ -93,6 +93,7 @@ const FormInput = React.memo((props) => {
                 style={[
                     styles.label,
                     props.type === "img" ? { alignSelf: "flex-start" } : {},
+                    props.labelStyle || {},
                 ]}
             >
                 <Text category='c1' style={{ textAlign: "right" }}>
@@ -282,7 +283,7 @@ const styles = StyleSheet.create({
         flex: 1,
     },
     label: {
-        width: 90,
+        width: 80,
         marginRight: 19,
         flexShrink: 0,
     },

components/GoodsCard.js

@@ -7,12 +7,16 @@ import {
     Button,
     Layout,
     Avatar,
+    Icon,
 } from "@ui-kitten/components";
 import { useModel } from "flooks";
 export default function GoodsCard(props) {
     const { add, remove } = useModel("wordsModel");
     return (
-        <Card style={styles.card} appearance='goodsCard'>
+        <Card
+            style={[!props.appearance && styles.card]}
+            appearance={props.appearance || "goodsCard"}
+        >
             <Layout style={styles.layout}>
                 <Avatar
                     style={styles.avatar}
@@ -41,15 +45,26 @@ export default function GoodsCard(props) {
                     </Text>
                 </Layout>
 
-                <Layout style={styles.butContent}>
-                    <Button status='primary' size='tiny'>
-                        {add}
-                    </Button>
-                </Layout>
+                {!props.appearance && (
+                    <Layout style={styles.butContent}>
+                        <Button status='primary' size='tiny'>
+                            {add}
+                        </Button>
+                    </Layout>
+                )}
+
+                {props.appearance == "classification" && (
+                    <Button
+                        style={styles.miniButton}
+                        status='danger'
+                        accessoryLeft={StarIcon}
+                    />
+                )}
             </Layout>
         </Card>
     );
 }
+const StarIcon = (props) => <Icon {...props} name='minus-outline' />;
 
 const styles = StyleSheet.create({
     card: { marginTop: 10 },
@@ -73,4 +88,13 @@ const styles = StyleSheet.create({
     fontColor: {
         color: "#B5B5B5",
     },
+    miniButton: {
+        minWidth: 18,
+        minHeight: 18,
+        width: 18,
+        height: 18,
+        position: "absolute",
+        right: 10,
+        bottom: 5,
+    },
 });

components/OpenTime.js

@@ -209,7 +209,7 @@ export default function OpenTime({
     }, []);
 
     React.useEffect(() => {
-        if (defaultValue.length > 0) {
+        if (defaultValue && defaultValue.length > 0) {
             setShowName(defaultValue);
         }
     }, [defaultValue]);
@@ -238,7 +238,11 @@ export default function OpenTime({
                 backdropStyle={styles.backdrop}
                 onBackdropPress={cancelEvent}
             >
-                <Card appearance='modalCrad' style={{ width: 242 }}>
+                <Card
+                    disabled={true}
+                    appearance='modalCrad'
+                    style={{ width: 242 }}
+                >
                     <Layout>
                         <MenuItem
                             appearance='cardContent'
@@ -250,6 +254,7 @@ export default function OpenTime({
                         />
                     </Layout>
                     <Card
+                        disabled={true}
                         appearance='modalCrad'
                         style={[
                             { width: 222 },
@@ -280,6 +285,7 @@ export default function OpenTime({
                         />
                     </Layout>
                     <Card
+                        disabled={true}
                         appearance='modalCrad'
                         style={[
                             { width: 222 },

components/UpLoadImage.js

@@ -4,6 +4,7 @@ import { useModel } from "flooks";
 import { Linking } from "expo";
 import * as ImagePicker from "expo-image-picker";
 import { Image } from "react-native";
+import * as FileSystem from "expo-file-system";
 
 export default function UpLoadImage(props) {
     const { connect } = useModel("wordsModel");
@@ -30,7 +31,10 @@ export default function UpLoadImage(props) {
                     if (props.value && props.value != " ") {
                         return (
                             <Image
-                                style={{ width: 67, height: 67 }}
+                                style={{
+                                    width: "100%",
+                                    height: "100%",
+                                }}
                                 source={props.value}
                             />
                         );
@@ -55,14 +59,21 @@ const getPermissionAsync = async () => {
 const _pickImage = () => {
     return new Promise(async (resolve, reject) => {
         try {
-            let result = await ImagePicker.launchImageLibraryAsync({
-                mediaTypes: ImagePicker.MediaTypeOptions.All,
-                allowsEditing: true,
-                aspect: [4, 3],
-                quality: 1,
-            });
-            if (!result.cancelled) {
-                resolve(result.uri);
+            let permissionResult = await ImagePicker.requestCameraRollPermissionsAsync();
+
+            if (permissionResult.granted === false) {
+                reject("notAllod");
+            } else {
+                let result = await ImagePicker.launchImageLibraryAsync({
+                    mediaTypes: ImagePicker.MediaTypeOptions.Images,
+                    allowsEditing: true,
+                    aspect: [1, 1],
+                    quality: 1,
+                });
+                if (!result.cancelled) {
+                    // let file = await FileSystem.readAsStringAsync(result.uri);
+                    resolve(result.uri);
+                }
             }
         } catch (e) {
             reject(e);

config/ApplyStatus.js

@@ -0,0 +1,5 @@
+export default {
+    PASS: "PASS",
+    DENY: "DENY",
+    PENDING: "PENDING",
+};

config/http.js

@@ -1,41 +0,0 @@
-import axios from "axios";
-import qs from "qs";
-let baseUrl = "http://imshop.izouma.com";
-import { AsyncStorage } from "react-native";
-const axiosInstance = axios.create({
-    baseURL: baseUrl,
-});
-
-const start;
-const end;
-
-axiosInstance.interceptors.request.use(
-    async function (config) {
-        start()
-        config.headers = config.headers || {};
-        let token = await AsyncStorage.getItem("token");
-        if (token) {
-            config.headers["Authorization"] = "Bearer " + token;
-        }
-        return config;
-    },
-    function (error) {
-        return Promise.reject(error);
-    }
-);
-
-axiosInstance.interceptors.response.use(
-    function (response) {
-        console.log(response);
-        return response;
-    },
-    function (error) {
-        console.log(error);
-        if (error.response.status) {
-            error.response.data.status = error.response.status;
-        }
-        return Promise.reject(error.response.data);
-    }
-);
-
-export default http;

language/zh.js

@@ -86,6 +86,9 @@ export default {
     homeTab1: "点餐",
     homeTab2: "评价",
     homeTab3: "商家",
+
+    bannerTitle: "banner",
+    logoTitle: "商家头像",
     //公共的文字
 
     changeToEnglish: "切换到泰文",
@@ -117,4 +120,8 @@ export default {
     tab1: "店面",
     tab2: "订单",
     tab3: "我的",
+    editText:'编辑',
+    uplaodText:'上传',
+    uplaodImg:'上传图片',
+    removeTips:'确定要移除吗？移除后不可恢复'
 };

mapping.json

@@ -808,6 +808,24 @@
                             }
                         }
                     }
+                },
+                "classification": {
+                    "mapping": {
+                        "textFontFamily": "text-font-family",
+                        "iconMarginHorizontal": 4
+                    },
+                    "variantGroups": {
+                        "size": {
+                            "medium": {
+                                "minWidth": 33,
+                                "minHeight": 33,
+                                "textFontSize": 10,
+                                "paddingHorizontal": 6,
+                                "paddingVertical": 6,
+                                "textMarginHorizontal": 0
+                            }
+                        }
+                    }
                 }
             }
         },
@@ -1165,6 +1183,58 @@
                         }
                     }
                 },
+                "classification": {
+                    "mapping": {
+                        "accentHeight": 0,
+                        "bodyPaddingHorizontal": 10,
+                        "bodyPaddingVertical": 5,
+                        "borderColor": "transparent",
+                        "borderRadius": 3,
+                        "state": {
+                            "active": {
+                                "backgroundColor": "background-basic-color-2"
+                            }
+                        }
+                    },
+                    "variantGroups": {
+                        "status": {
+                            "basic": {
+                                "accentHeight": 4,
+                                "accentBackgroundColor": "color-basic-default"
+                            },
+                            "primary": {
+                                "accentHeight": 4,
+                                "accentBackgroundColor": "color-primary-default"
+                            },
+                            "success": {
+                                "accentHeight": 4,
+                                "accentBackgroundColor": "color-success-default"
+                            },
+                            "info": {
+                                "accentHeight": 4,
+                                "accentBackgroundColor": "color-info-default"
+                            },
+                            "warning": {
+                                "accentHeight": 4,
+                                "accentBackgroundColor": "color-warning-default"
+                            },
+                            "danger": {
+                                "accentHeight": 4,
+                                "accentBackgroundColor": "color-danger-default"
+                            },
+                            "control": {
+                                "accentHeight": 4,
+                                "accentBackgroundColor": "color-control-default"
+                            }
+                        },
+                        "direction": {
+                            "vertical": {
+                                "bodyPaddingHorizontal": 0,
+                                "bodyPaddingVertical": 0
+                            }
+                        }
+                    }
+                },
                 "homeCard": {
                     "mapping": {
                         "accentHeight": 0,
@@ -1761,6 +1831,140 @@
                     }
                 }
             }
+        },
+        "ListItem": {
+            "meta": {
+                "scope": "all",
+                "parameters": {
+                    "paddingVertical": {
+                        "type": "number"
+                    },
+                    "paddingHorizontal": {
+                        "type": "number"
+                    },
+                    "backgroundColor": {
+                        "type": "string"
+                    },
+                    "iconWidth": {
+                        "type": "number"
+                    },
+                    "iconHeight": {
+                        "type": "number"
+                    },
+                    "iconMarginHorizontal": {
+                        "type": "number"
+                    },
+                    "iconTintColor": {
+                        "type": "string"
+                    },
+                    "titleMarginHorizontal": {
+                        "type": "number"
+                    },
+                    "titleFontFamily": {
+                        "type": "string"
+                    },
+                    "titleFontSize": {
+                        "type": "number"
+                    },
+                    "titleFontWeight": {
+                        "type": "string"
+                    },
+                    "titleColor": {
+                        "type": "string"
+                    },
+                    "descriptionColor": {
+                        "type": "string"
+                    },
+                    "descriptionFontFamily": {
+                        "type": "string"
+                    },
+                    "descriptionFontSize": {
+                        "type": "number"
+                    },
+                    "descriptionFontWeight": {
+                        "type": "string"
+                    },
+                    "descriptionMarginHorizontal": {
+                        "type": "number"
+                    },
+                    "accessoryMarginHorizontal": {
+                        "type": "number"
+                    },
+                    "alignItems": {
+                        "type": "String"
+                    }
+                },
+                "appearances": {
+                    "default": {
+                        "default": true
+                    }
+                },
+                "variantGroups": {},
+                "states": {
+                    "active": {
+                        "default": false,
+                        "priority": 0,
+                        "scope": "all"
+                    }
+                }
+            },
+            "appearances": {
+                "default": {
+                    "mapping": {
+                        "paddingHorizontal": 8,
+                        "paddingVertical": 12,
+                        "backgroundColor": "background-basic-color-1",
+                        "iconWidth": 24,
+                        "iconHeight": 24,
+                        "iconMarginHorizontal": 8,
+                        "iconTintColor": "text-hint-color",
+                        "titleMarginHorizontal": 8,
+                        "titleFontSize": "text-subtitle-2-font-size",
+                        "titleFontWeight": "text-subtitle-2-font-weight",
+                        "titleFontFamily": "text-subtitle-2-font-family",
+                        "titleColor": "text-basic-color",
+                        "descriptionMarginHorizontal": 8,
+                        "descriptionFontSize": "text-caption-1-font-size",
+                        "descriptionFontWeight": "text-caption-1-font-weight",
+                        "descriptionFontFamily": "text-caption-1-font-family",
+                        "descriptionColor": "text-hint-color",
+                        "accessoryMarginHorizontal": 8,
+                        "state": {
+                            "active": {
+                                "backgroundColor": "color-basic-transparent-active"
+                            }
+                        }
+                    }
+                },
+                "classification": {
+                    "mapping": {
+                        "paddingHorizontal": 8,
+                        "paddingVertical": 12,
+                        "backgroundColor": "transparent",
+                        "iconWidth": 24,
+                        "iconHeight": 24,
+                        "iconMarginHorizontal": 8,
+                        "iconTintColor": "text-hint-color",
+                        "titleMarginHorizontal": 8,
+                        "titleFontSize": "text-subtitle-2-font-size",
+                        "titleFontWeight": "text-subtitle-2-font-weight",
+                        "titleFontFamily": "text-subtitle-2-font-family",
+                        "titleColor": "text-basic-color",
+                        "descriptionMarginHorizontal": 8,
+                        "descriptionFontSize": "text-caption-1-font-size",
+                        "descriptionFontWeight": "text-caption-1-font-weight",
+                        "descriptionFontFamily": "text-caption-1-font-family",
+                        "descriptionColor": "text-hint-color",
+                        "accessoryMarginHorizontal": 8,
+                        "alignItems": "center",
+                        "state": {
+                            "active": {
+                                "backgroundColor": "color-basic-transparent-active"
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 }

models/userModel.js

@@ -149,7 +149,7 @@ export default {
             const { mid, getUserInfo } = model();
             const { loading, success } = model("loadingModel");
             const { httpPost, addAsyncStorage } = model("httpModel");
-            httpPost(
+            return httpPost(
                 "/merchant/saveDTO",
                 {
                     ...data,
@@ -163,5 +163,13 @@ export default {
                 }
             });
         },
+        uploadStoreImg(img, type) {
+            const { updateMerchant } = model();
+            if (type == "banner") {
+                return updateMerchant({ banner: img });
+            } else {
+                return updateMerchant({ logo: img });
+            }
+        },
     }),
 };

navigation/BottomTabNavigator.js

@@ -2,8 +2,8 @@ import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import * as React from "react";
 import { useTheme, Text } from "@ui-kitten/components";
 import TabBarIcon from "../components/TabBarIcon";
-import HomeStackNavigator from "./HomeStackNavigator";
 import LinksScreen from "../screens/LinksScreen";
+import HomeScreen from "../screens/HomeScreen";
 import { useModel } from "flooks";
 
 const BottomTab = createBottomTabNavigator();
@@ -16,7 +16,7 @@ export default function BottomTabNavigator({ navigation, route }) {
         <BottomTab.Navigator headerMode='none'>
             <BottomTab.Screen
                 name='Home'
-                component={HomeStackNavigator}
+                component={HomeScreen}
                 options={{
                     tabBarLabel: ({ focused }) => (
                         <Text

navigation/HomeStackNavigator.js

@@ -7,6 +7,7 @@ import { useModel } from "flooks";
 
 import HomeScreen from "../screens/HomeScreen";
 import Guide1Screen from "../screens/Guide1Screen";
+import EditBanner from "../screens/EditBannerScreen";
 const HomeStack = createStackNavigator();
 
 const config = {
@@ -29,12 +30,13 @@ export default function LoginStackNavigator() {
                 gestureEnabled: true,
                 cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
             }}
-            initialRouteName='Home'
+            initialRouteName='AddGoods'
         >
-            <HomeStack.Screen name='Home' component={HomeScreen} />
+            <HomeStack.Screen name='AddGoods' component={Guide1Screen} />
             <HomeStack.Screen
-                name='AddGoods'
-                component={Guide1Screen}
+                name='EditBanner'
+                component={EditBanner}
+                initialParams={{ type: "banner" }}
             />
         </HomeStack.Navigator>
     );

navigation/LoginStackNavigator.js

@@ -30,7 +30,7 @@ export default function LoginStackNavigator() {
                 gestureEnabled: true,
                 cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
             }}
-            initialRouteName='Login'
+            initialRouteName='RegisterSe'
         >
             <LoginStack.Screen name='Login' component={LoginScreen} />
             <LoginStack.Screen name='Register' component={RegisterScreen} />

package.json

@@ -27,6 +27,7 @@
     "expo": "^37.0.0",
     "expo-asset": "~8.1.4",
     "expo-constants": "~9.0.0",
+    "expo-file-system": "~8.1.0",
     "expo-font": "~8.1.0",
     "expo-image-picker": "~8.1.0",
     "expo-localization": "~8.1.0",

screens/EditBannerScreen.js

@@ -0,0 +1,160 @@
+import * as WebBrowser from "expo-web-browser";
+import * as React from "react";
+import {
+    Image,
+    Platform,
+    StyleSheet,
+    TouchableOpacity,
+    View,
+    ImageBackground,
+} from "react-native";
+import scrollPage from "../decorator/scrollPage";
+import { useModel } from "flooks";
+import {
+    Layout,
+    Tab,
+    TabView,
+    Text,
+    useTheme,
+    Button,
+    Card,
+} from "@ui-kitten/components";
+import FormInput from "../components/FormInput";
+import { useFocusEffect } from "@react-navigation/native";
+import ScrollPage from "../components/ScrollPage";
+import NavHeaderBar from "../components/NavHeaderBar";
+import GoodsCard from "../components/GoodsCard";
+import UpLoadImage from "../components/UpLoadImage";
+
+export default function EditBannerScreen({ navigation, route }) {
+    const theme = useTheme();
+    const { changeBackground } = useModel("barModel");
+    const { setNavigation, pushRouter } = useModel("routersModel", true);
+    const { banner, logo, uploadStoreImg } = useModel("userModel");
+
+    const [img, changeImg] = React.useState("");
+    const [type, setType] = React.useState("banner");
+    const { showDialog } = useModel("dialogModel");
+    const {
+        bannerTitle,
+        logoTitle,
+        remove,
+        editText,
+        uplaodText,
+        uplaodImg,
+        removeTips,
+    } = useModel("wordsModel");
+    useFocusEffect(
+        React.useCallback(() => {
+            changeBackground(theme["color-primary-500"]);
+            setNavigation(navigation);
+            if (route.params.type) {
+                setType(route.params.type);
+            }
+        }, [])
+    );
+
+    return (
+        <>
+            <NavHeaderBar
+                title={editText + (type == "banner" ? bannerTitle : logoTitle)}
+            />
+            <ScrollPage>
+                <Layout style={styles.container}>
+                    <Layout style={styles.top}>
+                        <Image source={banner} style={styles.banner} />
+
+                        <Button
+                            style={styles.remove}
+                            size='tiny'
+                            status='danger'
+                            onPress={() => {
+                                showDialog({
+                                    bodyText: removeTips,
+                                    status: "danger",
+                                    cancelable: true,
+                                    confirmCallback: () => {
+                                        uploadStoreImg("", type);
+                                    },
+                                });
+                            }}
+                        >
+                            {remove}
+                        </Button>
+                    </Layout>
+                    <Layout style={styles.main}>
+                        <Text category='c1'>
+                            {uplaodText +
+                                (type == "banner" ? bannerTitle : logoTitle)}
+                        </Text>
+                        <UpLoadImage
+                            style={styles.upload}
+                            value={img}
+                            changeIcon={changeImg}
+                            size={133}
+                        />
+
+                        <Button
+                            disabled={!img}
+                            style={styles.button}
+                            onPress={() => {
+                                uploadStoreImg(img, type).then((_) => {
+                                    changeImg("");
+                                });
+                            }}
+                        >
+                            {uplaodImg}
+                        </Button>
+                    </Layout>
+                </Layout>
+            </ScrollPage>
+        </>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        paddingBottom: 33,
+    },
+    icon: {
+        width: 90,
+        height: 80,
+        marginBottom: 26,
+    },
+    text: {
+        fontWeight: "500",
+        marginBottom: 7,
+    },
+    button: {
+        marginTop: 19,
+    },
+    top: {
+        paddingVertical: 7,
+        height: 114,
+        backgroundColor: "#eee",
+        alignSelf: "stretch",
+    },
+    banner: {
+        flex: 1,
+    },
+    remove: {
+        position: "absolute",
+        bottom: 10,
+        right: 10,
+    },
+    upload: {
+        marginTop: 21,
+        width: 133,
+        height: 133,
+        alignSelf: "center",
+    },
+    main: {
+        paddingHorizontal: 24,
+        paddingVertical: 14,
+    },
+    button: {
+        alignSelf: "center",
+        marginTop: 19,
+    },
+});

screens/HomeScreen.js

@@ -120,32 +120,37 @@ export default function HomeScreen({ navigation, route }) {
 
     return (
         <>
+            <TopNavigation
+                appearance='homeBar'
+                alignment='center'
+                accessoryLeft={renderBackAction}
+                accessoryRight={renderRightActions}
+            />
             <ScrollPage>
-                <TopNavigation
-                    appearance='homeBar'
-                    alignment='center'
-                    accessoryLeft={renderBackAction}
-                    accessoryRight={renderRightActions}
-                />
                 <Layout style={styles.container}>
                     <ImageBackground source={banner} style={styles.banner}>
                         <Button
                             appearance='bannerButton'
                             onPress={() => {
-                                _pickImage().then((img) => {
-                                    httpPost("/upload/base64", {
-                                        base64: img,
-                                    }).then((res) => {
-                                        updateMerchant({ banner: res });
-                                    });
-                                });
+                                pushRouter("EditBanner");
+                                // _pickImage().then((img) => {
+                                //     httpPost("/upload/base64", {
+                                //         base64: img,
+                                //     }).then((res) => {
+                                //         updateMerchant({ banner: res });
+                                //     });
+                                // });
                             }}
                         >
                             {homeTip1}
                         </Button>
                     </ImageBackground>
 
-                    <Card appearance='homeCard' style={styles.homeCard}>
+                    <Card
+                        disabled={true}
+                        appearance='homeCard'
+                        style={styles.homeCard}
+                    >
                         <Image source={logo} style={styles.icon} />
 
                         <Layout style={styles.cardMain}>
@@ -337,7 +342,7 @@ const styles = StyleSheet.create({
     },
     tabIndicator: {
         height: 13,
-        borderRadius: "50%",
+        // borderRadius: "50%",
         bottom: 18,
         maxWidth: 27,
         marginHorizontal: 49,

screens/HomeScreenPage1.js

@@ -1,5 +1,14 @@
 import * as React from "react";
-import { Icon, useTheme, Text, Card, Layout } from "@ui-kitten/components";
+import {
+    Icon,
+    useTheme,
+    Text,
+    Card,
+    Layout,
+    List,
+    ListItem,
+    Button,
+} from "@ui-kitten/components";
 import {
     Image,
     Platform,
@@ -9,11 +18,41 @@ import {
     ImageBackground,
     Dimensions,
 } from "react-native";
+import { useFocusEffect } from "@react-navigation/native";
+import { useModel } from "flooks";
 import GoodsCard from "../components/GoodsCardVertical";
+import GoodsCardLarge from "../components/GoodsCard";
 
 const width = Dimensions.get("window").width;
+const height = Dimensions.get("window").height;
 export default function HomePage1(props) {
     const theme = useTheme();
+    const { httpPost, httpGet } = useModel("httpModel", true);
+    const [classifications, setClassifications] = React.useState([]);
+    const [selectId, changeSelectId] = React.useState(0);
+
+    useFocusEffect(
+        React.useCallback(() => {
+            httpGet("/classification/my").then((res) => {
+                setClassifications(res);
+                if (res.length > 0) {
+                    changeSelectId(res[0].id);
+                }
+            });
+        }, [])
+    );
+
+    React.useEffect(() => {
+        function getAllGoods() {
+            httpGet("/classification/allGoods", {
+                classificationId: selectId,
+            }).then((res) => {});
+        }
+
+        if (selectId) {
+            getAllGoods();
+        }
+    }, [selectId]);
 
     return (
         <Layout style={styles.tabContainer}>
@@ -32,9 +71,53 @@ export default function HomePage1(props) {
                     <GoodsCard />
                 </Layout>
             </Card>
+
+            <Layout style={styles.content}>
+                <List
+                    style={styles.container}
+                    data={classifications}
+                    renderItem={classificationItem}
+                />
+                <List
+                    style={styles.goodsContainer}
+                    data={classifications}
+                    renderItem={goodsItem}
+                />
+                <Button
+                    style={styles.addClassificat}
+                    appearance='classification'
+                >
+                    编辑分类
+                </Button>
+
+                <Button
+                    style={styles.addGoods}
+                    appearance='classification'
+                    status='danger'
+                    accessoryLeft={StarIcon}
+                />
+            </Layout>
         </Layout>
     );
 }
+const classificationItem = ({ item, index }) => (
+    <ListItem
+        appearance='classification'
+        title={(textprops) => (
+            <Text
+                {...textprops}
+                style={[textprops.style, { textAlign: "center" }]}
+            >
+                {item.name}
+            </Text>
+        )}
+    />
+);
+const StarIcon = (props) => <Icon {...props} name='plus-outline' />;
+
+const goodsItem = ({ item, index }) => (
+    <GoodsCardLarge appearance='classification' />
+);
 
 const styles = StyleSheet.create({
     tabContainer: {
@@ -52,4 +135,39 @@ const styles = StyleSheet.create({
     card: {
         alignItems: "center",
     },
+    container: {
+        backgroundColor: "#F0F0F0",
+        maxWidth: 93,
+        paddingBottom: 100,
+    },
+    content: {
+        flexDirection: "row",
+        minHeight: 200,
+        maxHeight: height - 200,
+    },
+    goodsContainer: {
+        flex: 1,
+        backgroundColor: "#FFFFFF",
+        paddingBottom: 100,
+    },
+    classificat: {
+        backgroundColor: "#F0F0F0",
+    },
+    addClassificat: {
+        width: 44,
+        alignSelf: "center",
+        marginTop: 20,
+        position: "absolute",
+        bottom: 30,
+        left: 30,
+    },
+    addGoods: {
+        width: 40,
+        height: 40,
+        alignSelf: "center",
+        marginTop: 20,
+        position: "absolute",
+        bottom: 30,
+        right: 30,
+    },
 });

screens/LoginScreen.js

@@ -114,6 +114,7 @@ export default function LoginScreen({ navigation, route }) {
                                     placeholder={login_pla_1}
                                     onChange={changePhone}
                                     textAlign='right'
+                                    labelStyle={{width:50}}
                                 />
 
                                 {/* 密码 */}
@@ -124,6 +125,7 @@ export default function LoginScreen({ navigation, route }) {
                                     placeholder={login_pla_2}
                                     onChange={changePassword}
                                     textAlign='right'
+                                    labelStyle={{width:50}}
                                 />
                             </Layout>
                         </Tab>
@@ -137,6 +139,7 @@ export default function LoginScreen({ navigation, route }) {
                                     placeholder={login_pla_1}
                                     onChange={changePhone}
                                     textAlign='right'
+                                    labelStyle={{width:50}}
                                 />
 
                                 {/* 验证码 */}
@@ -148,6 +151,7 @@ export default function LoginScreen({ navigation, route }) {
                                     onChange={changeCode}
                                     textAlign='right'
                                     btnText={login_btn_code_1}
+                                    labelStyle={{width:50}}
                                 />
                             </Layout>
                         </Tab>
@@ -210,6 +214,7 @@ const styles = StyleSheet.create({
     },
     tabMain: {
         // paddingVertical: 10,
+        width: "100%",
         paddingTop: 10,
         borderTopWidth: 1,
         borderColor: "#E5E5E5",
@@ -250,14 +255,14 @@ const styles = StyleSheet.create({
         paddingTop: 10,
     },
     layoutLeft: {
-        paddingLeft: 112,
+        paddingLeft: 70,
         flexDirection: "row",
         paddingBottom: 10,
     },
     btnList: {
         flexDirection: "row",
         justifyContent: "space-between",
-        paddingLeft: 100,
+        paddingLeft: 60,
         marginTop: -10,
         marginBottom: 10,
     },

screens/RegisterScreen.js

@@ -207,7 +207,8 @@ const styles = StyleSheet.create({
         justifyContent: "center",
     },
     form: {
-        paddingHorizontal: 26,
+        paddingHorizontal: 16,
         paddingVertical: 20,
+        alignSelf: "stretch",
     },
 });