Dingdong_app/screens/Guide1Screen.js

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 {
    Layout,
    Tab,
    TabView,
    Text,
    useTheme,
    Button,
    Card,
} from "@ui-kitten/components";
import FormInput from "../components/FormInput";
import { useFocusEffect } from "@react-navigation/native";
import ScrollPage from "../components/ScrollPage";
import ConnectButton from "../components/ConnectButton";
import GuideHeaderBar from "../components/GuideHeaderBar";
import Textarea from "react-native-textarea";
import NavHeaderBar from "../components/NavHeaderBar";
import moment from "moment";
import { CommonActions } from "@react-navigation/native";

export default function Guide1Screen({ navigation, route }) {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel");
    const { httpGet, httpPost } = useModel("httpModel", true);
    const { success } = useModel("loadingModel", true);
    const { mid, changeGuideStep } = useModel("userModel", true);

    const {
        guide1_title1,
        guideHome_title2,
        guide1_form_1,
        guide1_pla_1,
        guide1_form_2,
        guide1_pla_2,
        guide1_form_3,
        guide1_pla_3,
        guide1_form_4,
        guide1_pla_4,
        guide1_form_5,
        guide1_pla_5,
        next,
        pass,
        passTips,
        confirm,
        addGoods,
        delText,
        removeTips,
    } = useModel("wordsModel");
    const { showDialog } = useModel("dialogModel");
    const routeName = route.name;
    const [id, changeId] = React.useState("");

    const [name, changeName] = React.useState("");
    const [amount, changeAmount] = React.useState("");
    const [discountAmount, changeDiscountAmount] = React.useState("");
    const [inventory, changeInventory] = React.useState(0);
    const [week, changeWeek] = React.useState("");
    const [startTime, changeStartTime] = React.useState("08:00");
    const [endTime, changeEndTime] = React.useState("22:00");
    const [introduction, changeIntroduction] = React.useState();
    const [loadingSuccess, ChangeLoadingSuccess] = React.useState(false);
    const [defaultValue, ChangeDefaultValue] = React.useState("");

    const [img, changeImg] = React.useState();
    const timeValue = React.useMemo(() => {
        if (week && startTime && endTime) {
            return week + " " + startTime + "~" + endTime;
        } else {
            return " ";
        }
    }, [week, startTime, endTime]);

    useFocusEffect(
        React.useCallback(() => {
            changeBackground(theme["color-primary-500"]);
            console.log(route.params);
            if (route.params) {
                if (route.params.id) {
                    changeId(route.params.id);
                }
            } else {
                ChangeLoadingSuccess(true);
            }
        }, [])
    );

    React.useEffect(() => {
        if (id) {
            httpGet("/goods/get/" + id).then((res) => {
                getInfo(res);
                ChangeLoadingSuccess(true);
            });
        } else {
            getInfo({});
        }
    }, [id]);

    function getInfo(res) {
        changeName(res.name || "");
        if (res.discountAmount) {
            changeDiscountAmount(res.discountAmount.toString());
        }
        if (res.amount) {
            changeAmount(res.amount.toString());
        }
        if (res.inventory) {
            changeInventory(res.inventory.toString());
        }
        changeWeek(res.week || "");
        changeStartTime(res.startTime || "");
        changeEndTime(res.endTime || "");
        changeIntroduction(res.introduction || "");
        console.log(res);
        // if (res.img && res.img.length) {
        changeImg(res.img);
        // }

        if (res.week) {
            ChangeDefaultValue([
                moment(res.startTime, "HH:mm:ss").format("HH:mm") +
                    "~" +
                    moment(res.endTime, "HH:mm:ss").format("HH:mm"),
                res.week,
            ]);
        }
    }

    const canNext = React.useMemo(() => {
        if (
            name &&
            amount &&
            discountAmount &&
            inventory &&
            week &&
            startTime &&
            endTime &&
            introduction &&
            img
        ) {
            return true;
        } else {
            return false;
        }
    }, [
        name,
        amount,
        discountAmount,
        inventory,
        week,
        startTime,
        endTime,
        introduction,
        img,
    ]);

    return (
        <>
            {routeName != "AddGoods" ? (
                <GuideHeaderBar />
            ) : (
                <NavHeaderBar title={addGoods} />
            )}

            <ScrollPage>
                <Layout style={styles.container}>
                    {routeName != "AddGoods" && (
                        <Card appearance='headFilled'>
                            <Text category='s1'>{guide1_title1}</Text>
                            <Text category='s1'>{guideHome_title2}</Text>
                        </Card>
                    )}
                    <Card appearance='formFilled'>
                        {/* 商品名称 */}
                        <FormInput
                            label={guide1_form_1}
                            placeholder={guide1_pla_1}
                            value={name}
                            onChange={changeName}
                            style={{ paddingVertical: 3 }}
                        />
                        {/* 商品价格 */}
                        <FormInput
                            label={guide1_form_2}
                            placeholder={guide1_pla_2}
                            value={amount}
                            type='money'
                            onChange={changeAmount}
                            textAlign='right'
                        />

                        {/* 优惠价格 */}
                        <FormInput
                            label={guide1_form_3}
                            placeholder={guide1_pla_3}
                            value={discountAmount}
                            type='money'
                            onChange={changeDiscountAmount}
                            textAlign='right'
                        />
                        {/* 每日供应数量 */}
                        <FormInput
                            label={guide1_form_4}
                            placeholder={guide1_pla_4}
                            value={inventory}
                            type='amount'
                            onChange={changeInventory}
                        />

                        {/* 供应时间 */}
                        <FormInput
                            label={guide1_form_5}
                            type='openTime'
                            defaultValue={defaultValue}
                            onChange={(week, startTime, endTime) => {
                                changeWeek(week);
                                changeStartTime(startTime);
                                changeEndTime(endTime);
                            }}
                        />

                        <Layout>
                            {loadingSuccess && (
                                <Textarea
                                    containerStyle={styles.textareaContainer}
                                    style={styles.textarea}
                                    onChangeText={changeIntroduction}
                                    defaultValue={introduction}
                                    maxLength={50}
                                    placeholder={guide1_pla_5}
                                    placeholderTextColor={"#B4B4B4"}
                                    underlineColorAndroid={"transparent"}
                                />
                            )}
                        </Layout>

                        <FormInput
                            type='img'
                            value={img}
                            textAlign='right'
                            onChange={changeImg}
                        />

                        <Layout style={styles.layoutLeft} level='1'>
                            <Button
                                status='primary'
                                disabled={!canNext}
                                onPress={() => {
                                    console.log({
                                        id,
                                        name,
                                        amount,
                                        discountAmount,
                                        inventory,
                                        week,
                                        startTime,
                                        endTime,
                                        introduction,
                                        img,
                                        merchantId: mid,
                                    });
                                    httpPost(
                                        "/goods/save",
                                        {
                                            id,
                                            name,
                                            amount,
                                            discountAmount,
                                            inventory,
                                            week,
                                            startTime,
                                            endTime,
                                            introduction,
                                            img,
                                            merchantId: mid,
                                        },
                                        { body: "json" },
                                        true
                                    ).then((res) => {
                                        success(id ? "修改" : "添加" + "成功");
                                        if (id) {
                                            getInfo(res);
                                        } else if (routeName != "AddGoods") {
                                            changeGuideStep(1, "Guide2");
                                        } else {
                                            changeId(res.id);
                                            navigation.dispatch(
                                                CommonActions.setParams({
                                                    id: res.id,
                                                })
                                            );
                                        }
                                    });
                                }}
                            >
                                {routeName != "AddGoods" ? next : confirm}
                            </Button>
                            {routeName == "AddGoods" && id != 0 && (
                                <Button
                                    appearance='ghost'
                                    status='info'
                                    style={{ marginTop: 10 }}
                                    onPress={() => {
                                        showDialog({
                                            bodyText: removeTips,
                                            cancelable: true,
                                            confirmCallback: () => {
                                                success("删除成功");
                                                navigation.goBack();
                                            },
                                        });
                                    }}
                                >
                                    {delText}
                                </Button>
                            )}
                            {routeName != "AddGoods" && (
                                <Button
                                    style={{ marginTop: 10 }}
                                    appearance='ghost'
                                    status='primary'
                                    onPress={() => {
                                        showDialog({
                                            bodyText: passTips,
                                            cancelable: true,
                                            confirmCallback: () => {
                                                changeGuideStep(1, "Guide2");
                                            },
                                        });
                                    }}
                                >
                                    {pass}
                                </Button>
                            )}
                        </Layout>
                    </Card>
                    {routeName != "AddGoods" && <ConnectButton />}
                </Layout>
            </ScrollPage>
        </>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingBottom: 33,
    },
    tabContent: {
        backgroundColor: "#fff",
        marginTop: 20,
    },
    img: {
        width: 100,
        height: 100,
        alignSelf: "center",
    },
    img2: {
        width: 97,
        height: 21,
        alignSelf: "center",
        marginTop: 2,
    },
    text: {
        marginTop: 16,
    },
    layoutLeft: {
        // flexDirection: "row",
        paddingVertical: 10,
        justifyContent: "center",
        alignItems: "center",
    },
    form: {
        paddingHorizontal: 26,
        paddingVertical: 20,
    },
    textareaContainer: {
        backgroundColor: "#F0F0F0",
        height: 100,
        borderRadius: 4,
    },
    textarea: {
        textAlignVertical: "top", // hack android
        fontSize: 13,
        color: "#333",
        paddingHorizontal: 14,
        paddingVertical: 10,
        height: 100,
    },
});