Skip to content

X
xiaomai-cloud-class-web
Commit ef734580 by zhangleyuan
Options

feat:增加个人设置页面

parent ab4db4a8
Showing with 108 additions and 28 deletions
package.json
......@@ -30,6 +30,7 @@
"case-sensitive-paths-webpack-plugin": "2.3.0",
"cross-env": "^7.0.2",
"css-loader": "3.4.2",
"dom-to-image": "^2.6.0",
"dotenv": "8.2.0",
"dotenv-expand": "5.1.0",
"eslint": "^6.6.0",
......@@ -61,6 +62,7 @@
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"qs": "^6.9.4",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-async-component": "^2.0.0",
......
src/core/function.js
......@@ -315,7 +315,7 @@ window.formatDate = (format, timestamp) => {
* @constructor
*/
window.getRequest = () => {
const url = location.search //获取url中"?"符后的字串
const url = window.location.search //获取url中"?"符后的字串
const theRequest = {}
if (url.indexOf('?') != -1) {
const str = url.substr(1)
......@@ -330,14 +330,14 @@ window.getRequest = () => {
window.getParameterByName = function(name) {
name = name.replace(/[\\[]/, '\\[').replace(/[\]]/, '\\]')
const regex = new RegExp('[\\?&]' + name + '=([^&#]*)')
const results = regex.exec(location.href)
const results = regex.exec(window.location.href)
return results === null
? ''
: decodeURIComponent(results[1].replace(/\+/g, ' '))
}
window.getUrlParam = function () {
const urlArr = location.href.split('/');
const urlArr = window.location.href.split('/');
const str = urlArr[urlArr.length - 1];
const param = parseInt(str);
......
src/core/table.less
......@@ -26,7 +26,7 @@ table {
}
}
th {
background: @xm-table-header !important;
background: @xm-table-header !important;
> .center {
text-align: center;
}
......
src/index.html
......@@ -38,6 +38,7 @@
-->
<title>小麦云课堂</title>
<script type="text/javascript" src="https://image.xiaomaiketang.com/xm/PhotoClip.js"></script>
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
......
src/index.tsx
......@@ -16,8 +16,7 @@ import _ from 'underscore';
import { RootRouter } from './routes/index';
import 'antd/dist/antd.less';
import '@/common/less/index.less';
import App from './modules/root/App';
import '@/core/function'
import '@/common/less/index.less';
......
src/modules/personalInfo/index.tsx 0 → 100644
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import { Button } from "antd";
import Breadcrumbs from "@/components/Breadcrumbs";
import './index.less';
function personalInfoPage() {
return (
<div className="page">
<div className="page-content">
<div className="content-header">
<Breadcrumbs
navList="个人设置"
goBack={() => {
window.RCHistory.goBack();
}}
/>
</div>
<div className="box">
</div>
</div>
</div>
);
}
export default withRouter(personalInfoPage);
src/modules/root/Login.jsx
......@@ -3,28 +3,66 @@ import {
withRouter
} from 'react-router-dom';
import './Login.less';
import {Input,Popover} from 'antd';
import {Input,Popover,message} from 'antd';
import CheckBeforeSendCode from '../../components/CheckBeforeSendCode';
function Login(props) {
const [phone, setPhone] = useState(''); // 登录手机号
const [phoneverify, setPhoneverify] = useState(''); // 密码登录验证码
const [openCheck1, setOpenCheck1] = useState(false);
const [checkObject1, setCheckObject1] = useState({});
const [checking1, setChecking1] = useState(false);
const [codeText, setCodeText] = useState('获取验证码'); // 验证码提示语
const [waitStatus, setWaitStatus] = useState(false); // 验证码是否在倒计时
const [errorMessage,setErrorMessage] = useState('');
const [phoneError,setPhoneError] = useState(false);
useEffect(() => {
}, [])
async function checkAccount(code, callback = () => { }) {
async function checkAccount(code, callback = () => { }) {
callback();
}
function checkSend(code) {
if (!phone) {
setPhoneError(true);
setErrorMessage("请输入手机号");
return;
}
if (phone.length != 11) {
setPhoneError(true);
setErrorMessage("请输入11位手机号")
return;
}
setOpenCheck1(true);
}
function handleSendSMSCode(checkData, userType) {
if (waitStatus) return;
let timer;
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);
}
}
return (
<div className="login-page" >
<div className="login-main">
<div className="left-banner">
<div><img src={require("../../common/images/logo.png")} alt="" style={{ width: 60,height:61}} /></div>
<div class="name">小麦云课堂</div>
<div class="desc">一键开启直播授课 让知识更有价值</div>
<div className="name">小麦云课堂</div>
<div className="desc">一键开启直播授课 让知识更有价值</div>
</div>
<div className="login-box">
<div className="login">
......@@ -41,9 +79,13 @@ function Login(props) {
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"
......@@ -51,16 +93,17 @@ function Login(props) {
name="phoneverify"
placeholder="验证码"
autoComplete="off"
value={phoneverify}
onChange={(e) => { setPhoneverify(e.target.value) }}
/>
<Popover
visible={false}
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(() => {
......@@ -84,11 +127,11 @@ function Login(props) {
if (checking1) return;
checkSend(1)
}}
>获取验证码</div>
>{codeText}</div>
</Popover>
</div>
<div className="error-message">
验证码有误
{errorMessage}
</div>
<div className="submit">
<div className="btn">
......
src/routes/config/mainRoutes.tsx
......@@ -7,6 +7,7 @@
*/
import TestPage from '@/modules/test';
import EmployeesManagePage from '@/modules/store-manege/EmployeesManagePage';
import personalInfoPage from '@/modules/personalInfo';
const mainRoutes = [
{
......@@ -19,6 +20,11 @@ const mainRoutes = [
component: EmployeesManagePage,
name: '首页'
},
{
path: '/personal-info',
component: personalInfoPage,
name: '个人信息'
},
]
export default mainRoutes;
\ No newline at end of file
src/routes/index.tsx
......@@ -15,17 +15,17 @@ import _ from 'underscore';
import { asyncComponent } from 'react-async-component'
const history = createHashHistory();
window.RCHistory = _.extend({}, history, {
push: (obj: any) => {
history.push(obj)
},
pushState: (obj: any) => {
history.push(obj)
},
pushStateWithStatus: (obj: any) => {
history.push(obj)
},
goBack: history.goBack,
location: history.location,
push: (obj: any) => {
history.push(obj)
},
pushState: (obj: any) => {
history.push(obj)
},
pushStateWithStatus: (obj: any) => {
history.push(obj)
},
goBack: history.goBack,
location: history.location,
replace: (obj: any) => {
history.replace(obj)
}
......
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