css

src/components/menu.vue

@@ -15,7 +15,12 @@
             </a>
           </div>
         </div>
+        <!--right-bar-->
         <div class="user-box fr row verCenter">
+          <i class="el-icon-message-solid message-num" @click="showMsg">
+            <el-badge class="mark" :value="3"/>
+          </i>
+          <div class="line"></div>
           <a class="msgh row verCenter" href="javascript:history.go(0)">
             <span class="el-icon-refresh icon"></span>
           </a>
@@ -194,16 +199,68 @@
         </el-form-item>
       </el-form>
     </el-dialog>
+    <!--消息通知-->
+    <el-dialog title="消息通知" :visible.sync="dialogNewsVisible" width="700px" class="demo-ruleForm">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="全部" name="all">
+          <div slot="label">全部
+            <el-badge value=10 :max="9999"></el-badge>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="询价" name="inquiry">
+          <div slot="label">询价
+            <el-badge value=10 :max="9999"></el-badge>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="成单" name="orderForm">
+          <div slot="label">成单
+            <el-badge value=10 :max="9999"></el-badge>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="退货" name="returnGoods">
+          <div slot="label">退货
+            <el-badge value=10 :max="9999"></el-badge>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="上架有效期" name="shelfLife">
+          <div slot="label">上架有效期
+            <el-badge value=10 :max="9999"></el-badge>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="库存不足" name="insufficientInventory">
+          <div slot="label">库存不足
+            <el-badge value=10 :max="9999"></el-badge>
+          </div>
+        </el-tab-pane>
+        <div style="position: relative">
+          <el-table :data="tableData" max-height="500" @selection-change="handleSelectionChange" :show-header="false">
+            <el-table-column type="selection" width="50" align="left"></el-table-column>
+            <el-table-column prop="inquiry_sn" label="" :show-overflow-tooltip="true" align="left">
+              <template slot-scope="scope">
+                <span class="el-badge-num" v-if="scope.row.msg_status == 0"></span>
+                <span style="margin-right: 4px;">{{ JSON.parse(scope.row.msg_data).date }}</span>
+                <span style="margin-right: 4px;">{{ JSON.parse(scope.row.msg_data).title }}</span>
+                <a class="alink" target="_blank" :href="JSON.parse(scope.row.msg_data).link">{{ JSON.parse(scope.row.msg_data).title_suffix }}</a>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 200]" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
+        </div>
+      </el-tabs>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import Vue from 'vue';
 import Util from "../tool";
-import {Button, Dialog, Form, FormItem, Input, Menu, MenuItem, MenuItemGroup, Message, MessageBox, Submenu, Tooltip} from 'element-ui'
+import axios from 'axios';
+import {Badge, Button, Dialog, Form, FormItem, Input, Menu, MenuItem, MenuItemGroup, Message, MessageBox, Pagination, Submenu, TabPane, Tabs, Tooltip} from 'element-ui'
 
 Vue.prototype.$message = Message;
-Vue.use(Menu).use(MenuItem).use(MenuItemGroup).use(Submenu).use(Form).use(FormItem).use(Dialog).use(Button).use(Tooltip).use(Input);
+
+Vue.use(Menu).use(MenuItem).use(MenuItemGroup).use(Submenu).use(Form).use(FormItem).use(Dialog).use(Button).use(Tooltip).use(Input).use(Tabs).use(TabPane).use(Badge).use(Pagination);
+var news_url = "http://192.168.1.252:16543/";
 
 export default {
   name: 'menus',
@@ -227,13 +284,20 @@ export default {
       }
     }
     return {
+      activeName: "all",
       userinfo: {},
       collapse: false,
       isIndexTab: true,
       tabSure: "",
       tabs: "",
       width: "",
-      dialogVisible: false,
+      dialogVisible: false,//改密码
+      dialogNewsVisible: false,//消息通知
+      tableData: [],
+      multipleSelection: [],
+      total: 0,
+      limit: 10,
+      page: 1,
       ruleForm: {
         old_password: '',
         password: '',
@@ -281,16 +345,78 @@ export default {
     this.tabss(this.$route.path)
   },
   methods: {
+    getNews() {
+      var that = this;
+      axios.post(news_url + '/get_category_msg_list', {
+        page: this.page,
+        limit: this.limit,
+        msg_status: '',
+        keyword: '',
+        msg_category_id: '',
+        user_id: 12270,//供应商id
+        sys_id: 17//云芯系统
+      }).then(function (res) {
+        if (res.code === 0) {
+          that.tableData = res.data.list || [];
+          that.total = res.data.total;
+        } else {
+          that.$message({
+            message: res.msg,
+            type: 'warning'
+          });
+        }
+      });
+
+    },
     getData() {
       if (window.userInfo) {
         this.userinfo = window.userInfo;
       } else {
         this.$http('get', "/api/user/getuserinfo").then(res => {
-          this.userinfo = res.data;
-          window.userInfo = res.data
+          if (res.code == 0) {
+            this.userinfo = res.data;
+            window.userInfo = res.data
+          }
         })
       }
     },
+    /**
+     * 消息通知展示
+     */
+    showMsg() {
+      this.dialogNewsVisible = true;
+      this.getNews();
+    },
+    /**
+     * tab切换
+     * @param index
+     */
+    handleClick(tab, event) {
+
+    },
+    /**
+     * chebox选择的数据
+     * @param val
+     */
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    /**
+     * 分页条数切换
+     * @param val
+     */
+    handleSizeChange(val) {
+      this.limit = val;
+      this.getNews();
+    },
+    /**
+     * 分页点击切换
+     * @param val
+     */
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getNews();
+    },
     tabUi() {
       let tab_arr = sessionStorage.getItem('tabs')
       if (tab_arr) {
@@ -322,8 +448,6 @@ export default {
       if (lk == "/list" || lk == "/enter" || lk == '/listDetail') {
         this.tabSure = 3;
       }
-
-
       if (lk == "/goods" || lk == "/brand") {
         this.tabSure = 4;
       }
@@ -510,7 +634,7 @@ export default {
       height: 40px;
       overflow-y: hidden;
       position: relative;
-      width: calc(100vw - 517px);
+      width: calc(100vw - 556px);
 
       .item-boxs {
         position: absolute;
@@ -581,7 +705,19 @@ export default {
       padding: 8px 0;
       line-height: 40px;
       color: #A1ACC1;
-      width: 241px;
+      margin-right: 5px;
+
+      .message-num {
+        position: relative;
+        font-size: 23px;
+        cursor: pointer;
+
+        .el-badge {
+          position: absolute;
+          right: -11px;
+          top: -8px;
+        }
+      }
 
       a {
         color: #A1ACC1;
@@ -927,6 +1063,40 @@ export default {
   }
 }
 
+.el-badge-num {
+  position: absolute;
+  left: -1px;
+  top: 14px;
+  width: 7px;
+  height: 7px;
+  background: #fe0000;
+  border-radius: 50%;
+  display: block;
+  box-sizing: border-box;
+}
+
+.el-badge-num-tab {
+  position: absolute;
+  left: 27px;
+  top: -51px;
+  background-color: #fe0000;
+  border-radius: 10px;
+  color: #fff;
+  display: inline-block;
+  font-size: 12px;
+  height: 18px;
+  line-height: 18px;
+  padding: 0 6px;
+  text-align: center;
+  white-space: nowrap;
+  border: 1px solid #fff;
+  z-index: 999;
+}
+
+.el-tabs__content {
+  overflow: visible !important;
+}
+
 @keyframes layui-rotate {
   from {
     -webkit-transform: rotate(0)