Dingdong_app/screens/HomeScreenPage3.js

import * as React from "react";
import {
    Icon,
    useTheme,
    Text,
    Card,
    Layout,
    List,
    ListItem,
    Button,
    Menu,
    MenuItem,
} from "@ui-kitten/components";
import {
    Image,
    Platform,
    StyleSheet,
    TouchableOpacity,
    View,
    ImageBackground,
    Dimensions,
} from "react-native";
import { useFocusEffect } from "@react-navigation/native";
import { useModel } from "flooks";
import CommentCard from "../components/Comment";
import Badge from "../components/Badge";
import UpLoadImage from "../components/UpLoadImage";
import Textarea from "react-native-textarea";
import * as RootNavigation from "../navigation/RootNavigation.js";

import OpenTimeUtil from "../Utils/OpenTimeUtil";
import ListUtil from "../Utils/ListUtil";
import ActionButton from "react-native-action-button";

const Label = (props, title, value) => (
    <Layout style={[styles.lable]}>
        <Text {...props} style={[styles.lableName]}>
            {title}
        </Text>
        <Text
            {...props}
            style={[props.style, styles.lableText]}
            numberOfLines={1}
            ellipsizeMode='tail'
        >
            {value}
        </Text>
    </Layout>
);

export default function HomePage3(props) {
    const theme = useTheme();
    const { httpPost, httpGet } = useModel("httpModel", true);
    const [commentList, setCommentList] = React.useState([{}, {}, {}]);
    const [selectId, changeSelectId] = React.useState(0);
    const { showDialog } = useModel("dialogModel", true);
    const [text, changeText] = React.useState("");
    const {
        img,
        updateMerchant,
        introduction,
        name,
        phone,
        address,
        category,
        week,
        endTime,
        startTime,
    } = useModel("userModel");
    const categoryList = new ListUtil(category);
    const { loading, success } = useModel("loadingModel");

    const {
        editText,
        autoBackText,
        home3Title1,
        home3Title2,
        confirm,
        getWordsStr,
        weekWords,
    } = useModel("wordsModel");

    const imgList = React.useMemo(() => {
        let list = img ? img.split(",") : [];
        list.push("");
        console.log(list);
        return [...new Set(list)];
    }, [img]);

    const openTime = React.useMemo(() => {
        if (startTime && endTime && week && weekWords) {
            let _o = new OpenTimeUtil(startTime, endTime, week, weekWords());
            return _o.getShowStr();
        } else {
            return "";
        }
    }, [startTime, endTime, week, weekWords]);

    function changeImg(img, index) {
        let _imgs = [...imgList];
        _imgs.splice(index, 1, img);
        let _img1 = new Set(_imgs);
        updateMerchant({
            img: [..._img1].join(","),
        });
    }

    function delImg(index) {
        let _imgs = [...imgList];
        _imgs.splice(index, 1);
        let _img1 = new Set(_imgs);
        updateMerchant({
            img: [..._img1].join(","),
        });
    }

    const showImgList = list => {
        return list.map((item, index) => {
            return (
                <Layout key={index} style={styles.upload}>
                    <UpLoadImage
                        value={item}
                        changeIcon={img => changeImg(img, index)}
                        size={67}
                        hasCancel={true}
                        delEvent={() => {
                            delImg(index);
                        }}
                    />
                </Layout>
            );
        });
    };

    function showChange(key, val, title, max, type) {
        showDialog({
            pla: "",
            maxLength: max || 50,
            defaultValue: val,
            InputType: type,
            isEdit: true,
            title: title,
            cancelable: true,
            confirmCallback: info => {
                updateMerchant({ [key]: info });
            },
        });
    }

    return (
        <Layout style={styles.tabContainer}>
            <Layout style={styles.top}>
                <Layout style={styles.imgList}>{showImgList(imgList)}</Layout>

                <Layout>
                    <Text style={styles.text}>{home3Title1}</Text>
                    <Textarea
                        containerStyle={styles.textareaContainer}
                        style={styles.textarea}
                        onChangeText={changeText}
                        defaultValue={introduction}
                        maxLength={500}
                        placeholder={home3Title2}
                        placeholderTextColor={"#B4B4B4"}
                        underlineColorAndroid={"transparent"}
                    />
                    <Button
                        size='small'
                        style={styles.button}
                        onPress={() => {
                            updateMerchant({
                                introduction: text,
                            }).then(res => {
                                success("成功");
                            });
                        }}
                    >
                        {confirm}
                    </Button>
                </Layout>
            </Layout>
            <Menu style={styles.menu}>
                <MenuItem
                    title={props =>
                        Label(props, getWordsStr("register_form_1"), name)
                    }
                    accessoryRight={ForwardIcon}
                    style={styles.menuItem}
                    onPress={() =>
                        showChange(
                            "name",
                            name,
                            getWordsStr("register_form_1"),
                            25,
                            "text"
                        )
                    }
                />
                <MenuItem
                    title={props =>
                        Label(
                            props,
                            getWordsStr("guideHome_form_1"),
                            categoryList.getKey("name")
                        )
                    }
                    accessoryRight={ForwardIcon}
                    style={styles.menuItem}
                    onPress={() => {}}
                />
                <MenuItem
                    title={props =>
                        Label(props, getWordsStr("guideHome_form_2"), address)
                    }
                    accessoryRight={ForwardIcon}
                    style={styles.menuItem}
                    onPress={() =>
                        showChange(
                            "address",
                            address,
                            getWordsStr("guideHome_form_2")
                        )
                    }
                />
                <MenuItem
                    title={props =>
                        Label(props, getWordsStr("guideHome_form_3"), phone)
                    }
                    accessoryRight={ForwardIcon}
                    style={styles.menuItem}
                    onPress={() =>
                        showChange(
                            "phone",
                            phone,
                            getWordsStr("guideHome_form_3"),
                            11,
                            "phone"
                        )
                    }
                />
                <MenuItem
                    title={props =>
                        Label(props, getWordsStr("guideHome_form_4"), openTime)
                    }
                    accessoryRight={ForwardIcon}
                    style={styles.menuItem}
                    onPress={() => {}}
                />
                <MenuItem
                    title={getWordsStr("guideHome_form_5")}
                    accessoryRight={ForwardIcon}
                    style={styles.menuItem}
                    onPress={() => {
                        RootNavigation.navigate("EditBanner", {
                            type: "qualification",
                        });
                    }}
                />
            </Menu>
        </Layout>
    );
}

const ForwardIcon = props => (
    <Icon
        {...props}
        name='arrow-ios-forward'
        fill='#B4B4B4'
        style={{ width: 15, height: 15, fontWeight: 500 }}
    />
);
const classificationItem = ({ item, index }) => <CommentCard />;
const StarIcon = props => <Icon {...props} name='plus-outline' />;

const goodsItem = ({ item, index }) => (
    <GoodsCardLarge appearance='classification' />
);

const styles = StyleSheet.create({
    tabContainer: {
        backgroundColor: "#fff",
        flex: 1,
    },
    top: {
        paddingVertical: 20,
        paddingHorizontal: 13,
    },
    imgList: {
        flexDirection: "row",
    },
    upload: {
        marginRight: 10,
        width: 67,
        width: 67,
        flexShrink: 0,
    },
    textareaContainer: {
        backgroundColor: "#F0F0F0",
        height: 100,
        alignSelf: "stretch",
        borderRadius: 4,
    },
    textarea: {
        textAlignVertical: "top", // hack android
        fontSize: 13,
        color: "#333",
        paddingHorizontal: 14,
        paddingVertical: 10,
        height: 100,
    },
    text: {
        paddingVertical: 10,
    },
    button: {
        alignSelf: "flex-end",
        marginTop: 10,
        marginRight: 14,
    },
    menu: {
        borderColor: "#EEEEEE",
        borderTopWidth: 6,
        backgroundColor: "#fff",
        paddingHorizontal: 15,
    },
    menuItem: {},
    lable: {
        flexDirection: "row",
        flex: 1,
    },
    lableName: {
        flexShrink: 0,
        flexBasis: "50%",
        marginHorizontal: 8,
        fontSize: 13,
    },
    lableText: {}
});