new login

config/proxy.ts

@@ -7,7 +7,7 @@ export default {
     // },
     '/api/*': {
       // target: 'http://10.242.37.148:18022',//连接天宫的ng
-      target: 'http://10.60.161.52:18030/',//连接天宫的ng
+      target: 'http://192.168.110.46:18030/',//连接天宫的ng
       changeOrigin: true,
       pathRewrite: { '^/api': '' },
     },

config/router_transfer.ts

@@ -4,6 +4,10 @@ export default [
     path: '/internal-login',
     component: './Login/internal',
   },
+  {
+    path: '/login',
+    component: './Login/login',
+  },
   // {//内部人员便捷登陆页
   //   path: '/loginFake',
   //   component: './Login/index',

src/pages/Login/internal.tsx

@@ -138,7 +138,7 @@ const InternalLogin: React.FC = () => {
   return (
     <div className={styles.loginContainer}>
       <Card className={styles.loginCard}>
-        <Title level={2} style={{ textAlign: 'center', marginBottom: 32 }}>
+        <Title level={2} style={{ textAlign: 'center', lineHeight: '80px', fontSize: 32, fontWeight: 700, marginBottom: 0 }}>
           电子招投标平台
         </Title>
 

src/pages/Login/login.tsx

@@ -0,0 +1,194 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Form, Input, Button, Checkbox, Card, Typography, Tabs } from 'antd';
+import { UserOutlined, LockOutlined, EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
+import { history } from 'umi';
+import cookie from 'react-cookies';
+import CaptchaInput from '@/components/CaptchaInput';
+import styles from './internal.less';
+import { userLogin } from '@/services/login';
+
+const { Title, Link } = Typography;
+
+interface LoginFormValues {
+  username: string;
+  password: string;
+  captcha: {
+    captcha: string;
+    captchaToken: string;
+  };
+  remember: boolean;
+}
+
+type UserType = 'supplier' | 'expert' | 'agent';
+
+const changeTabsInkBar = (activeKey: UserType) => {
+  const tabsInkBar = document.querySelector(`.${styles['tabs-ink-bar']}`);
+  if (tabsInkBar) {
+    const tabWidth = 124;
+    const gap = 22;
+    const left = 32 + (activeKey === 'supplier' ? 0 : activeKey === 'expert' ? tabWidth + gap : tabWidth * 2 + gap * 2);
+    (tabsInkBar as any).style.left = `${left}px`;
+  }
+}
+
+const Login: React.FC = () => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [activeTab, setActiveTab] = useState<UserType>('supplier');
+  const captchaRef = useRef<any>(null);
+
+  const onFinish = async (values: LoginFormValues) => {
+    const params = {
+      account: values.username,
+      password: values.password,
+      captcha: values.captcha,
+      remember: values.remember,
+    }
+    try {
+      setLoading(true);
+      const res = await userLogin(params, activeTab);
+
+      if (res?.code === 200) {
+        sessionStorage.setItem('Authorization', res?.data?.token || '');
+        history.push('/redirect');
+      } else {
+        captchaRef.current?.refresh();
+        form.setFieldsValue({
+          captcha: {
+            captcha: '',
+            captchaToken: '',
+          },
+        });
+      }
+    } catch (error) {
+      console.error('登录失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+
+  // 组件挂载时，检查是否有记住的用户名
+  useEffect(() => {
+    const savedUser = localStorage.getItem('remember_user');
+    if (savedUser) {
+      const user = JSON.parse(savedUser);
+      form.setFieldsValue({
+        username: user.username,
+        password: user.password,
+        remember: true,
+      });
+    }
+  }, [form]);
+
+  useEffect(() => {
+    changeTabsInkBar(activeTab);
+    cookie.remove('mall3_token');
+    sessionStorage.clear();
+  }, []);
+
+  const renderLoginForm = () => (
+    <Form
+      form={form}
+      name="login"
+      onFinish={onFinish}
+      autoComplete="off"
+      size="large"
+    >
+      <Form.Item
+        name="username"
+        rules={[{ required: true, message: '请输入用户名' }]}
+      >
+        <Input
+          prefix={<UserOutlined style={{ color: '#bfbfbf' }} />}
+          placeholder={'请输入用户名'}
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="password"
+        rules={[{ required: true, message: '请输入密码' }]}
+      >
+        <Input.Password
+          prefix={<LockOutlined style={{ color: '#bfbfbf' }} />}
+          placeholder="请输入密码"
+          iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="captcha"
+        rules={[
+          { required: true, message: '请输入验证码' },
+        ]}
+      >
+        <CaptchaInput
+          placeholder="请输入验证码"
+          ref={captchaRef}
+        />
+      </Form.Item>
+
+      <Form.Item>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Form.Item name="remember" valuePropName="checked" noStyle>
+            <Checkbox>记住密码</Checkbox>
+          </Form.Item>
+          <Link href="#" style={{ color: '#1890ff' }}>忘记密码？</Link>
+        </div>
+      </Form.Item>
+
+      <Form.Item>
+        <Button type="primary" htmlType="submit" loading={loading} block>
+          登录
+        </Button>
+      </Form.Item>
+
+      <div style={{ textAlign: 'center' }}>
+        <span style={{ color: '#8c8c8c' }}>还没有账号？</span>
+        <Link style={{ color: '#1890ff' }}>立即注册</Link>
+      </div>
+    </Form>
+  );
+
+  const tabItems = [
+    {
+      key: 'supplier',
+      label: '供应商',
+      children: renderLoginForm(),
+    },
+    {
+      key: 'expert',
+      label: '专家',
+      children: renderLoginForm(),
+    },
+    {
+      key: 'agent',
+      label: '招标代理',
+      children: renderLoginForm(),
+    },
+  ];
+
+  return (
+    <div className={styles.loginContainer}>
+      <Card className={styles.loginCard}>
+        <Title level={2} style={{ textAlign: 'center', lineHeight: '80px', fontSize: 32, fontWeight: 700, marginBottom: 0 }}>
+          电子招投标平台
+        </Title>
+
+        <Tabs
+          activeKey={activeTab}
+          onChange={(key) => {
+            setActiveTab(key as UserType);
+            changeTabsInkBar(key as UserType);
+          }}
+          centered
+          size="large"
+          items={tabItems}
+        />
+        <div className={styles['tabs-ink-bar']} />
+      </Card>
+    </div>
+  );
+};
+
+export default Login;

src/services/login.ts

@@ -170,3 +170,26 @@ export async function internalUserLogin(params: InternalUserLoginParamsType) {
     data,
   });
 }
+
+/**
+ * 供应商 专家 招标代理 登录
+ */
+export async function userLogin(params: InternalUserLoginParamsType, type: 'supplier' | 'expert' | 'agent') {
+  // 加密密码
+  const encryptedPassword = encryptData(params.password);
+  const data = {
+    account: params.account,
+    password: encryptedPassword,
+    identifying: params.captcha.captcha,
+    encryptValue: params.captcha.captchaToken,
+  }
+  const urlMap = {
+    supplier: '/api/v1/login/accountLogin/supplier',
+    expert: '/api/v1/login/accountLogin/expert',
+    agent: '/api/v1/login/accountLogin/supplier',
+  }
+  return request(urlMap[type], {
+    method: 'POST',
+    data,
+  });
+}