Skip to content

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

feat:login_page_modify

parent d2676923
Showing with 85 additions and 82 deletions
src/modules/root/WechatLogin.less
...@@ -9,38 +9,39 @@ ...@@ -9,38 +9,39 @@
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 {
height: 180px;
}
.error {
position: absolute; position: absolute;
width: 200px; width: 180px;
height: 200px; height: 180px;
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
display: flex; display: flex;
align-items:center; align-items: center;
justify-content:center; justify-content: center;
left:5px; left: 5px;
top:5px; top: 5px;
div{ div {
margin: 0 10px; margin: 0 10px;
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
line-height: 20px; line-height: 20px;
} }
.ope{ .ope {
cursor: pointer; cursor: pointer;
color:rgba(82, 137, 250, 1); 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() {
export default function WechatLogin(props: any) {
const freshTime = 60; const freshTime = 60;
const init: any = null; const init: any = null;
const [status, setStatus] = useState(0); const [status, setStatus] = useState(0);
const [ticket, setTicket] = useState(''); const [ticket, setTicket] = useState('');
const [leftTime, setLeftTime] = useState(freshTime) const [leftTime, setLeftTime] = useState(freshTime);
const QRCode = useRef(init);
const timer = useRef(init); const timer = useRef(init);
const leftTimeRef = useRef(init); const leftTimeRef = useRef(init);
useEffect(() => { useEffect(() => {
leftTimeRef.current = leftTime; leftTimeRef.current = leftTime;
}, [leftTime]) }, [leftTime]);
useEffect(() => { useEffect(() => {
clearInterval(timer.current as any); clearInterval(timer.current as any);
if (status === 0) { if (status === 0) {
Service.Hades("anon/hades/getTicket", {}).then((res: any) => { Service.Hades('anon/hades/getTicket', {}).then((res: any) => {
setTicket(res.result) setTicket(res.result);
const redirect = `${PATH}?ticket=${res.result}&appTermEnum=XIAOMAI_CLOUD_CLASS_PC_WEB_ADMIN&env=${process.env.DEPLOY_ENV || 'dev'}` const redirect = `${PATH}?ticket=${res.result}&appTermEnum=XIAOMAI_CLOUD_CLASS_PC_WEB_ADMIN&env=${process.env.DEPLOY_ENV || 'dev'}`;
// console.log(redirect) const qrcodeWrapDom: any = document.querySelector('#qrcode');
// 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({ let qrnode = new qrcode({
text: redirect, text: redirect,
correctLevel: 2, correctLevel: 2,
size: 180, size: 180,
// image: 'https://image.xiaomaiketang.com/xm/Newk4NrxKC.png', image: Logo,
image: 'https://image.xiaomaiketang.com/xm/bFkRBz7teA.png', imageSize: 50,
imageSize: 50
}); });
qrcodeWrapDom.innerHTML = ''; qrcodeWrapDom.innerHTML = '';
qrcodeWrapDom && qrcodeWrapDom.appendChild(qrnode); qrcodeWrapDom && qrcodeWrapDom.appendChild(qrnode);
// QRCode.current.innerHTML = ''
// QRCode.current.prepend(qrnode);
setLeftTime(freshTime); setLeftTime(freshTime);
timer.current = setInterval(() => { timer.current = setInterval(() => {
if (leftTimeRef.current == 0) { if (leftTimeRef.current == 0) {
clearInterval(timer.current); clearInterval(timer.current);
setStatus(1); setStatus(1);
return return;
} }
setLeftTime(leftTimeRef.current - 1); setLeftTime(leftTimeRef.current - 1);
}, 1000);
}, 1000) });
})
} }
return () => { return () => {
clearInterval(timer.current); clearInterval(timer.current);
} };
}, [status]) }, [status]);
useEffect(() => { useEffect(() => {
if (leftTime == 60 || !ticket) { if (leftTime == 60 || !ticket) {
return return;
} }
Service.Hades('anon/hades/getTicketState', { Service.Hades('anon/hades/getTicketState', {
ticket ticket,
}).then((res: any) => { }).then((res: any) => {
if (res.result === 'AUTH_SUCCESS') { if (res.result === 'AUTH_SUCCESS') {
Service.Hades('anon/hades/getTicketWXWorkLogin', { Service.Hades('anon/hades/getTicketWXWorkLogin', {
ticket ticket,
}).then((_res: any) => { }).then((_res: any) => {
User.setUserId(_res.result.loginInfo.userId); User.setUserId(_res.result.loginInfo.userId);
User.setToken(_res.result.loginInfo.xmToken); User.setToken(_res.result.loginInfo.xmToken);
User.setEnterpriseId(_res.result.enterpriseId); User.setEnterpriseId(_res.result.enterpriseId);
User.setIdentifier(_res.result.identifier) User.setIdentifier(_res.result.identifier);
window.RCHistory.push({ window.RCHistory.push({
pathname: `/switch-route`, pathname: `/switch-route`,
}) });
}) });
} }
});
}, [leftTime]);
}) return (
<div className='wechatLoginBox'>
}, [leftTime]) <div className='rwm'>
<div id='qrcode'></div>
return <div className='wechatLoginBox'>
<div className="rwm">
<div id="qrcode"></div>
{ {status === 1 && (
status === 1 && <div className="error"> <div className='error'>
<div>二维码已过期 <div>
<p className="ope" onClick={() => { 二维码已过期
setStatus(0) <p
}}>刷新</p> className='ope'
onClick={() => {
setStatus(0);
}}>
刷新
</p>
</div> </div>
</div> </div>
} )}
{ {status === 2 && (
status === 2 && <div className="error"> <div className='error'>
<div>所在企业还未注册学院 <div>
所在企业还未注册学院
<p className="ope" onClick={() => { <p
setStatus(0) className='ope'
}}>我知道了</p> onClick={() => {
setStatus(0);
}}>
我知道了
</p>
</div> </div>
</div> </div>
} )}
{ {status === 3 && (
status === 3 && <div className="error"> <div className='error'>
<div>你还不是学院员工，请联系企业管理员 <div>
你还不是学院员工，请联系企业管理员
<p className="ope" onClick={() => { <p
setStatus(0) className='ope'
}}>我知道了</p> onClick={() => {
setStatus(0);
}}>
我知道了
</p>
</div> </div>
</div> </div>
} )}
</div> </div>
<p className='text'>请使用企业微信扫码登录</p> <p className='text'>请使用企业微信扫码登录</p>
</div> </div>
);
} }
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