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 } = props;
    const { id, payMethod, orderTime, userAddress, merchantStatus, user } =
        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'>{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>
            </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",
    },
});