diff --git a/f/web-kboss/src/assets/css/iconfont/demo.css b/f/web-kboss/src/assets/css/iconfont/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/f/web-kboss/src/assets/css/iconfont/demo.css @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/f/web-kboss/src/assets/css/iconfont/demo_index.html b/f/web-kboss/src/assets/css/iconfont/demo_index.html new file mode 100644 index 0000000..43ced29 --- /dev/null +++ b/f/web-kboss/src/assets/css/iconfont/demo_index.html @@ -0,0 +1,280 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + + 查看项目 + +
+
+
+
    + +
  • + +
    客服
    +
    
    +
    • + +
  • + +
    地图_地球_o
    +
    
    +
    • + +
  • + +
    消息
    +
    
    +
    • + +
  • + +
    AI助手
    +
    
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1760680783657') format('woff2'),
+       url('iconfont.woff?t=1760680783657') format('woff'),
+       url('iconfont.ttf?t=1760680783657') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 客服 +
    +
    .icon-kefu +
    +
    • + +
  • + +
    + 地图_地球_o +
    +
    .icon-ditu_diqiu_o +
    +
    • + +
  • + +
    + 消息 +
    +
    .icon-xiaoxi +
    +
    • + +
  • + +
    + AI助手 +
    +
    .icon-AIzhushou +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    客服
    +
    #icon-kefu
    +
    • + +
  • + +
    地图_地球_o
    +
    #icon-ditu_diqiu_o
    +
    • + +
  • + +
    消息
    +
    #icon-xiaoxi
    +
    • + +
  • + +
    AI助手
    +
    #icon-AIzhushou
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/f/web-kboss/src/assets/css/iconfont/iconfont.css b/f/web-kboss/src/assets/css/iconfont/iconfont.css new file mode 100644 index 0000000..68ec51a --- /dev/null +++ b/f/web-kboss/src/assets/css/iconfont/iconfont.css @@ -0,0 +1,31 @@ +@font-face { + font-family: "iconfont"; /* Project id 5043107 */ + src: url('iconfont.woff2?t=1760680783657') format('woff2'), + url('iconfont.woff?t=1760680783657') format('woff'), + url('iconfont.ttf?t=1760680783657') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-kefu:before { + content: "\e625"; +} + +.icon-ditu_diqiu_o:before { + content: "\ebbb"; +} + +.icon-xiaoxi:before { + content: "\e60a"; +} + +.icon-AIzhushou:before { + content: "\e65f"; +} + diff --git a/f/web-kboss/src/assets/css/iconfont/iconfont.js b/f/web-kboss/src/assets/css/iconfont/iconfont.js new file mode 100644 index 0000000..585e86a --- /dev/null +++ b/f/web-kboss/src/assets/css/iconfont/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_5043107='',(c=>{var t=(e=(e=document.getElementsByTagName("script"))[e.length-1]).getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var n,i,o,a,l,d=function(t,e){e.parentNode.insertBefore(t,e)};if(t&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}n=function(){var t,e=document.createElement("div");e.innerHTML=c._iconfont_svg_string_5043107,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(n,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),n()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(o=n,a=c.document,l=!1,m(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,s())})}function s(){l||(l=!0,o())}function m(){try{a.documentElement.doScroll("left")}catch(t){return void setTimeout(m,50)}s()}})(window); \ No newline at end of file diff --git a/f/web-kboss/src/assets/css/iconfont/iconfont.json b/f/web-kboss/src/assets/css/iconfont/iconfont.json new file mode 100644 index 0000000..036b5ac --- /dev/null +++ b/f/web-kboss/src/assets/css/iconfont/iconfont.json @@ -0,0 +1,37 @@ +{ + "id": "5043107", + "name": "kboos", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "2674476", + "name": "客服", + "font_class": "kefu", + "unicode": "e625", + "unicode_decimal": 58917 + }, + { + "icon_id": "5388029", + "name": "地图_地球_o", + "font_class": "ditu_diqiu_o", + "unicode": "ebbb", + "unicode_decimal": 60347 + }, + { + "icon_id": "31157387", + "name": "消息", + "font_class": "xiaoxi", + "unicode": "e60a", + "unicode_decimal": 58890 + }, + { + "icon_id": "44896696", + "name": "AI助手", + "font_class": "AIzhushou", + "unicode": "e65f", + "unicode_decimal": 58975 + } + ] +} diff --git a/f/web-kboss/src/assets/css/iconfont/iconfont.ttf b/f/web-kboss/src/assets/css/iconfont/iconfont.ttf new file mode 100644 index 0000000..fd422d2 Binary files /dev/null and b/f/web-kboss/src/assets/css/iconfont/iconfont.ttf differ diff --git a/f/web-kboss/src/assets/css/iconfont/iconfont.woff b/f/web-kboss/src/assets/css/iconfont/iconfont.woff new file mode 100644 index 0000000..1bec349 Binary files /dev/null and b/f/web-kboss/src/assets/css/iconfont/iconfont.woff differ diff --git a/f/web-kboss/src/assets/css/iconfont/iconfont.woff2 b/f/web-kboss/src/assets/css/iconfont/iconfont.woff2 new file mode 100644 index 0000000..7e8d0ea Binary files /dev/null and b/f/web-kboss/src/assets/css/iconfont/iconfont.woff2 differ diff --git a/f/web-kboss/src/assets/image/user.png b/f/web-kboss/src/assets/image/user.png new file mode 100644 index 0000000..9218676 Binary files /dev/null and b/f/web-kboss/src/assets/image/user.png differ diff --git a/f/web-kboss/src/components/MessageCenter/MessageCenter.vue b/f/web-kboss/src/components/MessageCenter/MessageCenter.vue new file mode 100644 index 0000000..6a98a2f --- /dev/null +++ b/f/web-kboss/src/components/MessageCenter/MessageCenter.vue @@ -0,0 +1,768 @@ + + + + + diff --git a/f/web-kboss/src/layout/components/Navbar.vue b/f/web-kboss/src/layout/components/Navbar.vue index 3b5681a..39297a0 100644 --- a/f/web-kboss/src/layout/components/Navbar.vue +++ b/f/web-kboss/src/layout/components/Navbar.vue @@ -4,12 +4,12 @@ 平台充值中心 - - + +
- +
-
{{ nick_name.charAt(0) }}
{{ nick_name }} - - -
{{ nick_name }} ID: - {{ - userId - }} - + {{ userId }} @@ -93,11 +75,10 @@
- - 余额{{ - mybalance ? mybalance : initMybalance() - }} ￥ + + 余额 + {{ mybalance ? mybalance : initMybalance() }} ￥ + 充值 @@ -106,210 +87,22 @@ 个人中心 - - - - - - - - - 修改密码 - - 退出登录 - - - - -
- - - - -
消息中心
-
-
全部消息
-
未读消息
-
已读消息
-
- - - | {{ this.tabTitle }} - - -
-
- 已读 - 删除 -
- - - - - - - - - - - -
- - -
-
- 已读 - 删除 -
- - - - - - - - - - - -
- - -
-
- 删除 -
- - - - - - - - - -
- - - - - - - - - -
消息中心
-
-
全部消息
-
未读消息
-
已读消息
-
- - - | {{ this.tabTitle }} - - -
-
- 已读 - 删除 -
- - - - - - - - - - - -
- - -
-
- 已读 - 删除 -
- - - - - - - - - - - -
- - -
-
- 删除 -
- - - - - - - - - - -
- - - - - + + - + @@ -373,7 +166,6 @@ -
图表的颜色: @@ -397,12 +189,13 @@ 确 定
- + + - + 开元云公司作为一级分销商面对直接客户，售出设备产品。产品由供应商上传平台，设置产品价格配置，及设备账号密码等配置信息，开元云进行审核，审核通过产品上线，客户可直接购买。开元云可以将产品分配给各供应商销售，分配时配置给供应商的折扣，供应商得到产品及开元云的折扣后，设置折扣面向客户，客户通过kboss进行购买，分销商的客户如自己上传产品，也可以成为开元云的供应商。 @@ -412,8 +205,7 @@ - - + @@ -428,7 +220,6 @@ {{ item.description }} -
@@ -437,6 +228,7 @@ +
@@ -464,11 +256,6 @@ import { logoutAPI, editPasswordAPI, getTimeAPI, - getUnreadmsgAPI, - getMsgAPI, - getReadmsgAPI, - upMsgAPI, - delMsgAPI, addPictureAPI, getPictureAPI, getOpictureAPI, @@ -482,6 +269,9 @@ import { reqSearchProductList } from "@/api/product/product"; import { bdProducts, jdProducts } from "@/views/product/productionData"; import { getHomePath } from "@/views/setting/tools"; +// 导入消息中心组件 +import MessageCenter from '@/components/MessageCenter/MessageCenter.vue' + export default { data() { return { @@ -490,31 +280,22 @@ export default { searchResultList: [], searchValue: '', searchDialogVisible: false, - channelManagementShow: false,//渠道管理 + channelManagementShow: false, isMobileScreen: false, cuxiaoIsShow: false, - isShowKbossCharge: false,//判断是否在充值页面 - isUpdate: false,//检测用户是否“已读” + isShowKbossCharge: false, isLocalhost: false, - // 获取用户代理字P串 userAgent: window.navigator.userAgent, - // 判断是否为移动设备 - isMobile: false, imageUrl: '', - alliInformationList: [],//全部消息 - unreadMessageList: [],//未读信息 - readInformationList: [],//已读信息 - readIdList: [], - count: null, + messageCount: 0, // 未读消息数量 userInfoList: [], - editUserInfoForm: { //修改个人信息表单 + editUserInfoForm: { nick_name: "", email: "", address: "", mobile: "", }, passwordForm: { - //修改密码表单 password: "", newpassword: "", configPassword: "", @@ -544,15 +325,10 @@ export default { "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png", passwordDialog: false, editUserInfoDialog: false, - //通知 - drawer: false, - direction: "rtl", nick_name: JSON.parse(localStorage.getItem('user_info')).username, userId: sessionStorage.getItem("userId"), org_type: sessionStorage.getItem("org_type"), role: sessionStorage.getItem("jueseNew") == "admin" ? [] : sessionStorage.getItem("jueseNew"), - tabTitle: "消息中心", - tab_index: 1, dialogTableVisible: false, dialogFormVisible: false, form: { @@ -580,12 +356,11 @@ export default { color: '#F51515' }, }, - oneId: '', - isOne: false, currentFile: null }; }, components: { + MessageCenter, // 注册消息中心组件 PromotionalInvitationCode, Breadcrumb, Hamburger, @@ -601,19 +376,24 @@ export default { gridObj: state => state.operationAnalysis.gridObj, mybalance: state => state.user.mybalance, logoutUrl: state => state.login.logoutUrl, - }) }, created() { - this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent); - this.getUserInfo(); - // this.autoShuaXin(); this.themeState = sessionStorage.getItem('themeState') - this.getUnreadmsg() this.handleResize() }, methods: { + // 打开消息中心 + openMessageCenter() { + this.$refs.messageCenter.open(); + }, + + // 处理未读消息数量更新 + handleUnreadCountUpdate(count) { + this.messageCount = count; + }, + goHomePage() { this.$router.push('/homePage/index') this.$store.commit('setShowHomeNav', true) @@ -692,7 +472,6 @@ export default { params: { product_name: '数据库' } }) } else { - // console.log("走了京哦else") this.$router.push('/product/jdProduct') } } else if (item.type === "sdzx") { @@ -706,9 +485,6 @@ export default { return } this.searchLoading = true - // setTimeout(() => { - // this.searchLoading = false - // }, 300) reqSearchProductList({ name: this.searchValue }).then(res => { this.searchLoading = false if (res.status) { @@ -723,24 +499,6 @@ export default { }, goScreen() { window.open('https://www.kaiyuancloud.cn/dev/#/screen/k8sRescource', '_blank'); - // const newWindow = window.open('https://www.kaiyuancloud.cn/dev/#/screen/index', '_blank'); - // const newWindow = window.open('http://localhost:9527/#/screen/index', '_blank'); - // // 确保窗口已经打开 - // newWindow.onload = function () { - // // 这需要用户的交互才能全屏 - // if (newWindow.document.documentElement.requestFullscreen) { - // console.log("走了if") - // newWindow.document.documentElement.requestFullscreen(); - // } else if (newWindow.document.documentElement.mozRequestFullScreen) { // Firefox - // newWindow.document.documentElement.mozRequestFullScreen(); - // } else if (newWindow.document.documentElement.webkitRequestFullscreen) { // Chrome, Safari and Opera - // console.log("走了if谷歌") - // newWindow.document.documentElement.webkitRequestFullscreen(); - // } else if (newWindow.document.documentElement.msRequestFullscreen) { // IE/Edge - // newWindow.document.documentElement.msRequestFullscreen(); - // } - // }; - }, channelFirstBtn() { reqApplyChannel({ user_id: this.userId }).then(res => { @@ -753,7 +511,7 @@ export default { } }) }, - ChannelConfirmBtn() {//渠道确定按钮 + ChannelConfirmBtn() { reqApplyChannel({ user_id: this.userId, code: '200' }).then(res => { if (res.status) { this.$message.success("申请渠道成功，后续会有相关人员和您沟通~") @@ -762,9 +520,7 @@ export default { this.$message.error("申请渠道失败~") } }) - }, - // 屏幕宽度变化时触发的方法 handleResize() { if (window.matchMedia('(max-width: 760px)').matches) { this.isMobileScreen = true; @@ -773,10 +529,8 @@ export default { } }, beforeDestroy() { - // 在组件销毁前移除监听器 window.removeEventListener('resize', this.handleResize); }, - //接受子组件信息 acceptSonMessage(value) { this.cuxiaoIsShow = value }, @@ -785,12 +539,10 @@ export default { }, handleShow(isShow) { let resverNode = document.getElementById('resverIcon') - if (isShow) { if (this.role.includes('客户')) { this.$store.dispatch('user/getCustmoersMoney') } - resverNode.style.transform = 'rotate(180deg)' } else { resverNode.style.transform = 'rotate(0)' @@ -799,218 +551,24 @@ export default { initMybalance() { return sessionStorage.getItem('mybalance') }, - copyBtn() {//个人信息复制id + copyBtn() { const textToCopy = this.$refs.contentToCopy.innerText; navigator.clipboard.writeText(textToCopy).then(() => { this.$message.success('复制成功！') - }).catch((error) => { console.error('复制失败', error); }); - - }, - closeMesssageWindow() {//抽屉关闭的回调 - - this.getUnreadmsg() - if (this.isUpdate) { - - - } else { - - } - - }, - rowClass() { - return "font-size:14px;" }, handleAvatarSuccess(file, fileList) { this.imageUrl = URL.createObjectURL(file.raw); this.currentFile = file; }, - personalMessage() {//进入个人信息页面 + personalMessage() { this.$router.push('/customer/customerInformation') }, - getUnreadmsg() {//获取未读信息 - getUnreadmsgAPI().then(res => { - if (res.status) { - this.count = res.count - this.unreadMessageList = res.messages - } else { - this.$message({ - message: res.msg, - type: "error", - }); - } - }) - }, - getReadmsg() {//获取已读信息 - getReadmsgAPI().then(res => { - if (res.status) { - this.readInformationList = res.msg - } else { - this.$message({ - message: res.msg, - type: "error", - }); - } - }) - }, - rowStyle({ row, rowIndex }) {//改变表格某一行样式 - if (this.isOne == true && row.id == this.oneId) { - return 'unReadColor'; - } else if (row.msgstatus == 1) { - return 'unReadColor'; - } - return ''; - }, - - handleSelectionChange(selection) {//获取选择的数据的id - if (selection) { - this.readIdList = [] - selection.forEach(item => { - this.readIdList.push(item.id) - }) - } - }, - infrom() { // 通知 - this.isUpdate = false - this.drawer = true; - this.getMsg() - }, - getMsg() {//获取所有信息 - getMsgAPI({ userid: this.userId }).then(res => { - if (res.status && res.msg) { - this.alliInformationList = res.msg - } - }) - }, - readMassage() {//一键已读 - this.isUpdate = true - if (this.readIdList.length) { - this.upMsg(this.readIdList) - } else { - this.$message({ - message: "请选择数据", - type: "warning", - }); - } - }, - upMsg(data) {//更改消息状态 - let params = { - msgids: data - } - upMsgAPI(params).then(res => { - if (res.status) { - this.$message({ - message: "一键已读成功", - type: "success", - }); - if (this.tab_index == 1) { - this.getMsg() - } else if (this.tab_index == 2) { - this.getUnreadmsg() - } - } else { - this.$message({ - message: res.msg, - type: "error", - }); - } - }) - }, - delMsg(data) {//删除消息 - let params = { - id: data - } - delMsgAPI(params).then(res => { - if (res.status) { - this.$message({ - message: "删除成功", - type: "success", - }); - if (this.tab_index == 1) { - this.getMsg() - } else if (this.tab_index == 2) { - this.getUnreadmsg() - } else if (this.tab_index == 3) { - this.getReadmsg() - } - } else { - this.$message({ - message: res.msg, - type: "error", - }); - } - }) - }, - delMessage() {//一键删除 - if (this.readIdList.length) { - this.delMsg(this.readIdList) - } else { - this.$message({ - message: "请选择数据", - type: "warning", - }); - } - }, - expandChangeHandler(row) {//表格每一行展开时 - this.isOne = true - this.oneId = row.id - let params = { - msgids: [row.id] - } - upMsgAPI(params).then(res => { - if (res.status) { - this.rowStyle(row) - - } else { - this.$message({ - message: res.msg, - type: "error", - }); - } - }) - - }, - expandChangeHandler1(row) { - this.isUpdate = true - this.$refs.table.toggleRowExpansion(row); - this.expandChangeHandler(row) - }, - expandChangeHandler2(row) { - this.$refs.table.toggleRowExpansion(row); - }, - change(row, expanded) { - // console.log(row); - // console.log(expanded); - - }, - tab(i) {//通知切换 - this.tab_index = i; - if (i == 1) { - this.tabTitle = "全部消息"; - this.getMsg() - } else if (i == 2) { - this.tabTitle = "未读消息"; - this.getUnreadmsg() - - } else { - this.tabTitle = "已读消息"; - this.getReadmsg() - } - }, - autoShuaXin() { // 自动刷新 - setInterval(() => { - getTimeAPI().then((res) => { - // console.log(res); - }); - // 时间间隔 - }, 100000); - }, - async getUserInfo() { //获取个人信息 + async getUserInfo() { getUserInfoAPI({ id: this.userId }).then((res) => { if (res.status == true) { - // this.nick_name = res.data[0].username; this.userInfoList = res.data; sessionStorage.setItem("orgid", res.data[0].orgid); } else { @@ -1021,17 +579,16 @@ export default { } }); }, - goShopping() { //跳转购物车 - // this.$router.push("/shoppingManagement"); + goShopping() { this.$router.push("/product/shoppingCart"); }, toggleSideBar() { this.$store.dispatch("app/toggleSideBar"); }, - edituserPassword() {//修改密码 + edituserPassword() { this.passwordDialog = true; }, - onsubmit() { //修改密码 + onsubmit() { this.$refs.passwordForm.validate((valid) => { if (valid) { if ( @@ -1066,7 +623,7 @@ export default { } }); }, - async edituser() { //修改个人信息 + async edituser() { this.editUserInfoDialog = true; if (this.role == '运营') { this.getOpicture() @@ -1077,7 +634,6 @@ export default { this.editUserInfoForm.email = this.userInfoList[0].email; this.editUserInfoForm.address = this.userInfoList[0].address; this.editUserInfoForm.mobile = this.userInfoList[0].mobile; - // this.editUserInfoForm.nick_name = this.userInfoList[0].username; }, getPicture() { let params = { @@ -1087,7 +643,7 @@ export default { this.imageUrl = res.picture_url ? res.picture_url : null; }) }, - getOpicture() {//仅运营角色用 + getOpicture() { let params = { userid: this.userId } @@ -1095,8 +651,7 @@ export default { this.imageUrl = res.data ? res.data : null; }) }, - - editOnsubmit() { //修改个人信息 + editOnsubmit() { this.editUserInfoForm.contactor_phone = this.editUserInfoForm.mobile; editUserInfoAPI({ ...this.editUserInfoForm, id: this.userId, }).then( (res) => { @@ -1123,7 +678,6 @@ export default { if (this.role == '运营') { addOpictureAPI(formData).then(res => { if (res.status) { - } else { this.$message({ message: res.msg, @@ -1134,7 +688,6 @@ export default { } else { addPictureAPI(formData).then(res => { if (res.status) { - } else { this.$message({ message: res.msg, @@ -1143,7 +696,6 @@ export default { } }) } - }, handleClose1() { this.$refs.passwordForm.resetFields(); @@ -1160,32 +712,7 @@ export default { this.$refs.editUserInfoForm.resetFields(); this.editUserInfoDialog = false; }, - async logout() {//退出登录 - - // logout() { - // await this.$store.dispatch('auth/removeToken') - // logoutAPI().then((res) => { - // // console.log(res); - // }); - - //获取当前url - let url = window.location.href; - //判断url中是否包含domain_name字段 - // if (!url.includes('domain_name')) { - // //跳转到https://www.opencomputing.cn/ - // window.location.href = 'https://www.opencomputing.cn/'; - // - // } else { - // await this.$router.push(`/homePage?redirect=${this.$route.fullPath}`); - // } - - - // if (this.logoutUrl) { - // window.location.href = this.logoutUrl - // } else {mo - // window.location.href = 'https://www.opencomputing.cn/'; - // } - + async logout() { store.commit('tagsView/resetBreadcrumbState'); sessionStorage.removeItem("auths"); sessionStorage.removeItem("routes"); @@ -1193,8 +720,6 @@ export default { sessionStorage.removeItem("userId"); sessionStorage.removeItem("org_type") localStorage.removeItem('userId') - - localStorage.removeItem("auths"); localStorage.removeItem("routes"); localStorage.removeItem("user"); @@ -1202,22 +727,12 @@ export default { localStorage.removeItem("org_type") sessionStorage.removeItem('userId') this.$store.commit('setLoginState', false) - await this.$router.push(getHomePath()); - // window.location.reload() }, - - async logout1() {//退出登录 - - // logout() { - // await this.$store.dispatch('auth/removeToken') + async logout1() { logoutAPI().then((res) => { - // console.log(res); }); - - //获取当前url let url = window.location.href; - //判断url中是否包含domain_name字段 await this.$router.push(`/login`); store.commit('tagsView/resetBreadcrumbState'); sessionStorage.removeItem("auths"); @@ -1225,13 +740,12 @@ export default { sessionStorage.removeItem("user"); sessionStorage.removeItem("userId"); }, - //改变图表颜色 changeColor() { this.dialogFormVisible = false this.$store.commit('operationAnalysis/setGridObj', this.newGridObj) localStorage.setItem('gridObj', JSON.stringify(this.newGridObj)) }, - getFormData(object) {//转换参数为formdata格式 + getFormData(object) { const formData = new FormData(); Object.keys(object).forEach((key) => { const value = object[key]; @@ -1247,40 +761,25 @@ export default { }, }, watch: { - // gridObj(newValue, oldValue) { - // this.themeState = newValue - // console.log("gridObj原先是", oldValue) - // console.log("gridObj现在是", newValue) - // console.log("tgridObj", this.gridObj) - // }, gridObj: { handler(newValue, oldValue) { - // console.log("gridObj原先是", oldValue) - // console.log("gridObj现在是", newValue) - // console.log("tgridObj", this.gridObj) } } }, mounted() { this.role = sessionStorage.getItem("jueseNew") if (this.role.includes('客户')) { - // this.$store.commit('app/closeSiderBtn') } - - //判断是否在充值也展示 if (window.location.href.includes('kbossCharge')) { this.isShowKbossCharge = true } if (JSON.parse(localStorage.getItem('gridObj')) != {}) { - // this.newGridObj.bar.color = JSON.parse(localStorage.getItem('gridObj')).bar.color - // this.newGridObj.lineHuan.color = JSON.parse(localStorage.getItem('gridObj')).lineHuan.color - // this.newGridObj.lineTong.color = JSON.parse(localStorage.getItem('gridObj')).lineTong.color - // console.log("grid",this.gridObj) } this.isLocalhost = window.location.href.includes('localhost') || window.location.href.includes('xterm') }, }; + + + + diff --git a/f/web-kboss/src/views/homePage/mainPage/index.vue b/f/web-kboss/src/views/homePage/mainPage/index.vue index f040e91..e0009f4 100644 --- a/f/web-kboss/src/views/homePage/mainPage/index.vue +++ b/f/web-kboss/src/views/homePage/mainPage/index.vue @@ -811,6 +811,7 @@ export default Vue.extend({ height: 100%; overflow: auto !important; min-width: 1500px; + } .banner {