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 SmsInput from "../components/SmsInput";
// 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 }}
                />

                {/* 验证码 */}
                <SmsInput
                  label={`${login_form_3}:`}
                  placeholder={login_pla_3}
                  labelWidth={50}
                  phone={phone}
                  onCodeChange={changeCode}
                  type="login"
                />
              </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);
                }
              }}
            >
              {login_btn_sub}
            </Button>
          </Layout>
        </View>
      </View>
    </View>
  );
}