0517

App.js

@@ -21,6 +21,7 @@ import {
     CardStyleInterpolators,
 } from "@react-navigation/stack";
 import Dialog from "./components/Dialog";
+import Loading from "./components/Loading";
 
 import { useModel } from "flooks";
 import * as models from "./models";
@@ -83,6 +84,7 @@ export default function App(props) {
                     theme={{ ...eva.light, ...theme }}
                     customMapping={customMapping}
                 >
+                    <Loading />
                     <Dialog />
                     <Layout style={{ flex: 1 }}>
                         <NavigationContainer ref={navigationRef}>

components/Badge.js

@@ -29,7 +29,7 @@ export default function Badge(props) {
     } else {
         return (
             <Text
-                category='label'
+                category='h1'
                 status={props.status || "danger"}
                 style={[
                     {

components/Comment.js

@@ -35,7 +35,7 @@ export default function CommentCard(props) {
                         >
                             用户名
                         </Text>
-                        <Text category='label' status='info'>
+                        <Text category='h1' status='info'>
                             2019-11-27
                         </Text>
                     </Layout>
@@ -48,7 +48,7 @@ export default function CommentCard(props) {
                         9999+
                     </Button>
 
-                    <Text category='label'>
+                    <Text category='h1'>
                         金额后认为害人害己而和我入口即化吾儿可教很温和人和网入口即,
                         化我耳机sdfsdfsd考试的分开理就是老款的加菲，是大富科技谁看
                         得见后方可了三等奖
@@ -65,9 +65,9 @@ export default function CommentCard(props) {
                     </Layout>
 
                     <Layout style={styles.backInfo}>
-                        <Text category='label'>
+                        <Text category='h1'>
                             {storeBackInfo}:
-                            <Text category='label' style={styles.backColor}>
+                            <Text category='h1' style={styles.backColor}>
                                 水电费记录删掉科技风科雷嘉是的溜缝胶SDK垃圾分
                                 类圣诞节疯狂老司机的风口浪尖当时考虑放假了圣诞节放克鲁赛
                                 德荆防颗粒的就是风口浪尖类似的减肥了可视v

components/EmptyComponent.js

@@ -6,7 +6,7 @@ export default function EmptyComponent(props) {
     const { nothingTips } = useModel("wordsModel");
     return (
         <Text
-            appearance='label'
+            category='h1'
             status='info'
             style={{ textAlign: "center", backgroundColor: "transparent" }}
         >

components/GoodsCard.js

@@ -55,7 +55,7 @@ export default function GoodsCard(props) {
                         <Text category='h6' status='danger'>
                             ¥{discountAmount}{" "}
                             <Text
-                                category='label'
+                                category='h1'
                                 status='info'
                                 style={{ textDecorationLine: "line-through" }}
                             >

components/GoodsCardVertical.js

@@ -47,7 +47,7 @@ export default function GoodsCard(props) {
                         <Text category='h6' status='danger'>
                             ¥{discountAmount}{" "}
                             <Text
-                                category='label'
+                                category='h1'
                                 status='info'
                                 style={{ textDecorationLine: "line-through" }}
                             >

components/Loading.js

@@ -0,0 +1,77 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import {
+    Modal,
+    Card,
+    Text,
+    Button,
+    Layout,
+    Spinner,
+    Icon,
+} from "@ui-kitten/components";
+import { useModel, setModel } from "flooks";
+import loadingModel from "../models/loadingModel";
+import Textarea from "react-native-textarea";
+
+setModel("loadingModel", loadingModel);
+
+export default function Loading(props) {
+    const { tip, confirm, cancel, getWordsStr } = useModel("wordsModel");
+
+    const { show, title, status } = useModel("loadingModel");
+
+    return (
+        <Modal visible={show} backdropStyle={styles.backdrop}>
+            {status === "loading" && (
+                <Layout style={styles.loadingBox}>
+                    <Spinner size='giant' status='control' />
+                    <Text style={styles.text}>{getWordsStr("loading")}</Text>
+                </Layout>
+            )}
+
+            {status == "success" && (
+                <Layout style={styles.loadingBox}>
+                    <Icon style={styles.icon} name='checkmark' fill='#fff' />
+                    <Text style={styles.text}>{title}</Text>
+                </Layout>
+            )}
+
+            {status == "warn" && (
+                <Layout style={styles.warning}>
+                    <Text style={{ color: "#fff", textAlign: "center" }}>
+                        {title}
+                    </Text>
+                </Layout>
+            )}
+        </Modal>
+    );
+}
+
+const styles = StyleSheet.create({
+    backdrop: {
+        // backgroundColor: "rgba(0, 0, 0, 0.5)",
+    },
+    loadingBox: {
+        width: 120,
+        height: 120,
+        borderRadius: 10,
+        backgroundColor: "rgba(0,0,0,0.8)",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    text: {
+        color: "#fff",
+        marginTop: 10,
+    },
+    icon: {
+        width: 60,
+        height: 60,
+    },
+    warning: {
+        paddingHorizontal: 15,
+        paddingVertical: 5,
+        backgroundColor: "rgba(0,0,0,0.8)",
+        borderRadius: 3,
+        marginHorizontal: 20,
+    },
+});

components/OrderCard.js

@@ -0,0 +1,206 @@
+import React from "react";
+import { StyleSheet, Dimensions } from "react-native";
+import {
+    Modal,
+    Card,
+    Text,
+    Button,
+    Layout,
+    Avatar,
+    MenuGroup,
+    MenuItem,
+    Menu,
+} from "@ui-kitten/components";
+import { useModel } from "flooks";
+export default function OrderCard(props) {
+    const {
+        orderInfo2,
+        orderInfo3,
+        orderInfo4,
+        orderInfo5,
+        orderInfo6,
+        getWordsStr,
+        orderButton1,
+        orderButton2,
+        overTips,
+    } = useModel("wordsModel");
+    const { showDialog } = useModel("dialogModel");
+    const { receivedOrder } = useModel("orderInfoModel");
+    const { info } = props;
+    const { id, payMethod, orderTime, merchantStatus } = info || {};
+
+    const Footer = (props) => (
+        <Layout {...props} style={[props.style, styles.footerContainer]}>
+            <Button
+                style={styles.footerControl}
+                appearance='outline'
+                onPress={() => {
+                    showDialog({
+                        bodyText: overTips,
+                        status: "danger",
+                        cancelable: true,
+                        confirmCallback: () => {
+                            receivedOrder(id,false).then((res) => {
+                                updateInfo(res)
+                            });
+                        },
+                    });
+                }}
+            >
+                {orderButton1}
+            </Button>
+            <Button
+                style={styles.footerControl}
+                onPress={() => {
+                    receivedOrder(id,true).then((res) => {
+                        updateInfo(res)
+                    });
+                }}
+                appearance='outline'
+            >
+                {orderButton2}
+            </Button>
+        </Layout>
+    );
+
+    return (
+        <Card
+            appearance='orderCard'
+            disabled={true}
+            style={[props.style]}
+            footer={Footer}
+        >
+            <Text>{getWordsStr(merchantStatus)}</Text>
+            <Layout style={styles.orderItem1}>
+                <Text category='c2'>{id}</Text>
+                <Text category='c2'>
+                    {orderInfo2}:{orderTime}
+                </Text>
+            </Layout>
+            <Layout style={styles.orderItem1}>
+                <Text category='h6'>用户名称</Text>
+                <Text category='h6'>{getWordsStr(payMethod)}</Text>
+            </Layout>
+            <Layout style={styles.orderItem1}>
+                <Text category='c2'>电话号码</Text>
+                <Button appearance='outline'>{orderInfo3}</Button>
+            </Layout>
+
+            <Layout style={styles.orderItem2}>
+                <Text category='c2' style={styles.leftText}>
+                    {orderInfo4}
+                </Text>
+                <Text category='h1'>
+                    南京市建邺区奥体大街198号同进大南京市建邺区奥体大街198号同进大厦三单元三楼1005室南京市建邺区奥体大街198号同进大厦三单元三楼1005室厦三单元三楼1005室
+                    fsdfdsfsdf
+                </Text>
+            </Layout>
+
+            <Layout style={styles.orderItem2}>
+                <Text category='c2' style={styles.leftText}>
+                    {orderInfo5}
+                </Text>
+                <Layout style={styles.lay}>
+                    <MenuGroup
+                        appearance='orderProduct'
+                        title={() => MenuTitle("圣诞节副科", "¥9999.99")}
+                        style={styles.menuGroup}
+                    >
+                        <MenuItem
+                            disabled={true}
+                            style={styles.menuItem}
+                            title={lsitMenu}
+                        />
+                    </MenuGroup>
+                </Layout>
+            </Layout>
+
+            <Layout style={styles.orderItem2}>
+                <Text category='c2' style={styles.leftText}>
+                    {orderInfo6}
+                </Text>
+            </Layout>
+        </Card>
+    );
+}
+
+const MenuTitle = (title, sub, num, index) => (
+    <Layout style={styles.menuTitle} key={index || 0}>
+        <Text category='h1' style={styles.sub}>
+            {title}
+        </Text>
+        {num && (
+            <Text category='h1' style={[styles.sub, styles.center]}>
+                {num}
+            </Text>
+        )}
+        <Text category='h1' style={[styles.sub, styles.right]}>
+            {sub}
+        </Text>
+    </Layout>
+);
+
+const lsitMenu = () => {
+    return (
+        <Layout style={styles.menuItem}>
+            {[1, 2].map((item, index) => {
+                return MenuTitle("圣诞节副科" + item, "¥9999.99", 2, index + 1);
+            })}
+        </Layout>
+    );
+};
+
+const styles = StyleSheet.create({
+    orderItem1: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        marginBottom: 10,
+    },
+    orderItem2: {
+        alignItems: "flex-start",
+        flexDirection: "row",
+        marginBottom: 15,
+    },
+    leftText: {
+        flexShrink: 0,
+        marginRight: 8,
+        minWidth: 60,
+    },
+    menuGroup: {
+        padding: 0,
+        margin: 0,
+    },
+    lay: {
+        flex: 1,
+    },
+    menuTitle: {
+        flexDirection: "row",
+        flex: 1,
+    },
+    footerContainer: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+    },
+    footerControl: {
+        width: 112,
+        marginLeft: 5,
+    },
+    sub: {
+        flex: 1,
+        flexShrink: 0,
+    },
+    menuItem: {
+        flex: 1,
+        // paddingHorizontal: 0,
+        // paddingVertical: 0,
+        // paddingLeft: 0,
+        // marginTop: 5,
+        // marginHorizontal: 5,
+    },
+    right: {
+        textAlign: "right",
+    },
+    center: {
+        textAlign: "center",
+    },
+});

language/zh.js

@@ -110,6 +110,20 @@ export default {
     userTitle61: "余额查询",
     userTitle62: "账单查询",
 
+    orderTitleBtn1: "手动接单",
+    orderTitleBtn2: "编辑语音",
+
+    orderInfo1: "流水号",
+    orderInfo2: "订单时间",
+    orderInfo3: "联系客户",
+    orderInfo4: "详细地址",
+    orderInfo5: "订单商品",
+    orderInfo6: "备注",
+    orderButton1: "拒单",
+    orderButton2: "接单",
+    overTips:"确定要拒单吗？",
+    orderSuceess:"操作成功",
+
     //公共的文字
 
     changeToEnglish: "切换到泰文",
@@ -153,10 +167,19 @@ export default {
     nothingTips: "暂无数据",
     fullReduction1: "满",
     fullReduction2: "减",
+    loading:'加载中',
 
-    NOTRECEIVED:'未接单',
-    RECEIVED:'已接单',
-    REJECTED:'退单',
-    COMPLETED:'已完成'
-
+    NOT_RECEIVED: "未接单",
+    RECEIVED: "已接单",
+    REJECTED: "退单",
+    COMPLETED: "已完成",
+    UNPAID: "未支付",
+    PAID: "已支付",
+    RATED: "待评价",
+    CANCELLED: "已取消",
+    REFUNDED_PENDING: "申请退款中",
+    REFUNDED: "已退款",
+    ALI_PAY: "支付宝",
+    CASH_DELIVERY: "货到付款",
+    CREDIT_CARD: "信用卡",
 };

mapping.json

@@ -1528,6 +1528,60 @@
                             }
                         }
                     }
+                },
+                "orderCard": {
+                    "mapping": {
+                        "accentHeight": 0,
+                        "bodyPaddingHorizontal": 13,
+                        "bodyPaddingVertical": 20,
+                        "borderColor": "transparent",
+                        "borderRadius": 3,
+                        "footerPaddingHorizontal": 13,
+                        "footerPaddingVertical": 10,
+                        "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
+                            }
+                        }
+                    }
                 }
             }
         },
@@ -1634,6 +1688,24 @@
                     "mapping": {
                         "paddingHorizontal": 0
                     }
+                },
+                "orderProduct": {
+                    "mapping": {
+                        "paddingHorizontal": 0,
+                        "paddingVertical": 2,
+                        "backgroundColor": "background-basic-color-1",
+                        "indicatorWidth": 0,
+                        "indicatorBackgroundColor": "transparent",
+                        "titleMarginHorizontal": 0,
+                        "titleFontSize": "text-label-font-size",
+                        "titleFontWeight": "text-subtitle-2-font-weight",
+                        "titleFontFamily": "text-subtitle-2-font-family",
+                        "titleColor": "text-basic-color",
+                        "iconWidth": 12,
+                        "iconHeight": 12,
+                        "iconMarginHorizontal": 8,
+                        "iconTintColor": "text-hint-color"
+                    }
                 }
             }
         },
@@ -1809,9 +1881,6 @@
                         },
                         "c2": {
                             "default": false
-                        },
-                        "label": {
-                            "default": false
                         }
                     },
                     "status": {
@@ -1848,8 +1917,8 @@
                     "variantGroups": {
                         "category": {
                             "h1": {
-                                "fontSize": "text-heading-1-font-size",
-                                "fontWeight": "text-heading-1-font-weight",
+                                "fontSize": "text-label-font-size",
+                                "fontWeight": "text-label-font-weight",
                                 "fontFamily": "text-heading-1-font-family"
                             },
                             "h2": {
@@ -1906,11 +1975,6 @@
                                 "fontSize": "text-caption-2-font-size",
                                 "fontWeight": "text-caption-2-font-weight",
                                 "fontFamily": "text-caption-2-font-family"
-                            },
-                            "label": {
-                                "fontSize": "text-label-font-size",
-                                "fontWeight": "text-label-font-weight",
-                                "fontFamily": "text-label-font-family"
                             }
                         },
                         "status": {

models/httpModel.js

@@ -55,7 +55,7 @@ export default {
             }
             return Promise.reject(error.response.data);
         },
-        httpGet(url, params) {
+        httpGet(url, params, needWarning) {
             const { getAxiosInstance } = model();
             const { warnning } = model("loadingModel");
             params = params || {};
@@ -68,11 +68,14 @@ export default {
                         resolve(res.data);
                     })
                     .catch((e) => {
+                        if (needWarning) {
+                            warnning(e.error);
+                        }
                         reject(e);
                     });
             });
         },
