Skip to content

X
xiaomai-cloud-class-web
Commit 9bc4f2c6 by chenshu
Options

feat:初始化部分页面

parent e54e0359
Showing with 363 additions and 33 deletions
src/common/less/icon-font.less
@font-face { @font-face {
font-family: 'iconfont'; /* project id 2223403 */ font-family: 'iconfont'; /* project id 2223403 */
src: url('//at.alicdn.com/t/font_2223403_vzf1rkr5ya.eot'); src: url('//at.alicdn.com/t/font_2223403_51q0004t5ds.eot');
src: url('//at.alicdn.com/t/font_2223403_vzf1rkr5ya.eot?#iefix') format('embedded-opentype'), src: url('//at.alicdn.com/t/font_2223403_51q0004t5ds.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2223403_vzf1rkr5ya.woff2') format('woff2'), url('//at.alicdn.com/t/font_2223403_51q0004t5ds.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2223403_vzf1rkr5ya.woff') format('woff'), url('//at.alicdn.com/t/font_2223403_51q0004t5ds.woff') format('woff'),
url('//at.alicdn.com/t/font_2223403_vzf1rkr5ya.ttf') format('truetype'), url('//at.alicdn.com/t/font_2223403_51q0004t5ds.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2223403_vzf1rkr5ya.svg#iconfont') format('svg'); url('//at.alicdn.com/t/font_2223403_51q0004t5ds.svg#iconfont') format('svg');
} }
.iconfont{ .iconfont{
font-family:"iconfont" !important; font-family:"iconfont" !important;
......
src/h5.html
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_vzf1rkr5ya.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_51q0004t5ds.css">
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
......
src/index.html
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_vzf1rkr5ya.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_51q0004t5ds.css">
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
......
src/modules/root/CollegeManagePage.jsx 0 → 100644
import React from 'react';
import './CollegeManagePage.less';
export default class CollegeManagePage extends React.Component {
constructor(props) {
super(props);
this.state = {
avatar: 'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png',
name: '',
};
}
render() {
const {
avatar,
} = this.state;
return (
<div className="college-manage-page">
<div className="college-header">
<div className="box">
<img className="box-image" src="https://image.xiaomaiketang.com/xm/HNHCAF6Fc2.png" />
<div className="user">
<img className="image" src={avatar} />
<span className="name">Xiaomai</span>
<span className="logout">退出</span>
</div>
</div>
</div>
<div className="college-box">
<div className="user">
<img className="image" src={avatar} />
<span className="name">用户ID</span>
</div>
<div className="title-box">
<span className="title">企学院 (1)</span>
<span className="text">最多可创建10个企学院，您还能创建9个</span>
</div>
<div className="college-list">
<div className="college-item">
<div className="header">
<img className="image" src="https://image.xiaomaiketang.com/xm/HNHCAF6Fc2.png" />
<span className="tag">学院管理员</span>
</div>
<div className="title">小麦助教小麦助教小麦助教小麦助教小麦助教</div>
<div className="time">2020-03-29 17:17</div>
</div>
<div
className="college-create"
onClick={() => {
window.RCHistory.push('/college-manage/create')
}}
>
<span className="create-word">+ 创建企学院</span>
</div>
</div>
</div>
</div>
)
}
}
\ No newline at end of file
src/modules/root/CollegeManagePage.less 0 → 100644
.college-manage-page {
background: #fff;
width: 100vw;
min-height: 100vh;
padding-top: 60px;
overflow-y: auto;
.college-header {
position: fixed;
top: 0;
left: 0;
height: 60px;
width: 100%;
display: flex;
justify-content: center;
.box {
height: 60px;
width: 1280px;
display: flex;
align-items: center;
justify-content: space-between;
.box-image {
width: 105px;
height: 25px;
margin-left: 27px;
}
.user {
margin-right: 21px;
.image {
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 8px;
}
.name {
color: #333;
font-size: 16px;
margin-right: 8px;
}
.logout {
font-size: 14px;
color: #5289FA;
cursor: pointer;
}
}
}
}
.college-box {
width: 1280px;
margin: 0 auto;
padding: 60px 0 30px 60px;
.user {
margin-bottom: 85px;
.image {
width: 80px;
height: 80px;
margin-left: 10px;
border-radius: 50%;
margin-right: 24px;
}
.name {
color: #333;
font-size: 24px;
}
}
.title-box {
.title {
color: #333;
font-size: 24px;
margin-right: 8px;
}
.text {
color: #666;
font-size: 14px;
}
}
.college-list {
.college-item,.college-create {
position: relative;
display: inline-block;
overflow: hidden;
width: 376px;
height: 133px;
border: 1px solid #E8E8E8;
padding: 16px;
border-radius: 4px;
margin-top: 16px;
margin-right: 16px;
cursor: pointer;
.header {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
.image {
height: 20px;
width: 84px;
}
.tag {
height: 18px;
padding: 0 8px;
line-height: 18px;
border-radius: 9px;
border: 1px solid #5289FA;
color: #5289FA;
font-size: 12px;
}
}
.title {
width: 271px;
height: 44px;
line-height: 22px;
color: #333;
font-size: 16px;
margin-bottom: 8px;
font-weight: 500;
}
.time {
color: #999;
}
.create-word {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #5289FA;
font-size: 16px;
}
&:hover {
background: #F3F6FA;
}
}
.college-create {
border: 1px dashed #5289FA;
}
}
}
}
\ No newline at end of file
src/modules/root/CreateCollege.jsx 0 → 100644
import React from 'react';
import './CreateCollege.less';
export default class CreateCollege extends React.Component {
constructor(props) {
super(props);
this.state = {
avatar: 'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png',
name: '',
};
}
render() {
const {
avatar,
} = this.state;
return (
<div className="college-manage-page">
<div className="college-header">
<div className="box">
<img className="box-image" src="https://image.xiaomaiketang.com/xm/HNHCAF6Fc2.png" />
<div className="user">
<img className="image" src={avatar} />
<span className="name">Xiaomai</span>
<span className="logout">退出</span>
</div>
</div>
</div>
<div className="create-box">
</div>
</div>
)
}
}
\ No newline at end of file
src/modules/root/CreateCollege.less 0 → 100644
.college-manage-page {
.create-box {
}
}
\ No newline at end of file
src/modules/root/Header.jsx
...@@ -22,9 +22,12 @@ const { confirm } = Modal; ...@@ -22,9 +22,12 @@ const { confirm } = Modal;
function Header(props) { function Header(props) {
const { menuType, handleMenuType } = props; const { menuType, handleMenuType } = props;
const [storeName,setStoreName] = useState(User.getStoreName()) const [storeName, setStoreName] = useState(User.getStoreName())
const [nickName, setNickName] = useState('');
const [phone, setPhone] = useState('');
const ctx = useContext(XMContext); const ctx = useContext(XMContext);
const htmlUrl = `${LIVE_SHARE}store/index?id=${User.getStoreId()}&userId=${User.getUserId()}&from=work_weixin`; const htmlUrl = `${LIVE_SHARE}store/index?id=${User.getStoreId()}&userId=${User.getUserId()}&from=work_weixin`;
const storeUserId = User.getStoreUserId();
useEffect(() => { useEffect(() => {
htmlUrl && handleConvertShortUrl(); htmlUrl && handleConvertShortUrl();
...@@ -33,31 +36,60 @@ function Header(props) { ...@@ -33,31 +36,60 @@ function Header(props) {
}); });
}, []); }, []);
useEffect(() => {
storeUserId && getUserInfo();
}, [storeUserId]);
function getUserInfo() {
const param = {
storeUserId: User.getStoreUserId(),
};
BaseService.getStoreUser(param).then((res) => {
const { nickName, phone, roleCodes, weChatAccount } = res.result;
setNickName(nickName);
setPhone(phone);
});
}
function userMenu() { function userMenu() {
return ( return (
<Menu <div className="user-center-dropdown">
style={{ <div className="user-detail">
maxWidth: "250px", <div className="name">{nickName}</div>
marginTop: 5, <div className="box">
}} <span className="phone">{phone}</span>
> <span className="setting" onClick={() => toPersonalInfoPage()}>个人设置
<Menu.Item <span className="iconfont icon">&#xe79b;</span>
style={{ whiteSpace: "normal", wordBreak: "break-all" }} </span>
key="1" </div>
onClick={() => toPersonalInfoPage()} </div>
> <div className="menu">
个人设置 <div
</Menu.Item> className="menu-item"
<Menu.Item key="1"
style={{ whiteSpace: "normal", wordBreak: "break-all" }} onClick={() => {
key="2" window.RCHistory.push({
onClick={(e) => { pathname: '/college-manage',
handleLogoutConfirm(); });
}} }}
> >
退出登录 <span className="menu-before iconfont icon">&#xe84e;</span>
</Menu.Item> <span>进入管理后台</span>
</Menu> <span className="menu-after iconfont icon">&#xe79b;</span>
</div>
<div
className="menu-item"
key="2"
onClick={(e) => {
handleLogoutConfirm();
}}
>
<span className="menu-before iconfont icon">&#xe84e;</span>
<span>退出登录</span>
<span className="menu-after iconfont icon">&#xe79b;</span>
</div>
</div>
</div>
); );
} }
...@@ -173,7 +205,7 @@ function Header(props) { ...@@ -173,7 +205,7 @@ function Header(props) {
</div> </div>
</div> </div>
<Dropdown overlay={userMenu()}> <Dropdown overlay={userMenu()} arrow>
<div className="user"> <div className="user">
<img <img
style={{ style={{
......
src/modules/root/Header.less
...@@ -530,3 +530,58 @@ ...@@ -530,3 +530,58 @@
} }
} }
} }
.user-center-dropdown {
background: #fff;
width: 274px;
height: 184px;
border-radius: 4px;
padding: 12px 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
.user-detail {
padding-bottom: 16px;
border-bottom: 1px solid #E8E8E8;
.name {
font-size: 16px;
color: #333;
line-height: 22px;
margin-bottom: 4px;
}
.box {
display: flex;
justify-content: space-between;
align-items: center;
line-height: 22px;
.phone {
color: #999999;
}
.setting {
color: #666;
cursor: pointer;
.iconfont {
margin-left: 4px;
font-size: 12px;
}
}
}
}
.menu {
padding-top: 8px;
.menu-item {
height: 44px;
line-height: 44px;
cursor: pointer;
color: #333;
.menu-before {
color: #BFBFBF;
margin-right: 8px;
font-size: 14px;
}
.menu-after {
color: #999;
float: right;
font-size: 12px;
}
}
}
}
src/routes/index.tsx
...@@ -13,6 +13,8 @@ import { createHashHistory } from 'history'; ...@@ -13,6 +13,8 @@ import { createHashHistory } from 'history';
import App from '../modules/root/App'; import App from '../modules/root/App';
import AppContext from '@/modules/root/AppContent'; import AppContext from '@/modules/root/AppContent';
import Login from '../modules/root/Login'; import Login from '../modules/root/Login';
import CollegeManagePage from '../modules/root/CollegeManagePage';
import CreateCollege from '../modules/root/CreateCollege';
import _ from 'underscore'; import _ from 'underscore';
import { asyncComponent } from 'react-async-component' import { asyncComponent } from 'react-async-component'
const history = createHashHistory(); const history = createHashHistory();
...@@ -52,6 +54,8 @@ export const RootRouter = () => { ...@@ -52,6 +54,8 @@ export const RootRouter = () => {
<Router {...history}> <Router {...history}>
<Switch> <Switch>
<Route key="1" exact path="/login" render={() => <Login />} /> <Route key="1" exact path="/login" render={() => <Login />} />
<Route key="1" exact path="/college-manage" render={() => <CollegeManagePage />} />
<Route key="1" exact path="/college-manage/create" render={() => <CreateCollege />} />
<Route key="2" path="/" render={() => <AppContext />} /> <Route key="2" path="/" render={() => <AppContext />} />
</Switch> </Switch>
</Router> </Router>
......
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