Dingdong_app/screens/LoginScreen.js

/* eslint-disable no-unused-vars */
/* eslint-disable camelcase */
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import {
    Image,
    StyleSheet,
    View,
} from "react-native";
import {
    Layout,
    Tab,
    TabView,
    useTheme,
    Button,
} from "@ui-kitten/components";
import { useModel } from "flooks";
import { useFocusEffect } from "@react-navigation/native";
import * as RootNavigation from "../navigation/RootNavigation";
import FormInput from "../components/FormInput";
// import { useAndroidBackHandler } from "react-navigation-backhandler";
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
    },
    center: {
        alignSelf: "stretch",
        marginHorizontal: 13,
        backgroundColor: "#fff",
        paddingTop: 20,
        paddingBottom: 10,
        borderRadius: 7,
    },
    tabContent: {
        backgroundColor: "#fff",
        marginTop: 20,
        paddingHorizontal: 9,
    },
    tabMain: {
        // paddingVertical: 10,
        width: "100%",
        paddingTop: 10,
        borderTopWidth: 1,
        borderColor: "#E5E5E5",
    },
    logo: {
        width: 217,
        height: 100,
        alignSelf: "center",
    },
    image: {
        width: 256,
        height: 100,
        position: "absolute",
        left: "50%",
        top: -65,
        marginLeft: -128,
    },
    tab: {
        borderBottomWidth: 1,
        borderColor: "#e5e5e5",
        marginHorizontal: 10,
    },
    tabItem: {
        paddingTop: 20,
        paddingBottom: 10,
        textAlign: "center",
        color: "#000",
        fontSize: 13,
    },
    tabItemActive: {
        paddingTop: 20,
        paddingBottom: 11,
        textAlign: "center",
        fontSize: 13,
        color: "#FFC21C",
    },
    form: {
        paddingTop: 10,
    },
    layoutLeft: {
        paddingLeft: 70,
        flexDirection: "row",
        paddingBottom: 10,
    },
    btnList: {
        flexDirection: "row",
        justifyContent: "space-between",
        paddingLeft: 60,
        marginTop: -10,
        marginBottom: 10,
    },
    btn: {
        paddingVertical: 0,
    },
    formSub: {
        alignItems: "flex-start",
    },
    primary: {
        minWidth: 112,
        paddingHorizontal: 10,
    },
});


const img1 = require("../assets/images/loginImg.png")
const img2 = require("../assets/images/loginLogo.png")





export default function LoginScreen() {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel", true);
    const {
        welcom,
        login_tab_1,
        login_tab_2,
        login_form_1,
        login_pla_1,
        login_form_2,
        login_pla_2,
        login_form_3,
        login_pla_3,
        login_btn_sub,
        login_btn_forget,
        login_btn_rej,
        login_btn_code_1,
        login_btn_code_2,
    } = useModel("wordsModel");

    const tabs = [
        {
            value: 1,
            label: login_tab_1,
        },
        {
            value: 2,
            label: login_tab_2,
        },
    ];

    const [selectedIndex, setSelectedIndex] = React.useState(0);

    const [phone, changePhone] = React.useState("");
    const [password, changePassword] = React.useState("");
    const [code, changeCode] = React.useState("");
    const [sendNum, changeNum] = React.useState(60);
    const [isSend, changeSend] = React.useState(false);

    const canLogin = React.useMemo(() => {
        if (
            (selectedIndex === 0 && phone && password) ||
            (selectedIndex === 1 && phone && code)
        ) {
            return true;
        // eslint-disable-next-line no-else-return
        } else {
            return false;
        }
    }, [phone, password, code, selectedIndex]);

    const { loginByPassword, loginByCode } = useModel("userModel", true);
    useFocusEffect(
        React.useCallback(() => {
            changeBackground(theme["color-primary-100"]);
        }, [])
    );
    return (
      <View
        style={[
                styles.container,
                { backgroundColor: theme["color-primary-100"] },
            ]}
      >
        <View style={styles.center}>
          <Image
            source={img1}
            style={styles.image}
          />

          <Image
            source={img2}
            style={styles.logo}
          />

          <View style={styles.tabContent}>
            <TabView
              selectedIndex={selectedIndex}
              onSelect={index => setSelectedIndex(index)}
              indicatorStyle={{ height: 0 }}
            >
              <Tab title={login_tab_1}>
                <Layout style={styles.tabMain}>
                  {/* 手机号 */}
                  <FormInput
                    label={`${login_form_1  }:`}
                    value={phone}
                    type='phone'
                    placeholder={login_pla_1}
                    onChange={changePhone}
                    textAlign='right'
                    labelStyle={{ width: 50 }}
                  />

                  {/* 密码 */}
                  <FormInput
                    label={`${login_form_2  }:`}
                    value={password}
                    type='password'
                    placeholder={login_pla_2}
                    onChange={changePassword}
                    textAlign='right'
                    labelStyle={{ width: 50 }}
                  />
                </Layout>
              </Tab>
              <Tab title={login_tab_2}>
                <Layout style={styles.tabMain}>
                  {/* 手机号 */}
                  <FormInput
                    label={`${login_form_1  }:`}
                    value={phone}
                    type='phone'
                    placeholder={login_pla_1}
                    onChange={changePhone}
                    textAlign='right'
                    labelStyle={{ width: 50 }}
                  />

                  {/* 验证码 */}
                  <FormInput
                    label={`${login_form_3  }:`}
                    value={code}
                    type='code'
                    placeholder={login_pla_3}
                    onChange={changeCode}
                    textAlign='right'
                    btnText={login_btn_code_1}
                    labelStyle={{ width: 50 }}
                  />
                </Layout>
              </Tab>
            </TabView>

            {/* 注册找回密码 */}
            <Layout style={styles.btnList} level='1'>
              <Button appearance='ghost' status='basic' size='small'>
                {login_btn_forget}
              </Button>
              <Button
                appearance='ghost'
                status='basic'
                size='tiny'
                onPress={() => RootNavigation.navigate("Register")}
              >
                {login_btn_rej}
              </Button>
            </Layout>
            {/* 登录 */}
            <Layout style={styles.layoutLeft} level='1'>
              <Button
                status='primary'
                disabled={!canLogin}
                onPress={() => {
                                if (selectedIndex === 0) {
                                    loginByPassword(phone, password);
                                } else {
                                    loginByCode(phone, code).then(_ => {});
                                }
                            }}
              >
                {login_btn_sub}
              </Button>
            </Layout>
          </View>
        </View>
      </View>
    );
}