Dingdong_app/components/OrderCard.js

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 { Linking } from "expo";
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, updateInfo } = props;
    const {
        id,
        payMethod,
        orderTime,
        userAddress,
        merchantStatus,
        user,
        riderStatus,
    } = info || {};

    const Footer = (props) => {
        if (riderStatus) {
            return (
                <Layout
                    {...props}
                    style={[props.style]}
                >
                    <Layout style={styles.orderItem1}>
                        <Text category='c2'>骑手：胖齐齐</Text>
                        <Button
                            appearance='outline'
                            onPress={() => {
                                Linking.openURL("tel:+" + user.phone);
                            }}
                        >
                            联系骑手
                        </Button>
                    </Layout>
                    <Layout style={styles.orderItem1}>
                        <Text category='c2'>
                            预计送达时间：2019-12-31 13:17
                        </Text>
                    </Layout>
                    {riderStatus == "CARRY_OUT" && (
                        <Layout style={styles.orderItem1}>
                            <Text category='c2'>
                                实际送达时间：2019-12-31 13:17
                            </Text>
                        </Layout>
                    )}
                </Layout>
            );
        } else if (merchantStatus == "NOT_RECEIVED") {
            return (
                <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>
            );
        } else {
            return null;
        }
    };
    return (
        <Card
            appearance='orderCard'
            disabled={true}
            style={[props.style]}
            footer={Footer}
        >
            {riderStatus ? (
                <Text>骑手{getWordsStr(riderStatus)}</Text>
            ) : (
                <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'>{user.nickname}</Text>
                <Text category='h6'>{getWordsStr(payMethod)}</Text>
            </Layout>
            <Layout style={styles.orderItem1}>
                <Text category='c2'>{user.phone}</Text>
                <Button
                    appearance='outline'
                    onPress={() => {
                        Linking.openURL("tel:+" + user.phone);
                    }}
                >
                    {orderInfo3}
                </Button>
            </Layout>

            <Layout style={styles.orderItem2}>
                <Text category='c2' style={styles.leftText}>
                    {orderInfo4}
                </Text>
                <Text category='h1'>{userAddress}</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>
                <Text category='h1'>多放辣椒</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",
    },
});