fix

src/pages/login/API/index.ts

@@ -38,6 +38,19 @@ export async function phoneLogin(data: { phone: string; code: string }) {
   })
 }
 
+// 邮箱code
+export async function getEmailNoteCodeApi(email: string) {
+  return request(mpApi + `/erp/user/emailCodeLoginState/${email}`)
+}
+
+// 邮箱登录
+export async function emailLoginApi(params: { email: string, code: string }) {
+  return request(mpApi + `/erp/user/emailCodeLogin`, {
+    method: 'POST',
+    data: params
+  })
+}
+
 // 手机短信验证码获取
 export async function getNoteCode(phone: string) {
   return request({ url: mpApi + `/erp/user/smsCodeLoginState/${phone}` })

src/pages/login/login.tsx

@@ -1,6 +1,6 @@
 import { Button, message, Radio, Spin } from 'antd';
 import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react';
-import { getCode, getDingKey, ddlogin, phoneLogin, selectCompanyApi, getNoteCode } from './API';
+import { getCode, getDingKey, ddlogin, phoneLogin, selectCompanyApi, getNoteCode, getEmailNoteCodeApi, emailLoginApi } from './API';
 import styles from './index.less';
 import { CopyrightOutlined, SwapRightOutlined } from '@ant-design/icons';
 import Bg from './components/bg';
@@ -21,10 +21,11 @@ import { getMenu } from '@/API';
 const Login: React.FC<{}> = () => {
   const store = useLocalObservable(() => { return { loginStore, globaStore } })
   const [values, setValues] = useState<{ phone: string, code: string }>({ phone: '', code: '' })
+  const [emailData, setEmailData] = useState<{ email: string, code: string }>({ email: '', code: '' })
   const [isLogin, setIsLogin] = useState<boolean>(false)
   const [videoMenu, setVideoMenu] = useState<{ visible: boolean, left?: number, top?: number }>({ visible: false, left: 0, top: 0 })
   const [show, setShow] = useState<boolean>(false)
-  const [tab, setTab] = useState<1 | 2>(1)
+  const [tab, setTab] = useState<1 | 2 | 3>(1)
   const [APPID,] = useState<string>(process.env.CONFIG.DDAPPID)//测试 dingdsfuoevmawlyyrjx  线上dingwfmhucedfluenpuj
   const [REDIRECT_URI,] = useState<string>(encodeURIComponent(window.location.href?.split('?')[0]))
   const [companyList, setCompanyList] = useState<any[]>([])
@@ -35,6 +36,8 @@ const Login: React.FC<{}> = () => {
   const get_Menu = useAjax(() => getMenu())
   const [feasible, setFeasible] = useState(true)//是否浏览器内核大于87
   const [codeType, setCodeType] = useState(1)//1钉钉验证码 2短信验证码
+  const getEmailNoteCode = useAjax((phone) => getEmailNoteCodeApi(phone))//短信验证码
+  const emailLogin = useAjax((params: any) => emailLoginApi(params))//用邮箱登录
 
   // token登录
   useEffect(() => {
@@ -290,6 +293,59 @@ const Login: React.FC<{}> = () => {
       })
     }
   }
+
+  // 获取游戏验证码
+  const getEmailCode = () => {
+    const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    if (emailData?.email && !regex.test(emailData.email)) {
+      message.error('请输入正确的邮箱！！！')
+      return
+    }
+    if (emailData) {
+      setM(30)
+      getEmailNoteCode.run(emailData?.email).then(res => {
+        if (res.code === 200) {
+          message.success('获取成功，请查看你的邮箱！验证码将以邮件的形式发送到您的邮箱！')
+          timeOut(30)
+        } else {
+          timeOut(0)
+        }
+      }).catch(() => timeOut(0))
+    } else {
+      message.error('请输入邮箱地址！！！')
+    }
+  }
+
+  // 邮箱登录
+  const emailSubmit = () => {
+    if (emailData?.code) {
+      emailLogin.run(emailData).then(res => {
+        try {
+          if (res.code === 200) {
+            setIsLogin(false)
+            localStorage.setItem('Admin-Token', res?.data?.token)
+            let companyInfo = res?.data?.companyRelationInfo?.filter((item: { companyId: number }) => item.companyId !== 4 && item.companyId !== 3)
+            if (companyInfo?.length === 0) {
+              localStorage.removeItem('Admin-Token')
+              message.error('登录失败，请用趣程运营平台账号登录')
+              return
+            } else if (companyInfo?.length === 1) {
+              setCompanyHandle(res?.data?.companyRelationInfo[0].companyId)
+            } else {
+              setCompanyList(companyInfo)
+            }
+            return;
+          } else {
+            setIsLogin(false)
+          }
+        } catch (error) {
+          setIsLogin(false)
+          message.error('登录失败，请重试！');
+        }
+      })
+    }
+  }
+
   // 判断浏览器内核
   useEffect(() => {
     let v = navigator.userAgent
@@ -335,6 +391,7 @@ const Login: React.FC<{}> = () => {
                 <h1>趣程企微管理后台</h1>
                 {<div className={styles.tabs}>
                   <span onClick={() => { setTab(1) }} style={tab === 1 ? { color: localStorage.getItem('color') || '#24DB95' } : {}}>手机</span>
+                  <span onClick={() => { setTab(3) }} style={tab === 3 ? { color: localStorage.getItem('color') || '#24DB95' } : {}}>邮箱</span>
                   {/* <span onClick={() => { setTab(2) }} style={tab === 2 ? { color: localStorage.getItem('color') || '#24DB95' } : {}}>钉钉</span> */}
                 </div>}
 
@@ -396,8 +453,51 @@ const Login: React.FC<{}> = () => {
                       disabled={isLogin}
                       style={{ background: localStorage.getItem('color') || '#24DB95' }}
                     >登录</button>
-                  </> :
-                    <div id='login_container' />
+                  </> : tab === 3 ? <>
+                    <div>
+                      <input
+                        className={styles.input}
+                        placeholder='Email'
+                        value={emailData?.email}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          let value = e.target.value
+                          if (value === '背景') {
+                            setVideoMenu({ visible: true })
+                          }
+                          setEmailData({ ...values, email: value })
+                        }}
+                      />
+                    </div>
+                    <div>
+                      <input
+                        className={styles.input}
+                        placeholder='Code'
+                        style={{ width: '60%' }}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          let value = e.target.value
+                          setEmailData({ ...emailData, code: value })
+                        }}
+                        onKeyUp={(event: React.KeyboardEvent<HTMLInputElement>) => {
+                          if (event.key === 'Enter') {
+                            phoneSubmit()
+                          }
+                        }}
+                      />
+                      <button
+                        className={styles.btn}
+                        style={!m ? { background: localStorage.getItem('color') || '#24DB95' } : { background: '#999' }}
+                        onClick={getEmailCode}
+                        disabled={!!m}
+                      >
+                        {!m ? '获取验证码' : m + '秒再次获取'}
+                      </button>
+                    </div>
+                    <button
+                      onClick={emailSubmit}
+                      disabled={isLogin}
+                      style={{ background: localStorage.getItem('color') || '#24DB95' }}
+                    >登录</button>
+                  </> : <div id='login_container' />
                 }
               </div>}
             </div>