Skip to content

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

Merge branch 'master' into feature/pangguoming/20210622/login_page_modify

parents f4df368a 92b8a8c8
Showing with 319 additions and 300 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_boiin24pch6.eot'); src: url('//at.alicdn.com/t/font_2223403_oe5p510553.woff2?t=1624259078391') format('woff2'),
src: url('//at.alicdn.com/t/font_2223403_boiin24pch6.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_2223403_oe5p510553.woff?t=1624259078391') format('woff'),
url('//at.alicdn.com/t/font_2223403_boiin24pch6.woff2') format('woff2'), url('//at.alicdn.com/t/font_2223403_oe5p510553.ttf?t=1624259078391') format('truetype');
url('//at.alicdn.com/t/font_2223403_boiin24pch6.woff') format('woff'),
url('//at.alicdn.com/t/font_2223403_boiin24pch6.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2223403_boiin24pch6.svg#iconfont') format('svg');
} }
.iconfont{ .iconfont {
font-family:"iconfont" !important; font-family: 'iconfont' !important;
font-size:16px; font-size: 16px;
font-style:normal; font-style: normal;
} }
src/index.html
<!-- <!--
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-24 12:20:57 * @Date: 2020-08-24 12:20:57
* @LastEditors: wufan * @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-27 10:24:06 * @LastEditTime: 2021-06-21 15:06:27
* @Description: * @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
--> -->
...@@ -13,17 +13,23 @@ ...@@ -13,17 +13,23 @@
<link rel="icon" href="" /> <link rel="icon" href="" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="小麦企学院，一站式企业培训数字化服务商，通过“工具+内容”，帮助企业快速从0到1搭建数字化培训体系，并让整个培训过程可视化，降低培训成本，提升培训效率。"> <meta
<meta name="keywords" content="小麦企学院,企业培训,员工培训,企业大学,企业内训,企业外训,培训计划,培训素材,企培,企训,资料云盘,培训课程,培训任务,直播课,视频课,图文课,线下课,知识库,作业,考试,排行榜,培训类别管理,定制培训计划,管理数据,学习数据,企学院,资料共享,培训数字化,数字化培训,培训工具,在线培训,线上培训,培训saas,培训管理,企业微信培训,对客培训,客户培训,直播培训,互联网培训,新员工培训,管理培训,管理者培训,工人培训,制造业培训,餐饮培训,服务业培训,零售培训,门店培训,工厂培训,车间培训,培训补贴,人事培训,财务培训,职场培训,企业学院平台,教育企业学院,教育企业平台,教育平台学院,企业学习,酷学院,小鹅通,企业学院,云学堂,时代光华,云课堂,魔学院,云大学,米知云,授课学堂"> name="description"
content="小麦企学院，一站式企业培训数字化服务商，通过“工具+内容”，帮助企业快速从0到1搭建数字化培训体系，并让整个培训过程可视化，降低培训成本，提升培训效率。"
/>
<meta
name="keywords"
content="小麦企学院,企业培训,员工培训,企业大学,企业内训,企业外训,培训计划,培训素材,企培,企训,资料云盘,培训课程,培训任务,直播课,视频课,图文课,线下课,知识库,作业,考试,排行榜,培训类别管理,定制培训计划,管理数据,学习数据,企学院,资料共享,培训数字化,数字化培训,培训工具,在线培训,线上培训,培训saas,培训管理,企业微信培训,对客培训,客户培训,直播培训,互联网培训,新员工培训,管理培训,管理者培训,工人培训,制造业培训,餐饮培训,服务业培训,零售培训,门店培训,工厂培训,车间培训,培训补贴,人事培训,财务培训,职场培训,企业学院平台,教育企业学院,教育企业平台,教育平台学院,企业学习,酷学院,小鹅通,企业学院,云学堂,时代光华,云课堂,魔学院,云大学,米知云,授课学堂"
/>
<!-- <link rel="apple-touch-icon" href="../src/common/images/logo.png" /> --> <!-- <link rel="apple-touch-icon" href="../src/common/images/logo.png" /> -->
<link rel="shortcut icon" href="https://image.xiaomaiketang.com/xm/c4KiP2epBP.png"> <link rel="shortcut icon" href="https://image.xiaomaiketang.com/xm/c4KiP2epBP.png" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
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_oqqm4z9s35j.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_oe5p510553.css" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
...@@ -69,146 +75,152 @@ ...@@ -69,146 +75,152 @@
// Browser globals (root is window) // Browser globals (root is window)
root.download = factory(); root.download = factory();
} }
}(this, function () { })(this, function () {
return function download(data, strFileName, strMimeType) { return function download(data, strFileName, strMimeType) {
var self = window, // this script is only for browsers anyway... var self = window, // this script is only for browsers anyway...
defaultMime = "application/octet-stream", // this default mime also triggers iframe downloads defaultMime = 'application/octet-stream', // this default mime also triggers iframe downloads
mimeType = strMimeType || defaultMime, mimeType = strMimeType || defaultMime,
payload = data, payload = data,
url = !strFileName && !strMimeType && payload, url = !strFileName && !strMimeType && payload,
anchor = document.createElement("a"), anchor = document.createElement('a'),
toString = function(a){return String(a);}, toString = function (a) {
myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString), return String(a);
fileName = strFileName || "download", },
myBlob = self.Blob || self.MozBlob || self.WebKitBlob || toString,
fileName = strFileName || 'download',
blob, blob,
reader; reader;
myBlob= myBlob.call ? myBlob.bind(self) : Blob ; myBlob = myBlob.call ? myBlob.bind(self) : Blob;
if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
payload=[payload, mimeType];
mimeType=payload[0];
payload=payload[1];
}
if (String(this) === 'true') {
//reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
payload = [payload, mimeType];
mimeType = payload[0];
payload = payload[1];
}
if(url && url.length< 2048){ // if no filename and no mime, assume a url was passed as the only argument if (url && url.length < 2048) {
fileName = url.split("/").pop().split("?")[0]; // if no filename and no mime, assume a url was passed as the only argument
fileName = url.split('/').pop().split('?')[0];
anchor.href = url; // assign href prop to temp anchor anchor.href = url; // assign href prop to temp anchor
if(anchor.href.indexOf(url) !== -1){ // if the browser determines that it's a potentially valid url path: if (anchor.href.indexOf(url) !== -1) {
var ajax=new XMLHttpRequest(); // if the browser determines that it's a potentially valid url path:
ajax.open( "GET", url, true); var ajax = new XMLHttpRequest();
ajax.responseType = 'blob'; ajax.open('GET', url, true);
ajax.onload= function(e){ ajax.responseType = 'blob';
ajax.onload = function (e) {
download(e.target.response, fileName, defaultMime); download(e.target.response, fileName, defaultMime);
}; };
setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return: setTimeout(function () {
return ajax; ajax.send();
}, 0); // allows setting custom ajax headers using the return:
return ajax;
} // end if valid url? } // end if valid url?
} // end if url? } // end if url?
//go ahead and download dataURLs right away //go ahead and download dataURLs right away
if(/^data\:[\w+\-]+\/[\w+\-]+[,;]/.test(payload)){ if (/^data\:[\w+\-]+\/[\w+\-]+[,;]/.test(payload)) {
if (payload.length > 1024 * 1024 * 1.999 && myBlob !== toString) {
if(payload.length > (1024*1024*1.999) && myBlob !== toString ){ payload = dataUrlToBlob(payload);
payload=dataUrlToBlob(payload); mimeType = payload.type || defaultMime;
mimeType=payload.type || defaultMime; } else {
}else{ return navigator.msSaveBlob // IE10 can't do a[download], only Blobs:
return navigator.msSaveBlob ? // IE10 can't do a[download], only Blobs: ? navigator.msSaveBlob(dataUrlToBlob(payload), fileName)
navigator.msSaveBlob(dataUrlToBlob(payload), fileName) : : saver(payload); // everyone else can save dataURLs un-processed
saver(payload) ; // everyone else can save dataURLs un-processed
} }
} //end if dataURL passed?
}//end if dataURL passed?
blob = payload instanceof myBlob ?
payload :
new myBlob([payload], {type: mimeType}) ;
blob = payload instanceof myBlob ? payload : new myBlob([payload], { type: mimeType });
function dataUrlToBlob(strUrl) { function dataUrlToBlob(strUrl) {
var parts= strUrl.split(/[:;,]/), var parts = strUrl.split(/[:;,]/),
type= parts[1], type = parts[1],
decoder= parts[2] == "base64" ? atob : decodeURIComponent, decoder = parts[2] == 'base64' ? atob : decodeURIComponent,
binData= decoder( parts.pop() ), binData = decoder(parts.pop()),
mx= binData.length, mx = binData.length,
i= 0, i = 0,
uiArr= new Uint8Array(mx); uiArr = new Uint8Array(mx);
for(i;i<mx;++i) uiArr[i]= binData.charCodeAt(i); for (i; i < mx; ++i) uiArr[i] = binData.charCodeAt(i);
return new myBlob([uiArr], {type: type}); return new myBlob([uiArr], { type: type });
} }
function saver(url, winMode){ function saver(url, winMode) {
if ('download' in anchor) {
if ('download' in anchor) { //html5 A[download] //html5 A[download]
anchor.href = url; anchor.href = url;
anchor.setAttribute("download", fileName); anchor.setAttribute('download', fileName);
anchor.className = "download-js-link"; anchor.className = 'download-js-link';
anchor.innerHTML = "downloading..."; anchor.innerHTML = 'downloading...';
anchor.style.display = "none"; anchor.style.display = 'none';
document.body.appendChild(anchor); document.body.appendChild(anchor);
setTimeout(function() { setTimeout(function () {
anchor.click(); anchor.click();
document.body.removeChild(anchor); document.body.removeChild(anchor);
if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(anchor.href);}, 250 );} if (winMode === true) {
setTimeout(function () {
self.URL.revokeObjectURL(anchor.href);
}, 250);
}
}, 66); }, 66);
return true; return true;
} }
// handle non-a[download] safari as best we can: // handle non-a[download] safari as best we can:
if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) { if (/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) {
url=url.replace(/^data:([\w\/\-\+]+)/, defaultMime); url = url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
if(!window.open(url)){ // popup blocked, offer direct download: if (!window.open(url)) {
if(confirm("Displaying New Document\n\nUse Save As... to download, then click back to return to this page.")){ location.href=url; } // popup blocked, offer direct download:
if (confirm('Displaying New Document\n\nUse Save As... to download, then click back to return to this page.')) {
location.href = url;
}
} }
return true; return true;
} }
//do iframe dataURL download (old ch+FF): //do iframe dataURL download (old ch+FF):
var f = document.createElement("iframe"); var f = document.createElement('iframe');
document.body.appendChild(f); document.body.appendChild(f);
if(!winMode){ // force a mime that will download: if (!winMode) {
url="data:"+url.replace(/^data:([\w\/\-\+]+)/, defaultMime); // force a mime that will download:
url = 'data:' + url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
} }
f.src=url; f.src = url;
setTimeout(function(){ document.body.removeChild(f); }, 333); setTimeout(function () {
document.body.removeChild(f);
}//end saver }, 333);
} //end saver
if (navigator.msSaveBlob) {
// IE10+ : (has Blob, but not a[download] or URL)
if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)
return navigator.msSaveBlob(blob, fileName); return navigator.msSaveBlob(blob, fileName);
} }
if(self.URL){ // simple fast and modern way using Blob and URL: if (self.URL) {
// simple fast and modern way using Blob and URL:
saver(self.URL.createObjectURL(blob), true); saver(self.URL.createObjectURL(blob), true);
}else{ } else {
// handle non-Blob()+non-URL browsers: // handle non-Blob()+non-URL browsers:
if(typeof blob === "string" || blob.constructor===toString ){ if (typeof blob === 'string' || blob.constructor === toString) {
try{ try {
return saver( "data:" + mimeType + ";base64," + self.btoa(blob) ); return saver('data:' + mimeType + ';base64,' + self.btoa(blob));
}catch(y){ } catch (y) {
return saver( "data:" + mimeType + "," + encodeURIComponent(blob) ); return saver('data:' + mimeType + ',' + encodeURIComponent(blob));
} }
} }
// Blob but not URL support: // Blob but not URL support:
reader=new FileReader(); reader = new FileReader();
reader.onload=function(e){ reader.onload = function (e) {
saver(this.result); saver(this.result);
}; };
reader.readAsDataURL(blob); reader.readAsDataURL(blob);
} }
return true; return true;
}; /* end download() */ }; /* end download() */
})) });
</script> </script>
</body> </body>
</html> </html>
src/modules/root/Header.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2019-09-10 18:26:03 * @Date: 2019-09-10 18:26:03
* @LastEditors: Please set LastEditors * @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-27 19:44:42 * @LastEditTime: 2021-06-22 15:00:53
* @Description: * @Description:
*/ */
import React, { useRef, useContext, useEffect, useState } from "react"; import React, { useRef, useContext, useEffect, useState } from 'react';
import "./Header.less"; import './Header.less';
import { Radio, Button, Dropdown, Modal, Tooltip, message } from "antd"; import { Radio, Button, Dropdown, Modal, Tooltip, message } from 'antd';
import { LIVE_SHARE } from "@/domains/course-domain/constants"; import { LIVE_SHARE } from '@/domains/course-domain/constants';
import User from "@/common/js/user"; import User from '@/common/js/user';
import Service from "@/common/js/service"; import Service from '@/common/js/service';
import StoreService from "@/domains/store-domain/storeService"; import StoreService from '@/domains/store-domain/storeService';
import BaseService from "@/domains/basic-domain/baseService"; import BaseService from '@/domains/basic-domain/baseService';
import { XMContext } from "@/store/context"; import { XMContext } from '@/store/context';
import logoImg from "@/common/images/logo.png"; import logoImg from '@/common/images/logo.png';
import CourseService from "@/domains/course-domain/CourseService"; import CourseService from '@/domains/course-domain/CourseService';
import qrcode from "@/libs/qrcode/qrcode.js"; import qrcode from '@/libs/qrcode/qrcode.js';
import Bus from '@/core/tbus'; import Bus from '@/core/tbus';
import ClickOutside from '../../components/ClickOutside'; import ClickOutside from '../../components/ClickOutside';
import _ from "underscore"; import _ from 'underscore';
const baseImg = "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png"; const baseImg = 'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png';
const { confirm } = Modal; const { confirm } = Modal;
const RadioGroup = Radio.Group; const RadioGroup = Radio.Group;
function Header(props) { function Header(props) {
const { menuType, handleMenuType } = props; const { menuType, handleMenuType } = props;
const [storeId, setStoreId] = useState(User.getStoreId()); const [storeId, setStoreId] = useState(User.getStoreId());
const [storeName, setStoreName] = useState(User.getStoreName()) const [storeName, setStoreName] = useState(User.getStoreName());
const [avatar, setAvatar] = useState(''); const [avatar, setAvatar] = useState('');
const [nickName, setNickName] = useState(''); const [nickName, setNickName] = useState('');
const [phone, setPhone] = useState(''); const [phone, setPhone] = useState('');
...@@ -37,10 +37,11 @@ function Header(props) { ...@@ -37,10 +37,11 @@ function Header(props) {
const [instScroll, setInstScroll] = useState(false); const [instScroll, setInstScroll] = useState(false);
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 helpCenterUrl = 'https://www.yuque.com/wangzhong-zkqw0/qixue'; // 帮助中心
const storeUserId = User.getStoreUserId(); const storeUserId = User.getStoreUserId();
const enterpriseId = User.getEnterpriseId(); const enterpriseId = User.getEnterpriseId();
const messageHelpRef = useRef(null) const messageHelpRef = useRef(null);
const domRef = useRef(null); const domRef = useRef(null);
const listRef = useRef(list); const listRef = useRef(list);
...@@ -58,17 +59,17 @@ function Header(props) { ...@@ -58,17 +59,17 @@ function Header(props) {
enterpriseId ? getEnterpriseUser() : User.setIsAdmin(false); enterpriseId ? getEnterpriseUser() : User.setIsAdmin(false);
}, [storeUserId]); }, [storeUserId]);
useEffect(()=> { useEffect(() => {
if (!messageHelpRef.current) { if (!messageHelpRef.current) {
return return;
} }
if (menuType) { if (menuType) {
messageHelpRef.current.style.marginLeft = "194px" messageHelpRef.current.style.marginLeft = '194px';
} else { } else {
messageHelpRef.current.style.marginLeft = "76px" messageHelpRef.current.style.marginLeft = '76px';
} }
},[menuType]) }, [menuType]);
function getUserInfo() { function getUserInfo() {
const param = { const param = {
storeUserId: User.getStoreUserId(), storeUserId: User.getStoreUserId(),
...@@ -85,7 +86,7 @@ function Header(props) { ...@@ -85,7 +86,7 @@ function Header(props) {
const params = { const params = {
enterpriseId, enterpriseId,
userId: User.getUserId(), userId: User.getUserId(),
} };
BaseService.getEnterpriseUser(params).then((res) => { BaseService.getEnterpriseUser(params).then((res) => {
const { isAdmin } = res.result; const { isAdmin } = res.result;
User.setIsAdmin(isAdmin); User.setIsAdmin(isAdmin);
...@@ -99,7 +100,7 @@ function Header(props) { ...@@ -99,7 +100,7 @@ function Header(props) {
userId: User.getUserId(), userId: User.getUserId(),
}; };
Service.Hades('public/customerHades/getStoreListUser', params).then((res) => { Service.Hades('public/customerHades/getStoreListUser', params).then((res) => {
const newList = _.filter(res.result, item => item.state === 'VALID'); const newList = _.filter(res.result, (item) => item.state === 'VALID');
setList(newList); setList(newList);
listRef.current = newList; listRef.current = newList;
}); });
...@@ -119,53 +120,52 @@ function Header(props) { ...@@ -119,53 +120,52 @@ function Header(props) {
} }
function scrollEventListener() { function scrollEventListener() {
if (domRef.current.scrollHeight === 190 + domRef.current.scrollTop) { if (domRef.current.scrollHeight === 190 + domRef.current.scrollTop) {
setInstScroll(false); setInstScroll(false);
} else { } else {
setInstScroll(true); setInstScroll(true);
} }
}; }
function userMenu() { function userMenu() {
return ( return (
<div className="user-center-dropdown"> <div className='user-center-dropdown'>
<div className="user-detail"> <div className='user-detail'>
<div className="box"> <div className='box'>
<Tooltip title={nickName}> <Tooltip title={nickName}>
<div className="name">{nickName}</div> <div className='name'>{nickName}</div>
</Tooltip> </Tooltip>
<span className="phone">{phone}</span> <span className='phone'>{phone}</span>
</div> </div>
<span className="setting" onClick={() => toPersonalInfoPage()}>个人设置 <span className='setting' onClick={() => toPersonalInfoPage()}>
<span className="iconfont icon">&#xe79b;</span> 个人设置
<span className='iconfont icon'>&#xe79b;</span>
</span> </span>
</div> </div>
<div className="menu"> <div className='menu'>
{User.getEnterpriseId() && {User.getEnterpriseId() && (
<div <div
className="menu-item" className='menu-item'
key="1" key='1'
onClick={() => { onClick={() => {
window.RCHistory.push({ window.RCHistory.push({
pathname: '/college-manage', pathname: '/college-manage',
}); });
}} }}>
> <span className='menu-before iconfont icon'>&#xe84e;</span>
<span className="menu-before iconfont icon">&#xe84e;</span>
<span>进入管理后台</span> <span>进入管理后台</span>
<span className="menu-after iconfont icon">&#xe79b;</span> <span className='menu-after iconfont icon'>&#xe79b;</span>
</div> </div>
} )}
<div <div
className="menu-item" className='menu-item'
key="2" key='2'
onClick={(e) => { onClick={(e) => {
handleLogoutConfirm(); handleLogoutConfirm();
}} }}>
> <span className='menu-before iconfont icon'>&#xe870;</span>
<span className="menu-before iconfont icon">&#xe870;</span>
<span>退出登录</span> <span>退出登录</span>
<span className="menu-after iconfont icon">&#xe79b;</span> <span className='menu-after iconfont icon'>&#xe79b;</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -184,13 +184,11 @@ function Header(props) { ...@@ -184,13 +184,11 @@ function Header(props) {
function handleLogoutConfirm() { function handleLogoutConfirm() {
return confirm({ return confirm({
title: "你确定要退出登录吗？", title: '你确定要退出登录吗？',
content: "退出后，需重新登录", content: '退出后，需重新登录',
icon: ( icon: <span className='icon iconfont default-confirm-icon'>&#xe839; </span>,
<span className="icon iconfont default-confirm-icon">&#xe839; </span> okText: '退出登录',
), cancelText: '点错了',
okText: "退出登录",
cancelText: "点错了",
onOk: () => { onOk: () => {
handleLogout(); handleLogout();
}, },
...@@ -198,14 +196,13 @@ function Header(props) { ...@@ -198,14 +196,13 @@ function Header(props) {
} }
function handleLogout() { function handleLogout() {
BaseService.logout({identifier:User.getIdentifier()}).then((res) => { BaseService.logout({ identifier: User.getIdentifier() }).then((res) => {
User.removeUserId(); User.removeUserId();
User.removeToken(); User.removeToken();
User.removeEnterpriseId(); User.removeEnterpriseId();
User.clearUserInfo(); User.clearUserInfo();
const url = `${LIVE_SHARE}store/index?id=${User.getCustomerStoreId()||User.getStoreId()}&userId=${User.getUserId()}&from=work_weixin`; const url = `${LIVE_SHARE}store/index?id=${User.getCustomerStoreId() || User.getStoreId()}&userId=${User.getUserId()}&from=work_weixin`;
window.location.href = url; window.location.href = url;
}); });
} }
...@@ -214,29 +211,29 @@ function Header(props) { ...@@ -214,29 +211,29 @@ function Header(props) {
urls: [htmlUrl], urls: [htmlUrl],
}).then((res) => { }).then((res) => {
const { result = [] } = res; const { result = [] } = res;
const qrcodeWrapDom = document.querySelector("#h5-qrcode"); const qrcodeWrapDom = document.querySelector('#h5-qrcode');
const qrcodeNode = new qrcode({ const qrcodeNode = new qrcode({
text: result[0].shortUrl, text: result[0].shortUrl,
size: 110, size: 110,
}); });
qrcodeWrapDom && qrcodeWrapDom.appendChild(qrcodeNode); qrcodeWrapDom && qrcodeWrapDom.appendChild(qrcodeNode);
}); });
} }
// 复制分享链接 // 复制分享链接
function handleCopy() { function handleCopy() {
window.copyText(htmlUrl); window.copyText(htmlUrl);
message.success('已复制学院地址，快去分享吧~'); message.success('已复制学院地址，快去分享吧~');
} }
return ( return (
<div id="top-container" className="top-container"> <div id='top-container' className='top-container'>
<div className="top top-nav"> <div className='top top-nav'>
{/* <div> {/* <div>
<img src={topLeftLogo} className="logo" alt="" /> <img src={topLeftLogo} className="logo" alt="" />
</div> */} </div> */}
<div className="message-help" ref={messageHelpRef}> <div className='message-help' ref={messageHelpRef}>
{list.length ? ( {list.length ? (
<ClickOutside <ClickOutside
onClickOutside={() => { onClickOutside={() => {
...@@ -244,46 +241,48 @@ function Header(props) { ...@@ -244,46 +241,48 @@ function Header(props) {
setOpenDropdown(false); setOpenDropdown(false);
} }
}} }}
className="college-container" className='college-container'>
>
<div style={{ width: '100%', height: '100%' }}> <div style={{ width: '100%', height: '100%' }}>
<div className="college" onClick={() => setOpenDropdown(false)}> <div className='college' onClick={() => setOpenDropdown(false)}>
<span <span
className="college-name" className='college-name'
onClick={(e) => {
e.stopPropagation();
setOpenDropdown(!openDropdown);
addShadow();
}}
>{storeName}</span>
{list.length > 1 && <span
className={`icon iconfont ${list.length > 1 ? 'select' : ''}`}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setOpenDropdown(!openDropdown); setOpenDropdown(!openDropdown);
addShadow(); addShadow();
}} }}>
>&#xe651;</span>} {storeName}
</span>
{list.length > 1 && (
<span
className={`icon iconfont ${list.length > 1 ? 'select' : ''}`}
onClick={(e) => {
e.stopPropagation();
setOpenDropdown(!openDropdown);
addShadow();
}}>
&#xe651;
</span>
)}
</div> </div>
<div className={`select-college ${openDropdown ? 'active' : ''}`}> <div className={`select-college ${openDropdown ? 'active' : ''}`}>
<h2>切换学院</h2> <h2>切换学院</h2>
<RadioGroup <RadioGroup
onChange={(e) => { onChange={(e) => {
setStoreId(e.target.value) setStoreId(e.target.value);
User.setStoreId(e.target.value); User.setStoreId(e.target.value);
window.RCHistory.push('/home'); window.RCHistory.push('/home');
window.location.reload(); window.location.reload();
}} }}
value={storeId} value={storeId}
id="college-radio-group" id='college-radio-group'>
>
{_.map(list, (item) => ( {_.map(list, (item) => (
<Radio value={item.id} key={item.id}> <Radio value={item.id} key={item.id}>
<span className="name">{item.storeName}</span> <span className='name'>{item.storeName}</span>
</Radio> </Radio>
))} ))}
</RadioGroup> </RadioGroup>
{instScroll && <div className="scroll-shadow"></div>} {instScroll && <div className='scroll-shadow'></div>}
{/* <div className="control"> {/* <div className="control">
<Button <Button
size="small" size="small"
...@@ -308,61 +307,64 @@ function Header(props) { ...@@ -308,61 +307,64 @@ function Header(props) {
</div> </div>
</ClickOutside> </ClickOutside>
) : ( ) : (
<div className="store-related"> <div className='store-related'>
<div className="store-name">{storeName}</div> <div className='store-name'>{storeName}</div>
</div> </div>
)} )}
<div className="right-box"> <div className='right-box'>
<div className="right-bg-img"> <div className='right-bg-img'>
<img src="https://image.xiaomaiketang.com/xm/WCwjyyXYda.png"></img> <img src='https://image.xiaomaiketang.com/xm/WCwjyyXYda.png'></img>
</div> </div>
<div className="link-to-store"> <div className='link-to-store'>
<div className="link"> <div className='link'>
<span className="link-btn"> <span className='link-btn'>
<span className="icon iconfont tool-tip-right">&#xe85d;</span> <span className='icon iconfont tool-tip-right'>&#xe85d;</span>
<span className="text">前往学院</span> <span className='text'>前往学院</span>
</span> </span>
<div className="store-popover"> <div className='store-popover'>
<div className="pc-url"> <div className='pc-url'>
<div className="name">网页端学院</div> <div className='name'>网页端学院</div>
<div <div
className="url-link" className='url-link'
onClick={() => { onClick={() => {
window.open(htmlUrl); window.open(htmlUrl);
}} }}>
> {'立即前往 >'}
{"立即前往 >"}
</div> </div>
</div> </div>
<div className="h5-url"> <div className='h5-url'>
<div className="name">手机端学院</div> <div className='name'>手机端学院</div>
<div id="h5-qrcode"></div> <div id='h5-qrcode'></div>
<div className="tip">微信扫码，打开学院</div> <div className='tip'>微信扫码，打开学院</div>
</div> </div>
</div> </div>
</div> </div>
<div className="share" onClick={handleCopy}> <div className='share' onClick={handleCopy}>
<span className="share-btn"> <span className='share-btn'>
<span className="icon iconfont tool-tip-right">&#xe85e;</span> <span className='icon iconfont tool-tip-right'>&#xe85e;</span>
<span className="text">分享学院</span> <span className='text'>分享学院</span>
</span> </span>
</div> </div>
<div className='help'>
<a href={helpCenterUrl} target='_blank' className='help-btn'>
<span className='icon iconfont tool-tip-right'>&#xe8ed;</span>
<span className='text'>帮助中心</span>
</a>
</div>
</div> </div>
<Dropdown overlay={userMenu()} arrow> <Dropdown overlay={userMenu()} arrow>
<div className="user"> <div className='user'>
<img <img
style={{ style={{
width: 32 + "px", width: 32 + 'px',
height: 32 + "px", height: 32 + 'px',
borderRadius: "50%", borderRadius: '50%',
overflow: "hidden", overflow: 'hidden',
flexShrink: 0, flexShrink: 0,
}} }}
src={avatar || baseImg} src={avatar || baseImg}
/> />
<span className="name"> <span className='name'>{nickName}</span>
{nickName}
</span>
</div> </div>
</Dropdown> </Dropdown>
</div> </div>
......
src/modules/root/Header.less
@import "../../core/variables.less"; @import '../../core/variables.less';
@top-height: 60px; @top-height: 60px;
@icon-color: #939393; @icon-color: #939393;
.top-container { .top-container {
...@@ -7,16 +7,23 @@ ...@@ -7,16 +7,23 @@
left: 0; left: 0;
right: 0; right: 0;
height: @top-height; height: @top-height;
background-color: #2966FF; background-color: #2966ff;
// z-index:2; // z-index:2;
&::after{ &::after {
content:''; content: '';
width:100%; width: 100%;
height:60px; height: 60px;
background: linear-gradient(180deg, #2966FF 0%, rgba(41, 102, 255, 0.82) 29%, rgba(41, 102, 255, 0.58) 55%, rgba(41, 102, 255, 0.27) 77%, rgba(7, 78, 255, 0) 100%); background: linear-gradient(
position:absolute; 180deg,
z-index:2; #2966ff 0%,
top:59px; rgba(41, 102, 255, 0.82) 29%,
rgba(41, 102, 255, 0.58) 55%,
rgba(41, 102, 255, 0.27) 77%,
rgba(7, 78, 255, 0) 100%
);
position: absolute;
z-index: 2;
top: 59px;
} }
.logo { .logo {
display: inline-block; display: inline-block;
...@@ -26,7 +33,7 @@ ...@@ -26,7 +33,7 @@
.logo-name { .logo-name {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #2966FF; color: #2966ff;
line-height: 20px; line-height: 20px;
vertical-align: middle; vertical-align: middle;
font-weight: bold; font-weight: bold;
...@@ -204,7 +211,7 @@ ...@@ -204,7 +211,7 @@
cursor: pointer; cursor: pointer;
} }
.college-name { .college-name {
color:#FFFFFF; color: #ffffff;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
...@@ -213,9 +220,9 @@ ...@@ -213,9 +220,9 @@
.icon { .icon {
font-size: 14px; font-size: 14px;
margin-left: 8px; margin-left: 8px;
color: #FFF; color: #fff;
&:hover { &:hover {
color:#FFF; color: #fff;
} }
} }
} }
...@@ -283,7 +290,7 @@ ...@@ -283,7 +290,7 @@
align-items: center; align-items: center;
.store-name { .store-name {
font-size: 14px; font-size: 14px;
color: #FFF; color: #fff;
line-height: 49px; line-height: 49px;
margin-left: 8px; margin-left: 8px;
white-space: nowrap; white-space: nowrap;
...@@ -296,17 +303,17 @@ ...@@ -296,17 +303,17 @@
width: 1px; width: 1px;
height: 16px; height: 16px;
background-color: #f4f4f4; background-color: #f4f4f4;
margin-right:16px; margin-right: 16px;
} }
} }
.right-box { .right-box {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.right-bg-img{ .right-bg-img {
img{ img {
width:277px; width: 277px;
height:60px; height: 60px;
} }
} }
.link-to-store { .link-to-store {
...@@ -315,90 +322,91 @@ ...@@ -315,90 +322,91 @@
line-height: 49px; line-height: 49px;
.text { .text {
font-size: 14px; font-size: 14px;
color: #FFF; color: #fff;
line-height: 49px; line-height: 49px;
margin-left: 7px; margin-left: 7px;
} }
.iconfont { .iconfont {
color: #FFF; color: #fff;
} }
.link { .link {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
.link-btn{ .link-btn {
padding:3px 12px; padding: 3px 12px;
border: 1px solid rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 4px; border-radius: 4px;
&:hover{ &:hover {
border: 1px solid rgba(255, 255, 255, 1); border: 1px solid rgba(255, 255, 255, 1);
} }
} }
.store-popover { .store-popover {
position: absolute;
display: none; display: none;
width: 216px;
height: 260px;
top: 49px;
left: 0;
background-color: #fff;
flex-wrap: wrap;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
z-index: 10;
.pc-url {
display: flex;
justify-content: space-between;
width: 100%;
height: 56px;
padding: 16px;
border-bottom: 1px solid #e8e8e8;
.name {
width: 70px;
font-size: 14px;
color: #333333;
line-height: 20px;
}
.url-link {
color: #2966ff;
font-size: 14px;
line-height: 20px;
}
}
.h5-url {
width: 100%;
.name,
.tip {
width: 70px;
font-size: 14px;
color: #333333;
line-height: 52px;
margin: 0 auto;
}
#h5-qrcode {
width: 110px;
height: 110px;
margin: 0 auto;
}
.tip {
line-height: 41px;
width: 130px;
}
}
} }
&:hover { &:hover {
.store-popover { .store-popover {
position: absolute;
display: flex; display: flex;
width: 216px;
height: 260px;
top: 49px;
left: 0;
background-color: #fff;
flex-wrap: wrap;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
z-index: 10;
.pc-url {
display: flex;
justify-content: space-between;
width: 100%;
height: 56px;
padding: 16px;
border-bottom: 1px solid #e8e8e8;
.name {
width: 70px;
font-size: 14px;
color: #333333;
line-height: 20px;
}
.url-link {
color: #2966FF;
font-size: 14px;
line-height: 20px;
}
}
.h5-url {
width: 100%;
.name,
.tip {
width: 70px;
font-size: 14px;
color: #333333;
line-height: 52px;
margin: 0 auto;
}
#h5-qrcode {
width: 110px;
height: 110px;
margin: 0 auto;
}
.tip {
line-height: 41px;
width: 130px;
}
}
} }
} }
} }
.share { .share,
.help {
cursor: pointer; cursor: pointer;
margin-left: 16px; margin-left: 16px;
.share-btn{ .share-btn,
padding:3px 12px; .help-btn {
padding: 3px 12px;
border: 1px solid rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 4px; border-radius: 4px;
&:hover{ &:hover {
border: 1px solid rgba(255, 255, 255, 1); border: 1px solid rgba(255, 255, 255, 1);
} }
} }
...@@ -529,7 +537,7 @@ ...@@ -529,7 +537,7 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color:#FFF; color: #fff;
} }
} }
} }
...@@ -588,7 +596,7 @@ ...@@ -588,7 +596,7 @@
.user-detail { .user-detail {
position: relative; position: relative;
padding-bottom: 16px; padding-bottom: 16px;
border-bottom: 1px solid #E8E8E8; border-bottom: 1px solid #e8e8e8;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
...@@ -625,7 +633,7 @@ ...@@ -625,7 +633,7 @@
cursor: pointer; cursor: pointer;
color: #333; color: #333;
.menu-before { .menu-before {
color: #BFBFBF; color: #bfbfbf;
margin-right: 8px; margin-right: 8px;
font-size: 14px; font-size: 14px;
} }
......
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