Skip to content

X
xiaomai-cloud-class-web
You need to sign in or sign up before continuing.
Commit f85878c0 by wufan
Options

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

parent ddb42b09
Showing with 366 additions and 185 deletions
src/common/js/user.ts
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-08-31 09:34:25
* @LastEditors: wufan
* @LastEditTime: 2020-12-26 14:19:23
* @LastEditTime: 2021-01-09 10:56:11
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......@@ -20,6 +20,10 @@ class User {
return Storage.get(`${PREFIX}_storeName`)
}
getStoreType(){
return Storage.get(`${PREFIX}_storeType`)
}
getStoreUserId(){
return Storage.get(`${PREFIX}_storeUserId`)
}
......@@ -43,6 +47,10 @@ class User {
return Storage.set(`${PREFIX}_storeName`,value)
}
setStoreType(value:any){
return Storage.set(`${PREFIX}_storetYPE`,value)
}
setStoreUserId(value:any){
return Storage.set(`${PREFIX}_storeUserId`,value)
}
......
src/common/less/icon-font.less
@font-face {
font-family: 'iconfont'; /* project id 2223403 */
src: url('//at.alicdn.com/t/font_2223403_w7su9rdwngo.eot');
src: url('//at.alicdn.com/t/font_2223403_w7su9rdwngo.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2223403_w7su9rdwngo.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2223403_w7su9rdwngo.woff') format('woff'),
url('//at.alicdn.com/t/font_2223403_w7su9rdwngo.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2223403_w7su9rdwngo.svg#iconfont') format('svg');
src: url('//at.alicdn.com/t/font_2223403_qb6r10go4s.eot');
src: url('//at.alicdn.com/t/font_2223403_qb6r10go4s.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2223403_qb6r10go4s.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2223403_qb6r10go4s.woff') format('woff'),
url('//at.alicdn.com/t/font_2223403_qb6r10go4s.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2223403_qb6r10go4s.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
......
src/index.html
<!--
* @Author: 吴文洁
* @Date: 2020-08-24 12:20:57
* @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-30 13:58:49
* @LastEditors: wufan
* @LastEditTime: 2021-01-09 11:18:27
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
-->
......@@ -25,7 +25,7 @@
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="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.
......
src/modules/course-manage/video-course/components/VideoCourseList.jsx
/*
* @Author: 吴文洁
* @Date: 2020-08-05 10:12:45
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-01-08 17:03:46
* @LastEditors: wufan
* @LastEditTime: 2021-01-09 13:59:06
* @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......
src/modules/root/App.tsx
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2019-07-10 10:30:49
* @LastEditors: wufan
* @LastEditTime: 2020-12-26 14:47:37
* @LastEditTime: 2021-01-09 15:06:50
* @Description:
*/
import React, { useContext, useEffect, useState } from 'react';
......@@ -39,13 +39,14 @@ const App: React.FC = (props: any) => {
BaseService.getUserStore({ userId }).then((res) => {
const { storeGroupVOS = [], storeVOS = [] } = res.result;
const { id, storeUserId, storeName, userRole } = storeVOS[0];
console.log("userRole----app",userRole)
const { id, storeUserId, storeName, userRole, storeType } = storeVOS[0];
User.setStoreId(id);
User.setStoreUserId(storeUserId);
User.setStoreName(storeName);
User.setUserRole(userRole);
User.setStoreType(storeType);
ctx.dispatch(setStoreGroupList(storeGroupVOS))
ctx.dispatch(setStoreList(storeVOS));
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;
@icon-color:#939393;
@icon-color: #939393;
.top-container {
position: absolute;
top: 0;
left: 0;
right: 0;
height: @top-height;
background-color: #FFF;
background-color: #fff;
z-index: 112;
.logo{
.logo {
display: inline-block;
height: 24px;
margin-left: 20px;
}
.logo-name{
.logo-name {
font-size: 14px;
font-weight: 500;
color: #FFB714;
color: #ffb714;
line-height: 20px;
vertical-align: middle;
font-weight:bold;
margin-left:11px;
font-weight: bold;
margin-left: 11px;
}
.top {
display: flex;
......@@ -34,9 +34,9 @@
height: 100%;
justify-content: space-between;
-webkit-justify-content: space-between;
border-bottom:1px solid @xm-color-border;
.backCenter{
color:rgba(0,0,0,1);
border-bottom: 1px solid @xm-color-border;
.backCenter {
color: rgba(0, 0, 0, 1);
font-size: 16px;
}
.top-left {
......@@ -109,11 +109,11 @@
overflow-y: hidden;
border-radius: 4px;
padding: 4px 0;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
li {
margin: 2px 10px;
font-size: 12px;
......@@ -123,16 +123,16 @@
&:hover {
.area-list {
height: auto;
background: rgba(0, 0, 0, .6);
background: rgba(0, 0, 0, 0.6);
li {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
li:hover {
background-color: rgba(255, 255, 255, .2);
background-color: rgba(255, 255, 255, 0.2);
}
}
}
......@@ -177,16 +177,118 @@
flex: 1;
-webkit-flex: 1;
justify-content: space-between;
.store-related {
width: 500px;
height: 49px;
display: flex;
position: relative;
.store-name {
width: 200px;
height: 20px;
font-size: 14px;
color: #666;
line-height: 20px;
line-height: 49px;
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 {
width: calc(~'100% - 420px');
width: calc(~"100% - 420px");
position: relative;
.inst {
margin-right: 12px;
......@@ -203,7 +305,7 @@
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width:230px;
max-width: 230px;
}
.icon {
font-size: 16px;
......@@ -237,7 +339,7 @@
}
.ant-radio-wrapper {
display: inline-block;
width: calc(~'100% - 28px');
width: calc(~"100% - 28px");
margin: 8px 0;
.ant-radio {
float: left;
......@@ -274,8 +376,8 @@
padding: 0 12px;
width: 106px;
.icon-text {
margin-left:4px;
color:#333;
margin-left: 4px;
color: #333;
}
}
.icon {
......@@ -300,7 +402,7 @@
}
.help-menu {
.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;
overflow: hidden;
top: 50px;
......@@ -333,7 +435,7 @@
}
.message-menu {
.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;
overflow: hidden;
top: 50px;
......@@ -352,9 +454,10 @@
overflow: auto;
// max-height: 255px;
.message-item:hover {
background: #F3F6FA;
background: #f3f6fa;
}
li,a {
li,
a {
width: 100%;
display: block;
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