Skip to content

X
xiaomai-cloud-class-web
Commit 9e66ce76 by zhangleyuan
Options

feat:调整左侧导航的样式和个人设置页的获取验证码

parent 83965c05
Showing with 310 additions and 150 deletions
src/core/upload.js
......@@ -11,11 +11,10 @@ import Service from '@/common/js/service';
class Upload {
static uploadBlobToOSS(Blob, name, dir, dataType = 'url') {
// 上传图片和视频
return Service.MFS('anon/mfs/webTokenWithAccessUrl', { resourceName: name, instId: (!!window.currentUserInstInfo && window.currentUserInstInfo.instId) || LS.get('instId') || '1000000000000000000' }).then((res) => {
return Service.Hades('/public/store/commonOssAuthority', { resourceName: name, instId:'0'}).then((res) => {
console.log(0)
const signInfo = res.result;
const { url } = res.result
console.log('signInfo', signInfo);
return this.uploadBlobToNewOSS(Blob, name, dir, signInfo.signatureVO || signInfo).then(() => {
return dataType === 'url' ? url : signInfo
});
......
src/modules/personalInfo/ChangePhoneModal.tsx
import React, { useState, useEffect } from 'react';
import { Modal, Button, Input} from 'antd';
import { Modal, Button, Input,Popover} from 'antd';
import _ from 'underscore';
import './ChangePhoneModal.less';
import Form from 'antd/lib/form/Form';
import BaseService from "@/domains/basic-domain/baseService";
import CheckBeforeSendCode from '@/components/CheckBeforeSendCode';
interface changePhoneModalProps {
onClose:() => void,
onConfirm:(e:any) => void
}
function ChangePhoneModal(props: changePhoneModalProps) {
const { onClose,onConfirm } = props;
const { onClose} = props;
const [newPhone,setNewPhone] = useState('');
const [phoneVerify,setPhoneVerify] = useState('');
const [codeText, setCodeText] = useState('发送验证码');
const [waitStatus, setWaitStatus] = useState(false); // 验证码是否在倒计时
const [newPhoneError,setNewPhoneError] = useState(false);
const [phoneVerifyError,setPhoneVerifyError] = useState(false);
//Todo
const [errorMessageText,setErrorMessageText] = useState('');
const [openCheck, setOpenCheck] = useState(false); //滑块验证是否是打开状态
const [checking, setChecking] = useState(false);
useEffect(() => {
})
async function checkAccount(code:any, callback = () => { }) {
callback();
}
function checkPhoneVerify():any{
if(!phoneVerify){
setErrorMessageText('请输入验证码');
......@@ -31,8 +35,7 @@ function ChangePhoneModal(props: changePhoneModalProps) {
return;
}
}
function handleSendCode():any{
if (waitStatus) return;
function checkSendPhone(){
if(!newPhone){
setErrorMessageText('请输入手机号');
setNewPhoneError(true);
......@@ -43,10 +46,19 @@ function ChangePhoneModal(props: changePhoneModalProps) {
setNewPhoneError(true);
return;
}
setOpenCheck(true);
}
function handleSendSMSCode(checkData:any){
if (waitStatus) return;
let timer:any;
const param ={
phone:newPhone,
bizType:'CLOUD_CLASS_MODIFY_PHONE'
serverType:'CLOUD_CLASS_MODIFY_PHONE',
sig: checkData.sig,
sessionId: checkData.csessionid,
token: checkData.token,
scene: 'nc_login'
}
BaseService.sendBizAuthCode(param).then((res) => {
timeSub(60,0);
......@@ -150,10 +162,45 @@ function ChangePhoneModal(props: changePhoneModalProps) {
}}
style={{ width:200,height:32}}
/>
<span className="send-code"
{/* <span className="send-code"
onClick={() => {
handleSendCode();
}}>{codeText}</span>
}}>{codeText}</span> */}
<Popover
visible={openCheck}
trigger="click"
title=""
content={<div>
<span style={{ fontSize: '12px', color: '#999', marginBottom: 8, display: 'block' }}>请完成安全验证</span>
<CheckBeforeSendCode
callback={(data:any, nc:any) => {
checkAccount(1, () => {
handleSendSMSCode(data);
setTimeout(() => {
setOpenCheck(false);
}, 500)
})
}}
/>
</div>}
onVisibleChange={(value) => {
if (!value) {
setOpenCheck(false);
}
}}
placement="bottomRight"
>
<div
className="send-code"
id="sendVerifyCode"
onClick={() => {
if(checking){
return false;
}
checkSendPhone()
}}
>{codeText}</div>
</Popover>
</div>
<div className="error-message">{errorMessageText}</div>
</Modal>
......
src/modules/personalInfo/IdentificationModal.tsx
import React, { useState, useEffect } from 'react';
import { Modal, Form, Button, Input, Radio, Row, Col ,InputNumber } from 'antd';
import { Modal, Form, Button, Input, Radio, Row, Col ,InputNumber,Popover} from 'antd';
import _ from 'underscore';
import './IdentificationModal.less';
import BaseService from "@/domains/basic-domain/baseService";
import CheckBeforeSendCode from '@/components/CheckBeforeSendCode';
interface IdentificationModalProps {
onClose:() => void,
phone:String,
......@@ -17,11 +18,16 @@ function IdentificationModal(props: IdentificationModalProps) {
const [phoneVerifyError,setPhoneVerifyError] = useState(false);
const [errorMessageText,setErrorMessageText] = useState('');
const [openCheck, setOpenCheck] = useState(false); //滑块验证是否是打开状态
const [checking, setChecking] = useState(false);
useEffect(() => {
})
function handleConfirm():any {
async function checkAccount(code:any, callback = () => { }) {
callback();
}
function handleConfirm(){
if(!phoneVerify){
setPhoneVerifyError(true);
setErrorMessageText('请输入验证码');
......@@ -40,12 +46,16 @@ function IdentificationModal(props: IdentificationModalProps) {
}
});
}
function handleSendCode():any {
function handleSendSMSCode(checkData:any){
if (waitStatus) return;
let timer:any;
const param ={
phone,
serverType:'CLOUD_CLASS_MODIFY_PHONE'
serverType:'CLOUD_CLASS_MODIFY_PHONE',
sig: checkData.sig,
sessionId: checkData.csessionid,
token: checkData.token,
scene: 'nc_login'
}
BaseService.sendBizAuthCode(param).then((res) => {
timeSub(60,0);
......@@ -105,13 +115,48 @@ function IdentificationModal(props: IdentificationModalProps) {
}}
style={{ width:200,height:32}}
/>
<span
{/* <span
className="send-code"
onClick={() => {
handleSendCode();
}}>
{codeText}
</span>
</span> */}
<Popover
visible={openCheck}
trigger="click"
title=""
content={<div>
<span style={{ fontSize: '12px', color: '#999', marginBottom: 8, display: 'block' }}>请完成安全验证</span>
<CheckBeforeSendCode
callback={(data:any, nc:any) => {
checkAccount(1, () => {
handleSendSMSCode(data);
setTimeout(() => {
setOpenCheck(false);
}, 500)
})
}}
/>
</div>}
onVisibleChange={(value) => {
if (!value) {
setOpenCheck(false);
}
}}
placement="bottomRight"
>
<div
className="send-code"
id="sendVerifyCode"
onClick={() => {
if(checking){
return false;
}
setOpenCheck(true);
}}
>{codeText}</div>
</Popover>
</div>
<div className="error-message">{errorMessageText}</div>
......
src/modules/personalInfo/index.tsx
......@@ -135,7 +135,7 @@ function PersonalInfoPage() {
}
{
changePhoneModalVisible && <ChangePhoneModal onClose={()=>{setChangePhoneModalVisible(false)}} onConfirm={()=>{changePhoneModalConfirm()}}/>
changePhoneModalVisible && <ChangePhoneModal onClose={()=>{setChangePhoneModalVisible(false)}}/>
}
</div>
......
src/modules/root/Header.jsx → src/modules/root/Header.tsx
......@@ -5,142 +5,128 @@
* @LastEditTime: 2020-12-04 15:30:49
* @Description:
*/
import React from 'react';
import React , { useContext, useEffect ,useState}from 'react';
import './Header.less';
import {
Menu,
Dropdown,
Icon,
message,
Modal,
Input,
Avatar,
Button,
Row,
Col,
Badge,
Tooltip,
Radio,
Modal
} from 'antd';
import { QuestionCircleOutlined } from "@ant-design/icons";
import { withRouter } from 'react-router-dom';
import Bus from '@/core/bus';
import User from '@/common/js/user';
import axios from 'axios';
import BaseService from "@/domains/basic-domain/baseService";
// var $topContainer = $('#top-container');
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
menuType: 1,
};
}
componentDidMount() {
}
userMenu() {
const style = {
whiteSpace: "normal",
wordBreak: "break-all"
};
import { XMContext } from '@/store/context';
import baseImg from '@/common/images/xiaomai-IMG.png';
const { confirm } = Modal;
function Header(){
const [menuType, setMenuType] = useState(1);
const ctx: any = useContext(XMContext);
function userMenu() {
return (
<Menu
style={{
maxWidth: "250px",
marginTop: 5,
}}
onClick={e => {
if (e.key === '1') {
window.RCHistory.push('/user_info');
Bus.trigger('clearSearchText')
} else {
this.handleLogout();
}
}}
>
<Menu.Item
style={style}
style={{whiteSpace: "normal", wordBreak: "break-all"}}
key="1"
onClick={() => toPersonalInfoPage()}
>
个人设置
</Menu.Item>
<Menu.Item
style={{whiteSpace: "normal", wordBreak: "break-all"}}
key="2"
onClick={e => {
handleLogoutConfirm();
}}
>
退出登录
</Menu.Item>
</Menu>
);
}
handleMenu = () => {
const menuType = !this.state.menuType;
this.setState({ menuType }, () => {
Bus.trigger('menuTypeChange', menuType);
});
function handleMenu(){
};
handleLogout() {
// const AxiosInstance = axios.create({
// headers: {
// xmToken: User.getToken(),
// }
// });
// AxiosInstance.post('https://dev-heimdall.xiaomai5.com/hades/public/store/logout').then((res) => {
// User.removeUserId();
// User.removeToken();
// window.RCHistory.push({
// pathname: `/login`,
// })
// })
BaseService.logout().then((res) => {
function toPersonalInfoPage(){
window.RCHistory.push({
pathname: `/personal-info`,
})
}
function handleLogoutConfirm(){
return confirm({
title: "你确定要删除此讲师吗？",
content: "删除后，讲师将不能登录系统，此操作不能被撤销",
icon: <QuestionCircleOutlined />,
okText: "删除",
okType: "danger",
cancelText: "取消",
onOk: () => {
handleLogout();
},
});
}
function handleLogout(){
BaseService.logout({}).then((res) => {
User.removeUserId();
User.removeToken();
window.RCHistory.push({
pathname: `/login`,
})
});
}
render() {
const {
} = this.state;
return (
<div id="top-container" className="top-container">
<div className="top top-nav">
<div>
{this.state.menuType ? (
<img src="https://image.xiaomaiketang.com/xm/TP2x7aQ24y.png" className="logo" alt="" />
):(
<img src="https://dev.xiaomai5.com/admin/static/images/logo.928339cd.png" className="logo" alt="" />
)}
</div>
{this.state.menuType ? (
<span className="icon iconfont cursor ml20 handLike" onClick={this.handleMenu}>
&#xe83d;{' '}
</span>
) : (
<span className="icon iconfont cursor ml20 handLike" onClick={this.handleMenu}>
&#xe615;
</span>
}
return (
<div id="top-container" className="top-container">
<div className="top top-nav">
<div>
{menuType ? (
<img src="https://image.xiaomaiketang.com/xm/TP2x7aQ24y.png" className="logo" alt="" />
):(
<img src="https://dev.xiaomai5.com/admin/static/images/logo.928339cd.png" className="logo" alt="" />
)}
<div className="message-help">
<Dropdown overlay={this.userMenu()}>
<div className="user">
<Avatar
style={{
width: 32 + "px",
height: 32 + "px",
borderRadius: "50%",
overflow: "hidden",
flexShrink: 0,
}}
size="large"
src="@/common/images/xiaomai-IMG.png"
/>
<span className="name">张乐园</span>
</div>
</Dropdown>
</div>
</div>
{menuType ? (
<span className="icon iconfont cursor ml20 handLike" onClick={handleMenu}>
&#xe83d;{' '}
</span>
) : (
<span className="icon iconfont cursor ml20 handLike" onClick={handleMenu}>
&#xe615;
</span>
)}
<div className="message-help">
<Dropdown overlay={userMenu()}>
<div className="user">
<img
style={{
width: 32 + "px",
height: 32 + "px",
borderRadius: "50%",
overflow: "hidden",
flexShrink: 0,
}}
src={(ctx.xmState && ctx.xmState.storeList &&ctx.xmState.storeList[0].avatar) ? ctx.xmState.storeList[0].avatar:baseImg}
/>
{ ctx.xmState && ctx.xmState.storeList && (
<span className="name">{ctx.xmState.storeList[0].nickName}</span>
)
}
</div>
</Dropdown>
</div>
</div>
);
}
</div>
);
}
export default withRouter(Header);
src/modules/root/Login.jsx
......@@ -17,6 +17,7 @@ function Login(props) {
const [waitStatus, setWaitStatus] = useState(false); // 验证码是否在倒计时
const [errorMessage,setErrorMessage] = useState('');
const [phoneError,setPhoneError] = useState(false);
useEffect(() => {
}, [])
......@@ -40,8 +41,6 @@ function Login(props) {
function handleSendSMSCode(checkData, userType) {
if (waitStatus) return;
let timer;
// timeSub(60);
// setChecking1(true)
const params = {
phone: phone,
sig: checkData.sig,
......@@ -54,7 +53,6 @@ function Login(props) {
if (!res.data.success) {
setErrorMessage(res.data.message);
} else {
console.log('111');
timeSub(60);
setChecking1(true)
}
......@@ -181,9 +179,6 @@ function Login(props) {
<button id='loginIn' onClick={ () => { handleSubmit() } }>登录</button>
</div>
</div>
{/* <div className="network-message">
<span className="icon iconfont">&#xe834;</span>网络不给力，请<span className="refresh">点击刷新</span>
</div> */}
</div>
</div>
</div>
......
src/modules/root/Menu.less
......@@ -40,15 +40,49 @@
.icon {
margin-right: 20px
}
.ant-menu-item {
color: @xm-color-text-menu;
.listType {
width: 5px;
height: 5px;
background: #9A9DA7;
border-radius: 50%;
top: 18px;
left: 38px;
position: absolute;
}
.ant-menu-item-selected {
.name {
color: #fff;
.ant-menu-item-selected{
color:@active-color;
}
.ant-menu-sub{
.ant-menu-item{
padding-left:58px
}
}
.ant-menu-submenu-selected{
color:@active-color;
.ant-menu-item-selected{
color:#FFF;
.listType {
background: @active-color;
}
}
}
// .first-menu-item{
// &::active{
// color:@active-color !important;
// }
// }
// .ant-menu-item {
// color: @xm-color-text-menu;
// }
// .ant-menu-item-selected {
// .name {
// color: #fff;
// }
// }
}
}
......@@ -71,3 +105,51 @@
.ant-menu.ant-menu-dark, .ant-menu-dark .ant-menu-sub, .ant-menu.ant-menu-dark .ant-menu-sub{
background: @menu-bakg !important;
}
// .ant-menu-submenu-popup>.ant-menu {
// background: @menu-bakg !important;
// color: #9A9DA7;
// padding-left: 15px;
// width: 132px;
// min-width: auto;
// li {
// padding-left: 22px;
// padding-right: 0;
// width: 117px;
// }
// .listType {
// width: 5px;
// height: 5px;
// background: #9A9DA7;
// border-radius: 50%;
// top: 18px;
// left: 5px;
// position: absolute;
// }
// .ant-menu-item-selected {
// background: @menu-bakg;
// color: #fff;
// .listType {
// background: @active-color;
// }
// }
// &:hover {
// .ant-menu-item-active {
// color: #fff;
// .listType {
// background: #fff;
// }
// }
// .ant-menu-item-selected {
// .listType {
// background: @active-color;
// }
// }
// }
// }
src/modules/root/Menu.tsx
......@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react';
import {
withRouter,
} from 'react-router-dom';
import { Menu } from 'antd';
import { Menu,Badge} from 'antd';
import { menuList } from '../../routes//config/menuList'
import { XMContext } from '../../store/context';
import Bus from '@/core/bus'
......@@ -18,9 +18,11 @@ function Aside(props: any) {
useEffect(() => {
const link = props.location.pathname;
console.log('link',link);
menuList.map((item: any, index: any) => {
if (link.indexOf(item.link) !== -1) {
setSelectKey(item.groupCode);
console.log('selectKey',selectKey);
setOpenKeys([])
} else if (item.children) {
item.children.map((_item: any, _index: any) => {
......@@ -32,7 +34,7 @@ function Aside(props: any) {
return item;
})
}, [props.location.pathname])
function taggleMenu(item: any) {
function toggleMenu(item: any) {
window.RCHistory.push(item.link)
}
function onOpenChange(openKeys:any){
......@@ -67,26 +69,29 @@ function Aside(props: any) {
return null;
}
if (item.children) {
return <SubMenu key={item.groupCode} style={{ marginTop: 0 }} title={<div>
return <SubMenu key={item.groupCode} style={{ marginTop: 0 }} className="first-menu-item" title={<div >
<span style={{ marginRight: 6 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span>
<span>{item.groupName}</span></div>}>
{
item.children.map((item: any, _index: any) => {
return <Menu.Item onClick={() => { taggleMenu(item) }} style={{ marginTop: 0 }} key={item.groupCode + index + _index}>
<span>{item.groupName}</span>
return <Menu.Item onClick={() => { toggleMenu(item) }} style={{ marginTop: 0 }} key={item.groupCode + index + _index}>
<span className="listType"></span>
<span className="name">{item.groupName}</span>
</Menu.Item>
})
}
</SubMenu>
} else {
return <Menu.Item onClick={() => { taggleMenu(item) }} key={item.groupCode}>
return <Menu.Item onClick={() => { toggleMenu(item) }} key={item.groupCode} className="first-menu-item">
<span style={{ marginRight: 6 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span>
<span>{item.groupName}</span>
</Menu.Item>
}
})
}
</Menu>
</div>
</div>
......
src/modules/store-manege/CourseCatalogPage.tsx
......@@ -198,12 +198,15 @@ function CourseCatalogPage() {
</div>
<div className="box-footer">
<PageControl
current={query.current}
pageSize={query.size}
total={total}
toPage={(page) => {
current={query.current}
pageSize={query.size}
total={total}
toPage={(page: any) => {
const queryStates = _.clone(query);
queryStates.current = page;
setQuery(queryStates);
}}
}}
/>
</div>
</div>
......
src/modules/store-manege/modal/SecondCatalogAddOrEditModal.tsx
......@@ -19,7 +19,7 @@ interface SecondCatalogAddOrEditModalProps {
onClose: (e: any) => void;
modalType:string;
parentId:string;
choosedItem:any
}
function SecondCatalogAddOrEditModal(props: SecondCatalogAddOrEditModalProps) {
......
src/routes/config/menuList.tsx
......@@ -7,14 +7,12 @@ export const menuList: any = [
{
groupName: "直播课",
groupCode: "CourseLiveClass",
icon: '',
link: ''
link: '/CourseLiveClass'
},
{
groupName: "视频课",
groupCode: "CourseVideoClass",
icon: '',
link: ''
link: '/CourseVideoClass'
}
]
},
......@@ -23,7 +21,7 @@ export const menuList: any = [
groupName: "资料云盘",
groupCode: "CloudDisk",
icon: '&#xe83b;',
link: ''
link: '/CloudDisk'
},
{
groupName: "店铺管理",
......
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