添加 my/MyDevice.vue 页面管理注册的硬件设备

src/router/background_my.js

@@ -9,6 +9,7 @@ const MyRcmd = () => import('views/my/MyRcmd')
 const MyMessage = () => import('views/my/MyMessage')
 const MyVip = () => import('views/my/MyVip')
 const MyWallet = () => import('views/my/MyWallet')
+const MyDevice = () => import('views/my/MyDevice')
 
 // ********************************************************************************************************************
 // 稿件后台主页
@@ -63,6 +64,12 @@ export default {
       name: 'MyContact',
       component: MyContact,
       meta: { title: '联系人', needAuth: true }
+    },
+    {
+      path: '/background/my/device',
+      name: 'MyDevice',
+      component: MyDevice,
+      meta: { title: '我的设备', needAuth: true }
     }
   ]
 }

src/views/admin/LeftAside.vue

@@ -134,6 +134,11 @@ export default {
               url: '/background/my/rcmd',
               title: '推荐设置',
               icon: 'el-icon-s-data'
+            },
+            {
+              url: '/background/my/device',
+              title: '我的设备',
+              icon: 'el-icon-s-data'
             }
           ]
         },

src/views/my/MyDevice.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <el-row class="movie-list">
+      <el-col :md="20">
+        <el-row>
+          <h2>我的设备</h2>
+        </el-row>
+        <el-card>
+          <el-table
+            :data="dataList"
+            :show-header="true"
+            border
+            style="width: 100%"
+          >
+            <el-table-column
+              prop="createAt"
+              label="时间"
+            />
+            <el-table-column
+              prop="title"
+              label="标题"
+            />
+            <el-table-column
+              label="操作"
+            >
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  @click="view(scope.row)"
+                >查看</el-button>
+                <el-button
+                  size="mini"
+                  @click="delete(scope.row)"
+                >删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-dialog title="消息内容" :visible.sync="messageDialog" @close="onCloseDialog">
+      <span>{{ this.messageContent }}</span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getUnreadMessages, getMessageDetail } from '@/api/user'
+
+export default {
+  name: 'MyDevice',
+  data() {
+    return {
+      dataList: [],
+      messageDialog: false,
+      messageContent: ''
+    }
+  },
+  created() {
+    document.title = '我的消息'
+
+    getUnreadMessages(1).then(resp => {
+      if (resp.code === 0) {
+        this.dataList = resp.data
+      }
+    })
+  },
+  methods: {
+    view(row) {
+      getMessageDetail(row.messageId).then(resp => {
+        if (resp.code === 0) {
+          this.messageDialog = true
+          this.messageContent = resp.data.content
+        }
+      })
+    },
+    onCloseDialog() {
+      this.messageContent = ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+</style>