Dingdong_app/screens/Guide2Screen.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 NavHeaderBar from "../components/NavHeaderBar";
import {
    Layout,
    Tab,
    TabView,
    Text,
    useTheme,
    Button,
    Card,
} from "@ui-kitten/components";
import FormInput from "../components/FormInput";
import { useFocusEffect, useRoute } 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 * as RootNavigation from "../navigation/RootNavigation.js";

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

    const {
        guide2_title1,
        guide2_title2,
        guide2_form_1,
        guide2_pla_1,
        guide2_pla_2,
        guide1_pla_2,
        guide2_form_2,
        guide2_form_3,
        guide1_form_4,
        guide1_pla_4,
        guide1_form_5,
        guide1_pla_5,
        next,
        pass,
        passTips,
    } = useModel("wordsModel");
    const { showDialog } = useModel("dialogModel");
    const [pageName, changePageName] = React.useState("");
    const [name, changeName] = React.useState("");
    const [sort, changeSort] = React.useState("");
    const [goodsIds, changeGoodsIds] = React.useState("");
    const { selectInfos, changeSelect } = useModel("goodsModel");

    useFocusEffect(
        React.useCallback(() => {
            changeBackground(theme["color-primary-500"]);
            if (route.name) {
                changePageName(route.name);
            }
        }, [])
    );
    React.useEffect(() => {
        if (selectInfos.length > 0) {
            let _ids = selectInfos.map(item => {
                return item.id;
            });
            changeGoodsIds(_ids.join(","));
        }
    }, [selectInfos]);

    const canNext = React.useMemo(() => {
        if (name && sort) {
            return true;
        } else {
            return false;
        }
    }, [name, sort, goodsIds]);

    const addClass = () => {
        return httpPost(
            "/classification/save",
            {
                name,
                sort,
                goodsIds,
                merchantId: mid,
            },
            { body: "json" }
        ).then(res => {});
    };

    return (
        <>
            {pageName != "AddNewClass" && <GuideHeaderBar />}
            {pageName === "AddNewClass" && <NavHeaderBar title='添加分类' />}
            <ScrollPage>
                <Layout style={styles.container}>
                    {pageName != "AddNewClass" && (
                        <Card appearance='headFilled'>
                            <Text category='s1'>{guide2_title1}</Text>
                            <Text category='s1'>{guide2_title2}</Text>
                        </Card>
                    )}
                    <Card appearance='formFilled'>
                        {/* 类别名称 */}
                        <FormInput
                            label={guide2_form_1}
                            placeholder={guide2_pla_1}
                            value={name}
                            onChange={changeName}
                            style={{ paddingVertical: 3 }}
                        />
                        {/* 显示排序 */}
                        <FormInput
                            label={guide2_form_2}
                            value={sort}
                            type='actionSheet'
                            list={[1, 2, 3, 4, 5, 6, 7, 8, 9]}
                            onChange={changeSort}
                            textAlign='right'
                        />

                        {/* 商品 */}
                        <FormInput
                            label={guide2_form_3}
                            value={goodsIds}
                            type='url'
                            changePath={() => {
                                RootNavigation.navigate("AddClassification", {
                                    type: "classification",
                                    classificationId: "new",
                                    preKey: route.name,
                                });
                            }}
                            textAlign='right'
                        />
                        {pageName === "AddNewClass" && (
                            <Layout style={styles.layoutLeft} level='1'>
                                <Button
                                    status='primary'
                                    disabled={!canNext}
                                    onPress={() => {
                                        addClass().then(_ => {
                                            success("添加成功");
                                            RootNavigation.goBack();
                                            changeSelect([]);
                                        });
                                    }}
                                >
                                    确定
                                </Button>
                            </Layout>
                        )}
                    </Card>
                    {pageName !== "AddNewClass" && (
                        <ConnectButton>
                            <Layout style={styles.layoutLeft} level='1'>
                                <Button
                                    status='primary'
                                    disabled={!canNext}
                                    onPress={() => {
                                        addClass()
                                            .then(_ => {
                                                success("添加成功");
                                                changeGuideStep(3);
                                            })
                                            .then(e => {});
                                    }}
                                >
                                    {next}
                                </Button>
                                <Button
                                    style={{ marginTop: 10 }}
                                    appearance='ghost'
                                    status='primary'
                                    onPress={() => {
                                        showDialog({
                                            bodyText: passTips,
                                            cancelable: true,
                                            confirmCallback: () => {
                                                changeGuideStep(3);
                                            },
                                        });
                                    }}
                                >
                                    {pass}
                                </Button>
                            </Layout>
                        </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,
    },
});