Skip to content

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

feat:增加个人设置页面

parent ab4db4a8
Showing with 94 additions and 14 deletions
package.json
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
"case-sensitive-paths-webpack-plugin": "2.3.0", "case-sensitive-paths-webpack-plugin": "2.3.0",
"cross-env": "^7.0.2", "cross-env": "^7.0.2",
"css-loader": "3.4.2", "css-loader": "3.4.2",
"dom-to-image": "^2.6.0",
"dotenv": "8.2.0", "dotenv": "8.2.0",
"dotenv-expand": "5.1.0", "dotenv-expand": "5.1.0",
"eslint": "^6.6.0", "eslint": "^6.6.0",
...@@ -61,6 +62,7 @@ ...@@ -61,6 +62,7 @@
"postcss-preset-env": "6.7.0", "postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1", "postcss-safe-parser": "4.0.1",
"qs": "^6.9.4", "qs": "^6.9.4",
"prop-types": "^15.7.2",
"react": "^16.13.1", "react": "^16.13.1",
"react-app-polyfill": "^1.0.6", "react-app-polyfill": "^1.0.6",
"react-async-component": "^2.0.0", "react-async-component": "^2.0.0",
......
src/core/function.js
...@@ -315,7 +315,7 @@ window.formatDate = (format, timestamp) => { ...@@ -315,7 +315,7 @@ window.formatDate = (format, timestamp) => {
* @constructor * @constructor
*/ */
window.getRequest = () => { window.getRequest = () => {
const url = location.search //获取url中"?"符后的字串 const url = window.location.search //获取url中"?"符后的字串
const theRequest = {} const theRequest = {}
if (url.indexOf('?') != -1) { if (url.indexOf('?') != -1) {
const str = url.substr(1) const str = url.substr(1)
...@@ -330,14 +330,14 @@ window.getRequest = () => { ...@@ -330,14 +330,14 @@ window.getRequest = () => {
window.getParameterByName = function(name) { window.getParameterByName = function(name) {
name = name.replace(/[\\[]/, '\\[').replace(/[\]]/, '\\]') name = name.replace(/[\\[]/, '\\[').replace(/[\]]/, '\\]')
const regex = new RegExp('[\\?&]' + name + '=([^&#]*)') const regex = new RegExp('[\\?&]' + name + '=([^&#]*)')
const results = regex.exec(location.href) const results = regex.exec(window.location.href)
return results === null return results === null
? '' ? ''
: decodeURIComponent(results[1].replace(/\+/g, ' ')) : decodeURIComponent(results[1].replace(/\+/g, ' '))
} }
window.getUrlParam = function () { window.getUrlParam = function () {
const urlArr = location.href.split('/'); const urlArr = window.location.href.split('/');
const str = urlArr[urlArr.length - 1]; const str = urlArr[urlArr.length - 1];
const param = parseInt(str); const param = parseInt(str);
......
src/index.html
...@@ -38,6 +38,7 @@ ...@@ -38,6 +38,7 @@
--> -->
<title>小麦云课堂</title> <title>小麦云课堂</title>
<script type="text/javascript" src="https://image.xiaomaiketang.com/xm/PhotoClip.js"></script> <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> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
......
src/index.tsx
...@@ -16,8 +16,7 @@ import _ from 'underscore'; ...@@ -16,8 +16,7 @@ import _ from 'underscore';
import { RootRouter } from './routes/index'; import { RootRouter } from './routes/index';
import 'antd/dist/antd.less'; import 'antd/dist/antd.less';
import '@/common/less/index.less'; import '@/common/less/index.less';
import '@/core/function'
import App from './modules/root/App';
import '@/common/less/index.less'; 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 { ...@@ -3,28 +3,66 @@ import {
withRouter withRouter
} from 'react-router-dom'; } from 'react-router-dom';
import './Login.less'; import './Login.less';
import {Input,Popover} from 'antd'; import {Input,Popover,message} from 'antd';
import CheckBeforeSendCode from '../../components/CheckBeforeSendCode'; import CheckBeforeSendCode from '../../components/CheckBeforeSendCode';
function Login(props) { function Login(props) {
const [phone, setPhone] = useState(''); // 登录手机号
const [phoneverify, setPhoneverify] = useState(''); // 密码登录验证码
const [openCheck1, setOpenCheck1] = useState(false); const [openCheck1, setOpenCheck1] = useState(false);
const [checkObject1, setCheckObject1] = useState({});
const [checking1, setChecking1] = 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);
useEffect(() => { useEffect(() => {
}, []) }, [])
async function checkAccount(code, callback = () => { }) {
async function checkAccount(code, callback = () => { }) {
callback();
} }
function checkSend(code) { 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 ( return (
<div className="login-page" > <div className="login-page" >
<div className="login-main"> <div className="login-main">
<div className="left-banner"> <div className="left-banner">
<div><img src={require("../../common/images/logo.png")} alt="" style={{ width: 60,height:61}} /></div> <div><img src={require("../../common/images/logo.png")} alt="" style={{ width: 60,height:61}} /></div>
<div class="name">小麦云课堂</div> <div className="name">小麦云课堂</div>
<div class="desc">一键开启直播授课 让知识更有价值</div> <div className="desc">一键开启直播授课 让知识更有价值</div>
</div> </div>
<div className="login-box"> <div className="login-box">
<div className="login"> <div className="login">
...@@ -41,9 +79,13 @@ function Login(props) { ...@@ -41,9 +79,13 @@ function Login(props) {
name="account" name="account"
maxLength={11} maxLength={11}
placeholder="手机号" placeholder="手机号"
value={phone}
onChange={(e) => { setPhone(e.target.value) }}
/> />
</div> </div>
<div className="error-message">
</div>
<div className="phoneverify"> <div className="phoneverify">
<Input <Input
type="text" type="text"
...@@ -51,16 +93,17 @@ function Login(props) { ...@@ -51,16 +93,17 @@ function Login(props) {
name="phoneverify" name="phoneverify"
placeholder="验证码" placeholder="验证码"
autoComplete="off" autoComplete="off"
value={phoneverify}
onChange={(e) => { setPhoneverify(e.target.value) }}
/> />
<Popover <Popover
visible={false} visible={openCheck1}
trigger="click" trigger="click"
title="" title=""
content={<div> content={<div>
<span style={{ fontSize: '12px', color: '#999', marginBottom: 8, display: 'block' }}>请完成安全验证</span> <span style={{ fontSize: '12px', color: '#999', marginBottom: 8, display: 'block' }}>请完成安全验证</span>
<CheckBeforeSendCode <CheckBeforeSendCode
callback={(data, nc) => { callback={(data, nc) => {
setCheckObject1(nc);
checkAccount(1, (userType) => { checkAccount(1, (userType) => {
handleSendSMSCode(data, userType); handleSendSMSCode(data, userType);
setTimeout(() => { setTimeout(() => {
...@@ -84,11 +127,11 @@ function Login(props) { ...@@ -84,11 +127,11 @@ function Login(props) {
if (checking1) return; if (checking1) return;
checkSend(1) checkSend(1)
}} }}
>获取验证码</div> >{codeText}</div>
</Popover> </Popover>
</div> </div>
<div className="error-message"> <div className="error-message">
验证码有误 {errorMessage}
</div> </div>
<div className="submit"> <div className="submit">
<div className="btn"> <div className="btn">
......
src/routes/config/mainRoutes.tsx
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
*/ */
import TestPage from '@/modules/test'; import TestPage from '@/modules/test';
import EmployeesManagePage from '@/modules/store-manege/EmployeesManagePage'; import EmployeesManagePage from '@/modules/store-manege/EmployeesManagePage';
import personalInfoPage from '@/modules/personalInfo';
const mainRoutes = [ const mainRoutes = [
{ {
...@@ -19,6 +20,11 @@ const mainRoutes = [ ...@@ -19,6 +20,11 @@ const mainRoutes = [
component: EmployeesManagePage, component: EmployeesManagePage,
name: '首页' name: '首页'
}, },
{
path: '/personal-info',
component: personalInfoPage,
name: '个人信息'
},
] ]
export default mainRoutes; export default mainRoutes;
\ 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