Skip to content

X
xiaomai-cloud-class-web
Commit da680cd7 by guomingpang
Options

feat:login_page_modify

parent d2676923
Showing with 147 additions and 145 deletions
src/modules/root/WechatLogin.less
...@@ -9,39 +9,40 @@ ...@@ -9,39 +9,40 @@
color: #999999; color: #999999;
line-height: 20px; line-height: 20px;
} }
.rwm{ .rwm {
position: relative; position: relative;
width: 210px;
height: 210px;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
margin-top: 24px; margin-top: 20px;
border: 1px solid #e8e8e8; border: 1px dashed #e8e8e8;
border-radius: 2px; border-radius: 2px;
padding:15px; padding: 5px;
.error{ #qrcode {
position: absolute; height: 180px;
width: 200px; }
height: 200px; .error {
background: rgba(255, 255, 255, 0.95); position: absolute;
display: flex; width: 180px;
align-items:center; height: 180px;
justify-content:center; background: rgba(255, 255, 255, 0.95);
left:5px; display: flex;
top:5px; align-items: center;
div{ justify-content: center;
margin: 0 10px; left: 5px;
font-size: 14px; top: 5px;
font-family: PingFangSC-Regular, PingFang SC; div {
font-weight: 400; margin: 0 10px;
color: #333333; font-size: 14px;
line-height: 20px; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
} color: #333333;
.ope{ line-height: 20px;
cursor: pointer; }
color:rgba(82, 137, 250, 1); .ope {
} cursor: pointer;
color: rgba(82, 137, 250, 1);
}
} }
} }
......
src/modules/root/WechatLogin.tsx
import React, { useState, useRef, useEffect } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import qrcode from "@/libs/qrcode/qrcode.js"; import qrcode from '@/libs/qrcode/qrcode.js';
import Service from "@/common/js/service"; import Service from '@/common/js/service';
import User from '@/common/js/user'; import User from '@/common/js/user';
import { PATH } from '@/domains/basic-domain/constants'; import { PATH } from '@/domains/basic-domain/constants';
import './WechatLogin.less' import './WechatLogin.less';
const Logo = require("@/common/images/logo.png") const Logo = require('@/common/images/logo.png');
declare var location: any;
export default function WechatLogin() {
const freshTime = 60;
const init: any = null;
const [status, setStatus] = useState(0);
const [ticket, setTicket] = useState('');
const [leftTime, setLeftTime] = useState(freshTime);
const timer = useRef(init);
const leftTimeRef = useRef(init);
export default function WechatLogin(props: any) { useEffect(() => {
const freshTime = 60; leftTimeRef.current = leftTime;
const init: any = null; }, [leftTime]);
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(() => {
useEffect(() => { clearInterval(timer.current as any);
leftTimeRef.current = leftTime; if (status === 0) {
}, [leftTime]) Service.Hades('anon/hades/getTicket', {}).then((res: any) => {
setTicket(res.result);
useEffect(() => { const redirect = `${PATH}?ticket=${res.result}&appTermEnum=XIAOMAI_CLOUD_CLASS_PC_WEB_ADMIN&env=${process.env.DEPLOY_ENV || 'dev'}`;
clearInterval(timer.current as any); const qrcodeWrapDom: any = document.querySelector('#qrcode');
if (status === 0) { let qrnode = new qrcode({
Service.Hades("anon/hades/getTicket", {}).then((res: any) => { text: redirect,
setTicket(res.result) correctLevel: 2,
const redirect = `${PATH}?ticket=${res.result}&appTermEnum=XIAOMAI_CLOUD_CLASS_PC_WEB_ADMIN&env=${process.env.DEPLOY_ENV || 'dev'}` size: 180,
// console.log(redirect) image: Logo,
// 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` imageSize: 50,
// console.log(url) });
const qrcodeWrapDom:any = document.querySelector('#qrcode'); qrcodeWrapDom.innerHTML = '';
let qrnode = new qrcode({ qrcodeWrapDom && qrcodeWrapDom.appendChild(qrnode);
text: redirect, setLeftTime(freshTime);
correctLevel: 2, timer.current = setInterval(() => {
size: 180, if (leftTimeRef.current == 0) {
// 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
}
setLeftTime(leftTimeRef.current - 1);
}, 1000)
})
}
return () => {
clearInterval(timer.current); clearInterval(timer.current);
} setStatus(1);
}, [status]) return;
}
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`,
})
})
}
})
}, [leftTime]) setLeftTime(leftTimeRef.current - 1);
}, 1000);
});
}
return () => {
clearInterval(timer.current);
};
}, [status]);
return <div className='wechatLoginBox'> useEffect(() => {
<div className="rwm"> if (leftTime == 60 || !ticket) {
<div id="qrcode"></div> return;
}
{ Service.Hades('anon/hades/getTicketState', {
status === 1 && <div className="error"> ticket,
<div>二维码已过期 }).then((res: any) => {
<p className="ope" onClick={() => { if (res.result === 'AUTH_SUCCESS') {
setStatus(0) Service.Hades('anon/hades/getTicketWXWorkLogin', {
}}>刷新</p> ticket,
</div> }).then((_res: any) => {
</div> User.setUserId(_res.result.loginInfo.userId);
} User.setToken(_res.result.loginInfo.xmToken);
{ User.setEnterpriseId(_res.result.enterpriseId);
status === 2 && <div className="error"> User.setIdentifier(_res.result.identifier);
<div>所在企业还未注册学院 window.RCHistory.push({
pathname: `/switch-route`,
});
});
}
});
}, [leftTime]);
<p className="ope" onClick={() => { return (
setStatus(0) <div className='wechatLoginBox'>
}}>我知道了</p> <div className='rwm'>
</div> <div id='qrcode'></div>
</div>
}
{
status === 3 && <div className="error">
<div>你还不是学院员工，请联系企业管理员
<p className="ope" onClick={() => { {status === 1 && (
setStatus(0) <div className='error'>
}}>我知道了</p> <div>
</div> 二维码已过期
</div> <p
} className='ope'
</div> onClick={() => {
<p className='text'>请使用企业微信扫码登录</p> 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> </div>
} );
\ No newline at end of file }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment