miniapp/src/pages/login/components/Form.jsx

import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { Form, FormItem, Field, Button } from '@antmjs/vantui'
import { useModel } from '@/store';
import user from '@/assets/image/user.png';
import password from '@/assets/image/password.png';
import './form.less';

export default (props) => {
  const { onSuccess } = props;

  const { signin } = useModel('user');
  const form = Form.useForm();
  const [accErr, setAccErr] = React.useState();
  const [pwdErr, setPwdErr] = React.useState();

  const onFinish = (errs, res) => {
    if (!res.account) {
      setAccErr('账户不能为空');
      return;
    } else {
      setAccErr();
    }
    if (!res.password) {
      setPwdErr('密码不能为空');
      return;
    } else {
      setPwdErr();
    }

    signin(res).then(onSuccess);
  }

  const onForgetPwd = () => {
    Taro.navigateTo({
      url: '/pages/reset-password/index'
    });
  }

  return (
    <View className="login-form">
      <Form form={form} onFinish={onFinish}>
        <FormItem
          name="account"
          valueFormat={(e) => e.detail}
        >
          <Field
            border
            label="账号"
            leftIcon={user}
            errorMessage={accErr}
            placeholder="请输入您的登录账号"
          ></Field>
        </FormItem>
        <FormItem
          name="password"
          valueFormat={(e) => e.detail}
        >
          <Field
            password
            label="密码"
            leftIcon={password}
            errorMessage={pwdErr}
            placeholder="请输入您的登录密码"
          ></Field>
        </FormItem>
        <View className="forget-password" onClick={onForgetPwd}>
          忘记密码?
        </View>
        <View>
          <Button
            block
            type="primary"
            formType="submit"
          >
            登录
          </Button>
        </View>
      </Form>
    </View>
  )
}