-        httpPost(url, body, options) {
+        httpPost(url, body, options, needWarning) {
             const { getAxiosInstance } = model();
             options = options || {};
             body = body || {};
@@ -89,6 +92,9 @@ export default {
                     })
                     .catch((e) => {
                         reject(e);
+                        if (needWarning) {
+                            warnning(e.error);
+                        }
                     });
             });
         },

models/index.js

@@ -2,11 +2,11 @@ import { setModel } from "flooks";
 import httpModel from "./httpModel";
 import userModel from "./userModel";
 import wordsModel from "./wordsModel";
-import loadingModel from "./loadingModel";
 import barModel from "./barModel";
+import orderInfoModel from "./orderInfoModel";
 
 setModel("barModel", barModel);
 setModel("userModel", userModel);
-setModel("loadingModel", loadingModel);
 setModel("wordsModel", wordsModel);
 setModel("httpModel", httpModel);
+setModel("orderInfoModel", orderInfoModel);

models/loadingModel.js

@@ -4,111 +4,53 @@ import { View, Text, ActivityIndicator, StyleSheet } from "react-native";
 //加载页
 export default {
     state: {
-        status: "",
-        title: "",
+        status: "loading",
+        title: "成功",
         show: false,
-        loadingId: 0,
-        successId: 0,
+        time: -1,
     },
     actions: ({ model, setState }) => ({
         loading() {
-            console.log("loading");
-            const { clear } = model();
-            clear();
-            TopviewGetInstance()
-                .add(<LoadingComent />)
-                .then((id) => {
-                    setState({
-                        status: "loading",
-                        show: true,
-                        loadingId: id,
-                    });
-                });
+            setState({
+                status: "loading",
+                show: true,
+                time: -1,
+            });
         },
         success(title) {
-            const { clear } = model();
-            clear();
-            TopviewGetInstance()
-                .add(<SuccessComent title={title} />)
-                .then((id) => {
-                    setState({
-                        status: "success",
-                        title: title,
-                        show: true,
-                        successId: id,
-                    });
-                    setTimeout(() =>  clear(), 1500);
-                });
+            setState({
+                status: "success",
+                title: title,
+                show: true,
+                time: 4000,
+            });
+            const { setTime } = model();
+            setTime();
         },
         warnning(title) {
-            const { clear } = model();
-            clear();
             setState({
                 status: "warn",
                 title: title,
                 show: true,
+                time: 4000,
             });
-            Tip.show(title || "", 1500, false);
-            setTimeout(() => clear(), 1500);
+            const { setTime } = model();
+            setTime();
         },
-        clear() {
-            const { show, status, loadingId, successId } = model();
-            if (show) {
-                if (status === "loading") {
-                    TopviewGetInstance().remove(loadingId);
-                } else if (status === "success") {
-                    TopviewGetInstance().remove(successId);
-                }
-                setState({
-                    show: false,
-                });
+        setTime() {
+            const { time, show, clear } = model();
+            if (time > 0 && show) {
+                setTimeout(() => {
+                    if (show) {
+                        clear();
+                    }
+                }, time);
             }
         },
+        clear() {
+            setState({
+                show: false,
+            });
+        },
     }),
 };
-
-const LoadingComent = () => (
-    <View style={styles.box}>
-        <View style={styles.loadingBox}>
-            <ActivityIndicator size='large' color='#fff' />
-            <Text style={styles.text}>加载中</Text>
-        </View>
-    </View>
-);
-const SuccessComent = (props) => (
-    <View style={styles.box}>
-        <View style={styles.loadingBox}>
-            <Icon
-                source={require("beeshell/dist/common/images/icons/check.png")}
-                size={60}
-                tintColor='#fff'
-            />
-            <Text style={styles.text}>{props.title || "成功"}</Text>
-        </View>
-    </View>
-);
-
-const styles = StyleSheet.create({
-    box: {
-        position: "absolute",
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0,
-        backgroundColor: "rgba(255,255,255,0)",
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    loadingBox: {
-        width: 120,
-        height: 120,
-        borderRadius: 10,
-        backgroundColor: "rgba(0,0,0,0.8)",
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    text: {
-        color: "#fff",
-        marginTop: 5,
-    },
-});

models/orderInfoModel.js

@@ -0,0 +1,22 @@
+//订单信息操作
+export default {
+    state: {},
+    actions: ({ model, setState }) => ({
+        //商家手动接单(接单，拒单)
+        receivedOrder(orderId, pass) {
+            const { loading, success, warnning } = model("loadingModel");
+            const { httpGet } = model("httpModel");
+            const { orderSuceess } = model("wordsModel");
+            return httpGet(
+                "/orderInfo/received",
+                {
+                    orderId,
+                    pass,
+                },
+                true
+            ).then((res) => {
+                success(orderSuceess);
+            });
+        },
+    }),
+};

models/routersModel.js

@@ -1,110 +0,0 @@
-const router = {
-    type: 'tab',
-  
-    getInitialState({ routeNames, routeParamList }) {
-      const index =
-        options.initialRouteName === undefined
-          ? 0
-          : routeNames.indexOf(options.initialRouteName);
-  
-      return {
-        stale: false,
-        type: 'tab',
-        key: shortid(),
-        index,
-        routeNames,
-        routes: routeNames.map(name => ({
-          name,
-          key: name,
-          params: routeParamList[name],
-        })),
-      };
-    },
-  
-    getRehydratedState(partialState, { routeNames, routeParamList }) {
-      const state = partialState;
-  
-      if (state.stale === false) {
-        return state as NavigationState;
-      }
-  
-      const routes = state.routes
-        .filter(route => routeNames.includes(route.name))
-        .map(
-          route =>
-            ({
-              ...route,
-              key: route.key || `${route.name}-${shortid()}`,
-              params:
-                routeParamList[route.name] !== undefined
-                  ? {
-                      ...routeParamList[route.name],
-                      ...route.params,
-                    }
-                  : route.params,
-            } as Route<string>)
-        );
-  
-      return {
-        stale: false,
-        type: 'tab',
-        key: shortid(),
-        index:
-          typeof state.index === 'number' && state.index < routes.length
-            ? state.index
-            : 0,
-        routeNames,
-        routes,
-      };
-    },
-  
-    getStateForRouteNamesChange(state, { routeNames }) {
-      const routes = state.routes.filter(route =>
-        routeNames.includes(route.name)
-      );
-  
-      return {
-        ...state,
-        routeNames,
-        routes,
-        index: Math.min(state.index, routes.length - 1),
-      };
-    },
-  
-    getStateForRouteFocus(state, key) {
-      const index = state.routes.findIndex(r => r.key === key);
-  
-      if (index === -1 || index === state.index) {
-        return state;
-      }
-  
-      return { ...state, index };
-    },
-  
-    getStateForAction(state, action) {
-      switch (action.type) {
-        case 'NAVIGATE': {
-          const index = state.routes.findIndex(
-            route => route.name === action.payload.name
-          );
-  
-          if (index === -1) {
-            return null;
-          }
-  
-          return { ...state, index };
-        }
-  
-        default:
-          return BaseRouter.getStateForAction(state, action);
-      }
-    },
-  
-    shouldActionChangeFocus() {
-      return false;
-    },
-  };
-  
-  const SimpleRouter = () => router;
-  
-  export default SimpleRouter;

models/userModel.js

@@ -1,3 +1,5 @@
+//用户状态 （商家状态，全局）
+
 export default {
     state: {
         mid: 0,
@@ -16,7 +18,7 @@ export default {
             const { count } = model();
             setState({ count: count - 1 });
         },
-        getUserInfo() {
+        async getUserInfo() {
             const { updateUser } = model();
             const { httpGet } = model("httpModel");
             return httpGet("/merchant/my").then((res) => {

models/wordsModel.js

@@ -10,5 +10,10 @@ export default {
             });
             setState({ ...words });
         },
+        getWordsStr(key) {
+            const allWords = model();
+            return allWords[key];
+        },
     }),
-};
+};
+//国际化

navigation/BottomTabNavigator.js

@@ -14,7 +14,7 @@ export default function BottomTabNavigator({ navigation, route }) {
     const theme = useTheme();
     const { tab1, tab2, tab3 } = useModel("wordsModel");
     return (
-        <BottomTab.Navigator headerMode='none' initialRouteName='Order'>
+        <BottomTab.Navigator headerMode='none' initialRouteName='Home'>
             <BottomTab.Screen
                 name='Home'
                 component={HomeScreen}

screens/HomeScreen.js

@@ -13,8 +13,6 @@ import { useModel } from "flooks";
 import Badge from "../components/Badge";
 import {
     Layout,
-    Tab,
-    TabView,
     Text,
     useTheme,
     Button,
@@ -37,7 +35,13 @@ import HomePage1 from "./HomeScreenPage1";
 import HomePage2 from "./HomeScreenPage2";
 import HomePage3 from "./HomeScreenPage3";
 import * as RootNavigation from "../navigation/RootNavigation.js";
-
+import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
+const Tab = createMaterialTopTabNavigator();
+const labelText = (focused, title) => (
+    <Text category='s1' status={focused ? "primary" : ""}>
+        {title}
+    </Text>
+);
 const NextIcon = (props) => <Icon {...props} name='arrow-ios-downward' />;
 
 const SearchIcon = (props) => <Icon {...props} name='search-outline' />;

screens/HomeScreenPage2.js

@@ -62,7 +62,7 @@ export default function HomePage2(props) {
             <Layout style={styles.back}>
                 <Text
                     style={styles.backText}
-                    category='label'
+                    category='h1'
                     status='info'
                     ellipsizeMode='tail'
                     numberOfLines={1}

screens/OrderListScreen.js

@@ -18,8 +18,13 @@ import {
 } from "@ui-kitten/components";
 import { useModel } from "flooks";
 import NavHeaderBar from "../components/NavHeaderBar";
+import { useFocusEffect } from "@react-navigation/native";
+import OrderCard from "../components/OrderCard";
+import EmptyComponent from "../components/EmptyComponent";
+export default function OrderListScreen({ route }) {
+    // const route = useRoute();
 
-export default function OrderListScreen() {
+    const { httpGet } = useModel("httpModel");
     const {
         tab2,
         fullReduction2,
@@ -32,7 +37,49 @@ export default function OrderListScreen() {
         successText,
         removeTips,
     } = useModel("wordsModel");
-    return <List></List>;
+    const [pageName, changeName] = React.useState(""); //状态
+    const [orderList, SetorderList] = React.useState([]); //订单列表
+
+    useFocusEffect(
+        React.useCallback(() => {
+            console.log(route);
+            changeName(route.name);
+            if (route.name) {
+                getOrderList();
+            }
+        }, [])
+    );
+
+    function getOrderList() {
+        SetorderList([]);
+        httpGet("/orderInfo/my").then((res) => {
+            SetorderList(res.content);
+        });
+    }
+
+    const orderItem = ({ item, index }) => (
+        <OrderCard
+            style={{ marginHorizontal: 10, marginBottom: 15 }}
+            appearance='classification'
+            key={item.id}
+            info={item}
+        />
+    );
+
+    return (
+        <List
+            style={styles.list}
+            data={orderList}
+            renderItem={orderItem}
+            ListEmptyComponent={EmptyComponent}
+        />
+    );
 }
 
-const styles = StyleSheet.create({});
+const styles = StyleSheet.create({
+    list: {
+        flex: 1,
+        backgroundColor: "#eee",
+        paddingVertical: 15,
+    },
+});

screens/OrderScreen.js

@@ -6,8 +6,7 @@ import { StyleSheet } from "react-native";
 import { useModel } from "flooks";
 import NavHeaderBar from "../components/NavHeaderBar";
 import OrderListScreen from "./OrderListScreen";
-import { Layout, Text } from "@ui-kitten/components";
-import LoadingNode from "../components/LoadingNode";
+import { Layout, Text, ButtonGroup, Button } from "@ui-kitten/components";
 import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
 const Tab = createMaterialTopTabNavigator();
 
@@ -16,60 +15,76 @@ const labelText = (focused, title) => (
         {title}
     </Text>
 );
+
 export default function OrderScreen() {
-    const { NOTRECEIVED, RECEIVED, REJECTED, COMPLETED, tab2 } = useModel(
-        "wordsModel"
-    );
+    const {
+        NOT_RECEIVED,
+        RECEIVED,
+        REJECTED,
+        COMPLETED,
+        tab2,
+        orderTitleBtn1,
+        orderTitleBtn2,
+    } = useModel("wordsModel");
     return (
         <>
-            <NavHeaderBar title={tab2} />
-            <Tab.Navigator
-                initialRouteName='NOTRECEIVED'
-                lazy={true}
-                tabBarOptions={{
-                    activeTintColor: "#FFC21C",
-                    inactiveTintColor: "#000",
-                    style: styles.tabBack,
-                    indicatorStyle: styles.indicatorStyle,
-                    labelStyle: {
-                        zIndex: 2,
-                    },
-                }}
-                lazyPlaceholder={LoadingNode}
-            >
-                <Tab.Screen
-                    name='NOTRECEIVED'
-                    component={OrderListScreen}
-                    options={{
-                        tabBarLabel: ({ focused }) =>
-                            labelText(focused, NOTRECEIVED),
-                    }}
-                />
-                <Tab.Screen
-                    name='RECEIVED'
-                    component={OrderListScreen}
-                    options={{
-                        tabBarLabel: ({ focused }) =>
-                            labelText(focused, RECEIVED),
+            <Layout style={[styles.tabBack, { flex: 1 }]}>
+                <NavHeaderBar title={tab2} />
+                <ButtonGroup
+                    appearance='outline'
+                    style={styles.buttonGroup}
+                    appearance='filled'
+                >
+                    <Button>{orderTitleBtn1}</Button>
+                    <Button>{orderTitleBtn2}</Button>
+                </ButtonGroup>
+                <Tab.Navigator
+                    initialRouteName='NOTRECEIVED'
+                    tabBarOptions={{
+                        activeTintColor: "#FFC21C",
+                        inactiveTintColor: "#000",
+                        style: styles.tabBack,
+                        indicatorStyle: styles.indicatorStyle,
+                        labelStyle: {
+                            zIndex: 2,
+                            borderWidth: 0,
+                        },
                     }}
-                />
-                <Tab.Screen
-                    name='COMPLETED'
-                    component={OrderListScreen}
-                    options={{
-                        tabBarLabel: ({ focused }) =>
-                            labelText(focused, COMPLETED),
-                    }}
-                />
-                <Tab.Screen
-                    name='REJECTED'
-                    component={OrderListScreen}
-                    options={{
-                        tabBarLabel: ({ focused }) =>
-                            labelText(focused, REJECTED),
-                    }}
-                />
-            </Tab.Navigator>
+                >
+                    <Tab.Screen
+                        name='NOTRECEIVED'
+                        component={(props) => <OrderListScreen {...props} />}
+                        options={{
+                            tabBarLabel: ({ focused }) =>
+                                labelText(focused, NOT_RECEIVED),
+                        }}
+                    />
+                    <Tab.Screen
+                        name='RECEIVED'
+                        component={(props) => <OrderListScreen {...props} />}
+                        options={{
+                            tabBarLabel: ({ focused }) =>
+                                labelText(focused, RECEIVED),
+                        }}
+                    />
+                    <Tab.Screen
+                        name='COMPLETED'
+                        component={(props) => <OrderListScreen {...props} />}
+                        options={{
+                            tabBarLabel: ({ focused }) =>
+                                labelText(focused, COMPLETED),
+                        }}
+                    />
+                    <Tab.Screen
+                        name='REJECTED'
+                        component={(props) => <OrderListScreen {...props} />}
+                        options={{
+                            tabBarLabel: ({ focused }) =>
+                                labelText(focused, REJECTED),
+                        }}
+                    />
+                </Tab.Navigator>
+            </Layout>
         </>
     );
 }
@@ -77,8 +92,13 @@ export default function OrderScreen() {
 const styles = StyleSheet.create({
     tabBack: {
         backgroundColor: "#eee",
+        borderWidth: 0,
     },
     indicatorStyle: {
         backgroundColor: "#FFC21C",
     },
+    buttonGroup: {
+        justifyContent: "center",
+        paddingVertical: 7,
+    },
 });