Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
X
xiaomai-cloud-class-web
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
xiaomai-cloud-class
xiaomai-cloud-class-web
Commits
e220cf0c
Commit
e220cf0c
authored
Jun 22, 2021
by
guomingpang
Browse files
Options
Browse Files
Download
Plain Diff
feat:login_page_modify
parents
ac840091
da680cd7
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
321 additions
and
850 deletions
+321
-850
src/modules/root/Login.jsx
+48
-233
src/modules/root/Login.less
+34
-447
src/modules/root/WechatLogin.less
+30
-29
src/modules/root/WechatLogin.tsx
+117
-114
yarn.lock
+92
-27
No files found.
src/modules/root/Login.jsx
View file @
e220cf0c
import
React
,
{
useEffect
,
useState
}
from
'react'
import
{
withRouter
}
from
'react-router-dom'
import
'./Login.less'
import
{
Input
,
Popover
,
message
,
Tabs
,
Button
}
from
'antd'
import
CheckBeforeSendCode
from
'../../components/CheckBeforeSendCode'
import
User
from
'@/common/js/user'
import
WechatLogin
from
'./WechatLogin'
import
BaseService
from
'@/domains/basic-domain/baseService'
import
storage
from
'@/common/js/storage'
import
axios
from
'axios'
import
_
from
'underscore'
import
user
from
'@/common/js/user'
const
{
TabPane
}
=
Tabs
function
Login
(
props
)
{
const
[
phone
,
setPhone
]
=
useState
(
''
)
// 登录手机号
const
[
phoneverify
,
setPhoneverify
]
=
useState
(
''
)
// 密码登录验证码
const
[
openCheck1
,
setOpenCheck1
]
=
useState
(
false
)
const
[
checking1
,
setChecking1
]
=
useState
(
false
)
const
[
codeText
,
setCodeText
]
=
useState
(
'获取验证码'
)
// 验证码提示语
const
[
waitStatus
,
setWaitStatus
]
=
useState
(
false
)
// 验证码是否在倒计时
const
[
errorMessage
,
setErrorMessage
]
=
useState
(
''
)
const
[
phoneError
,
setPhoneError
]
=
useState
(
false
)
const
[
checkObject1
,
setCheckObject1
]
=
useState
({})
import
React
,
{
useEffect
,
useState
}
from
'react'
;
import
{
withRouter
}
from
'react-router-dom'
;
import
'./Login.less'
;
import
User
from
'@/common/js/user'
;
import
WechatLogin
from
'./WechatLogin'
;
import
BaseService
from
'@/domains/basic-domain/baseService'
;
import
storage
from
'@/common/js/storage'
;
import
_
from
'underscore'
;
import
user
from
'@/common/js/user'
;
function
Login
()
{
useEffect
(()
=>
{
const
enterpriseId
=
getParameterByName
(
'enterpriseId'
)
const
userId
=
getParameterByName
(
'userId'
)
const
from
=
getParameterByName
(
'from'
)
const
storeId
=
getParameterByName
(
'storeId'
)
const
enterpriseId
=
getParameterByName
(
'enterpriseId'
)
;
const
userId
=
getParameterByName
(
'userId'
)
;
const
from
=
getParameterByName
(
'from'
)
;
const
storeId
=
getParameterByName
(
'storeId'
)
;
if
(
storeId
)
{
User
.
setCustomerStoreId
(
storeId
)
User
.
setCustomerStoreId
(
storeId
)
;
}
if
(
from
===
'customer'
&&
enterpriseId
&&
userId
)
{
if
(
!
user
.
getToken
()
||
enterpriseId
!==
user
.
getEnterpriseId
()
||
userId
!==
User
.
getUserId
())
{
getWXWorkLoginNoCheck
(
enterpriseId
,
userId
)
getWXWorkLoginNoCheck
(
enterpriseId
,
userId
)
;
}
else
{
window
.
RCHistory
.
push
({
pathname
:
`/switch-route`
})
pathname
:
`/switch-route`
,
})
;
}
}
else
{
User
.
removeUserId
()
User
.
removeToken
()
User
.
removeEnterpriseId
()
User
.
removeUserId
()
;
User
.
removeToken
()
;
User
.
removeEnterpriseId
()
;
}
storage
.
set
(
"expiration_tip_login"
,
true
)
},
[])
storage
.
set
(
'expiration_tip_login'
,
true
);
},
[])
;
function
getWXWorkLoginNoCheck
(
enterpriseId
,
userId
)
{
const
params
=
{
appTermEnum
:
'XIAOMAI_CLOUD_CLASS_PC_WEB_ADMIN'
,
enterpriseId
,
userId
}
userId
,
}
;
BaseService
.
getWXWorkLoginNoCheck
(
params
).
then
((
res
)
=>
{
User
.
setUserId
(
res
.
result
.
loginInfo
.
userId
)
User
.
setToken
(
res
.
result
.
loginInfo
.
xmToken
)
User
.
setEnterpriseId
(
res
.
result
.
enterpriseId
)
User
.
setIdentifier
(
res
.
result
.
identifier
)
User
.
setUserId
(
res
.
result
.
loginInfo
.
userId
)
;
User
.
setToken
(
res
.
result
.
loginInfo
.
xmToken
)
;
User
.
setEnterpriseId
(
res
.
result
.
enterpriseId
)
;
User
.
setIdentifier
(
res
.
result
.
identifier
)
;
window
.
RCHistory
.
push
({
pathname
:
`/switch-route`
})
})
}
async
function
checkAccount
(
code
,
callback
=
()
=>
{})
{
callback
()
}
function
checkSend
(
code
)
{
if
(
!
phone
)
{
setPhoneError
(
true
)
setErrorMessage
(
'请输入手机号'
)
return
}
if
(
phone
.
length
!=
11
)
{
setPhoneError
(
true
)
setErrorMessage
(
'请输入11位手机号'
)
return
}
!
_
.
isEmpty
(
checkObject1
)
&&
checkObject1
.
reset
()
setOpenCheck1
(
true
)
}
function
handleSendSMSCode
(
checkData
,
userType
)
{
if
(
waitStatus
)
return
let
timer
const
params
=
{
phone
:
phone
,
sig
:
checkData
.
sig
,
sessionId
:
checkData
.
csessionid
,
token
:
checkData
.
token
,
scene
:
'nc_login'
,
serverType
:
'CLOUD_CLASS_LOGIN'
,
appTermEnum
:
'XIAOMAI_CLOUD_CLASS_PC_WEB_ADMIN'
}
BaseService
.
sendLoginAuthCode
(
params
).
then
((
res
)
=>
{
if
(
!
res
.
success
)
{
setErrorMessage
(
res
.
message
)
}
else
{
timeSub
(
60
)
setChecking1
(
true
)
}
})
function
timeSub
(
waitTime
,
unit
)
{
clearTimeout
(
timer
)
timer
=
setTimeout
(
function
()
{
if
(
waitTime
===
0
)
{
setCodeText
(
'发送验证码'
)
setChecking1
(
false
)
setWaitStatus
(
false
)
clearTimeout
(
timer
)
}
else
{
setCodeText
(
`
${
waitTime
}
秒后重发`
)
setWaitStatus
(
true
)
timeSub
(
--
waitTime
,
1000
)
}
},
unit
||
0
)
}
}
function
handleSubmit
()
{
if
(
!
phone
)
{
setPhoneError
(
true
)
setErrorMessage
(
'请输入手机号'
)
return
}
if
(
phone
.
length
!=
11
)
{
setPhoneError
(
true
)
setErrorMessage
(
'请输入11位手机号'
)
return
}
if
(
!
phoneverify
)
{
setErrorMessage
(
'请输入验证码'
)
return
}
const
params
=
{
phone
,
authCode
:
phoneverify
,
appTermEnum
:
'XIAOMAI_CLOUD_CLASS_PC_WEB_ADMIN'
}
BaseService
.
login
(
params
).
then
((
res
)
=>
{
if
(
!
res
.
success
)
{
setErrorMessage
(
res
.
message
)
}
else
{
User
.
setUserId
(
res
.
result
.
userId
)
User
.
setToken
(
res
.
result
.
xmToken
)
window
.
RCHistory
.
push
({
pathname
:
`/switch-route`
})
}
})
pathname
:
`/switch-route`
,
});
});
}
return
(
<
div
className=
"login-page"
>
<
div
className=
"logo-img-box"
><
img
src=
"https://image.xiaomaiketang.com/xm/6k8PPCmywG.png"
className=
"logo-img"
/></
div
>
<
div
className=
"login-main"
>
<
div
className=
"left-banner"
>
<
div
className=
"img-box"
><
img
src=
"https://image.xiaomaiketang.com/xm/CDCcdAdaPs.png"
alt=
""
/></
div
>
</
div
>
<
div
className=
"login-box"
>
<
div
className=
"left-top-block color-block"
></
div
>
<
div
className=
"right-bottom-block color-block"
></
div
>
<
div
className=
"login"
>
<
div
className=
"r"
>
<
Tabs
defaultActiveKey=
"1"
>
<
TabPane
tab=
"企业微信登录"
key=
"1"
>
<
WechatLogin
></
WechatLogin
>
</
TabPane
>
<
TabPane
tab=
'手机号登录'
key=
'2'
>
<
div
className=
'login-form'
>
<
div
className=
'form'
>
<
div
className=
'username'
style=
{
{
marginBottom
:
16
}
}
>
<
Input
type=
'phone'
autoComplete=
'off'
name=
'account'
maxLength=
{
11
}
placeholder=
"请输入手机号"
value=
{
phone
}
onChange=
{
(
e
)
=>
{
setPhone
(
e
.
target
.
value
)
}
}
/>
</
div
>
<
div
className=
'error-message'
></
div
>
<
div
className=
'phoneverify'
>
<
Input
type=
"text"
id=
"phoneverify"
name=
"phoneverify"
placeholder=
"请输入验证码"
autoComplete=
"off"
value=
{
phoneverify
}
maxLength=
{
4
}
onChange=
{
(
e
)
=>
{
setPhoneverify
(
e
.
target
.
value
)
}
}
/>
<
Popover
visible=
{
openCheck1
}
trigger=
'click'
title=
''
content=
{
<
div
>
<
span
style=
{
{
fontSize
:
'12px'
,
color
:
'#999'
,
marginBottom
:
8
,
display
:
'block'
}
}
>
请完成安全验证
</
span
>
<
CheckBeforeSendCode
callback=
{
(
data
,
nc
)
=>
{
setCheckObject1
(
nc
)
checkAccount
(
1
,
(
userType
)
=>
{
handleSendSMSCode
(
data
,
userType
)
setTimeout
(()
=>
{
setOpenCheck1
(
false
)
},
500
)
})
}
}
/>
</
div
>
}
onVisibleChange=
{
(
value
)
=>
{
if
(
!
value
)
{
setOpenCheck1
(
false
)
}
}
}
placement=
'bottomRight'
>
<
div
className=
'btn'
id=
'sendVerifyCode'
onClick=
{
()
=>
{
if
(
checking1
)
return
checkSend
(
1
)
}
}
>
{
codeText
}
</
div
>
</
Popover
>
</
div
>
<
div
className=
'error-message'
>
{
errorMessage
}
</
div
>
<
div
className=
'submit'
>
<
div
className=
'btn'
>
<
span
id=
'loginIn'
onClick=
{
()
=>
{
handleSubmit
()
}
}
>
登录
</
span
>
</
div
>
</
div
>
</
div
>
</
div
>
</
TabPane
>
</
Tabs
>
</
div
>
<
div
className=
'login-page'
>
<
div
className=
'logo-img-box'
>
<
img
src=
'https://image.xiaomaiketang.com/xm/6k8PPCmywG.png'
className=
'logo-img'
/>
</
div
>
<
div
className=
'login-main'
>
<
div
className=
'left-banner'
>
<
div
className=
'img-box'
>
<
img
src=
'https://image.xiaomaiketang.com/xm/zmsfCP4e5i.png'
alt=
''
/>
</
div
>
</
div
>
<
div
className=
'login-box'
>
<
img
className=
'login-logo'
src=
'https://image.xiaomaiketang.com/xm/PrxzFpFH7C.png'
></
img
>
<
h3
>
小麦企培(讲师版)
</
h3
>
<
h4
>
企业微信登陆
</
h4
>
<
WechatLogin
></
WechatLogin
>
</
div
>
</
div
>
</
div
>
)
)
;
}
export
default
withRouter
(
Login
)
export
default
withRouter
(
Login
)
;
src/modules/root/Login.less
View file @
e220cf0c
@import url(
"../../core/variables.less"
);
@import url(
'../../core/variables.less'
);
.login-page {
position: static;
font-family:
"微软雅黑"
;
font-family:
'微软雅黑'
;
padding: 0;
min-width: 1200px;
background: #
F4F6FA
;
background: #
fff
;
height: 100%;
overflow-y: hidden;
.logo-img-box{
.logo-img-box
{
position: absolute;
top:24px;
right:32px;
z-index:1;
.logo-img{
width:120px;
top:
24px;
right:
32px;
z-index:
1;
.logo-img
{
width:
120px;
display: inline-block;
}
}
.login-main {
min-width: 1200px;
display: flex;
}
.left-banner {
position: relative;
width: 540px;
height: 100vh;
.img-box {
background: #2966FF;
width: 540px;
height: 100vh;
img {
width: 540px;
height: 800px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: block;
height: 100vh;
}
}
}
.login-box {
min-width:
7
40px;
min-width:
5
40px;
height: 100vh;
width: calc(100vw - 500px);
position: relative;
.color-block {
width: 256px;
height: 256px;
background: rgba(41, 102, 255, 0.05);
position: absolute;
top:0;
left: 0;
&.right-bottom-block {
top:auto;
left: auto;
bottom: 0;
right: 0;
}
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
.login-logo {
height: 80px;
width: 80px;
}
.go-to-site {
position: absolute;
bottom: -80px;
width: 200px;
margin: 0 auto;
left: 50%;
margin-left: -50px;
a {
color: #fff;
text-decoration: none;
}
span.icon {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
font-size: 12px;
display: inline-block;
margin-right: 10px;
}
h3 {
font-size: 20px;
line-height: 1;
margin: 15px 0 41px;
}
.login {
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
width: 420px;
height: 420px;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
overflow: hidden;
background-color: #ffffff;
border-radius: 4px;
.ant-tabs-tab-btn {
color: #999999;
font-size: 18px;
line-height: 25px;
&.ant-tabs-tab-active {
color: #333333;
}
}
.ant-tabs-tab-active {
.ant-tabs-tab-btn {
color: #333333;
font-weight:500!important;
}
}
.ant-tabs-nav::before {
display: none;
}
.ant-tabs-tab {
text-align: center;
margin:0;
}
.ant-tabs > .ant-tabs-nav .ant-tabs-nav-list {
margin: 0 auto;
}
.ant-tabs-top > .ant-tabs-nav .ant-tabs-ink-bar {
h4 {
font-size: 18px;
line-height: 1;
&::after {
display: block;
content: '';
width: 24px;
height: 4px;
}
.l {
width: 280px;
height: 100%;
background: @primary;
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#ffaa1a),
to(#ff8634)
) !important;
display: flex;
display: -webkit-flex;
-webkit-flex-direction: column;
flex-direction: column;
align-items: center;
color: #ffffff;
font-size: 12px;
justify-content: center;
-webkit-justify-content: center;
.logo {
height: 125px;
img {
height: 100%;
}
}
.name {
font-size: 16px;
margin-bottom: 20px;
}
.desc {
opacity: 0.7;
margin-bottom: 20px;
}
.items {
ul {
padding: 0;
li {
.icon {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
display: inline-block;
margin-right: 10px;
}
line-height: 30px;
list-style-type: none;
}
}
}
}
.r {
flex: 1;
-webkit-flex: 1;
height: 100%;
padding: 40px;
box-sizing: border-box;
position: relative;
&.show-qrcode {
.qrcode {
display: block;
}
.top-right-tip {
.computer {
display: inline-block;
}
.icon-container {
display: none;
}
}
}
.login-form{
margin-top:32px;
}
.qrcode {
display: none;
text-align: center;
position: absolute;
background: #fff;
z-index: 1;
left: 20px;
top: 28px;
padding-top: 20px;
img {
display: inline-block;
width: 180px;
}
}
.top-right-tip {
cursor: pointer;
position: absolute;
top: 4px;
right: 4px;
.computer {
display: none;
}
.icon-container {
position: relative;
height: 32px;
width: 32px;
display: inline-block;
.tips {
width: 69px;
position: absolute;
top: 0;
right: 36px;
img {
width: 100%;
}
}
.shade {
position: absolute;
width: 100%;
height: 150%;
top: 0;
margin-left: -100%;
background: #fff;
transform-origin: right top;
transform: rotate(-45deg);
}
}
span.icon {
font-size: 32px;
}
}
.title {
font-size: 18px;
font-weight: 500;
color: #333333;
line-height: 25px;
text-align: center;
font-weight: bold;
margin-bottom: 43px;
&::after {
}
.text1 {
color: black;
}
.icon {
font-size: 11px;
}
#login-method {
width: 100%;
text-align: center;
span {
color: #999;
font-weight: 400;
&:hover {
color: #333;
}
}
span.active {
font-weight: 500;
color: #333;
&::after {
content: "";
display: block;
width: 24px;
height: 4px;
border-radius: 3px;
background: #ff8534;
margin: 10px auto 0;
}
}
#password-login {
margin-right: 32px;
}
}
}
#password-icon {
color: #bfbfbf;
margin-right: 10px;
cursor: pointer;
&:hover {
color: #fc9c6b;
}
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
}
input {
display: block;
width: 100%;
height: 40px;
line-height: 40px;
border: 1px solid #e8e8e8; // border-bottom: 1px solid @xm-color-border;
padding-right: 30px;
padding-left: 10px;
margin-bottom: 16px;
background-color: transparent;
background-image: none;
border-radius: 4px;
box-sizing: border-box;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
&:focus,
&:active,
&:hover {
outline: none; // border: none!important;
// border-bottom: 1px solid @sun!important;
box-shadow: none;
border-color: @primary;
}
}
::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #ccc;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #ccc;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #ccc;
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #ccc;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
.username,
.password,
.phoneverify {
height: 40px;
position: relative;
color: #666666;
.icon {
position: absolute;
right: 5px;
top: 5px;
font-size: 20px;
}
#sendVerifyCode {
cursor: pointer;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
position: absolute;
right: 10px;
top: -53px; // border: 1px solid @sun;
height: 25px;
width: 90px;
border-radius: 3px;
margin-top: 60px;
font-size: 14px; // font-weight: 300;
color:#2966FF;
&:hover {
color: #2966FF;
}
&::before {
content: "";
display: block;
height: 20px;
width: 1px;
background-color: #e8e8e8;
margin-right: 10px;
}
}
}
.error-message {
font-size: 14px;
font-weight: 400;
color: @warning;
line-height: 20px;
margin-top: 9px;
}
.network-message {
text-align: center;
font-size: 14px;
color: #000;
margin-top: 11px;
.icon {
font-size: 14px;
color: @primary;
margin-right: 8px;
}
.refresh {
font-size: 14px;
color: #2966FF;
cursor: pointer;
}
}
#sendVoiceVerifyCode {
cursor: pointer;
}
.phoneverify-voice {
// padding-left: 5px;
margin-top: 10px;
&::after {
}
}
.submit {
margin-top: 24px;
button {
// font-weight: 300;
}
}
.apply {
cursor: pointer;
text-align: right;
margin-top: 10px;
color: #999;
float: right; // font-weight: 300;
span.icon {
font-size: 12px;
margin-left: 7px;
}
&:hover {
color: #fc9c6b;
}
}
.btn {
#loginIn {
display: block;
width: 100%;
background: @primary;
color: #fff;
font-size: 14px;
font-weight: 400 !important;
line-height: 40px !important;
border-radius: 4px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
cursor: pointer;
border: none;
text-align:center;
&:hover {
opacity: 0.7;
background: #5C8AFF;
}
}
}
background: #ffb714;
border-radius: 3px;
margin: 6px auto 0;
}
}
}
...
...
src/modules/root/WechatLogin.less
View file @
e220cf0c
...
...
@@ -9,39 +9,40 @@
color: #999999;
line-height: 20px;
}
.rwm{
.rwm
{
position: relative;
width: 210px;
height: 210px;
text-align: center;
display: inline-block;
margin-top: 2
4
px;
border: 1px
soli
d #e8e8e8;
margin-top: 2
0
px;
border: 1px
dashe
d #e8e8e8;
border-radius: 2px;
padding:15px;
.error{
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.95);
display: flex;
align-items:center;
justify-content:center;
left:5px;
top:5px;
div{
margin: 0 10px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 20px;
}
.ope{
cursor: pointer;
color:rgba(82, 137, 250, 1);
}
padding: 5px;
#qrcode {
height: 180px;
}
.error {
position: absolute;
width: 180px;
height: 180px;
background: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
justify-content: center;
left: 5px;
top: 5px;
div {
margin: 0 10px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 20px;
}
.ope {
cursor: pointer;
color: rgba(82, 137, 250, 1);
}
}
}
...
...
src/modules/root/WechatLogin.tsx
View file @
e220cf0c
import
React
,
{
useState
,
useRef
,
useEffect
}
from
'react'
;
import
qrcode
from
"@/libs/qrcode/qrcode.js"
;
import
Service
from
"@/common/js/service"
;
import
qrcode
from
'@/libs/qrcode/qrcode.js'
;
import
Service
from
'@/common/js/service'
;
import
User
from
'@/common/js/user'
;
import
{
PATH
}
from
'@/domains/basic-domain/constants'
;
import
'./WechatLogin.less'
const
Logo
=
require
(
"@/common/images/logo.png"
)
import
'./WechatLogin.less'
;
const
Logo
=
require
(
'@/common/images/logo.png'
);
declare
var
location
:
any
;
export
default
function
WechatLogin
(
props
:
any
)
{
const
freshTime
=
60
;
const
init
:
any
=
null
;
const
[
status
,
setStatus
]
=
useState
(
0
);
const
[
ticket
,
setTicket
]
=
useState
(
''
);
const
[
leftTime
,
setLeftTime
]
=
useState
(
freshTime
)
const
QRCode
=
useRef
(
init
);
const
timer
=
useRef
(
init
);
const
leftTimeRef
=
useRef
(
init
);
useEffect
(()
=>
{
leftTimeRef
.
current
=
leftTime
;
},
[
leftTime
])
useEffect
(()
=>
{
clearInterval
(
timer
.
current
as
any
);
if
(
status
===
0
)
{
Service
.
Hades
(
"anon/hades/getTicket"
,
{}).
then
((
res
:
any
)
=>
{
setTicket
(
res
.
result
)
const
redirect
=
`
${
PATH
}
?ticket=
${
res
.
result
}
&appTermEnum=XIAOMAI_CLOUD_CLASS_PC_WEB_ADMIN&env=
${
process
.
env
.
DEPLOY_ENV
||
'dev'
}
`
// console.log(redirect)
// const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww409ccf9c6e31f19e&redirect_uri=${encodeURIComponent(redirect)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
// console.log(url)
const
qrcodeWrapDom
:
any
=
document
.
querySelector
(
'#qrcode'
);
let
qrnode
=
new
qrcode
({
text
:
redirect
,
correctLevel
:
2
,
size
:
180
,
// image: 'https://image.xiaomaiketang.com/xm/Newk4NrxKC.png',
image
:
'https://image.xiaomaiketang.com/xm/bFkRBz7teA.png'
,
imageSize
:
50
});
qrcodeWrapDom
.
innerHTML
=
''
;
qrcodeWrapDom
&&
qrcodeWrapDom
.
appendChild
(
qrnode
);
// QRCode.current.innerHTML = ''
// QRCode.current.prepend(qrnode);
setLeftTime
(
freshTime
);
timer
.
current
=
setInterval
(()
=>
{
if
(
leftTimeRef
.
current
==
0
)
{
clearInterval
(
timer
.
current
);
setStatus
(
1
);
return
}
const
freshTime
=
60
;
const
init
:
any
=
null
;
const
[
status
,
setStatus
]
=
useState
(
0
);
const
[
ticket
,
setTicket
]
=
useState
(
''
);
const
[
leftTime
,
setLeftTime
]
=
useState
(
freshTime
);
const
QRCode
=
useRef
(
init
);
const
timer
=
useRef
(
init
);
const
leftTimeRef
=
useRef
(
init
);
setLeftTime
(
leftTimeRef
.
current
-
1
);
useEffect
(()
=>
{
leftTimeRef
.
current
=
leftTime
;
},
[
leftTime
]);
},
1000
)
})
}
return
()
=>
{
useEffect
(()
=>
{
clearInterval
(
timer
.
current
as
any
);
if
(
status
===
0
)
{
Service
.
Hades
(
'anon/hades/getTicket'
,
{}).
then
((
res
:
any
)
=>
{
setTicket
(
res
.
result
);
const
redirect
=
`
${
PATH
}
?ticket=
${
res
.
result
}
&appTermEnum=XIAOMAI_CLOUD_CLASS_PC_WEB_ADMIN&env=
${
process
.
env
.
DEPLOY_ENV
||
'dev'
}
`
;
const
qrcodeWrapDom
:
any
=
document
.
querySelector
(
'#qrcode'
);
let
qrnode
=
new
qrcode
({
text
:
redirect
,
correctLevel
:
2
,
size
:
180
,
image
:
Logo
,
imageSize
:
50
,
});
qrcodeWrapDom
.
innerHTML
=
''
;
qrcodeWrapDom
&&
qrcodeWrapDom
.
appendChild
(
qrnode
);
setLeftTime
(
freshTime
);
timer
.
current
=
setInterval
(()
=>
{
if
(
leftTimeRef
.
current
==
0
)
{
clearInterval
(
timer
.
current
);
}
},
[
status
])
useEffect
(()
=>
{
if
(
leftTime
==
60
||
!
ticket
)
{
return
}
Service
.
Hades
(
'anon/hades/getTicketState'
,
{
ticket
}).
then
((
res
:
any
)
=>
{
if
(
res
.
result
===
'AUTH_SUCCESS'
)
{
Service
.
Hades
(
'anon/hades/getTicketWXWorkLogin'
,
{
ticket
}).
then
((
_res
:
any
)
=>
{
User
.
setUserId
(
_res
.
result
.
loginInfo
.
userId
);
User
.
setToken
(
_res
.
result
.
loginInfo
.
xmToken
);
User
.
setEnterpriseId
(
_res
.
result
.
enterpriseId
);
User
.
setIdentifier
(
_res
.
result
.
identifier
)
window
.
RCHistory
.
push
({
pathname
:
`/switch-route`
,
})
})
}
})
setStatus
(
1
);
return
;
}
},
[
leftTime
])
setLeftTime
(
leftTimeRef
.
current
-
1
);
},
1000
);
});
}
return
()
=>
{
clearInterval
(
timer
.
current
);
};
},
[
status
]);
return
<
div
className=
'wechatLoginBox'
>
<
div
className=
"rwm"
>
<
div
id=
"qrcode"
></
div
>
useEffect
(()
=>
{
if
(
leftTime
==
60
||
!
ticket
)
{
return
;
}
{
status
===
1
&&
<
div
className=
"error"
>
<
div
>
二维码已过期
<
p
className=
"ope"
onClick=
{
()
=>
{
setStatus
(
0
)
}
}
>
刷新
</
p
>
</
div
>
</
div
>
}
{
status
===
2
&&
<
div
className=
"error"
>
<
div
>
所在企业还未注册学院
Service
.
Hades
(
'anon/hades/getTicketState'
,
{
ticket
,
}).
then
((
res
:
any
)
=>
{
if
(
res
.
result
===
'AUTH_SUCCESS'
)
{
Service
.
Hades
(
'anon/hades/getTicketWXWorkLogin'
,
{
ticket
,
}).
then
((
_res
:
any
)
=>
{
User
.
setUserId
(
_res
.
result
.
loginInfo
.
userId
);
User
.
setToken
(
_res
.
result
.
loginInfo
.
xmToken
);
User
.
setEnterpriseId
(
_res
.
result
.
enterpriseId
);
User
.
setIdentifier
(
_res
.
result
.
identifier
);
window
.
RCHistory
.
push
({
pathname
:
`/switch-route`
,
});
});
}
});
},
[
leftTime
]);
<
p
className=
"ope"
onClick=
{
()
=>
{
setStatus
(
0
)
}
}
>
我知道了
</
p
>
</
div
>
</
div
>
}
{
status
===
3
&&
<
div
className=
"error"
>
<
div
>
你还不是学院员工,请联系企业管理员
return
(
<
div
className=
'wechatLoginBox'
>
<
div
className=
'rwm'
>
<
div
id=
'qrcode'
></
div
>
<
p
className=
"ope"
onClick=
{
()
=>
{
setStatus
(
0
)
}
}
>
我知道了
</
p
>
</
div
>
</
div
>
}
</
div
>
<
p
className=
'text'
>
请使用企业微信扫码登录
</
p
>
{
status
===
1
&&
(
<
div
className=
'error'
>
<
div
>
二维码已过期
<
p
className=
'ope'
onClick=
{
()
=>
{
setStatus
(
0
);
}
}
>
刷新
</
p
>
</
div
>
</
div
>
)
}
{
status
===
2
&&
(
<
div
className=
'error'
>
<
div
>
所在企业还未注册学院
<
p
className=
'ope'
onClick=
{
()
=>
{
setStatus
(
0
);
}
}
>
我知道了
</
p
>
</
div
>
</
div
>
)
}
{
status
===
3
&&
(
<
div
className=
'error'
>
<
div
>
你还不是学院员工,请联系企业管理员
<
p
className=
'ope'
onClick=
{
()
=>
{
setStatus
(
0
);
}
}
>
我知道了
</
p
>
</
div
>
</
div
>
)
}
</
div
>
<
p
className=
'text'
>
请使用企业微信扫码登录
</
p
>
</
div
>
}
\ No newline at end of file
);
}
yarn.lock
View file @
e220cf0c
...
...
@@ -3932,6 +3932,17 @@ cosmiconfig@^6.0.0:
path-type "^4.0.0"
yaml "^1.7.2"
cosmiconfig@^7.0.0:
version "7.0.0"
resolved "https://registry.npm.taobao.org/cosmiconfig/download/cosmiconfig-7.0.0.tgz?cache=0&sync_timestamp=1596310773001&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcosmiconfig%2Fdownload%2Fcosmiconfig-7.0.0.tgz#ef9b44d773959cae63ddecd122de23853b60f8d3"
integrity sha1-75tE13OVnK5j3ezRIt4jhTtg+NM=
dependencies:
"@types/parse-json" "^4.0.0"
import-fresh "^3.2.1"
parse-json "^5.0.0"
path-type "^4.0.0"
yaml "^1.10.0"
create-ecdh@^4.0.0:
version "4.0.3"
resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
...
...
@@ -5755,12 +5766,20 @@ find-up@^3.0.0:
dependencies:
locate-path "^3.0.0"
find-versions@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/find-versions/-/find-versions-3.2.0.tgz#10297f98030a786829681690545ef659ed1d254e"
integrity sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww==
find-up@^5.0.0:
version "5.0.0"
resolved "https://registry.npm.taobao.org/find-up/download/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
integrity sha1-TJKBnstwg1YeT0okCoa+UZj1Nvw=
dependencies:
locate-path "^6.0.0"
path-exists "^4.0.0"
find-versions@^4.0.0:
version "4.0.0"
resolved "https://registry.nlark.com/find-versions/download/find-versions-4.0.0.tgz?cache=0&sync_timestamp=1619599444272&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffind-versions%2Fdownload%2Ffind-versions-4.0.0.tgz#3c57e573bf97769b8cb8df16934b627915da4965"
integrity sha1-PFflc7+XdpuMuN8Wk0tieRXaSWU=
dependencies:
semver-regex "^
2.0.0
"
semver-regex "^
3.1.2
"
flat-cache@^2.0.1:
version "2.0.1"
...
...
@@ -6559,18 +6578,18 @@ humanize-ms@^1.2.0, humanize-ms@^1.2.1:
dependencies:
ms "^2.0.0"
husky@^4.
2.5
:
version "4.
2.5
"
resolved "https://registry.
yarnpkg.com/husky/-/husky-4.2.5.tgz#2b4f7622673a71579f901d9885ed448394b5fa36
"
integrity sha
512-SYZ95AjKcX7goYVZtVZF2i6XiZcHknw50iXvY7b0MiGoj5RwdgRQNEHdb+gPDPCXKlzwrybjFjkL6FOj8uRhZQ=
=
husky@^4.
3.0
:
version "4.
3.8
"
resolved "https://registry.
npm.taobao.org/husky/download/husky-4.3.8.tgz?cache=0&sync_timestamp=1617004245593&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhusky%2Fdownload%2Fhusky-4.3.8.tgz#31144060be963fd6850e5cc8f019a1dfe194296d
"
integrity sha
1-MRRAYL6WP9aFDlzI8Bmh3+GUKW0
=
dependencies:
chalk "^4.0.0"
ci-info "^2.0.0"
compare-versions "^3.6.0"
cosmiconfig "^
6
.0.0"
find-versions "^
3.2
.0"
cosmiconfig "^
7
.0.0"
find-versions "^
4.0
.0"
opencollective-postinstall "^2.0.2"
pkg-dir "^
4.2
.0"
pkg-dir "^
5.0
.0"
please-upgrade-node "^3.2.0"
slash "^3.0.0"
which-pm-runs "^1.0.0"
...
...
@@ -6654,6 +6673,14 @@ import-fresh@^3.0.0, import-fresh@^3.1.0:
parent-module "^1.0.0"
resolve-from "^4.0.0"
import-fresh@^3.2.1:
version "3.3.0"
resolved "https://registry.npm.taobao.org/import-fresh/download/import-fresh-3.3.0.tgz?cache=0&sync_timestamp=1608469579940&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fimport-fresh%2Fdownload%2Fimport-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
integrity sha1-NxYsJfy566oublPVtNiM4X2eDCs=
dependencies:
parent-module "^1.0.0"
resolve-from "^4.0.0"
import-from@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
...
...
@@ -8093,6 +8120,13 @@ locate-path@^5.0.0:
dependencies:
p-locate "^4.1.0"
locate-path@^6.0.0:
version "6.0.0"
resolved "https://registry.npm.taobao.org/locate-path/download/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
integrity sha1-VTIeswn+u8WcSAHZMackUqaB0oY=
dependencies:
p-locate "^5.0.0"
lodash._reinterpolate@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
...
...
@@ -9088,6 +9122,13 @@ p-limit@^2.3.0:
dependencies:
p-try "^2.0.0"
p-limit@^3.0.2:
version "3.1.0"
resolved "https://registry.nlark.com/p-limit/download/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
integrity sha1-4drMvnjQ0TiMoYxk/qOOPlfjcGs=
dependencies:
yocto-queue "^0.1.0"
p-locate@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
...
...
@@ -9109,6 +9150,13 @@ p-locate@^4.1.0:
dependencies:
p-limit "^2.2.0"
p-locate@^5.0.0:
version "5.0.0"
resolved "https://registry.nlark.com/p-locate/download/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
integrity sha1-g8gxXGeFAF470CGDlBHJ4RDm2DQ=
dependencies:
p-limit "^3.0.2"
p-map@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
...
...
@@ -9444,13 +9492,20 @@ pkg-dir@^3.0.0:
dependencies:
find-up "^3.0.0"
pkg-dir@^4.1.0
, pkg-dir@^4.2.0
:
pkg-dir@^4.1.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
dependencies:
find-up "^4.0.0"
pkg-dir@^5.0.0:
version "5.0.0"
resolved "https://registry.nlark.com/pkg-dir/download/pkg-dir-5.0.0.tgz#a02d6aebe6ba133a928f74aec20bafdfe6b8e760"
integrity sha1-oC1q6+a6EzqSj3Suwguv3+a452A=
dependencies:
find-up "^5.0.0"
pkg-up@3.1.0, pkg-up@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
...
...
@@ -10394,7 +10449,7 @@ query-string@^4.1.0:
query-string@^5.0.1:
version "5.1.1"
resolved "https://registry.n
pm.taobao.org/query-string/download/query-string-5.1.1.tgz?cache=0&sync_timestamp=1616068686629&other_urls=https%3A%2F%2Fregistry.npm.taobao.org
%2Fquery-string%2Fdownload%2Fquery-string-5.1.1.tgz#a78c012b71c17e05f2e3fa2319dd330682efb3cb"
resolved "https://registry.n
lark.com/query-string/download/query-string-5.1.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com
%2Fquery-string%2Fdownload%2Fquery-string-5.1.1.tgz#a78c012b71c17e05f2e3fa2319dd330682efb3cb"
integrity sha1-p4wBK3HBfgXy4/ojGd0zBoLvs8s=
dependencies:
decode-uri-component "^0.2.0"
...
...
@@ -11556,10 +11611,10 @@ semver-compare@^1.0.0:
resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
integrity sha1-De4hahyUGrN+nvsXiPavxf9VN/w=
semver-regex@^
2.0.0
:
version "
2.0.0
"
resolved "https://registry.
yarnpkg.com/semver-regex/-/semver-regex-2.0.0.tgz#a93c2c5844539a770233379107b38c7b4ac9d338
"
integrity sha
512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw=
=
semver-regex@^
3.1.2
:
version "
3.1.2
"
resolved "https://registry.
nlark.com/semver-regex/download/semver-regex-3.1.2.tgz#34b4c0d361eef262e07199dbef316d0f2ab11807
"
integrity sha
1-NLTA02Hu8mLgcZnb7zFtDyqxGAc
=
"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
version "5.7.1"
...
...
@@ -13031,17 +13086,17 @@ vary@~1.1.2:
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
vconsole-webpack-plugin@^1.
5.2
:
version "1.
5.2
"
resolved "https://registry.
yarnpkg.com/vconsole-webpack-plugin/-/vconsole-webpack-plugin-1.5.2.tgz#4c25b6cc51add03bb4e1562c4d3653431c89af6
0"
integrity sha
512-v3goAnjsurFUy+qUmJCGjW+tzeKzlkrlbY8YnctSbhbrKiyC40hDeVFdGJvv7Drvd+w4xCQ1hJFZa5ESadmljQ=
=
vconsole-webpack-plugin@^1.
6.1
:
version "1.
6.1
"
resolved "https://registry.
nlark.com/vconsole-webpack-plugin/download/vconsole-webpack-plugin-1.6.1.tgz#7a9ee82c0a90d58964034f6d6bd349242ce65a7
0"
integrity sha
1-ep7oLAqQ1YlkA09ta9NJJCzmWnA
=
dependencies:
vconsole "^3.
3.4
"
vconsole "^3.
6
"
vconsole@^3.
3.4
:
version "3.
6
.0"
resolved "https://registry.
yarnpkg.com/vconsole/-/vconsole-3.6.0.tgz#3affe6082271014f8a169ea429b85c148c2cc796
"
integrity sha
512-vNyB9AwO0gqGub3BLbj4FtwQjlQ8EwhrD1zfcaAwToP/wKcfAoozJiD+6kAzL85FIklgptERcM+c621IEPuItQ=
=
vconsole@^3.
6
:
version "3.
7
.0"
resolved "https://registry.
nlark.com/vconsole/download/vconsole-3.7.0.tgz#7b347fc635eb09646bb50f0ce0cbfba1852af1b1
"
integrity sha
1-ezR/xjXrCWRrtQ8M4Mv7oYUq8bE
=
dependencies:
copy-text-to-clipboard "^3.0.1"
core-js "^3.11.0"
...
...
@@ -13655,6 +13710,11 @@ yallist@^4.0.0:
resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
yaml@^1.10.0:
version "1.10.2"
resolved "https://registry.nlark.com/yaml/download/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
integrity sha1-IwHF/78StGfejaIzOkWeKeeSDks=
yaml@^1.7.2:
version "1.8.2"
resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.8.2.tgz#a29c03f578faafd57dcb27055f9a5d569cb0c3d9"
...
...
@@ -13703,3 +13763,8 @@ yauzl@^2.4.2:
dependencies:
buffer-crc32 "~0.2.3"
fd-slicer "~1.1.0"
yocto-queue@^0.1.0:
version "0.1.0"
resolved "https://registry.nlark.com/yocto-queue/download/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
integrity sha1-ApTrPe4FAo0x7hpfosVWpqrxChs=
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment