Dingdong_client/screens/Login/LoginScreen.jsx

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StyleSheet, View, StatusBar, Platform, Image } from 'react-native';
import { Flex, WingBlank, InputItem } from '@ant-design/react-native';
import { Card, Paragraph, Caption } from 'react-native-paper';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import useModel from 'flooks';
import Toast from '../../flooks/Toast';
import user from '../../flooks/User';
import Button from '../../components/Button';

const Tab = createMaterialTopTabNavigator();

// const img = require('../../assets/images/loginImg.png')
const img2 = require('../../assets/images/loginLogo.png');

export default function LoginScreen({ navigation }) {
  const btnList = () => (
    <View style={styles.btn}>
      <Button
        text
        size="small"
        type="info"
        onPress={() => {
          navigation.navigate('BackPassword');
        }}
      >
        忘记密码
      </Button>
      <Button
        text
        size="small"
        type="info"
        onPress={() => {
          navigation.navigate('Register');
        }}
      >
        用户注册
      </Button>
    </View>
  );

  return (
    <>
      {Platform.OS !== 'ios' && <StatusBar backgroundColor="#FFF2C7" />}
      <View style={styles.container}>
        <WingBlank style={styles.container}>
          <Flex
            direction="column"
            justify="center"
            align="stretch"
            style={styles.container}
          >
            <Card style={styles.center}>
              <Image source={img2} style={styles.img2} resizeMode="contain" />
              <View style={styles.tab}>
                <Tab.Navigator
                  tabBarOptions={{
                    activeTintColor: '#FFC750',
                    inactiveTintColor: '#000',
                    indicatorStyle: {
                      backgroundColor: '#FFC750',
                      height: 0,
                    },
                    labelStyle: {
                      fontSize: 16,
                    },
                    style: {
                      backgroundColor: '#fff',
                      height: 50,
                      elevation: 0,
                      shadowOffset: {
                        width: 0,
                        height: 0,
                      },
                      shadowOpacity: 0,
                      shadowRadius: 0,
                      borderBottomWidth: 1,
                      borderColor: '#eee',
                    },
                  }}
                >
                  <Tab.Screen
                    name="密码登陆"
                    component={LoginPassword}
                    initialParams={{ btnList }}
                  />
                  <Tab.Screen
                    name="验证码登陆"
                    component={LoginCode}
                    initialParams={{ btnList }}
                  />
                </Tab.Navigator>
              </View>
            </Card>
          </Flex>
        </WingBlank>
      </View>
    </>
  );
}

const LoginPassword = ({ route }) => {
  const [phone, setphone] = React.useState();
  const [password, setPassword] = React.useState();

  const { warnning } = useModel(Toast, []);
  const { loginByPsd } = useModel(user, []);
  const { params } = route;
  const { btnList } = params || {};

  const submit = () => {
    if (!phone) {
      warnning('手机号不能为空');
    } else if (!password) {
      warnning('密码不能为空');
    } else {
      loginByPsd(phone, password);
    }
  };

  return (
    <View style={styles.list}>
      <InputItem
        clear
        type="phone"
        value={phone}
        onChange={setphone}
        placeholder="输入手机号"
        style={{ fontSize: 14 }}
      >
        <Paragraph>手机号</Paragraph>
      </InputItem>
      <InputItem
        clear
        type="password"
        value={password}
        onChange={setPassword}
        placeholder="输入密码"
        style={{ fontSize: 14 }}
      >
        <Paragraph>密码</Paragraph>
      </InputItem>

      {btnList()}

      <View style={[styles.btn, styles.sub]}>
        <Button onPress={submit}>登录</Button>
      </View>
    </View>
  );
};

const LoginCode = ({ route }) => {
  const [phone, setphone] = React.useState();
  const [code, setCode] = React.useState();
  const { warnning } = useModel(Toast, []);
  const { loginByPsd } = useModel(user, []);
  const { params } = route;
  const { btnList } = params || {};
  const submit = () => {
    if (!phone) {
      warnning('手机号不能为空');
    } else if (!code) {
      warnning('验证码');
    } else {
      loginByPsd(phone, code);
    }
  };
  return (
    <View style={styles.list}>
      <InputItem
        clear
        type="phone"
        value={phone}
        onChange={setphone}
        style={{ fontSize: 14 }}
        placeholder="输入手机号"
      >
        <Paragraph>手机号</Paragraph>
      </InputItem>
      <InputItem
        clear
        type="number"
        value={code}
        onChange={setCode}
        extra={<Caption style={{ color: '#FFC21C' }}>发送验证码</Caption>}
        placeholder="输入验证码"
        maxLength={6}
        style={{ fontSize: 14 }}
        onExtraClick={() => {
          console.log('发送验证码');
        }}
      >
        <Paragraph>验证码</Paragraph>
      </InputItem>
      {btnList()}
      <View style={[styles.btn, styles.sub]}>
        <Button onPress={submit}>登录</Button>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#FFF2C7' },
  center: {
    paddingHorizontal: 10,
    // paddingVertical: 20,
    paddingTop: 20,
    backgroundColor: '#fff',
    borderRadius: 7,
    flexDirection: 'column',
    height: 380,
  },
  img2: {
    height: 90,
    backgroundColor: '#fff',
    width: '100%',
    // marginBottom: 20,
  },
  list: {
    backgroundColor: '#fff',
    borderWidth: 0,
    paddingTop: 10,
    height: 200,
  },
  tab: {
    flex: 1,
    backgroundColor: '#fff',
    paddingBottom: 20,
  },
  btn: {
    paddingLeft: 70,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 5,
  },
  sub: {
    marginTop: 10,
    marginLeft: 10,
  },
});