0515

App.js

@@ -76,18 +76,18 @@ export default function App(props) {
         loadResourcesAndDataAsync();
     }, [props.skipLoadingScreen]);
 
-    const [initialRouteName, setInitialRouteName] = React.useState("");
-    React.useEffect(() => {
-        if (isLogin) {
-            if (status !== "PASS") {
-                setInitialRouteName("Guide");
-            } else {
-                setInitialRouteName("Root");
-            }
-        } else {
-            setInitialRouteName("Login");
-        }
-    }, [isLogin, guideStep]);
+    const [initialRouteName, setInitialRouteName] = React.useState("Guide");
+    // React.useEffect(() => {
+    //     if (isLogin) {
+    //         if (status !== "PASS") {
+    //             setInitialRouteName("Guide");
+    //         } else {
+    //             setInitialRouteName("Root");
+    //         }
+    //     } else {
+    //         setInitialRouteName("Login");
+    //     }
+    // }, [isLogin, guideStep]);
 
    
 

components/Badge.js

@@ -33,9 +33,9 @@ export default function Badge(props) {
                 status={props.status || "danger"}
                 style={[
                     {
-                        borderWidth: 1,
+                        borderWidth: props.appearance == "ghost" ? 0 : 1,
                         borderRadius: 20,
-                        paddingHorizontal: 3,
+                        paddingHorizontal: props.appearance == "ghost" ? 0 : 3,
                         borderColor: useColor,
                     },
                     props.style,

components/Comment.js

@@ -0,0 +1,153 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import {
+    Modal,
+    Card,
+    Text,
+    Button,
+    Layout,
+    Avatar,
+    Icon,
+} from "@ui-kitten/components";
+import Badge from "../components/Badge";
+import { useModel } from "flooks";
+export default function CommentCard(props) {
+    const { storeBackInfo } = useModel("wordsModel");
+    return (
+        <Card appearance='CommentCard' disabled={true}>
+            <Layout style={styles.user}>
+                <Avatar
+                    style={styles.userIcon}
+                    shape='rounded'
+                    source={{
+                        uri:
+                            "https://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg",
+                    }}
+                />
+
+                <Layout style={styles.main}>
+                    <Layout style={styles.layout}>
+                        <Text
+                            category='s1'
+                            ellipsizeMode='tail'
+                            numberOfLines={1}
+                            style={styles.flex1}
+                        >
+                            用户名
+                        </Text>
+                        <Text category='label' status='info'>
+                            2019-11-27
+                        </Text>
+                    </Layout>
+
+                    <Button
+                        appearance='ghost'
+                        accessoryLeft={StarIcon}
+                        style={styles.button}
+                    >
+                        9999+
+                    </Button>
+
+                    <Text category='label'>
+                        金额后认为害人害己而和我入口即化吾儿可教很温和人和网入口即,
+                        化我耳机sdfsdfsd考试的分开理就是老款的加菲，是大富科技谁看
+                        得见后方可了三等奖
+                    </Text>
+
+                    <Layout style={styles.badgeList}>
+                        <Badge
+                            style={styles.badge}
+                            appearance='ghost'
+                            status='primary'
+                        >
+                            麦辣鸡堡
+                        </Badge>
+                    </Layout>
+
+                    <Layout style={styles.backInfo}>
+                        <Text category='label'>
+                            {storeBackInfo}:
+                            <Text category='label' style={styles.backColor}>
+                                水电费记录删掉科技风科雷嘉是的溜缝胶SDK垃圾分
+                                类圣诞节疯狂老司机的风口浪尖当时考虑放假了圣诞节放克鲁赛
+                                德荆防颗粒的就是风口浪尖类似的减肥了可视v
+                            </Text>
+                        </Text>
+                    </Layout>
+                </Layout>
+            </Layout>
+        </Card>
+    );
+}
+const StarIcon = (props) => (
+    <Avatar source={require("../assets/images/zan.png")} {...props} />
+);
+
+const styles = StyleSheet.create({
+    user: {
+        flexDirection: "row",
+        borderBottomWidth: 1,
+        borderColor: "#EEEEEE",
+        paddingVertical: 10,
+    },
+    userIcon: {
+        width: 33,
+        height: 33,
+        marginRight: 3,
+    },
+    avatar: {
+        width: 80,
+        height: 80,
+        marginRight: 10,
+    },
+    commentImg: {
+        width: 167,
+        height: 167,
+        marginTop: 10,
+        borderRadius: 0,
+    },
+    layout: {
+        flexDirection: "row",
+    },
+    main: {
+        flex: 1,
+    },
+    flex1: {
+        flex: 1,
+    },
+    butContent: {
+        marginLeft: 6,
+    },
+    fontColor: {
+        color: "#B5B5B5",
+    },
+    miniButton: {
+        minWidth: 18,
+        minHeight: 18,
+        width: 18,
+        height: 18,
+        position: "absolute",
+        right: 10,
+        bottom: 5,
+    },
+    button: {
+        alignSelf: "flex-start",
+        marginTop: 5,
+        marginBottom: 0,
+    },
+    badgeList: {
+        flexDirection: "row",
+    },
+    badge: {
+        marginRight: 5,
+        marginTop: 4,
+    },
+    backInfo: {
+        backgroundColor: "rgba(248,236,214,1)",
+        padding: 7,
+        marginTop: 10,
+    },
+    backColor: {
+        color: "#6BCDFF",
+    },
+});

components/UpLoadImage.js

@@ -18,6 +18,7 @@ export default function UpLoadImage(props) {
                 appearance='imageButton'
                 onPress={() => {
                     _pickImage().then((img) => {
+                        console.log(img);
                         httpPost("/upload/base64", {
                             base64: img,
                         }).then((res) => {
@@ -67,10 +68,12 @@ const _pickImage = () => {
                     allowsEditing: true,
                     aspect: [1, 1],
                     quality: 1,
+                    base64: true,
                 });
                 if (!result.cancelled) {
+                    console.log(result.base64)
                     // let file = await FileSystem.readAsStringAsync(result.uri);
-                    resolve(result.uri);
+                    resolve(result.base64);
                 }
             }
         } catch (e) {

language/zh.js

@@ -124,5 +124,6 @@ export default {
     uplaodText:'上传',
     uplaodImg:'上传图片',
     removeTips:'确定要移除吗？移除后不可恢复',
-    autoBackText:'自动回复'
+    autoBackText:'自动回复',
+    storeBackInfo:"商家回复"
 };

mapping.json

@@ -699,6 +699,22 @@
                                     }
                                 }
                             }
+                        },
+                        "size": {
+                            "medium": {
+                                "minWidth": 0,
+                                "minHeight": 20,
+                                "iconWidth": 12,
+                                "iconHeight": 12,
+                                "paddingHorizontal": 5,
+                                "paddingVertical": 5,
+                                "borderRadius": "border-radius",
+                                "borderWidth": "border-width",
+                                "textMarginHorizontal": 2,
+                                "textFontSize": 12,
+                                "textFontWeight": "normal",
+                                "iconMarginHorizontal": 0
+                            }
                         }
                     }
                 },
@@ -1460,6 +1476,58 @@
                         "footerPaddingVertical": 5,
                         "borderWidth": 0
                     }
+                },
+                "CommentCard": {
+                    "mapping": {
+                        "accentHeight": 0,
+                        "bodyPaddingHorizontal": 13,
+                        "bodyPaddingVertical": 0,
+                        "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
+                            }
+                        }
+                    }
                 }
             }
         },

