@ -1,55 +1,77 @@
< template >
< div class = "top-nav" >
<!-- 顶部容器 , 根据homePath决定布局样式 -- >
< div id = "topContainer" class = "container" : class = "{ 'ncmatch-layout': homePath === '/ncmatchHome/index' }" >
<!-- 当homePath不等于 / ncmatchHome / index时显示logo和导航 -- >
< div class = "logo" v-if = "homePath !== '/ncmatchHome/index'" >
< img v-if = "JSON.stringify(logoInfoNew) !== '{}'" @click ="$router.push(homePath)"
style = "cursor:pointer;margin-right: 71px" class = "logoImg" : src = "logoInfoNew.home.logoImg || ''" alt = "" >
<!-- Logo图片 , 点击跳转首页 -- >
< img v-if = "JSON.stringify(logoInfoNew) !== '{}'" @click="$router.push(homePath)" style = "cursor:pointer;"
class = "logoImg" : src = "logoInfoNew.home.logoImg || ''" alt = "" >
<!-- 主导航菜单 -- >
< nav class = "main-nav" v-if = "!isNcmatchHome" >
< ul >
< li : class = "{ active: $route.path.includes('/index') }" >
< a @click ="$router.push(homePath)" > 首页 < / a >
< / li >
< li @mouseleave ="sildeOut" @mouseenter ="sildeIn(product_service)" > < a > 产品与服务 < / a > < / li >
<!-- < li : class = "{ active: $route.path.includes('/new') }" @mouseleave ="sildeOut" - - >
<!-- > < a-- >
<!-- > 政策解读 < / a > < / li > -- >
<!-- < li : class = "{ active: $route.path.includes('/sale') }" @mouseleave ="sildeOut" - - >
<!-- > < a-- >
<!-- > 促销活动 < / a > < / li > -- >
<!-- < li @mouseleave ="sildeOut" @mouseenter ="sildeIn(storageData())" > < a href = "#" > 解决方案 < / a > < / li > -- >
< li : class = "{ active: $route.path.includes('/about') }" @mouseleave ="sildeOut"
@ click = "$router.push('/homePage/about')" > < a > 关于我们 < / a > < / li >
< / ul >
< div class = "nav-list" >
<!-- 首页 -- >
< p : class = "{ active: $route.path.includes('/index') }" >
< a @click ="$router.push(homePath)" > {{ translations [ language ] .home }} < / a >
< / p >
<!-- 最新活动 -- >
< p >
< a > { { translations [ language ] . latestActivity } } < / a >
< / p >
<!-- ai -- >
< p >
< a > AI < / a >
< / p >
<!-- 融合云 -- >
< p >
< a > { { translations [ language ] . fusionCloud } } < / a >
< / p >
<!-- 解决方案 -- >
< p >
< a > { { translations [ language ] . solutions } } < / a >
< / p >
<!-- 生态与合作 : 鼠标移入显示子菜单 -- >
< p @mouseleave ="sildeOut" @mouseenter ="sildeIn(product_service)" >
< a > { { translations [ language ] . ecosystem } } < / a >
< / p >
<!-- 关于我们 -- >
< p : class = "{ active: $route.path.includes('/about') }" @mouseleave ="sildeOut"
@ click = "$router.push('/homePage/about')" >
< a > { { translations [ language ] . aboutUs } } < / a >
< / p >
< / div >
< / nav >
< / div >
<!-- 当homePath等于 / ncmatchHome / index时的布局 -- >
< div class = "logo" v-else >
<!-- 登录状态 : 用户头像在最左侧 -- >
<!-- 登录状态 下, 左侧显示用户信息下拉菜单 -- >
< el-dropdown v-if = "loginState" @visible-change ="handleShow"
class = "avatar-container left-menu-item hover-effect nick-name-style" style = "margin-right: 0" trigger = "click" >
< div class = "avatar-wrapper" >
<!-- 显示用户名首字母头像和用户名 -- >
< i
style = "font-size: 18px; color: #262626;font-weight: 400;cursor: pointer;display: flex;justify-content: flex-start;align-items: center" >
< div class = "imgUser" > { { nick _name . charAt ( 0 ) } } < / div >
{ { nick _name } }
<!-- 下拉箭头图标 -- >
< i id = "resverIcon" class = "el-icon-arrow-up el-icon--right resverIcon" > < / i >
< / i >
< / div >
<!-- 用户信息下拉菜单内容 -- >
< el-dropdown-menu slot = "dropdown" style = "width: 230px;font-size: 16px;" divided >
<!-- 用户信息头部 -- >
< div style = "display: flex;flex-direction: column;padding:15px 15px;background-color: #f0f2f5" >
< span style = "font-weight: bold;font-size: 20px;margin-bottom: 5px;color: #333333" > { { nick _name } } < / span >
< span style = "font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center" > ID :
<!-- 用户ID , 点击复制按钮可复制 -- >
< span ref = "contentToCopy" >
{ {
userId
} }
< / span >
<!-- 复制按钮 -- >
< svg @click ="copyBtn" class = "copy-btn" viewBox = "0 0 1024 1024" xmlns = "http://www.w3.org/2000/svg"
width = "12" height = "12" style = "fill: #1019ab;" >
< path
@ -58,72 +80,97 @@
< / svg >
< / span >
< / div >
<!-- 分割线 -- >
< el-divider style = "margin: 0!important;" > < / el-divider >
<!-- 客户角色余额和充值按钮 -- >
< div v -if = " role.includes ( ' 客户 ' ) "
style = "padding: 0 18px; width: 100%;height: 60px;display: flex;justify-content: space-between;align-items: center" >
< span style = "color:#666;display: block;font-size: 14px;" class = "moneyNow" > < span
style = "display: block;margin-bottom: 5px" > 余额 < / span > { {
style = "display: block;margin-bottom: 5px" > { { translations [ language ] . balance } } < / span > { {
mybalance ? mybalance : initMybalance ( )
} } ¥ < / span >
} } ¥ < / span >
< el-button v-if = "!isShowKbossCharge" type="primary" @click="$router.push('/kbossCharge')" plain
style = "padding: 8px; " >
充值
{ { translations [ language ] . recharge } }
< / el-button >
< / div >
<!-- 个人中心菜单项 -- >
< el-dropdown-item v-if = "role.includes('客户')" @click.native="$router.push('/customer/customerInformation')" >
< span style = "display: block" > 个人中心 < / span >
< span style = "display: block" > { { translations [ language ] . personalCenter } } < / span >
< / el-dropdown-item >
<!-- 退出登录菜单项 -- >
< el-dropdown-item @click.native ="logout" >
< span style = "display: block" > 退出登录 < / span >
< span style = "display: block" > { { translations [ language ] . logout } } < / span >
< / el-dropdown-item >
< / el-dropdown-menu >
< / el-dropdown >
<!-- 公司名称 在中间 -- >
<!-- 公司名称 居中显示, 点击跳转首页 -- >
< div class = "company-name" @click ="$router.push(homePath)"
style = "cursor:pointer;font-size: 24px;font-weight: bold;color: #222F60;margin: 0 auto;" >
{ { ( logoInfoNew . home && logoInfoNew . home . orgName ) || '' } }
< / div >
< / div >
<!-- 用户区域 : 登录 / 注册按钮和用户下拉菜单 -- >
< div class = "user-area" >
< a @click ="goB" v-if = "loginState" class="login-btn" > 控制台 < / a >
<!-- 搜索框 -- >
< div class = "search-box" >
< i class = "el-icon-search" > < / i >
< input type = "text" :placeholder = "translations[language].searchPlaceholder" >
< / div >
<!-- 中英互译 -- >
< div class = "language-toggle " @click ="toggleLanguage" >
< span class = "language-text" > { { language === 'zh' ? 'English' : '中' } } < / span >
< / div >
<!-- AI -- >
< i class = "el-icon-s-promotion functions" > < / i >
<!-- 客服 -- >
< i class = "el-icon-headset functions" > < / i >
<!-- 控制台按钮 ( 已登录 ) -- >
< a @click ="goB" v-if = "loginState" class="login-btn" > {{ translations [ language ] .console }} < / a >
<!-- 消息 -- >
< i class = "el-icon-message functions" > < / i >
<!-- 登录按钮 ( 未登录 ) -- >
< a @ click = " $ router.push ( {
path : '/login' ,
query : {
fromPath : 'homePage'
}
} ) " v-if=" ! loginState " class=" login - btn " > 登录 < / a >
< a @click ="$router.push('/registrationPage')" v-if = "!loginState" class="register-btn" > 立即注册 < / a >
<!-- < span style = "text-decoration: underline; text-decoration-color: #1b5bff" v-if = "!showRegisterButton" > {{ - - >
<!-- username -- >
<!-- } } < / span > -- >
} ) " v-if=" ! loginState " class=" login - btn " > { { translations [ language ] . login } } < / a >
<!-- 注册按钮 ( 未登录 ) -- >
< a @click ="$router.push('/registrationPage')" v-if = "!loginState" class="register-btn" > {{
translations [ language ] . register } } < / a >
<!-- 用户名 ( 注释掉 ) -- >
<!-- < span style = "text-decoration: underline; text-decoration-color: #1b5bff" v-if = "!showRegisterButton" > {{ username }} < / span > - - >
<!-- 用户下拉菜单 ( 非ncmatchHome页面且已登录 ) -- >
< el-dropdown v-if = "loginState && homePath !== '/ncmatchHome/index'" @visible-change ="handleShow"
class = "avatar-container right-menu-item hover-effect nick-name-style" style = "margin-right: 0" trigger = "click" >
< div class = "avatar-wrapper" >
<!-- < img : src = "avatar + '?imageView2/1/w/80/h/80'" class = "user-avatar" / > -- >
<!-- 显示用户名首字母头像和用户名 -- >
< i
style = "font-size: 18px; color: #262626;font-weight: 400;cursor: pointer;display: flex;justify-content: flex-end;align-items: center" >
< div class = "imgUser" > { { nick _name . charAt ( 0 ) } } < / div >
< div class = "imgUser" > <img src = "/static/img/user.png" alt = "" > < / div >
{ { nick _name } }
<!-- 下拉箭头图标 -- >
< i id = "resverIcon" class = "el-icon-arrow-up el-icon--right resverIcon" > < / i >
<!-- < i class = "el-icon-arrow-down el-icon--right" > < / i > -- >
< / i >
<!-- < div class = "block" > < el-avatar shape = "square" size = small :src = "squareUrl" > < / el-avatar > < / div > -- >
< / div >
<!-- 用户信息下拉菜单内容 -- >
< el-dropdown-menu slot = "dropdown" style = "width: 230px;font-size: 16px;" divided >
<!-- 用户信息头部 -- >
< div style = "display: flex;flex-direction: column;padding:15px 15px;background-color: #f0f2f5" >
< span style = "font-weight: bold;font-size: 20px;margin-bottom: 5px;color: #333333" > { { nick _name } } < / span >
< span style = "font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center" > ID :
<!-- 用户ID , 点击复制按钮可复制 -- >
< span ref = "contentToCopy" >
{ {
userId
} }
< / span >
<!-- 复制按钮 -- >
< svg @click ="copyBtn" class = "copy-btn" viewBox = "0 0 1024 1024" xmlns = "http://www.w3.org/2000/svg"
width = "12" height = "12" style = "fill: #1019ab;" >
< path
@ -132,97 +179,81 @@
< / svg >
< / span >
< / div >
<!-- 分割线 -- >
< el-divider style = "margin: 0!important;" > < / el-divider >
<!-- 客户角色余额和充值按钮 -- >
< div v -if = " role.includes ( ' 客户 ' ) "
style = "padding: 0 18px; width: 100%;height: 60px;display: flex;justify-content: space-between;align-items: center" >
< span style = "color:#666;display: block;font-size: 14px;" class = "moneyNow" > < span
style = "display: block;margin-bottom: 5px" > 余额 < / span > { {
style = "display: block;margin-bottom: 5px" > { { translations [ language ] . balance } } < / span > { {
mybalance ? mybalance : initMybalance ( )
} } ¥ < / span >
} } ¥ < / span >
< el-button v-if = "!isShowKbossCharge" type="primary" @click="$router.push('/kbossCharge')" plain
style = "padding: 8px; " >
充值
{ { translations [ language ] . recharge } }
< / el-button >
< / div >
<!-- 个人中心菜单项 -- >
< el-dropdown-item v-if = "role.includes('客户')" @click.native="$router.push('/customer/customerInformation')" >
< span style = "display: block" > 个人中心 < / span >
< span style = "display: block" > { { translations [ language ] . personalCenter } } < / span >
< / el-dropdown-item >
<!-- channelManagementShow = true -- >
<!-- v - if = "role.includes('客户')" -- >
<!-- < el-dropdown-item v -if = " role.includes ( ' 客户 ' ) " - - >
<!-- @ click . native = "channelFirstBtn" > -- >
<!-- < span style = "display: block" > 渠道管理 < / span > -- >
<!-- < / el-dropdown-item > -- >
<!-- < el-dropdown-item v-if = "role.includes('客户')" > - - >
<!-- < span style = "display: block" @click ="showCode" > 促销邀请码 < / span > - - >
<!-- < / el-dropdown-item > -- >
<!-- < el-dropdown-item @click.native ="edituserPassword()" > -- >
<!-- < span style = "display: block" > 修改密码 < / span > -- >
<!-- < / el-dropdown-item > -- >
<!-- < el-dropdown-item @click.native ="personalMessage" v-if = "org_type == 2 || org_type == 3" >
< span style = "display: block" > 个人信息 < / span >
< / el-dropdown-item > -- >
<!-- 退出登录菜单项 -- >
< el-dropdown-item @click.native ="logout" >
< span style = "display: block" > 退出登录 < / span >
< span style = "display: block" > { { translations [ language ] . logout } } < / span >
< / el-dropdown-item >
<!-- < el-dropdown-item v-if = "isLocalhost" @click.native="logout1" > - - >
<!-- < span style = "display: block" > 退登 < / span > -- >
<!-- < / el-dropdown-item > -- >
< / el-dropdown-menu >
< / el-dropdown >
< / div >
< / div >
<!-- < div @mouseleave ="sildeOut" @mouseenter ="keepPanel" v-show = "isShowPanel" class="panel" > - - >
<!-- 悬浮面板 : 显示生态与合作的详细子菜单 -- >
< div @mouseleave ="sildeOut" @mouseenter ="keepPanel" v-show = "isShowPanel" class="panel" >
< div class = "inPanel" >
<!-- 左侧面板 : 一级和二级菜单 -- >
< div class = "panelLeft" >
< ul class = "outUl" >
< li style = "cursor: default" class = "outLi" v-for = "item in showPanelData" :key="item.firTitle" >
<!-- @ mouseenter = "sildeItemIn(item)" -- >
< span style = "cursor: default!important;" : class = "['tilte', 'activeFir']" >
{ {
item. firTitle
translations[ language ] [ item . firTitle ] || item. firTitle
} }
< / span >
< ul class = "inUl" >
< li class = "inLi" v-for = "i in item.secMenu" :key="i.id" >
< span style = "position: relative" @mouseenter ="sildeSecMenu(i)"
: class = "['twoMenuStyle', secId === i.id ? 'activeSec' : '']" > { { i . secTitle } } < / span >
: class = "['twoMenuStyle', secId === i.id ? 'activeSec' : '']" > { { translations [ language ] [ i . secTitle ]
|| i . secTitle } } < / span >
< / li >
< / ul >
< / li >
< / ul >
< / div >
<!-- 分隔线 -- >
< span class = "ge" > < / span >
<!-- 左侧面板 : 三级菜单 ( 如果存在且不等于二级菜单标题 ) -- >
< div
v - if = "secMenuData[0].thrMenu[0].thrTitle != null && secMenuData[0].secTitle !== secMenuData[0].thrMenu[0].thrTitle"
class = "panelLeft" >
< ul >
< li style = "font-size: 14px!important;" @mouseenter ="sildeThrMenu(thr)" v -for = " ( thr , index ) in threeData "
: key = "index" >
{ { t hr. thrTitle } }
{ { t ranslations[ language ] [ thr . thrTitle ] || t hr. thrTitle } }
< / li >
< / ul >
< / div >
<!-- 分隔线 -- >
< span
v - if = "secMenuData[0].thrMenu[0].thrTitle != null && secMenuData[0].secTitle !== secMenuData[0].thrMenu[0].thrTitle"
class = "ge" > < / span >
<!-- 右侧面板 : 最细粒度的菜单项 -- >
< div class = "panelRight" >
<!-- < span class = "subTitle" > { { showPanelRightData [ 0 ] . thrTitle } } < / span > -- >
< ul class = "leastMenu inBox" >
< li class = "clickItem" style = "font-size: 14px!important;margin: 8px 0;cursor: pointer"
v - for = "itemR in showPanelRightData[0].value" : key = "itemR.id" @ click = "clickGo(itemR)" >
{ { itemR . name } } < span v-if = "itemR.discount" class="zhe" > {{ itemR.discount }} 折 < / span >
{ { translations [ language ] [ itemR . name ] || itemR . name } } < span v-if = "itemR.discount" class="zhe" > {{
itemR . discount } } 折 < / span >
< / li >
< / ul >
< / div >
< / div >
< / div >
@ -231,48 +262,103 @@
< script >
import Vue from 'vue'
/ / 导 入 测 试 数 据 ( 可 能 用 于 本 地 开 发 或 模 拟 )
import { computingData , networkData , storageData , testData } from "@/views/homePage/components/topBox/testData" ;
/ / 导 入 A P I 请 求 函 数
import { reqNavList , reqNewHomeFestival , reqNewHomeSync } from "@/api/newHome" ;
/ / 导 入 V u e x 辅 助 函 数
import { mapGetters , mapState } from "vuex" ;
/ / 导 入 其 他 A P I 函 数
import { getLogoAPI , getUserInfoAPI } from "@/api/login" ;
import { reqApplyChannel } from "@/api/customer/channel" ;
/ / 导 入 s t o r e 实 例
import store from "@/store" ;
/ / 导 入 工 具 函 数
import { getHomePath } from '@/views/setting/tools'
export default Vue . extend ( {
name : "TopBox" ,
data ( ) {
return {
homePath : getHomePath ( ) ,
isShowKbossCharge : false ,
role : sessionStorage . getItem ( "jueseNew" ) == "admin" ? [ ] : sessionStorage . getItem ( "jueseNew" ) ,
userId : sessionStorage . getItem ( "userId" ) ,
firId : "" ,
secId : "" ,
nick _name : "" , / / 初 始 化 为 空 字 符 串
showTimer : null ,
hideTimer : null ,
showPanelData : [ ] ,
secMenuData : [ ] ,
showPanelRightData : [ ] ,
threeData : [ ] ,
fourData : [ ] ,
product _service : [ ]
homePath : getHomePath ( ) , / / 首 页 路 径
isShowKbossCharge : false , / / 是 否 显 示 K b o s s 充 值 按 钮
role : sessionStorage . getItem ( "jueseNew" ) == "admin" ? [ ] : sessionStorage . getItem ( "jueseNew" ) , / / 用 户 角 色
userId : sessionStorage . getItem ( "userId" ) , / / 用 户 I D
firId : "" , / / 一 级 菜 单 I D
secId : "" , / / 二 级 菜 单 I D
nick _name : "" , / / 用 户 昵 称
showTimer : null , / / 显 示 面 板 的 定 时 器
hideTimer : null , / / 藏 面 板 的 定 时 器
showPanelData : [ ] , / / 展 示 的 面 板 数 据
secMenuData : [ ] , / / 二 级 菜 单 数 据
showPanelRightData : [ ] , / / 展 示 的 右 侧 面 板 数 据
threeData : [ ] , / / 三 级 菜 单 数 据
fourData : [ ] , / / 四 级 菜 单 数 据 ( 未 使 用 )
product _service : [ ] , / / 产 品 服 务 数 据
language : 'zh' , / / 默 认 语 言
translations : {
zh : {
home : '首页' ,
latestActivity : '最新活动' ,
fusionCloud : '融合云' ,
solutions : '解决方案' ,
ecosystem : '生态与合作' ,
aboutUs : '关于我们' ,
balance : '余额' ,
recharge : '充值' ,
personalCenter : '个人中心' ,
logout : '退出登录' ,
searchPlaceholder : '搜索' ,
console : '控制台' ,
login : '登录' ,
register : '立即注册' ,
/ / 为 菜 单 项 添 加 中 文 翻 译 ( 如 果 需 要 )
} ,
en : {
home : 'Home' ,
latestActivity : 'Latest Activity' ,
fusionCloud : 'Fusion Cloud' ,
solutions : 'Solutions' ,
ecosystem : 'Ecosystem & Partnership' ,
aboutUs : 'About Us' ,
balance : 'Balance' ,
recharge : 'Recharge' ,
personalCenter : 'Personal Center' ,
logout : 'Logout' ,
searchPlaceholder : 'Search' ,
console : 'Console' ,
login : 'Login' ,
register : 'Register' ,
/ / 为 菜 单 项 添 加 英 文 翻 译 ( 如 果 需 要 )
}
}
}
} ,
created ( ) {
/ / 组 件 创 建 时 初 始 化 h o m e P a t h
this . homePath = getHomePath ( )
/ / 如 果 s e s s i o n S t o r a g e 中 有 u s e r I d , 则 设 置 登 录 状 态 为 t r u e
if ( sessionStorage . getItem ( 'userId' ) ) {
this . $store . commit ( 'setLoginState' , true ) ; / / 同 步 到 V u e x
}
/ / 如 果 不 需 要 显 示 注 册 按 钮 , 则 获 取 用 户 信 息
! this . showRegisterButton && this . getUserInfo ( ) ;
/ / 初 始 化 组 件
this . init ( )
/ / 尝 试 从 本 地 存 储 获 取 语 言 设 置
const savedLanguage = localStorage . getItem ( 'language' ) ;
if ( savedLanguage && ( savedLanguage === 'zh' || savedLanguage === 'en' ) ) {
this . language = savedLanguage ;
}
} ,
mounted ( ) {
/ / 组 件 挂 载 时 , 从 s e s s i o n S t o r a g e 获 取 用 户 名
if ( sessionStorage . getItem ( "username" ) ) {
this . nick _name = sessionStorage . getItem ( "username" ) ;
}
/ / 滚 动 到 顶 部 容 器
this . $nextTick ( ( ) => {
const topContainer = document . getElementById ( 'topContainer' ) ;
if ( topContainer ) {
@ -283,64 +369,45 @@ export default Vue.extend({
}
} ) ;
/ / 初 始 化 导 航 数 据
this . initData ( )
/ / t h i s . s h o w P a n e l D a t a = t h i s . t e s t D a t a ( )
/ / t h i s . s e c M e n u D a t a = t h i s . t e s t D a t a ( ) [ 0 ] . s e c M e n u | | [ ]
/ / t h i s . t h r e e D a t a = t h i s . s e c M e n u D a t a [ 0 ] . t h r M e n u | | [ ]
/ / l e t r e s = [ ]
/ / r e s . p u s h ( t h i s . s e c M e n u D a t a [ 0 ] . t h r M e n u [ 0 ] )
/ / t h i s . s h o w P a n e l R i g h t D a t a = r e s | | [ ]
} ,
watch : { } ,
computed : {
/ / 判 断 当 前 是 否 为 n c m a t c h H o m e 页 面
isNcmatchHome ( ) {
return window . location . href . includes ( 'ncmatchHome' )
} ,
/ / 映 射 V u e x 中 的 g e t t e r s
... mapGetters ( [ "sidebar" , "avatar" , "device" ] ) ,
/ / 映 射 V u e x 中 的 s t a t e
... mapState ( {
isShowPanel : ( state ) => state . product . showHomeNav ,
navIndex : ( state ) => state . product . navIndex ,
gridObj : state => state . operationAnalysis . gridObj ,
mybalance : state => state . user . mybalance ,
logoutUrl : state => state . login . logoutUrl ,
loginStateVuex : state => state . login . loginState ,
logoInfoNew : state => state . product . logoInfoNew ,
isShowPanel : ( state ) => state . product . showHomeNav , / / 是 否 显 示 导 航 面 板
navIndex : ( state ) => state . product . navIndex , / / 导 航 索 引
gridObj : state => state . operationAnalysis . gridObj , / / 未 使 用
mybalance : state => state . user . mybalance , / / 用 户 余 额
logoutUrl : state => state . login . logoutUrl , / / 退 出 登 录 U R L
loginStateVuex : state => state . login . loginState , / / V u e x 中 的 登 录 状 态
logoInfoNew : state => state . product . logoInfoNew , / / L o g o 信 息
} ) ,
/ / 计 算 登 录 状 态 : 基 于 V u e x 状 态 或 s e s s i o n S t o r a g e 中 的 u s e r I d
loginState ( ) {
const userId = sessionStorage . getItem ( 'userId' ) ;
return this . loginStateVuex || ( userId !== null && userId !== 'null' && userId !== '' ) ;
} ,
/ / 计 算 是 否 显 示 注 册 按 钮 : 基 于 组 织 类 型 和 用 户 登 录 状 态
showRegisterButton ( ) {
const orgType = window . sessionStorage . getItem ( 'org_type' ) ;
const userId = window . sessionStorage . getItem ( 'userId' ) ;
console . log ( "此时是:" , orgType !== '2' && orgType !== '3' && userId !== null )
return orgType !== '2' && orgType !== '3' && userId === null ;
} ,
/ / 计 算 用 户 名
username ( ) {
return sessionStorage . getItem ( 'username' ) || '' ;
} ,
} ,
/ / w a t c h : {
/ / n a v I n d e x : {
/ / i m m e d i a t e : t r u e , / / O p t i o n a l : i f y o u w a n t t o r u n t h e h a n d l e r i m m e d i a t e l y o n c o m p o n e n t c r e a t i o n
/ / h a n d l e r ( n e w V a l , o l d V a l ) {
/ / c o n s o l e . l o g ( " n e w V a l u e " , n e w V a l )
/ / i f ( n e w V a l = = = 0 ) {
/ / t h i s . s e c I d = ' 1 0 '
/ / } e l s e i f ( n e w V a l = = = 1 ) {
/ / t h i s . s e c I d = ' 1 2 '
/ / }
/ / / / t h i s . c h a n g e D a t a ( t h i s . p r o d u c t _ s e r v i c e ) ;
/ / }
/ / }
/ / } ,
methods : {
/ / 控 制 台 按 钮 点 击 事 件 : 根 据 角 色 跳 转 不 同 页 面
goB ( ) {
if ( sessionStorage . getItem ( 'jueseNew' ) . includes ( '客户' ) ) {
this . $router . push ( '/product/productHome' )
@ -348,11 +415,15 @@ export default Vue.extend({
this . $router . push ( '/operation/supplierManagement' )
}
} ,
/ / 切 换 语 言
toggleLanguage ( ) {
this . language = this . language === 'zh' ? 'en' : 'zh' ;
localStorage . setItem ( 'language' , this . language ) ;
} ,
/ / 初 始 化 L o g o 信 息
init ( ) {
/ / l e t p a r a m s = {
/ / u r l _ l i n k : t h i s . G e t Q u e r y S t r i n g ( w i n d o w . l o c a t i o n . h r e f )
/ / }
let remoteUrl = ''
/ / 根 据 环 境 设 置 A P I 基 础 U R L
if ( window . location . href . includes ( "dev" ) ) {
remoteUrl = 'https://www.kaiyuancloud.cn/dev/reseller/get_ipc_logo.dspy'
} else if ( window . location . href . includes ( "localhost" ) ) {
@ -361,19 +432,14 @@ export default Vue.extend({
remoteUrl = 'https://www.kaiyuancloud.cn/reseller/get_ipc_logo.dspy'
}
let params = {
url _link : window . location . href . split ( "#" ) [ 0 ]
/ / u r l _ l i n k : ' h t t p s : / / w w w . b a i d u . c o m '
url _link : window . location . href . split ( "#" ) [ 0 ] / / 获 取 当 前 页 面 U R L
}
getLogoAPI ( params ) . then ( ( res ) => {
console . log ( "获取接口触发了" )
/ / i f ( r e s . d a t a . s t a t u s = = t r u e & & r e s . d a t a . d a t a & & r e s . d a t a . d a t a . l e n g t h ) {
/ / t h i s . p h o t o s U r l = r e s . d a t a . d a t a [ 0 ] ;
if ( res . status == true && res . data && res . data . length ) {
console . log ( "res.data[0].additional_msg" , res . data [ 0 ] . additional _msg )
/ / th i s . $ s t o r e . c o m m i t ( ' s e t L o g o I n f o ' , r e s . d a t a [ 0 ] ) ;
/ / 提 交 L o g o 信 息 到 V u e x
this . $store . commit ( 'setLogoInfoNew' , res . data [ 0 ] . additional _msg ) ;
this . isShow = true
if ( res . data [ 0 ] . orgname == '中关村数智人工智能产业联盟' ) {
@ -399,32 +465,11 @@ export default Vue.extend({
}
} ) ;
} ,
async logout ( ) { / / 退 出 登 录
this . $store . commit ( 'setLoginState' , false )
/ / l o g o u t ( ) {
/ / a w a i t t h i s . $ s t o r e . d i s p a t c h ( ' a u t h / r e m o v e T o k e n ' )
/ / l o g o u t A P I ( ) . t h e n ( ( r e s ) = > {
/ / / / c o n s o l e . l o g ( r e s ) ;
/ / } ) ;
/ / 退 出 登 录
async logout ( ) {
this . $store . commit ( 'setLoginState' , false ) / / 设 置 V u e x 登 录 状 态 为 f a l s e
/ / 获 取 当 前 u r l
let url = window . location . href ;
/ / 判 断 u r l 中 是 否 包 含 d o m a i n _ n a m e 字 段
/ / i f ( ! u r l . i n c l u d e s ( ' d o m a i n _ n a m e ' ) ) {
/ / / / 跳 转 到 h t t p s : / / w w w . o p e n c o m p u t i n g . c n /
/ / w i n d o w . l o c a t i o n . h r e f = ' h t t p s : / / w w w . o p e n c o m p u t i n g . c n / ' ;
/ /
/ / } e l s e {
/ / a w a i t t h i s . $ r o u t e r . p u s h ( ` / h o m e P a g e ? r e d i r e c t = $ { t h i s . $ r o u t e . f u l l P a t h } ` ) ;
/ / }
/ / t h i s . s h o w R e g i s t e r B u t t o n = f a
/ / i f ( t h i s . l o g o u t U r l ) {
/ / w i n d o w . l o c a t i o n . h r e f = t h i s . l o g o u t U r l
/ / } e l s e { m o
/ / w i n d o w . l o c a t i o n . h r e f = ' h t t p s : / / w w w . o p e n c o m p u t i n g . c n / ' ;
/ / }
/ / 清 除 本 地 存 储
store . commit ( 'tagsView/resetBreadcrumbState' ) ;
sessionStorage . removeItem ( "auths" ) ;
sessionStorage . removeItem ( "routes" ) ;
@ -439,13 +484,16 @@ export default Vue.extend({
localStorage . removeItem ( "org_type" )
localStorage . removeItem ( 'userId' )
/ / 如 果 当 前 页 面 不 是 首 页 , 则 跳 转 到 首 页
if ( ! window . location . href . includes ( 'homePage/index' ) ) {
await this . $router . push ( getHomePath ( ) ) ;
}
} ,
edituserPassword ( ) { / / 修 改 密 码
/ / 修 改 密 码 ( 未 完 全 实 现 )
edituserPassword ( ) {
this . passwordDialog = true ;
} ,
/ / 申 请 渠 道 管 理
channelFirstBtn ( ) {
reqApplyChannel ( { user _id : this . userId } ) . then ( res => {
if ( res . code == "100" || res . code == "210" ) {
@ -457,20 +505,21 @@ export default Vue.extend({
}
} )
} ,
/ / 初 始 化 余 额 ( 从 s e s s i o n S t o r a g e 获 取 )
initMybalance ( ) {
return sessionStorage . getItem ( 'mybalance' )
} ,
copyBtn ( ) { / / 个 人 信 息 复 制 i d
/ / 复 制 用 户 I D
copyBtn ( ) {
const textToCopy = this . $refs . contentToCopy . innerText ;
navigator . clipboard . writeText ( textToCopy ) . then ( ( ) => {
this . $message . success ( '复制成功!' )
} ) . catch ( ( error ) => {
console . error ( '复制失败' , error ) ;
} ) ;
} ,
async getUserInfo ( ) { / / 获 取 个 人 信 息
/ / 获 取 用 户 信 息
async getUserInfo ( ) {
getUserInfoAPI ( { id : this . userId } ) . then ( ( res ) => {
if ( res . status ) {
/ / t h i s . n i c k _ n a m e = r e s . d a t a [ 0 ] . n i c k _ n a m e ;
@ -484,28 +533,30 @@ export default Vue.extend({
}
} ) ;
} ,
/ / 处 理 下 拉 菜 单 显 示 / 隐 藏 时 的 图 标 旋 转
handleShow ( isShow ) {
let resverNode = document . getElementById ( 'resverIcon' )
if ( isShow ) {
if ( this . role . includes ( '客户' ) ) {
this . $store . dispatch ( 'user/getCustmoersMoney' )
this . $store . dispatch ( 'user/getCustmoersMoney' ) / / 获 取 客 户 余 额
}
resverNode . style . transform = 'rotate(180deg)'
resverNode . style . transform = 'rotate(180deg)' / / 旋 转 图 标
} else {
resverNode . style . transform = 'rotate(0)'
resverNode . style . transform = 'rotate(0)' / / 恢 复 图 标
}
} ,
/ / 鼠 标 进 入 三 级 菜 单 项
sildeThrMenu ( item ) {
console . log ( "it" , item )
let res = [ ]
res . push ( item )
this . showPanelRightData = res
} ,
/ / 点 击 菜 单 项 进 行 跳 转 或 打 开 新 窗 口
clickGo ( item ) {
this . $store . commit ( 'setShowHomeNav' , false )
this . $store . commit ( 'setShowHomeNav' , false ) / / 隐 藏 导 航 面 板
console . log ( "电机的item是" , item )
let userId = sessionStorage . getItem ( 'userId' )
const orgType = window . sessionStorage . getItem ( 'org_type' ) ;
@ -513,6 +564,7 @@ export default Vue.extend({
console . log ( "userId" , userId )
if ( item . type === '百度云' ) {
if ( this . loginState ) {
/ / 百 度 云 产 品 跳 转 逻 辑
this . $store . commit ( 'setRedirectUrl' , item . url )
localStorage . setItem ( 'redirectUrl' , item . url )
localStorage . setItem ( 'userRescourseUrl' , item . listUrl )
@ -536,21 +588,20 @@ export default Vue.extend({
}
} else if ( item . type === '阿里云' ) {
if ( this . loginState ) {
/ / 阿 里 云 同 步 和 节 日 活 动 逻 辑
reqNewHomeSync ( ) . then ( response => {
if ( response . status ) {
reqNewHomeFestival ( ) . then ( res => {
if ( res . status ) {
window . open ( res . data )
window . open ( res . data ) / / 打 开 阿 里 云 页 面
} else {
this . $message . warning ( res . msg )
}
} )
} else {
this . $message . warning ( response . msg )
}
} )
} else {
this . $router . push ( {
path : "/login" ,
@ -581,13 +632,13 @@ export default Vue.extend({
}
} )
}
} else if ( item . name === '灵医智能体' ) {
this . $router . push ( '/homePage/hospital' )
} else if ( item . name === '客悦·智能客服' ) {
this . $router . push ( '/homePage/customerService' )
}
} ,
/ / 改 变 面 板 数 据
changeData ( data ) {
this . showPanelData = data
@ -616,11 +667,12 @@ export default Vue.extend({
this . showPanelRightData = [ ]
}
} ,
/ / 初 始 化 导 航 数 据
initData ( ) {
reqNavList ( { url _link : window . location . href } ) . then ( res => {
console . log ( "res" , res . data . product _service )
if ( res . status ) {
this . product _service = this . buildData ( res . data . product _service )
this . product _service = this . buildData ( res . data . product _service ) / / 构 建 数 据 结 构
this . changeData ( this . product _service )
}
} ) . catch ( error => {
@ -628,6 +680,7 @@ export default Vue.extend({
/ / 可 以 设 置 一 些 默 认 数 据 或 显 示 错 误 信 息
} )
} ,
/ / 构 建 导 航 数 据 结 构
buildData ( data ) {
let res = [ ] ;
data . forEach ( item => {
@ -646,8 +699,8 @@ export default Vue.extend({
}
} ) ;
return data ; / / 返 回 修 改 后 的 原 始 数 据
/ / 或 者 如 果 你 想 返 回 新 的 r e s 数 组 , 可 以 根 据 需 要 调 整
} ,
/ / 鼠 标 进 入 二 级 菜 单 项
sildeSecMenu ( item ) {
console . log ( "获取的item时" , item )
this . secId = item . id
@ -670,6 +723,7 @@ export default Vue.extend({
this . showPanelRightData = this . threeData
} ,
/ / 返 回 测 试 数 据 ( 未 使 用 )
networkData ( ) {
return networkData
} ,
@ -679,34 +733,31 @@ export default Vue.extend({
testData ( ) {
return testData
} ,
/ / 鼠 标 进 入 一 级 菜 单 项
sildeItemIn ( item ) {
this . firId = item . id
this . secId = item . secMenu [ 0 ] . id
console . log ( "获取的item时" , item )
this . secMenuData = item . secMenu || [ ]
this . showPanelRightData = this . secMenuData [ 0 ] . thrMenu || [ ]
} ,
computingData ( ) {
return computingData
} ,
/ / 鼠 标 进 入 生 态 与 合 作 菜 单
sildeIn ( item ) {
console . log ( "sildeIn" , item )
this . changeData ( item )
/ / t h i s . s h o w P a n e l D a t a = i t e m
/ / t h i s . s h o w P a n e l R i g h t D a t a = i t e m [ 0 ] . s u b M e n u | | [ ]
if ( this . hideTimer ) {
clearTimeout ( this . hideTimer )
}
/ / 延 时 显 示 面 板 , 避 免 鼠 标 快 速 移 动 时 面 板 闪 烁
this . showTimer = setTimeout ( ( ) => {
/ / t h i s . i s S h o w P a n e l = t r u e
this . $store . commit ( 'setShowHomeNav' , true )
} , 100 )
} ,
/ / 鼠 标 离 开 导 航 区 域
sildeOut ( ) {
/ / r e t u r n
if ( this . showTimer ) {
clearTimeout ( this . showTimer )
}
@ -715,8 +766,8 @@ export default Vue.extend({
this . $store . commit ( 'setShowHomeNav' , false )
} , 200 )
} ,
/ / 鼠 标 进 入 面 板 区 域 , 取 消 隐 藏
keepPanel ( ) {
/ / 鼠 标 进 入 面 板 时 取 消 隐 藏
if ( this . hideTimer ) {
clearTimeout ( this . hideTimer )
}
@ -725,7 +776,7 @@ export default Vue.extend({
} )
< / script >
< style scoped lang = " sc ss">
< style scoped lang = " le ss">
. top - nav {
font - size : 18 px ! important ;
@ -734,10 +785,8 @@ export default Vue.extend({
}
font - weight : 500 ;
/* 使用数字值代替bold更精确 */
color : # 222 F60 ! important ;
position : relative ;
height : 84 px ;
background - color : # fff ;
box - shadow : 0 2 px 10 px 0 rgba ( 0 , 0 , 0 , 0.08 ) ;
width : 100 % ;
@ -754,32 +803,36 @@ export default Vue.extend({
display : flex ;
align - items : center ;
justify - content : space - between ;
padding : 1 8px 3 0px ;
padding : 1 0px 2 0px ;
}
. logo {
display : flex ;
justify - content : flex - start ;
align - items : center ;
. logoImg {
width : 148 px ;
}
}
. main - nav {
margin - left : 44 px ;
z - index : 10000 ;
ul {
. nav - list {
display : flex ;
list - style : none ;
margin : 0 ;
padding : 0 ;
li {
p {
height : 100 % ;
padding : 0 15 px ;
padding -right : 4 0px ;
position : relative ;
a {
text - decoration : none ;
font - size : 1 4px ;
font - size : 1 8px ! important ;
padding : 5 px 0 ;
transition : all 0.3 s ;
@ -792,16 +845,6 @@ export default Vue.extend({
color : # 1 E6FFF ;
font - weight : bold ;
}
/ / & . a c t i v e : a f t e r {
/ / c o n t e n t : ' ' ;
/ / p o s i t i o n : a b s o l u t e ;
/ / b o t t o m : - 1 0 p x ;
/ / l e f t : 0 ;
/ / w i d t h : 1 0 0 % ;
/ / h e i g h t : 2 p x ;
/ / b a c k g r o u n d : # 1 E 6 F F F ;
/ / }
}
}
}
@ -810,16 +853,47 @@ export default Vue.extend({
display : flex ;
align - items : center ;
a {
padding : 8 px 16 px ;
. search - box {
display : flex ;
align - items : center ;
border : 2 px solid # d2d7e6 ;
border - radius : 8 px ;
padding : 8 px ;
input {
margin - left : 10 px ;
border : 0 ;
outline : none ;
}
}
. language - toggle {
cursor : pointer ;
margin : 20 px ;
width : 60 px ;
text - align : center ;
border - radius : 4 px ;
font - size : 14 px ;
text - decoration : none ;
margin - left : 10 px ;
transition : all 0.3 s ;
color : # 333 ;
& : hover {
color : # 1 E6FFF ;
}
}
a {
/ / p a d d i n g : 8 p x 1 6 p x ;
border - radius : 4 px ;
font - size : 14 px ;
text - decoration : none ;
/ / m a r g i n - l e f t : 1 0 p x ;
transition : all 0.3 s ;
}
. login - btn {
margin - right : 20 px ;
color : # 333 ;
& : hover {
@ -828,7 +902,7 @@ export default Vue.extend({
}
. register - btn {
height : 50 px ;
/ / h e i g h t : 5 0 p x ;
display : flex ;
justify - content : center ;
align - items : center ;
@ -840,11 +914,18 @@ export default Vue.extend({
opacity : 0.9 ;
}
}
. functions {
padding - right : 20 px ;
& : hover {
color : # 1 E6FFF ;
}
}
}
}
. panel {
. inPanel {
padding : 20 px ;
border - radius : 8 px ;
@ -890,7 +971,7 @@ export default Vue.extend({
& : hover {
cursor : pointer ;
color : blue ;
color : # 1 E6FFF ;
}
}
}
@ -944,7 +1025,6 @@ export default Vue.extend({
}
. leastMenu {
overflow - y : auto ;
. inBox {