登录 个人 与 零星采购

src/pages/login/login.tsx

@@ -1,8 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Form, Input, Button, Checkbox, Tabs, message } from 'antd';
 import { UserOutlined, LockOutlined, EyeInvisibleOutlined, EyeTwoTone, HomeOutlined } from '@ant-design/icons';
 import { history, useIntl } from 'umi';
 import './login.less';
+import { getCaptcha, supplierLogin } from '@/servers/api/login';
+
+import { encryptWithRsa } from '@/utils/encryptWithRsa'
+import Password from 'antd/lib/input/Password';
 
 const { TabPane } = Tabs;
 
@@ -10,17 +14,44 @@ const LoginPage: React.FC = () => {
   const [activeKey, setActiveKey] = useState('supplier');
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
+  const [captchaImg, setCaptchaImg] = useState<string>('');
+  const [captchaKey, setCaptchaKey] = useState<string>('');
+
   const intl = useIntl();
 
-  const onFinish = (values: any) => {
+  useEffect(() => {
+    fetchCaptcha();
+  }, [activeKey]);
+
+  const onFinish = async (values: any) => {
     setLoading(true);
-    console.log('登录信息:', values);
-    // 这里添加登录逻辑
-    setTimeout(() => {
+    try {
+      const params = {
+        ...values,
+        password: encryptWithRsa(values.password, false),
+        encryptValue: encryptWithRsa(values.identifying)
+      };
+      const loginRes = await supplierLogin(params);
+      if (loginRes.code === 200) {
+        sessionStorage.setItem('token', loginRes.data.token);
+        sessionStorage.setItem('currentUser', JSON.stringify(loginRes.data));
+        message.success('登录成功');
+        history.push('/index');
+      } else {
+        message.error(loginRes.message || '登录失败');
+      }
+    } finally {
       setLoading(false);
-      message.success('登录成功');
-      history.push('/index');
-    }, 1000);
+    }
+  };
+  
+
+  const fetchCaptcha = async () => {
+    const res = await getCaptcha();
+    if (res.code === 200) {
+      setCaptchaImg(res.data.base64Image);
+      setCaptchaKey(res.data.code);
+    }
   };
 
   const handleTabChange = (key: string) => {
@@ -62,21 +93,21 @@ const LoginPage: React.FC = () => {
   return (
     <div className='login-page'>
       <div className='login-container'>
-        <div className='back-home'>
+        {/* <div className='back-home'>
           <a onClick={() => history.push('/index')}>
             <HomeOutlined /> {intl.formatMessage({ id: 'login.back.home' })}
           </a>
-        </div>
+        </div> */}
 
         <div className='login-title'>{intl.formatMessage({ id: 'login.title' })}</div>
 
-        <div className="login-tab-container">
+        {/* <div className="login-tab-container">
           <Tabs activeKey={activeKey} onChange={handleTabChange} className='login-tabs'>
             <TabPane tab={intl.formatMessage({ id: 'login.tab.supplier' })} key="supplier" />
             <TabPane tab={intl.formatMessage({ id: 'login.tab.expert' })} key="expert" />
             <TabPane tab={intl.formatMessage({ id: 'login.tab.agent' })} key="agent" />
           </Tabs>
-        </div>
+        </div> */}
 
         <Form
           form={form}
@@ -86,7 +117,7 @@ const LoginPage: React.FC = () => {
           onFinish={onFinish}
         >
           <Form.Item
-            name="username"
+            name="account"
             rules={[{ required: true, message: intl.formatMessage({ id: 'login.username.placeholder' }) + '!' }]}
           >
             <Input
@@ -107,6 +138,26 @@ const LoginPage: React.FC = () => {
               size="large"
             />
           </Form.Item>
+          <Form.Item
+            name="identifying"
+            rules={[{ required: true, message: intl.formatMessage({ id: 'login.captcha.placeholder' }) + '!' }]}
+          >
+            <Input
+              placeholder={intl.formatMessage({ id: 'login.captcha.placeholder' })}
+              size="large"
+              maxLength={6}
+              autoComplete="off"
+              prefix={null}
+              suffix={
+                <img
+                src={`data:image/png;base64,${captchaImg}`}
+                  alt="验证码"
+                  style={{ cursor: 'pointer', height: 32, verticalAlign: 'middle' }}
+                  onClick={fetchCaptcha}
+                />
+              }
+            />
+          </Form.Item> 
 
           <Form.Item>
             <div className='login-options'>