models/httpModel.js

@@ -3,7 +3,7 @@ import qs from "qs";
 import { AsyncStorage } from "react-native";
 export default {
     state: {
-        baseUrl: "http://192.168.50.91:8080",
+        baseUrl: "http://dingdong.izouma.com",
         token: "",
         config: {},
     },

navigation/BottomTabNavigator.js

@@ -4,6 +4,7 @@ import { useTheme, Text } from "@ui-kitten/components";
 import TabBarIcon from "../components/TabBarIcon";
 import LinksScreen from "../screens/LinksScreen";
 import HomeScreen from "../screens/HomeScreen";
+import UserScreen from "../screens/UserScreen";
 import { useModel } from "flooks";
 import { useFocusEffect } from "@react-navigation/native";
 
@@ -13,7 +14,7 @@ export default function BottomTabNavigator({ navigation, route }) {
     const theme = useTheme();
     const { tab1, tab2, tab3 } = useModel("wordsModel");
     return (
-        <BottomTab.Navigator headerMode='none' initialRouteName='Home'>
+        <BottomTab.Navigator headerMode='none' initialRouteName='User'>
             <BottomTab.Screen
                 name='Home'
                 component={HomeScreen}
@@ -48,17 +49,24 @@ export default function BottomTabNavigator({ navigation, route }) {
                     ),
                 }}
             />
+
+            <BottomTab.Screen
+                name='User'
+                component={UserScreen}
+                options={{
+                    tabBarLabel: ({ focused }) => (
+                        <Text
+                            category='c1'
+                            status={focused ? "primary" : "info"}
+                        >
+                            {tab3}
+                        </Text>
+                    ),
+                    tabBarIcon: ({ focused }) => (
+                        <TabBarIcon focused={focused} name='file-text' />
+                    ),
+                }}
+            />
         </BottomTab.Navigator>
     );
 }
