Skip to content

X
xiaomai-cloud-class-web
Commit f85878c0 by wufan
Options

feat:完成顶部导航栏店铺跳转

parent ddb42b09
Showing with 366 additions and 185 deletions
src/common/js/user.ts
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-31 09:34:25 * @Date: 2020-08-31 09:34:25
* @LastEditors: wufan * @LastEditors: wufan
* @LastEditTime: 2020-12-26 14:19:23 * @LastEditTime: 2021-01-09 10:56:11
* @Description: * @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -20,6 +20,10 @@ class User { ...@@ -20,6 +20,10 @@ class User {
return Storage.get(`${PREFIX}_storeName`) return Storage.get(`${PREFIX}_storeName`)
} }
getStoreType(){
return Storage.get(`${PREFIX}_storeType`)
}
getStoreUserId(){ getStoreUserId(){
return Storage.get(`${PREFIX}_storeUserId`) return Storage.get(`${PREFIX}_storeUserId`)
} }
...@@ -43,6 +47,10 @@ class User { ...@@ -43,6 +47,10 @@ class User {
return Storage.set(`${PREFIX}_storeName`,value) return Storage.set(`${PREFIX}_storeName`,value)
} }
setStoreType(value:any){
return Storage.set(`${PREFIX}_storetYPE`,value)
}
setStoreUserId(value:any){ setStoreUserId(value:any){
return Storage.set(`${PREFIX}_storeUserId`,value) return Storage.set(`${PREFIX}_storeUserId`,value)
} }
......
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_w7su9rdwngo.eot'); src: url('//at.alicdn.com/t/font_2223403_qb6r10go4s.eot');
src: url('//at.alicdn.com/t/font_2223403_w7su9rdwngo.eot?#iefix') format('embedded-opentype'), src: url('//at.alicdn.com/t/font_2223403_qb6r10go4s.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2223403_w7su9rdwngo.woff2') format('woff2'), url('//at.alicdn.com/t/font_2223403_qb6r10go4s.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2223403_w7su9rdwngo.woff') format('woff'), url('//at.alicdn.com/t/font_2223403_qb6r10go4s.woff') format('woff'),
url('//at.alicdn.com/t/font_2223403_w7su9rdwngo.ttf') format('truetype'), url('//at.alicdn.com/t/font_2223403_qb6r10go4s.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2223403_w7su9rdwngo.svg#iconfont') format('svg'); url('//at.alicdn.com/t/font_2223403_qb6r10go4s.svg#iconfont') format('svg');
} }
.iconfont{ .iconfont{
font-family:"iconfont" !important; font-family:"iconfont" !important;
......
src/index.html
<!-- <!--
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-24 12:20:57 * @Date: 2020-08-24 12:20:57
* @LastEditors: zhangleyuan * @LastEditors: wufan
* @LastEditTime: 2020-12-30 13:58:49 * @LastEditTime: 2021-01-09 11:18:27
* @Description: * @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
--> -->
...@@ -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_w7su9rdwngo.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_qb6r10go4s.css">
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
......
src/modules/course-manage/video-course/components/VideoCourseList.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:12:45 * @Date: 2020-08-05 10:12:45
* @LastEditors: zhangleyuan * @LastEditors: wufan
* @LastEditTime: 2021-01-08 17:03:46 * @LastEditTime: 2021-01-09 13:59:06
* @Description: 视频课-列表模块 * @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
......
src/modules/root/App.tsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2019-07-10 10:30:49 * @Date: 2019-07-10 10:30:49
* @LastEditors: wufan * @LastEditors: wufan
* @LastEditTime: 2020-12-26 14:47:37 * @LastEditTime: 2021-01-09 15:06:50
* @Description: * @Description:
*/ */
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
...@@ -39,13 +39,14 @@ const App: React.FC = (props: any) => { ...@@ -39,13 +39,14 @@ const App: React.FC = (props: any) => {
BaseService.getUserStore({ userId }).then((res) => { BaseService.getUserStore({ userId }).then((res) => {
const { storeGroupVOS = [], storeVOS = [] } = res.result; const { storeGroupVOS = [], storeVOS = [] } = res.result;
const { id, storeUserId, storeName, userRole } = storeVOS[0]; const { id, storeUserId, storeName, userRole, storeType } = storeVOS[0];
console.log("userRole----app",userRole)
User.setStoreId(id); User.setStoreId(id);
User.setStoreUserId(storeUserId); User.setStoreUserId(storeUserId);
User.setStoreName(storeName); User.setStoreName(storeName);
User.setUserRole(userRole); User.setUserRole(userRole);
User.setStoreType(storeType);
ctx.dispatch(setStoreGroupList(storeGroupVOS)) ctx.dispatch(setStoreGroupList(storeGroupVOS))
ctx.dispatch(setStoreList(storeVOS)); ctx.dispatch(setStoreList(storeVOS));
serStoreUserId(storeUserId) serStoreUserId(storeUserId)
......
src/modules/root/Header.jsx 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2019-09-10 18:26:03
* @LastEditors: wufan
* @LastEditTime: 2021-01-09 15:38:32
* @Description:
*/
import React, { useContext, useEffect, useState } from "react";
import "./Header.less";
import { Menu, Dropdown, Modal, Tooltip, message } from "antd";
import { LIVE_SHARE } from "@/domains/course-domain/constants";
import User from "@/common/js/user";
import BaseService from "@/domains/basic-domain/baseService";
import { XMContext } from "@/store/context";
import logoImg from "@/common/images/logo.png";
import CourseService from "@/domains/course-domain/CourseService";
import qrcode from "@/libs/qrcode/qrcode.js";
const baseImg = "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png";
const { confirm } = Modal;
function Header(props) {
const { menuType, handleMenuType } = props;
const ctx = useContext(XMContext);
const htmlUrl = `${LIVE_SHARE}store/index?id=${User.getStoreId()}`;
useEffect(() => {
htmlUrl && handleConvertShortUrl();
}, []);
function userMenu() {
return (
<Menu
style={{
maxWidth: "250px",
marginTop: 5,
}}
>
<Menu.Item
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>
);
}
function handleMenu() {
handleMenuType();
}
function toPersonalInfoPage() {
window.RCHistory.push({
pathname: `/personal-info`,
});
}
function handleLogoutConfirm() {
return confirm({
title: "你确定要退出登录吗？",
content: "退出后，需重新登录",
icon: (
<span className="icon iconfont default-confirm-icon">&#xe839; </span>
),
okText: "退出登录",
cancelText: "点错了",
onOk: () => {
handleLogout();
},
});
}
function handleLogout() {
BaseService.logout({}).then((res) => {
User.removeUserId();
User.removeToken();
window.RCHistory.push({
pathname: `/login`,
});
});
}
function handleConvertShortUrl() {
CourseService.getQrcode({
urls: [htmlUrl],
}).then((res) => {
const { result = [] } = res;
const qrcodeWrapDom = document.querySelector("#h5-qrcode");
const qrcodeNode = new qrcode({
text: result[0].shortUrl,
size: 110,
});
qrcodeWrapDom && qrcodeWrapDom.appendChild(qrcodeNode);
});
}
// 复制分享链接
function handleCopy() {
window.copyText(htmlUrl);
message.success('已复制店铺地址，快去分享吧~');
}
return (
<div id="top-container" className="top-container">
<div className="top top-nav">
<div>
<img src={logoImg} className="logo" alt="" />
{menuType && <span className="logo-name">小麦云课堂</span>}
</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">
<div className="store-related">
<div className="store-name">{User.getStoreName()}</div>
<div className="line"></div>
<div className="link-to-store">
<div className="link">
<span className="icon iconfont tool-tip-right">&#xe85d;</span>
<div className="text">前往店铺</div>
<div className="store-popover">
<div className="pc-url">
<div className="name">网页端店铺</div>
<div
className="url-link"
onClick={() => {
window.open(htmlUrl);
}}
>
{"立即前往 >"}
</div>
</div>
<div className="h5-url">
<div className="name">手机端店铺</div>
<div id="h5-qrcode"></div>
<div className="tip">微信扫码，打开店铺</div>
</div>
</div>
</div>
<div className="share" onClick={handleCopy}>
<Tooltip title="分享店铺" placement="bottom">
<span className="icon iconfont tool-tip-right">&#xe85e;</span>
</Tooltip>
<div className="text">分享店铺</div>
</div>
</div>
</div>
<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 Header;
src/modules/root/Header.less
@import '../../core/variables.less'; @import "../../core/variables.less";
@top-height: 50px; @top-height: 50px;
@icon-color:#939393; @icon-color: #939393;
.top-container { .top-container {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: @top-height; height: @top-height;
background-color: #FFF; background-color: #fff;
z-index: 112; z-index: 112;
.logo{ .logo {
display: inline-block; display: inline-block;
height: 24px; height: 24px;
margin-left: 20px; margin-left: 20px;
} }
.logo-name{ .logo-name {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #FFB714; color: #ffb714;
line-height: 20px; line-height: 20px;
vertical-align: middle; vertical-align: middle;
font-weight:bold; font-weight: bold;
margin-left:11px; margin-left: 11px;
} }
.top { .top {
display: flex; display: flex;
...@@ -34,9 +34,9 @@ ...@@ -34,9 +34,9 @@
height: 100%; height: 100%;
justify-content: space-between; justify-content: space-between;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
border-bottom:1px solid @xm-color-border; border-bottom: 1px solid @xm-color-border;
.backCenter{ .backCenter {
color:rgba(0,0,0,1); color: rgba(0, 0, 0, 1);
font-size: 16px; font-size: 16px;
} }
.top-left { .top-left {
...@@ -109,11 +109,11 @@ ...@@ -109,11 +109,11 @@
overflow-y: hidden; overflow-y: hidden;
border-radius: 4px; border-radius: 4px;
padding: 4px 0; padding: 4px 0;
-webkit-transition: all .3s; -webkit-transition: all 0.3s;
-moz-transition: all .3s; -moz-transition: all 0.3s;
-ms-transition: all .3s; -ms-transition: all 0.3s;
-o-transition: all .3s; -o-transition: all 0.3s;
transition: all .3s; transition: all 0.3s;
li { li {
margin: 2px 10px; margin: 2px 10px;
font-size: 12px; font-size: 12px;
...@@ -123,16 +123,16 @@ ...@@ -123,16 +123,16 @@
&:hover { &:hover {
.area-list { .area-list {
height: auto; height: auto;
background: rgba(0, 0, 0, .6); background: rgba(0, 0, 0, 0.6);
li { li {
-webkit-transition: all .3s; -webkit-transition: all 0.3s;
-moz-transition: all .3s; -moz-transition: all 0.3s;
-ms-transition: all .3s; -ms-transition: all 0.3s;
-o-transition: all .3s; -o-transition: all 0.3s;
transition: all .3s; transition: all 0.3s;
} }
li:hover { li:hover {
background-color: rgba(255, 255, 255, .2); background-color: rgba(255, 255, 255, 0.2);
} }
} }
} }
...@@ -177,16 +177,118 @@ ...@@ -177,16 +177,118 @@
flex: 1; flex: 1;
-webkit-flex: 1; -webkit-flex: 1;
justify-content: space-between; justify-content: space-between;
.store-related {
width: 500px;
height: 49px;
display: flex;
position: relative;
.store-name { .store-name {
width: 200px;
height: 20px;
font-size: 14px; font-size: 14px;
color: #666; color: #666;
line-height: 20px; line-height: 49px;
margin-left: 36px; margin-left: 36px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 230px;
margin-right: 32px;
}
.line {
width: 1px;
height: 16px;
background-color: #f4f4f4;
position: absolute;
left: 122px;
top: 50%;
transform: translateY(-50%);
}
.link-to-store {
display: flex;
height: 49px;
line-height: 49px;
.text {
font-size: 14px;
color: #666;
line-height: 49px;
margin-left: 7px;
}
.iconfont {
color: #8c8e93;
&:hover {
color: #555;
}
}
.link {
display: flex;
cursor: pointer;
position: relative;
.store-popover {
display: none;
}
&:hover {
.store-popover {
position: absolute;
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);
.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: #5289fa;
width: 70px;
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 {
cursor: pointer;
display: flex;
margin-left: 16px;
}
}
} }
.inst-container { .inst-container {
width: calc(~'100% - 420px'); width: calc(~"100% - 420px");
position: relative; position: relative;
.inst { .inst {
margin-right: 12px; margin-right: 12px;
...@@ -203,7 +305,7 @@ ...@@ -203,7 +305,7 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
max-width:230px; max-width: 230px;
} }
.icon { .icon {
font-size: 16px; font-size: 16px;
...@@ -237,7 +339,7 @@ ...@@ -237,7 +339,7 @@
} }
.ant-radio-wrapper { .ant-radio-wrapper {
display: inline-block; display: inline-block;
width: calc(~'100% - 28px'); width: calc(~"100% - 28px");
margin: 8px 0; margin: 8px 0;
.ant-radio { .ant-radio {
float: left; float: left;
...@@ -274,8 +376,8 @@ ...@@ -274,8 +376,8 @@
padding: 0 12px; padding: 0 12px;
width: 106px; width: 106px;
.icon-text { .icon-text {
margin-left:4px; margin-left: 4px;
color:#333; color: #333;
} }
} }
.icon { .icon {
...@@ -300,7 +402,7 @@ ...@@ -300,7 +402,7 @@
} }
.help-menu { .help-menu {
.help-center { .help-center {
box-shadow: 0 2px 8px rgba(0,0,0,0.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
top: 50px; top: 50px;
...@@ -333,7 +435,7 @@ ...@@ -333,7 +435,7 @@
} }
.message-menu { .message-menu {
.message-center { .message-center {
box-shadow: 0 0 8px rgba(0,0,0,0.15); box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
top: 50px; top: 50px;
...@@ -352,9 +454,10 @@ ...@@ -352,9 +454,10 @@
overflow: auto; overflow: auto;
// max-height: 255px; // max-height: 255px;
.message-item:hover { .message-item:hover {
background: #F3F6FA; background: #f3f6fa;
} }
li,a { li,
a {
width: 100%; width: 100%;
display: block; display: block;
border-bottom: 1px solid @xm-color-border; border-bottom: 1px solid @xm-color-border;
......
src/modules/root/Header.tsx deleted 100644 → 0
/*
* @Author: 吴文洁
* @Date: 2019-09-10 18:26:03
* @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-22 15:39:35
* @Description:
*/
import React , { useContext, useState}from 'react';
import './Header.less';
import {
Menu,
Dropdown,
Modal
} from 'antd';
import { QuestionCircleOutlined } from "@ant-design/icons";
import { withRouter } from 'react-router-dom';
import User from '@/common/js/user';
import BaseService from "@/domains/basic-domain/baseService";
import { XMContext } from '@/store/context';
import logoImg from '@/common/images/logo.png';
const baseImg ='https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png'
const { confirm } = Modal;
interface headerProps {
menuType:boolean,
handleMenuType:() => void
}
function Header(props:headerProps){
const { menuType ,handleMenuType} = props;
const ctx: any = useContext(XMContext);
function userMenu() {
return (
<Menu
style={{
maxWidth: "250px",
marginTop: 5,
}}
>
<Menu.Item
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>
);
}
function handleMenu(){
handleMenuType();
};
function toPersonalInfoPage(){
window.RCHistory.push({
pathname: `/personal-info`,
})
}
function handleLogoutConfirm(){
return confirm({
title: "你确定要退出登录吗？",
content: "退出后，需重新登录",
icon: <span className="icon iconfont default-confirm-icon">&#xe839; </span>,
okText: "退出登录",
cancelText: "点错了",
onOk: () => {
handleLogout();
},
});
}
function handleLogout(){
BaseService.logout({}).then((res) => {
User.removeUserId();
User.removeToken();
window.RCHistory.push({
pathname: `/login`,
})
});
}
return (
<div id="top-container" className="top-container">
<div className="top top-nav">
<div>
<img src={logoImg} className="logo" alt="" />
{menuType && (
<span className="logo-name">小麦云课堂</span>
)}
</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">
<div className="store-name">{User.getStoreName()}</div>
<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 Header;
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