Skip to content

X
xiaomai-cloud-class-web
Commit be13851c by wufan
Options

Merge branch 'feature/pangguoming/20210622/login_page_modify' into 'master' 

Feature/pangguoming/20210622/login page modify

See merge request !49
parents 62d9db03 cc4713e6
Showing with 269 additions and 246 deletions
src/modules/root/Login.jsx
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 axios from 'axios'
import _ from 'underscore'
import user from '@/common/js/user'
const { TabPane } = Tabs
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 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({})
/**
* 手机登陆入口，暂时隐藏，此页注释代码勿删
*/
// 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({});
/**
* 手机登陆入口，暂时隐藏，此页注释代码勿删
*/
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();
}
}, [])
}, []);
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)
}
pathname: `/switch-route`,
});
});
}
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`
})
}
})
}
/**
* 手机登陆入口，暂时隐藏，此页注释代码勿删
*/
// 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`,
// });
// }
// });
// }
/**
* 手机登陆入口，暂时隐藏，此页注释代码勿删
*/
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 className='login-page'>
<div className='logo-img-box'>
<img src='https://image.xiaomaiketang.com/xm/6k8PPCmywG.png' className='logo-img' />
</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">
<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'>
{/* 手机登陆入口，暂时隐藏，此页注释代码勿删 */}
{/* <TabPane tab='手机号登录' key='2'>
<div className='login-form'>
<div className='form'>
<div className='username' style={{ marginBottom: 16 }}>
......@@ -244,14 +267,15 @@ function Login(props) {
</div>
</div>
</div>
</TabPane>
</TabPane> */}
{/* 手机登陆入口，暂时隐藏，此页注释代码勿删 */}
</Tabs>
</div>
</div>
</div>
</div>
</div>
)
);
}
export default withRouter(Login)
export default withRouter(Login);
src/modules/root/Login.less
@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: #f4f6fa;
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;
}
}
......@@ -27,7 +27,7 @@
width: 540px;
height: 100vh;
.img-box {
background: #2966FF;
background: #2966ff;
width: 540px;
height: 100vh;
img {
......@@ -36,7 +36,7 @@
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
}
}
}
......@@ -50,10 +50,10 @@
height: 256px;
background: rgba(41, 102, 255, 0.05);
position: absolute;
top:0;
top: 0;
left: 0;
&.right-bottom-block {
top:auto;
top: auto;
left: auto;
bottom: 0;
right: 0;
......@@ -90,8 +90,8 @@
height: 420px;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
top: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
background-color: #ffffff;
border-radius: 4px;
......@@ -107,7 +107,7 @@
.ant-tabs-tab-active {
.ant-tabs-tab-btn {
color: #333333;
font-weight:500!important;
font-weight: 500 !important;
}
}
.ant-tabs-nav::before {
......@@ -115,7 +115,7 @@
}
.ant-tabs-tab {
text-align: center;
margin:0;
margin: 0;
}
.ant-tabs > .ant-tabs-nav .ant-tabs-nav-list {
margin: 0 auto;
......@@ -128,13 +128,7 @@
width: 280px;
height: 100%;
background: @primary;
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#ffaa1a),
to(#ff8634)
) !important;
background: -webkit-gradient(linear, left top, left bottom, from(#ffaa1a), to(#ff8634)) !important;
display: flex;
display: -webkit-flex;
-webkit-flex-direction: column;
......@@ -197,8 +191,8 @@
}
}
}
.login-form{
margin-top:32px;
.login-form {
margin-top: 32px;
}
.qrcode {
display: none;
......@@ -281,7 +275,7 @@
font-weight: 500;
color: #333;
&::after {
content: "";
content: '';
display: block;
width: 24px;
height: 4px;
......@@ -383,12 +377,12 @@
border-radius: 3px;
margin-top: 60px;
font-size: 14px; // font-weight: 300;
color:#2966FF;
color: #2966ff;
&:hover {
color: #2966FF;
color: #2966ff;
}
&::before {
content: "";
content: '';
display: block;
height: 20px;
width: 1px;
......@@ -416,7 +410,7 @@
}
.refresh {
font-size: 14px;
color: #2966FF;
color: #2966ff;
cursor: pointer;
}
}
......@@ -466,10 +460,10 @@
transition: all 0.3s;
cursor: pointer;
border: none;
text-align:center;
text-align: center;
&:hover {
opacity: 0.7;
background: #5C8AFF;
background: #5c8aff;
}
}
}
......
src/modules/root/WechatLogin.less
......@@ -9,7 +9,7 @@
color: #999999;
line-height: 20px;
}
.rwm{
.rwm {
position: relative;
width: 210px;
height: 210px;
......@@ -18,29 +18,28 @@
margin-top: 24px;
border: 1px solid #e8e8e8;
border-radius: 2px;
padding:15px;
.error{
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{
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{
.ope {
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 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 [leftTime, setLeftTime] = useState(freshTime);
const QRCode = useRef(init);
const timer = useRef(init);
const leftTimeRef = useRef(init);
useEffect(() => {
leftTimeRef.current = leftTime;
}, [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');
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: 'https://image.xiaomaiketang.com/xm/Newk4NrxKC.png',
image: 'https://image.xiaomaiketang.com/xm/bFkRBz7teA.png',
imageSize: 50
imageSize: 50,
});
qrcodeWrapDom.innerHTML = '';
qrcodeWrapDom && qrcodeWrapDom.appendChild(qrnode);
......@@ -50,79 +44,91 @@ export default function WechatLogin(props: any) {
if (leftTimeRef.current == 0) {
clearInterval(timer.current);
setStatus(1);
return
return;
}
setLeftTime(leftTimeRef.current - 1);
}, 1000)
})
}, 1000);
});
}
return () => {
clearInterval(timer.current);
}
}, [status])
};
}, [status]);
useEffect(() => {
if (leftTime == 60 || !ticket) {
return
return;
}
Service.Hades('anon/hades/getTicketState', {
ticket
ticket,
}).then((res: any) => {
if (res.result === 'AUTH_SUCCESS') {
Service.Hades('anon/hades/getTicketWXWorkLogin', {
ticket
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)
User.setIdentifier(_res.result.identifier);
window.RCHistory.push({
pathname: `/switch-route`,
})
})
});
});
}
});
}, [leftTime]);
})
}, [leftTime])
return <div className='wechatLoginBox'>
<div className="rwm">
<div id="qrcode"></div>
return (
<div className='wechatLoginBox'>
<div className='rwm'>
<div id='qrcode'></div>
{
status === 1 && <div className="error">
<div>二维码已过期
<p className="ope" onClick={() => {
setStatus(0)
}}>刷新</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>
)}
{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>
)}
{status === 3 && (
<div className='error'>
<div>
你还不是学院员工，请联系企业管理员
<p
className='ope'
onClick={() => {
setStatus(0);
}}>
我知道了
</p>
</div>
</div>
}
)}
</div>
<p className='text'>请使用企业微信扫码登录</p>
</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