-
-function getHeaderTitle(route) {
-    const routeName = route.state?.routes[route.state.index]?.name ?? "Home";
-
-    switch (routeName) {
-        case "Home":
-            return "How to get started";
-        case "Links":
-            return "Links to learn more";
-    }
-}

navigation/GuideStackNavigator.js

@@ -30,20 +30,20 @@ export default function GuideStackNavigator() {
     const { guideStep } = useModel("userModel");
     const initial = React.useMemo(() => {
         console.log(guideStep);
-        // return "AddGoods";
-        if (guideStep == 0) {
-            return "Guide1";
-        } else if (guideStep == 1) {
-            return "Guide2";
-        } else if (guideStep == 2) {
-            return "Guide3";
-        } else if (guideStep == 3) {
-            return "Guide4";
-        } else if (guideStep == 4) {
-            return "StoreAudit";
-        } else {
-            return "Guide1";
-        }
+        return "Guide1";
+        // if (guideStep == 0) {
+        //     return "Guide1";
+        // } else if (guideStep == 1) {
+        //     return "Guide2";
+        // } else if (guideStep == 2) {
+        //     return "Guide3";
+        // } else if (guideStep == 3) {
+        //     return "Guide4";
+        // } else if (guideStep == 4) {
+        //     return "StoreAudit";
+        // } else {
+        //     return "Guide1";
+        // }
     }, [guideStep]);
 
     return (

screens/EditBannerScreen.js

@@ -30,7 +30,6 @@ export default function EditBannerScreen({ navigation, route }) {
     const theme = useTheme();
     const { changeBackground } = useModel("barModel");
     const { banner, logo, uploadStoreImg } = useModel("userModel");
-
     const [img, changeImg] = React.useState("");
     const [type, setType] = React.useState("banner");
     const { showDialog } = useModel("dialogModel");

screens/HomeScreen.js

@@ -34,6 +34,7 @@ import GoodsCard from "../components/GoodsCard";
 import Textarea from "react-native-textarea";
 import HomePage1 from "./HomeScreenPage1";
 import HomePage2 from "./HomeScreenPage2";
+import HomePage3 from "./HomeScreenPage3";
 import * as RootNavigation from "../navigation/RootNavigation.js";
 
 const NextIcon = (props) => <Icon {...props} name='arrow-ios-downward' />;
@@ -77,7 +78,7 @@ export default function HomeScreen() {
 
     const { showDialog } = useModel("dialogModel", true);
     const { httpPost } = useModel("httpModel", true);
-    const [selectedIndex, setSelectedIndex] = React.useState(1);
+    const [selectedIndex, setSelectedIndex] = React.useState(2);
     const navigation = useNavigation();
 
     useFocusEffect(
@@ -254,9 +255,7 @@ export default function HomeScreen() {
                                 appearance='homeTab'
                                 style={styles.tab}
                             >
-                                <Layout style={styles.tabContainer}>
-                                    <Text category='h5'>TRANSACTIONS</Text>
-                                </Layout>
+                                <HomePage3 />
                             </Tab>
                         </TabView>
                     </Layout>

screens/HomeScreenPage1.js

@@ -143,7 +143,6 @@ const styles = StyleSheet.create({
     content: {
         flexDirection: "row",
         minHeight: 200,
-        maxHeight: height - 200,
     },
     goodsContainer: {
         flex: 1,

screens/HomeScreenPage2.js

@@ -20,16 +20,15 @@ import {
 } from "react-native";
 import { useFocusEffect } from "@react-navigation/native";
 import { useModel } from "flooks";
-import GoodsCard from "../components/GoodsCardVertical";
-import GoodsCardLarge from "../components/GoodsCard";
+import CommentCard from "../components/Comment";
 import Badge from "../components/Badge";
 
 const width = Dimensions.get("window").width;
 const height = Dimensions.get("window").height;
-export default function HomePage1(props) {
+export default function HomePage2(props) {
     const theme = useTheme();
     const { httpPost, httpGet } = useModel("httpModel", true);
-    const [commentList, setCommentList] = React.useState([]);
+    const [commentList, setCommentList] = React.useState([{}, {}, {}]);
     const [selectId, changeSelectId] = React.useState(0);
     const { showDialog } = useModel("dialogModel", true);
 
@@ -45,7 +44,6 @@ export default function HomePage1(props) {
         }, [])
     );
 
-
     return (
         <Layout style={styles.tabContainer}>
             <Layout style={styles.bageList}>
@@ -114,19 +112,7 @@ export default function HomePage1(props) {
         </Layout>
     );
 }
-const classificationItem = ({ item, index }) => (
-    <ListItem
-        appearance='classification'
-        title={(textprops) => (
-            <Text
-                {...textprops}
-                style={[textprops.style, { textAlign: "center" }]}
-            >
-                {item.name}
-            </Text>
-        )}
-    />
-);
+const classificationItem = ({ item, index }) => <CommentCard />;
 const StarIcon = (props) => <Icon {...props} name='plus-outline' />;
 
 const goodsItem = ({ item, index }) => (
@@ -138,6 +124,7 @@ const styles = StyleSheet.create({
         backgroundColor: "#fff",
         paddingTop: 20,
         paddingBottom: 80,
+        height: "100%",
     },
     bageList: {
         flexDirection: "row",
@@ -161,7 +148,5 @@ const styles = StyleSheet.create({
     backButtn: {
         marginLeft: 10,
     },
-    container: {
-        height: 300,
-    },
+    container: {},
 });

screens/HomeScreenPage3.js

@@ -0,0 +1,76 @@
+import * as React from "react";
+import {
+    Icon,
+    useTheme,
+    Text,
+    Card,
+    Layout,
+    List,
+    ListItem,
+    Button,
+} from "@ui-kitten/components";
+import {
+    Image,
+    Platform,
+    StyleSheet,
+    TouchableOpacity,
+    View,
+    ImageBackground,
+    Dimensions,
+} from "react-native";
+import { useFocusEffect } from "@react-navigation/native";
+import { useModel } from "flooks";
+import CommentCard from "../components/Comment";
+import Badge from "../components/Badge";
+
+const width = Dimensions.get("window").width;
+const height = Dimensions.get("window").height;
+export default function HomePage3(props) {
+    const theme = useTheme();
+    const { httpPost, httpGet } = useModel("httpModel", true);
+    const [commentList, setCommentList] = React.useState([{}, {}, {}]);
+    const [selectId, changeSelectId] = React.useState(0);
+    const { showDialog } = useModel("dialogModel", true);
+
+    const { editText, autoBackText } = useModel("wordsModel");
+    useFocusEffect(
+        React.useCallback(() => {
+            // httpGet("/classification/my").then((res) => {
+            //     setClassifications(res);
+            //     if (res.length > 0) {
+            //         changeSelectId(res[0].id);
+            //     }
+            // });
+        }, [])
+    );
+
+    return (
+        <Layout style={styles.tabContainer}>
+            <Layout style={styles.top}>
+                <Layout style={styles.imgList}>
+                    
+                </Layout>
+            </Layout>
+        </Layout>
+    );
+}
+const classificationItem = ({ item, index }) => <CommentCard />;
+const StarIcon = (props) => <Icon {...props} name='plus-outline' />;
+
+const goodsItem = ({ item, index }) => (
+    <GoodsCardLarge appearance='classification' />
+);
+
+const styles = StyleSheet.create({
+    tabContainer: {
+        backgroundColor: "#fff",
+        height: "100%",
+    },
+    top: {
+        paddingVertical: 20,
+        paddingVertical: 13,
+    },
+    imgList: {
+        flexDirection: "row",
+    },
+});

screens/UserScreen.js

@@ -0,0 +1,108 @@
+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 Badge from "../components/Badge";
+import {
+    Layout,
+    Tab,
+    TabView,
+    Text,
+    useTheme,
+    Button,
+    Card,
+    Icon,
+    Menu,
+    MenuItem,
+    OverflowMenu,
+    TopNavigation,
+    TopNavigationAction,
+    Modal,
+    MenuGroup
+} from "@ui-kitten/components";
+import FormInput from "../components/FormInput";
+import { useFocusEffect, useNavigation } from "@react-navigation/native";
+import ScrollPage from "../components/ScrollPage";
+import * as RootNavigation from "../navigation/RootNavigation.js";
+
+const NextIcon = (props) => <Icon {...props} name='arrow-ios-downward' />;
+
+export default function UserScreen() {
+    const theme = useTheme();
+    const { changeBackground } = useModel("barModel");
+    const {
+        showName,
+        logo,
+        introduction,
+        proclamation,
+        updateMerchant,
+        banner,
+    } = useModel("userModel");
+
+    const {
+        homeBar,
+        homeTip1,
+        homeTitle1,
+        homeTitle2,
+        homeTitle3,
+        homeTip2,
+        homeTip3,
+        homeTab1,
+        homeTab2,
+        homeTab3,
+    } = useModel("wordsModel");
+    const [bannerImg, changeBannerImg] = React.useState("");
+
+    useFocusEffect(
+        React.useCallback(() => {
+            changeBackground(theme["color-primary-500"]);
+        }, [])
+    );
+
+    const renderBackAction = () => <Text category='h6'>{homeBar}</Text>;
+
+    return (
+        <>
+            <ScrollPage>
+                <Layout style={styles.container} level='1'>
+                    <Menu style={styles.menu}>
+                        <MenuItem title='Users' accessoryRight={NextIcon} />
+                        <MenuItem title='Orders' accessoryRight={NextIcon} />
+                        <MenuItem
+                            title='Transactions'
+                            accessoryRight={NextIcon}
+                        />
+
+                        <MenuGroup title='Akveo React Native'>
+                            <MenuItem title='UI Kitten' />
+                            <MenuItem title='Kitten Tricks' />
+                        </MenuGroup>
+                    </Menu>
+                </Layout>
+            </ScrollPage>
+        </>
+    );
+}
+
+const StarIcon = (props) => <Icon {...props} name='star' />;
+
+const ForwardIcon = (props) => <Icon {...props} name='arrow-ios-forward' />;
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
+    menu: {
+        flex: 1,
+        margin: 8,
+    },
+});