Skip to content

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

feat:优化,隐藏手机登陆入口

parent da680cd7
Showing with 554 additions and 34 deletions
src/modules/root/Login.jsx
import React, { useEffect } from 'react'; import React, { useEffect, useState } from 'react';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import './Login.less'; import './Login.less';
import { Input, Popover, message, Tabs, Button } from 'antd';
import CheckBeforeSendCode from '../../components/CheckBeforeSendCode';
import User from '@/common/js/user'; import User from '@/common/js/user';
import WechatLogin from './WechatLogin'; import WechatLogin from './WechatLogin';
import BaseService from '@/domains/basic-domain/baseService'; import BaseService from '@/domains/basic-domain/baseService';
import axios from 'axios';
import _ from 'underscore'; import _ from 'underscore';
import user from '@/common/js/user'; 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({});
function Login() {
useEffect(() => { useEffect(() => {
const enterpriseId = getParameterByName('enterpriseId'); const enterpriseId = getParameterByName('enterpriseId');
const userId = getParameterByName('userId'); const userId = getParameterByName('userId');
...@@ -46,6 +60,92 @@ function Login() { ...@@ -46,6 +60,92 @@ function Login() {
}); });
}); });
} }
// 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 ( return (
<div className='login-page'> <div className='login-page'>
...@@ -55,14 +155,21 @@ function Login() { ...@@ -55,14 +155,21 @@ function Login() {
<div className='login-main'> <div className='login-main'>
<div className='left-banner'> <div className='left-banner'>
<div className='img-box'> <div className='img-box'>
<img src='https://image.xiaomaiketang.com/xm/zmsfCP4e5i.png' alt='' /> <img src='https://image.xiaomaiketang.com/xm/CDCcdAdaPs.png' alt='' />
</div> </div>
</div> </div>
<div className='login-box'> <div className='login-box'>
<img className='login-logo' src='https://image.xiaomaiketang.com/xm/PrxzFpFH7C.png'></img> <div className='left-top-block color-block'></div>
<h3>小麦企培（讲师版）</h3> <div className='right-bottom-block color-block'></div>
<h4>企业微信登陆</h4> <div className='login'>
<div className='r'>
<Tabs defaultActiveKey='1'>
<TabPane tab='企业微信登录' key='1'>
<WechatLogin></WechatLogin> <WechatLogin></WechatLogin>
</TabPane>
</Tabs>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
......
src/modules/root/Login.less
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
font-family: '微软雅黑'; font-family: '微软雅黑';
padding: 0; padding: 0;
min-width: 1200px; min-width: 1200px;
background: #fff; background: #f4f6fa;
height: 100%; height: 100%;
overflow-y: hidden; overflow-y: hidden;
.logo-img-box { .logo-img-box {
...@@ -23,43 +23,450 @@ ...@@ -23,43 +23,450 @@
display: flex; display: flex;
} }
.left-banner { .left-banner {
position: relative;
width: 540px;
height: 100vh; height: 100vh;
.img-box { .img-box {
background: #2966ff;
width: 540px;
height: 100vh; height: 100vh;
img { img {
display: block; width: 540px;
height: 100vh; height: 800px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} }
} }
} }
.login-box { .login-box {
min-width: 540px; min-width: 740px;
height: 100vh; height: 100vh;
width: calc(100vw - 500px); 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;
}
}
.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;
}
}
.login {
display: flex; display: flex;
align-items: center; 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 {
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; flex-direction: column;
align-items: center;
color: #ffffff;
font-size: 12px;
justify-content: center; justify-content: center;
.login-logo { -webkit-justify-content: center;
height: 80px; .logo {
width: 80px; 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;
} }
h3 {
font-size: 20px;
line-height: 1;
margin: 15px 0 41px;
} }
h4 { .title {
font-size: 18px; font-size: 18px;
line-height: 1; 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 { &::after {
display: block;
content: ''; content: '';
display: block;
width: 24px; width: 24px;
height: 4px; height: 4px;
background: #ffb714;
border-radius: 3px; border-radius: 3px;
margin: 6px auto 0; 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;
}
}
}
} }
} }
} }
......
src/modules/root/WechatLogin.less
...@@ -11,20 +11,18 @@ ...@@ -11,20 +11,18 @@
} }
.rwm { .rwm {
position: relative; position: relative;
width: 210px;
height: 210px;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
margin-top: 20px; margin-top: 24px;
border: 1px dashed #e8e8e8; border: 1px solid #e8e8e8;
border-radius: 2px; border-radius: 2px;
padding: 5px; padding: 15px;
#qrcode {
height: 180px;
}
.error { .error {
position: absolute; position: absolute;
width: 180px; width: 200px;
height: 180px; height: 200px;
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
display: flex; display: flex;
align-items: center; align-items: center;
......
src/modules/root/WechatLogin.tsx
...@@ -5,13 +5,15 @@ import User from '@/common/js/user'; ...@@ -5,13 +5,15 @@ 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);
...@@ -25,16 +27,22 @@ export default function WechatLogin() { ...@@ -25,16 +27,22 @@ export default function WechatLogin() {
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 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'); 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: Logo, // image: 'https://image.xiaomaiketang.com/xm/Newk4NrxKC.png',
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) {
......
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