Skip to content

X
xiaomai-cloud-class-web
Commit e935b932 by maolipeng
Options

fix:获取版本信息提升到app.tsx

parent c61b1b68
Showing with 223 additions and 179 deletions
src/modules/college-manage/LimitTip.tsx
import React, { useEffect, useState } from "react";
import BaseService from "@/domains/basic-domain/baseService";
import React, { useContext, useEffect, useState } from "react";
import { Tooltip } from "antd"
import { VersionContext } from "@/store/context";
import ContactWidget from "@/components/ContactWidget";
import "./LimitTip.less"
......@@ -8,14 +8,14 @@ export default function LimitTip(props:{total:number,type:string,tip:() => React
const [isOver, setIsOver] = useState(false)
const [limitUser, setLimitUser] = useState("0")
const versionInfo = useContext(VersionContext)
useEffect(()=> {
BaseService.getLesseeVersionMsg()
.then(res=> {
setIsOver(res.result.userNum === -1 ? false : res.result.whetherReachUserNum)
setLimitUser(res.result.userNum === -1 ? "不限人数" : res.result.userNum)
})
},[])
if (versionInfo) {
setIsOver(versionInfo.userNum === -1 ? false : versionInfo.whetherReachUserNum)
setLimitUser(versionInfo.userNum === -1 ? "不限人数" : String(versionInfo.userNum))
}
},[versionInfo])
return (
<div className="limit-tip">
......
src/modules/home/Home.jsx
......@@ -19,72 +19,13 @@ import {
} from "bizcharts";
import moment from 'moment'
import Service from "@/common/js/service";
import BaseService from "@/domains/basic-domain/baseService";
import User from '@/common/js/user';
import ContactWidget from '@/components/ContactWidget';
import HomeTip from './HomeTip';
import './Home.less';
const Option = Select.Option;
function HomeTip() {
const [isOverNum, setIsOverNum] = useState(false)
const [tipType, setTipType] = useState(0) //0不显示1即将过期2已过期
const [expirationTime, setExpirationTime] = useState("")
const [surplusDay, setSurplusDay] = useState(0)
useEffect(()=> {
BaseService.getLesseeVersionMsg()
.then(res=> {
setIsOverNum(res.result.userNum === -1 ? false : res.result.whetherReachUserNum)
setSurplusDay(res.result.surplusDayTime)
setExpirationTime(moment(res.result.validEndTime).format("YYYY-MM-DD"))
if (res.result.stateEnum === "NO") {
setTipType(2)
} else if (res.result.surplusDayTime === 30 || res.result.surplusDayTime <= 7) {
setTipType(1)
}
})
},[])
return (
<div className="home-tip">
{
(isOverNum || tipType !== 0) &&
<div className="tip">
<Carousel dotPosition="left" dots={false} autoplay={true} autoplaySpeed={5000}>
{
isOverNum && (
<div className="content">
<span className="icon iconfont" style={{color:"#FF4F4F",marginRight:"8px"}}>&#xe61d;</span>温馨提示：企业使用人数已达上限，将无法新增员工、学员，如需增加人数限制，请联系小麦企学院服务平台。
<ContactWidget placement="bottom" trigger="hover"><div className="renew-btn">立即续费</div></ContactWidget>
</div>
)
}
{
tipType === 2 && (
<div className="content">
<span className="icon iconfont" style={{color:"#FF4F4F",marginRight:"8px"}}>&#xe61d;</span>版本到期提醒：当前企业购买的小麦企学院服务已于{expirationTime}到期，到期后仍可访问，但功能不可使用，建议尽快续费购买哦~
<ContactWidget placement="bottom" trigger="hover"><div className="renew-btn">立即续费</div></ContactWidget>
</div>
)
}
{
tipType === 1 && (
<div className="content">
<span className="icon iconfont" style={{color:"#FF4F4F",marginRight:"8px"}}>&#xe61d;</span>当前企业购买的小麦企学院服务仅剩{surplusDay}天（于{expirationTime}到期），为了不影响使用，建议尽快续费购买哦~
<ContactWidget placement="bottom" trigger="hover"><div className="renew-btn">立即续费</div></ContactWidget>
</div>
)
}
</Carousel>
</div>
}
</div>
)
}
class Home extends React.Component {
constructor(props) {
super(props);
......
src/modules/home/Home.less
......@@ -29,36 +29,6 @@
src: url('https://image.xiaomaiketang.com/xm/n2sADd2jY6.TTF');
}
.home-tip {
.tip {
height: 40px;
background: #FFE7E7;
margin-bottom: 16px;
.content {
font-size: 14px;
color: #666666;
font-weight: 400;
line-height: 40px;
padding-left: 16px;
.renew-btn {
display: inline-block;
width: 80px;
height: 28px;
background: #FF4F4F;
border-radius: 2px;
color: #ffffff;
font-size: 14px;
font-weight: 400;
line-height: 28px;
text-align: center;
cursor: pointer;
margin-left: 8px;
}
}
}
}
.data-wrap{
background: #FFF;
.data-box {
......
src/modules/home/HomeTip.less 0 → 100644
.home-tip {
.tip {
height: 40px;
background: #FFE7E7;
margin-bottom: 16px;
.content {
font-size: 14px;
color: #666666;
font-weight: 400;
line-height: 40px;
padding-left: 16px;
.renew-btn {
display: inline-block;
width: 80px;
height: 28px;
background: #FF4F4F;
border-radius: 2px;
color: #ffffff;
font-size: 14px;
font-weight: 400;
line-height: 28px;
text-align: center;
cursor: pointer;
margin-left: 8px;
}
}
}
}
\ No newline at end of file
src/modules/home/HomeTip.tsx 0 → 100644
import React, { useContext, useEffect, useState, version } from "react";
import "./HomeTip.less"
import { VersionContext } from "@/store/context";
import ContactWidget from '@/components/ContactWidget';
import { Carousel } from "antd";
export default function HomeTip() {
const [isOverNum, setIsOverNum] = useState<boolean>(false)
const [tipType, setTipType] = useState(0) //0不显示1即将过期2已过期
const [expirationTime, setExpirationTime] = useState("")
const [surplusDay, setSurplusDay] = useState(0)
const versionInfo = useContext(VersionContext)
useEffect(()=> {
if (versionInfo) {
setIsOverNum(versionInfo.userNum === -1 ? false : versionInfo.whetherReachUserNum)
setSurplusDay(versionInfo.surplusDayTime)
setExpirationTime(versionInfo.validEndTime)
if (versionInfo.stateEnum === "NO") {
setTipType(2)
} else if (versionInfo.surplusDayTime === 30 || versionInfo.surplusDayTime <= 7) {
setTipType(1)
}
}
},[versionInfo])
return (
<div className="home-tip">
{
(isOverNum || tipType !== 0) &&
<div className="tip">
<Carousel dotPosition="left" dots={false} autoplay={true} autoplaySpeed={5000}>
{
isOverNum && (
<div className="content">
<span className="icon iconfont" style={{color:"#FF4F4F",marginRight:"8px"}}>&#xe61d;</span>温馨提示：企业使用人数已达上限，将无法新增员工、学员，如需增加人数限制，请联系小麦企学院服务平台。
<ContactWidget placement="bottom" trigger="hover"><div className="renew-btn">立即续费</div></ContactWidget>
</div>
)
}
{
tipType === 2 && (
<div className="content">
<span className="icon iconfont" style={{color:"#FF4F4F",marginRight:"8px"}}>&#xe61d;</span>版本到期提醒：当前企业购买的小麦企学院服务已于{expirationTime}到期，到期后仍可访问，但功能不可使用，建议尽快续费购买哦~
<ContactWidget placement="bottom" trigger="hover"><div className="renew-btn">立即续费</div></ContactWidget>
</div>
)
}
{
tipType === 1 && (
<div className="content">
<span className="icon iconfont" style={{color:"#FF4F4F",marginRight:"8px"}}>&#xe61d;</span>当前企业购买的小麦企学院服务仅剩{surplusDay}天（于{expirationTime}到期），为了不影响使用，建议尽快续费购买哦~
<ContactWidget placement="bottom" trigger="hover"><div className="renew-btn">立即续费</div></ContactWidget>
</div>
)
}
</Carousel>
</div>
}
</div>
)
}
\ No newline at end of file
src/modules/root/App.tsx
......@@ -14,7 +14,8 @@ import Main from './Main'
import zhCN from 'antd/es/locale/zh_CN'
import User from '@/common/js/user';
import BaseService from "@/domains/basic-domain/baseService";
import { XMContext } from '@/store/context';
import moment from 'moment';
import { VersionContext, VersionInfo, XMContext } from '@/store/context';
import { setStoreGroupPermission, setStorePermission, setStoreGroupList, setStoreList } from '@/store/actions/index';
import Service from "@/common/js/service";
import Bus from '@/core/tbus';
......@@ -27,6 +28,7 @@ declare var window: any;
const App: React.FC = (props: any) => {
const [storeUserId, setStoreUserId] = useState('')
const ctx: any = useContext(XMContext);
const [versionInfo, setVersionInfo] = useState<VersionInfo|null>(null)
const userId = User.getUserId();
const [menuType, setMenuType] = useState(true);
const enterpriseId = User.getEnterpriseId();
......@@ -35,6 +37,7 @@ const App: React.FC = (props: any) => {
useEffect(() => {
getStoreAndUserInfo();
getVersion();
if (window.location.hash === "#/") {
window.RCHistory.replace({
pathname: '/home',
......@@ -58,6 +61,24 @@ const App: React.FC = (props: any) => {
}
});
}
function getVersion() {
BaseService.getLesseeVersionMsg().then((res) => {
let version = res.result;
User.setVersion(version);
User.setExpirationTime(res.result.validEndTime)
let versioninfo:VersionInfo = {
dayTime: version.dayTime,
stateEnum: version.stateEnum,
userNum: version.userNum === -1 ? '不限人数' : version.userNum,
surplusUserNum: version.userNum === -1 ? '不限人数' : version.surplusUserNum,
surplusDayTime: version.surplusDayTime,
validEndTime: moment(version.validEndTime).format('YYYY-MM-DD'),
validStartTime: moment(version.validStartTime).format('YYYY-MM-DD'),
whetherReachUserNum: version.whetherReachUserNum,
};
setVersionInfo(versioninfo)
});
}
async function getStoreAndUserInfo() {
await (enterpriseId ? getStoreInfo() : getStoreGroupAndStoreList());
......@@ -147,10 +168,13 @@ const App: React.FC = (props: any) => {
</Layout>
</Layout> */}
<Header id="app" handleMenuType={handleMenuType} menuType={menuType} />
<ConfigProvider locale={zhCN} autoInsertSpaceInButton={false}>
<Main menuType={menuType} />
</ConfigProvider>
<Menu menuType={menuType} handleMenuType={handleMenuType} />
<VersionContext.Provider value={versionInfo}>
<ConfigProvider locale={zhCN} autoInsertSpaceInButton={false}>
<Main menuType={menuType} />
</ConfigProvider>
<Menu menuType={menuType} handleMenuType={handleMenuType} />
</VersionContext.Provider>
</div>
)
}
......
src/modules/root/Menu.tsx
......@@ -3,10 +3,10 @@ import {
withRouter,
} from 'react-router-dom';
import { Menu, Popover, Tooltip } from 'antd';
import { RightOutlined } from '@ant-design/icons'
import { menuList } from '../../routes//config/menuList'
import { XMContext } from '../../store/context';
import BaseService from "@/domains/basic-domain/baseService";
import { RightOutlined } from '@ant-design/icons';
import { menuList } from '../../routes//config/menuList';
import { XMContext, VersionContext } from '../../store/context';
import BaseService from '@/domains/basic-domain/baseService';
import StoreService from '@/domains/store-domain/storeService';
import classNames from 'classnames';
import User from "@/common/js/user"
......@@ -18,43 +18,11 @@ import ContactWidget from '@/components/ContactWidget';
const { SubMenu } = Menu;
interface VersionInfo {
dayTime: number
stateEnum: string
surplusDayTime: number
surplusUserNum: number
userNum: number
validEndTime: string
validStartTime: string
}
function VersionPanel(props:any) {
const [versionName,setVersionName] = useState("标准版")
const [showVersionPopover, setShowVersionPopover] = useState(false)
const [showRenewPopover, setShowRenewPopover] = useState(false)
const [isExpiration, setIsExpiration] = useState(false)
const [versionInfo, setVersionInfo] = useState<any>({})
useEffect(() => {
BaseService.getLesseeVersionMsg().then((res) => {
let version = res.result;
User.setVersion(version);
User.setExpirationTime(res.result.validEndTime)
let versioninfo = {
userNum: version.userNum === -1 ? "不限人数" : version.userNum,
surplusUserNum: version.userNum === -1 ? "不限人数" : version.surplusUserNum,
surplusDayTime: version.surplusDayTime,
validEndTime: moment(version.validEndTime).format("YYYY-MM-DD"),
validStartTime: moment(version.validStartTime).format("YYYY-MM-DD"),
}
setVersionInfo(versioninfo)
if (version.surplusDayTime === 0) {
setIsExpiration(true)
}
})
},[])
function VersionPanel(props: any) {
const [versionName, setVersionName] = useState('标准版');
const [showVersionPopover, setShowVersionPopover] = useState(false);
const [showRenewPopover, setShowRenewPopover] = useState(false);
const versionInfo = useContext(VersionContext);
function onVersionEnter() {
setShowVersionPopover(true)
......@@ -74,41 +42,73 @@ function VersionPanel(props:any) {
})
return (
<div className="version-info" onMouseEnter={onVersionEnter} onMouseLeave={onVersionLeave}>
<div className="row-1">
<div className="version-name">{versionName}</div>
<ContactWidget trigger="click" placement="rightBottom" visible={showRenewPopover}>
<div className="renew" onClick={onRenewClick}>去续费<span className="icon iconfont" style={{fontSize:"10px"}}>&#59291;</span></div>
</ContactWidget>
</div>
<div className="expiration-time">有效期至{versionInfo.validEndTime}{isExpiration ? "(已过期)" : ""}</div>
<div className={versionPopoverClass}>
<div className="title">版本信息</div>
{isExpiration ? <div className="expiration-tag">已过期</div> : ""}
<div className="content">
<div className="widget" style={{marginRight:"26px",marginBottom:"16px",width:"70px"}}>
<div className="lable">剩余天数</div>
<div className="lable-text">{versionInfo.surplusDayTime}</div>
</div>
<div className="widget" style={{marginBottom:"16px"}}>
<div className="lable">有效起止日期</div>
<div className="lable-text">{versionInfo.validStartTime}~{versionInfo.validEndTime}</div>
</div>
<div className="widget" style={{marginRight:"26px",marginBottom:"8px",width:"70px"}}>
<div className="lable">剩余人数</div>
<div className="lable-text">{versionInfo.surplusUserNum}</div>
</div>
<div className="widget" style={{marginBottom:"8px"}}>
<div className="lable" style={{display:"inline-block"}}>人数限制</div>
<Tooltip overlayStyle={{maxWidth:"587px",width:"587px"}} placement="topLeft" arrowPointAtCenter title={()=>{ return (<div><div>1、若员工/学员存在多个学院，企业人数只统计为1人；</div><div>2、若一个学员既用「企业微信」登录学习又用「微信」登录学习，企业人数将统计为2人。</div></div>)}}>
<div style={{display:"inline-block",position:"relative",top:"2px",marginLeft:"4px"}}><span><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1026" width="14" height="14"><path d="M512 68.266667c245.111467 0 443.733333 198.656 443.733333 443.733333s-198.621867 443.733333-443.733333 443.733333C266.922667 955.733333 68.266667 757.077333 68.266667 512S266.922667 68.266667 512 68.266667z m29.320533 596.548266c0.477867-27.989333 2.4576-48.196267 5.802667-60.654933 3.413333-12.458667 8.567467-23.4496 15.633067-33.0752 6.997333-9.557333 21.9136-24.507733 44.714666-44.714667 33.928533-30.037333 56.797867-55.637333 68.437334-76.5952a139.1616 139.1616 0 0 0 17.5104-68.846933c0-43.008-16.5888-79.701333-49.800534-110.011733-33.1776-30.378667-77.6192-45.533867-133.358933-45.533867-52.6336 0-94.958933 14.1312-126.976 42.3936-31.9488 28.2624-51.268267 68.949333-57.685333 122.094933l71.8848 8.533334c6.212267-39.6288 19.3536-68.778667 39.3216-87.483734 19.933867-18.6368 44.817067-27.989333 74.6496-27.989333 30.788267 0 56.900267 10.308267 78.165333 30.9248 21.265067 20.5824 31.880533 44.544 31.880533 71.748267 0 15.018667-3.618133 28.910933-10.922666 41.608533-7.168 12.731733-22.971733 29.764267-47.240534 51.131733-24.200533 21.367467-41.028267 37.649067-50.346666 48.810667-12.6976 15.291733-21.9136 30.481067-27.613867 45.533867-7.748267 19.933867-11.639467 43.690667-11.639467 71.133866 0 4.676267 0.1024 11.707733 0.341334 21.026134h67.242666z m8.192 140.3904v-79.735466h-79.701333v79.735466h79.701333z" fill="#bfbfbf" p-id="1027"></path></svg></span></div>
</Tooltip>
<div className="lable-text">{versionInfo.userNum}</div>
<div className='version-info' onMouseEnter={onVersionEnter} onMouseLeave={onVersionLeave}>
<div className='row-1'>
<div className='version-name'>{versionName}</div>
<ContactWidget trigger='click' placement='rightBottom' visible={showRenewPopover}>
<div className='renew' onClick={onRenewClick}>
去续费
<span className='icon iconfont' style={{ fontSize: '10px' }}>
&#59291;
</span>
</div>
</ContactWidget>
</div>
<div className='expiration-time'>
有效期至{versionInfo?.validEndTime}
{versionInfo?.stateEnum === "NO" ? '(已过期)' : ''}
</div>
<div className={versionPopoverClass}>
<div className='title'>版本信息</div>
{versionInfo?.stateEnum === "NO" ? <div className='expiration-tag'>已过期</div> : ''}
<div className='content'>
<div className='widget' style={{ marginRight: '26px', marginBottom: '16px', width: '70px' }}>
<div className='lable'>剩余天数</div>
<div className='lable-text'>{versionInfo?.surplusDayTime}</div>
</div>
<div className='widget' style={{ marginBottom: '16px', width:"212px"}}>
<div className='lable'>有效起止日期</div>
<div className='lable-text'>
{versionInfo?.validStartTime}~{versionInfo?.validEndTime}
</div>
</div>
<div className='widget' style={{ marginRight: '26px', marginBottom: '8px', width: '70px' }}>
<div className='lable'>剩余人数</div>
<div className='lable-text'>{versionInfo?.surplusUserNum}</div>
</div>
<div className='widget' style={{ marginBottom: '8px' }}>
<div className='lable' style={{ display: 'inline-block' }}>
人数限制
</div>
<Tooltip
overlayStyle={{ maxWidth: '587px', width: '587px' }}
placement='topLeft'
arrowPointAtCenter
title={() => {
return (
<div>
<div>1、若员工/学员存在多个学院，企业人数只统计为1人；</div>
<div>2、若一个学员既用「企业微信」登录学习又用「微信」登录学习，企业人数将统计为2人。</div>
</div>
);
}}>
<div style={{ display: 'inline-block', position: 'relative', top: '2px', marginLeft: '4px' }}>
<span>
<svg viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1026' width='14' height='14'>
<path
d='M512 68.266667c245.111467 0 443.733333 198.656 443.733333 443.733333s-198.621867 443.733333-443.733333 443.733333C266.922667 955.733333 68.266667 757.077333 68.266667 512S266.922667 68.266667 512 68.266667z m29.320533 596.548266c0.477867-27.989333 2.4576-48.196267 5.802667-60.654933 3.413333-12.458667 8.567467-23.4496 15.633067-33.0752 6.997333-9.557333 21.9136-24.507733 44.714666-44.714667 33.928533-30.037333 56.797867-55.637333 68.437334-76.5952a139.1616 139.1616 0 0 0 17.5104-68.846933c0-43.008-16.5888-79.701333-49.800534-110.011733-33.1776-30.378667-77.6192-45.533867-133.358933-45.533867-52.6336 0-94.958933 14.1312-126.976 42.3936-31.9488 28.2624-51.268267 68.949333-57.685333 122.094933l71.8848 8.533334c6.212267-39.6288 19.3536-68.778667 39.3216-87.483734 19.933867-18.6368 44.817067-27.989333 74.6496-27.989333 30.788267 0 56.900267 10.308267 78.165333 30.9248 21.265067 20.5824 31.880533 44.544 31.880533 71.748267 0 15.018667-3.618133 28.910933-10.922666 41.608533-7.168 12.731733-22.971733 29.764267-47.240534 51.131733-24.200533 21.367467-41.028267 37.649067-50.346666 48.810667-12.6976 15.291733-21.9136 30.481067-27.613867 45.533867-7.748267 19.933867-11.639467 43.690667-11.639467 71.133866 0 4.676267 0.1024 11.707733 0.341334 21.026134h67.242666z m8.192 140.3904v-79.735466h-79.701333v79.735466h79.701333z'
fill='#bfbfbf'
p-id='1027'></path>
</svg>
</span>
</div>
</Tooltip>
<div className='lable-text'>{versionInfo?.userNum}</div>
</div>
</div>
</div>
</div>
</div>
)
}
......
src/store/context.ts
......@@ -7,4 +7,17 @@
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
export const XMContext: any = React.createContext(null);
\ No newline at end of file
export interface VersionInfo {
dayTime: number; //有效时长
stateEnum: string; //"NO"已过期,"YES"未过期
surplusDayTime: number; //剩余有效天数
surplusUserNum: number; //剩余限制人数
userNum: number; //限制人数
validEndTime: string;
validStartTime: string;
whetherReachUserNum: boolean;
}
export const XMContext: any = React.createContext(null);
export const VersionContext = React.createContext<VersionInfo|null>(null)
\ No newline at end of file
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