调整

src/router/index.js

@@ -126,7 +126,11 @@ const router = new VueRouter({
           name: 'singleTrack',
           component: () => import('../view/selection/singletrack/Index.vue')
         },
-
+        {
+          path: 'info',
+          name: 'info',
+          component: () => import('../view/Info.vue')
+        },
         {
           path: 'message',
           name: 'message',

src/view/Home.vue

@@ -124,6 +124,10 @@
             <el-menu-item index="/saleData">销售管理</el-menu-item>
             <el-menu-item index="/saleOut">售罄看板</el-menu-item>
           </el-submenu>
+          <el-menu-item index="/info">
+            <i class="el-icon-info"></i>
+            <span slot="title">未读消息</span>
+          </el-menu-item>
           <el-menu-item index="/learning">
             <i class="el-icon-eleme"></i>
             <span slot="title">新手园地</span>

src/view/Info.vue

@@ -0,0 +1,138 @@
+<template>
+    <ai-list class="Learning" v-loading="isLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
+      <ai-title
+        slot="title"
+        title="未读消息"
+        
+        isShowBottomBorder>
+      </ai-title>
+      <template slot="content">
+        <ai-table
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :isShowPagination="false"
+          style="margin-top: 8px;"
+          @getList="getList">
+          <el-table-column slot="send" label="是否发送通知" align="center">
+            <template v-slot="{ row }">
+              <el-switch
+                active-value="1"
+                inactive-value="0"
+                @change="e => onChange(row.id, e)"
+                v-model="row.isSend">
+              </el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column slot="options" label="操作" align="center" fixed="right" width="140px">
+            <template v-slot="{ row }">
+              <div class="table-options">
+                <el-button type="text" @click="edit(row)">处理</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </ai-table>
+        <AiDialog
+          title="未读消息列表"
+          :visible.sync="isShow"
+          :close-on-click-modal="false"
+          customFooter
+          width="80%">
+            <el-tabs tab-position="left" style="height: 500px;">
+                <el-tab-pane v-for="item in msgList" :label="item.title" :key="item.id"><div v-html="item.content"></div></el-tab-pane>
+            </el-tabs>
+          <div class="dialog-footer" slot="footer">
+            <el-button @click="isShow = false">关闭</el-button>
+            <el-button @click="readAll()" type="primary">一键已读</el-button>
+          </div>
+         </AiDialog>
+      </template>
+    </ai-list>
+  </template>
+  
+  <script>
+    import { mapState } from 'vuex'
+    import {sendChromeAPIMessage, sendChromeNotification} from '@/api/chromeApi'
+    import { Message } from 'element-ui'
+    export default {
+      data () {
+        return {
+          colConfigs: [
+            { prop: 'mallName', label: '店铺名称', align: 'left' },
+            { prop: 'unreadNum', label: '未读数量', align: 'left' }
+          ],
+          tableData: [],
+          dataList: [],
+          msgList: [],
+          total: 0,
+          isShow: false,
+          id: '',
+          currentMallId: '',
+          isLoading: false
+        }
+      },
+  
+      created () {
+        this.getList()
+      },
+      computed: {
+        ...mapState(['mallList']),
+      },
+  
+      methods: {
+        async getList () {
+            this.isLoading = true
+            for (let i = 0; i < this.mallList.length; i++) {
+                let mallInfo = this.mallList[i]
+                let res = await sendChromeAPIMessage({
+                    url: 'bg/quick/api/merchant/msgBox/unreadMsgDetail',
+                    needMallId: true,
+                    mallId: mallInfo.mallId,
+                    data: {}})
+                if (res.success && res.errorCode == 1000000) {
+                    this.dataList.push({mallId: mallInfo.mallId, data: res.result.unreadPopMsg})
+                    this.tableData.push({mallId: mallInfo.mallId, mallName: mallInfo.mallName, unreadNum: (res.result.unreadPopMsg ? res.result.unreadPopMsg.length: 0)})
+                }
+            }
+            this.isLoading = false
+        },
+        edit(row) {
+            let temp = this.dataList.filter(item => {
+                return item.mallId == row.mallId
+            })
+            this.msgList = temp[0].data
+            this.currentMallId = temp[0].mallId
+            this.isShow = true
+        },
+        async readAll() {
+            if (!this.currentMallId) {
+                Message.error("请选择要标记已读的店铺")
+                return
+            }
+            let count = this.msgList.length
+            for (let i = 0; i < this.msgList.length; i++) {
+                let res = await sendChromeAPIMessage({
+                    url: 'bg/quick/api/merchant/msgBox/read',
+                    needMallId: true,
+                    mallId: this.currentMallId,
+                    data: {msgId: this.msgList[i].id}})
+                if (!res.success || res.errorCode != 1000000) {
+                    Message.error("一个信息标记已读失败")
+                } else {
+                    count--
+                }
+            }
+            for (let j = 0; j < this.tableData.length; j++) {
+                if (this.tableData[j].mallId == this.currentMallId) {
+                    this.tableData[j].unreadNum = count
+                    break
+                }
+            }
+            this.isShow = false
+        }
+      }
+    }
+  </script>
+  
+  <style scoped lang="scss">
+  </style>
+