Dingdong_app/screens/RegisterSeScreen.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 OpenTime from "../components/OpenTime";

export default function RegisterScreen({ navigation, route }) {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel");
    const { setNavigation, pushRouter } = useModel("routersModel", true);
    const { httpGet } = useModel("httpModel", true);
    const { registerSecend } = useModel("userModel", true);

    const {
        guideHome_title1,
        guideHome_title2,
        guideHome_form_1,
        guideHome_form_2,
        guideHome_form_3,
        guideHome_form_4,
        guideHome_form_5,
        guideHome_form_6,
        guideHome_form_7,
        guideHome_pla_1,
        guideHome_pla_2,
        guideHome_pla_3,
        next,
    } = useModel("wordsModel");
    const [categoryList, changeCategoryList] = React.useState([]);
    const [merchantNatureList, changeMerchantNatureList] = React.useState([]);
    useFocusEffect(
        React.useCallback(() => {
            changeBackground(theme["color-primary-500"]);
            setNavigation(navigation);
            httpGet("/category/tree", { id: 1 }).then((res) => {
                changeCategoryList(res);
            });

            httpGet("/merchantNature/all").then((res) => {
                changeMerchantNatureList(res.content);
            });
        }, [])
    );

    const [category, changeCategory] = React.useState("");
    const [address, changeAddress] = React.useState("");
    const [week, changeWeek] = React.useState("");
    const [startTime, changeStartTime] = React.useState("08:00");
    const [endTime, changeEndTime] = React.useState("22:00");
    const [qualification, changeQualification] = React.useState("");
    const [merchantNatureId, changeMerchantNatureId] = React.useState("");
    const [logo, changeLogo] = React.useState();
    const timeValue = React.useMemo(() => {
        if (week && startTime && endTime) {
            return week + " " + startTime + "~" + endTime;
        } else {
            return " ";
        }
    }, [week, startTime, endTime]);

    const canNext = React.useMemo(() => {
        return true;
    }, [logo]);

    const { registerFirst } = useModel("userModel", true);

    return (
        <>
            <GuideHeaderBar />
            <ScrollPage>
                <Layout style={styles.container}>
                    <Card appearance='headFilled'>
                        <Text category='s1'>{guideHome_title1}</Text>
                        <Text category='s1'>{guideHome_title2}</Text>
                    </Card>
                    <Card appearance='formFilled'>
                        {/* 输入商家名称 */}
                        <FormInput
                            label={guideHome_form_1}
                            selectTitle={guideHome_form_1}
                            type='select'
                            value={category}
                            onChange={changeCategory}
                            textAlign='right'
                            selectList={categoryList}
                            style={{ paddingVertical: 5 }}
                        />

                        <FormInput
                            label={guideHome_form_2}
                            value={address}
                            onChange={changeAddress}
                            textAlign='right'
                        />

                        <FormInput
                            label={guideHome_form_4}
                            selectTitle={guideHome_form_4}
                            type='openTime'
                            value={timeValue}
                            onChange={(week, startTime, endTime) => {
                                changeWeek(week);
                                changeStartTime(startTime);
                                changeEndTime(endTime);
                            }}
                            textAlign='right'
                            style={{ paddingVertical: 5 }}
                        />

                        <FormInput
                            label={guideHome_form_5}
                            sub={guideHome_pla_2}
                            type='url'
                            value={qualification ? "已上传" : " "}
                            textAlign='right'
                            style={{ paddingVertical: 5 }}
                            changePath={() => {
                                pushRouter("Qualification");
                            }}
                        />

                        <FormInput
                            label={guideHome_form_6}
                            sub={guideHome_pla_3}
                            selectTitle={guideHome_form_6}
                            type='select'
                            value={merchantNatureId}
                            textAlign='right'
                            style={{ paddingVertical: 5 }}
                            onChange={changeMerchantNatureId}
                            selectList={merchantNatureList}
                        />

                        <FormInput
                            label={guideHome_form_7}
                            type='img'
                            value={logo}
                            textAlign='right'
                            onChange={changeLogo}
                        />
                        <Layout style={styles.layoutLeft} level='1'>
                            <Button
                                status='primary'
                                disabled={!canNext}
                                onPress={() =>
                                    registerSecend({
                                        category,
                                        address,
                                        week,
                                        startTime,
                                        endTime,
                                        qualification,
                                        merchantNatureId,
                                        logo,
                                    })
                                }
                            >
                                {next}
                            </Button>
                        </Layout>
                    </Card>
                    <ConnectButton />
                </Layout>
            </ScrollPage>
        </>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingBottom: 33,
    },
    tabContent: {
        backgroundColor: "#fff",
        marginTop: 20,
    },
    logo: {
        width: 100,
        height: 100,
        alignSelf: "center",
    },
    logo2: {
        width: 97,
        height: 21,
        alignSelf: "center",
        marginTop: 2,
    },
    text: {
        marginTop: 16,
    },
    layoutLeft: {
        flexDirection: "row",
        paddingVertical: 10,
        justifyContent: "center",
    },
    form: {
        paddingHorizontal: 26,
        paddingVertical: 20,
    },
});