Dingdong_app/screens/Set/FirstOrderScreen.js

import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import {
    Image,
    Platform,
    StyleSheet,
    TouchableOpacity,
    View,
    ImageBackground,
} from "react-native";
import { useModel } from "flooks";
import {
    Layout,
    Tab,
    TabView,
    Text,
    useTheme,
    Button,
    Card,
    List,
    Input,
    Icon,
} from "@ui-kitten/components";
import EmptyComponent from "../../components/EmptyComponent";
import FormInput from "../../components/FormInput";
import { useFocusEffect } from "@react-navigation/native";
import ScrollPage from "../../components/ScrollPage";
import NavHeaderBar from "../../components/NavHeaderBar";

export default function FirstOrderScreen({ navigation, route }) {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel", true);
    const { httpGet, httpPost } = useModel("httpModel", true);
    const { success, warnning } = useModel("loadingModel", true);
    const { showDialog } = useModel("dialogModel");

    const {
        userTitle21,
        fullReduction2,
        fullReduction1,
        delText,
        editText,
        confirm,
        cancel,
        complete,
        successText,
        removeTips,
    } = useModel("wordsModel");
    const [money, changeMoney] = React.useState("");
    const [edit, changeEdit] = React.useState(false);
    useFocusEffect(
        React.useCallback(() => {
            changeBackground(theme["color-primary-500"]);
        }, [])
    );

    const { mid, firstOrder, updateMerchant } = useModel("userModel");
    React.useEffect(() => {
        if (!firstOrder) {
            changeEdit(true);
        } else {
            changeMoney(firstOrder.toString() || "");
        }
    }, [firstOrder]);

    return (
        <>
            <NavHeaderBar title='首单' />
            <ScrollPage
                style={styles.lay}
                enabledFresh={true}
                refreshEvent={() => {
                    return Promise.resolve();
                }}
            >
                <Layout style={[styles.lay]}>
                    <Layout style={styles.item}>
                        <Layout style={[styles.text, styles.flexRow]}>
                            <Text category='c2'>新用户立减</Text>
                            {edit ? (
                                <Input
                                    size='small'
                                    style={styles.input}
                                    value={money}
                                    keyboardType='numeric'
                                    onChangeText={changeMoney}
                                />
                            ) : (
                                <Text category='c2'>{money}</Text>
                            )}

                            <Text category='c2'>元</Text>
                        </Layout>
                        {!edit ? (
                            <>
                                <Button
                                    size='small'
                                    appearance='outline'
                                    onPress={() => {
                                        changeEdit(true);
                                    }}
                                >
                                    {editText}
                                </Button>
                                <Button
                                    size='small'
                                    appearance='outline'
                                    style={styles.buttonlast}
                                    onPress={() => {
                                        changeEdit(false);
                                    }}
                                >
                                    {cancel}
                                </Button>
                            </>
                        ) : (
                            <>
                                <Button
                                    size='small'
                                    onPress={() => {
                                        changeEdit(false);
                                        updateMerchant({
                                            firstOrder: money,
                                        }).then(() => {
                                            // success("保存成功");
                                        });
                                    }}
                                >
                                    保存
                                </Button>
                                {money != "" && (
                                    <Button
                                        size='small'
                                        status='danger'
                                        style={styles.buttonlast}
                                        onPress={() => {
                                            changeMoney("");
                                            changeEdit(true);
                                            updateMerchant({
                                                firstOrder: 0,
                                            }).then(() => {
                                                // success("删除成功");
                                            });
                                        }}
                                    >
                                        {delText}
                                    </Button>
                                )}
                            </>
                        )}
                    </Layout>
                </Layout>
            </ScrollPage>
        </>
    );
}

const PulsIcon = props => (
    <Icon
        {...props}
        style={[props.style, { width: 33, height: 33 }]}
        name='plus-circle'
    />
);
const styles = StyleSheet.create({
    lay: {
        backgroundColor: "#fff",
    },
    padBot: {
        paddingBottom: 100,
    },
    list: {
        paddingVertical: 10,
        paddingHorizontal: 15,
        backgroundColor: "transparent",
        flex: 0,
    },
    item: {
        flexDirection: "row",
        alignItems: "center",
        paddingVertical: 10,
        paddingHorizontal: 15,
    },
    input: {
        marginHorizontal: 5,
        minWidth: 49,
    },
    text: {
        flex: 1,
    },
    flexRow: {
        flexDirection: "row",
        alignItems: "center",
    },
    buttonlast: {
        marginLeft: 10,
    },
    button: {
        alignSelf: "flex-start",
    },
});