feat()：添加聊天记录

src/api/chat.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function fetchList(query) {
+  return request({
+    url: '/chat/index',
+    method: 'get',
+    params: query
+  })
+}

src/router/index.js

@@ -300,6 +300,13 @@ export const constantRoutes = [
         component: () => import('@/views/live/list'),
         name: 'ArticleLive',
         meta: { title: '直播列表', icon: 'el-icon-s-order' }
+      },
+      {
+        path: 'chatList/:id(\\d+)',
+        component: () => import('@/views/live/chatList'),
+        name: 'chatList',
+        meta: { title: '聊天列表', noCache: true, activeMenu: '/live/list' },
+        hidden: true
       }
     ]
   },

src/views/live/chatList.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="app-container">
+    <!--<div class="filter-container">
+      <el-input v-model="listQuery.mobile" placeholder="手机号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        搜索
+      </el-button>
+    </div>-->
+    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
+      <el-table-column align="center" label="ID" width="80">
+        <template slot-scope="scope">
+          <span>{{ scope.row.id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column width="180px" align="center" label="用户id">
+        <template slot-scope="scope">
+          <span>{{ scope.row.user_id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" align="center" label="用户名称">
+        <template slot-scope="scope">
+          <span>{{ scope.row.user_name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" label="内容">
+        <template slot-scope="scope">
+          <span>{{ scope.row.content }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" label="发送时间" width="180px" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.send_time }}</span>
+        </template>
+      </el-table-column>
+      <!--<el-table-column class-name="status-col" label="主播昵称" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.anchor_name }}</span>
+        </template>
+      </el-table-column>-->
+      <!--<el-table-column class-name="status-col" label="直播类型" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.type | typeFilter }}</span>
+        </template>
+      </el-table-column>-->
+     <!-- <el-table-column align="center" label="Actions" width="300" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-row>
+            <router-link :to="'/live/edit/'+scope.row.id">
+              <el-button type="primary" size="mini" icon="el-icon-edit" style="margin-right: 10px;">
+                查看
+              </el-button>
+            </router-link>
+          </el-row>
+        </template>
+      </el-table-column>-->
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import { fetchList } from '@/api/chat'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import waves from '@/directive/waves'
+
+export default {
+  name: 'ChatList',
+  components: { Pagination },
+  directives: { waves },
+  filters: {
+    typeFilter(type) {
+      const statusMap = {
+        1: '推流',
+        0: '手机直播'
+      }
+      return statusMap[type]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        pageSize: 10,
+        roomId: 0
+      },
+      temp: {
+        id: undefined,
+        mark: '',
+        status: ''
+      },
+      dialogFormVisible: false
+    }
+  },
+  created() {
+    const id = this.$route.params && this.$route.params.id
+    if (!isNaN(id)) {
+      this.listQuery['roomId'] = id
+    }
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.list
+        this.total = response.data.count
+        this.listLoading = false
+      })
+    },
+    handleFilter() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.list
+        this.total = response.data.count
+        this.listLoading = false
+      })
+    },
+    async handleUpdate({ $index, row }) {
+      this.temp = Object.assign({}, row) // copy obj
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+.filter-container{
+  margin-bottom: 20px;
+}
+.filter-item {
+  margin-right: 10px;
+}
+
+</style>

src/views/live/list.vue

@@ -37,16 +37,16 @@
           <span>{{ scope.row.end_time }}</span>
         </template>
       </el-table-column>
-      <el-table-column class-name="status-col" label="主播昵称" align="center">
+      <!--<el-table-column class-name="status-col" label="主播昵称" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.anchor_name }}</span>
         </template>
-      </el-table-column>
-      <el-table-column class-name="status-col" label="直播类型" align="center">
+      </el-table-column>-->
+      <!--<el-table-column class-name="status-col" label="直播类型" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.type | typeFilter }}</span>
         </template>
-      </el-table-column>
+      </el-table-column>-->
       <el-table-column class-name="status-col" label="状态" align="center">
         <template slot-scope="{row}">
           <el-tag type="success">
@@ -62,6 +62,11 @@
                 查看
               </el-button>
             </router-link>
+            <router-link :to="'/live/chatList/'+scope.row.id">
+              <el-button type="primary" size="mini" icon="el-icon-edit" style="margin-right: 10px;">
+                查看聊天记录
+              </el-button>
+            </router-link>
 <!--            <el-button type="primary" size="mini" icon="el-icon-s-check" :disabled="(scope.row.status === 1 || scope.row.status === 3)" @click="handleUpdate(scope)">-->
 <!--              {{ scope.row.status === 1 || scope.row.status === 3 ? '已处理' : '处理' }}-->
 <!--            </el-button>-->
@@ -78,7 +83,7 @@
 </template>
 
 <script>
-import { fetchList, deleteLive } from '@/api/live'
+import { fetchList } from '@/api/live'
 import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
 import waves from '@/directive/waves'
 
@@ -146,42 +151,12 @@ export default {
         this.listLoading = false
       })
     },
-    handleDelete({ $index, row }) {
-      console.log(row.id)
-      this.$confirm('您确定要隐藏吗', '警告', {
-        confirmButtonText: '是的',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(async() => {
-          await deleteJoin(row.id)
-          this.list.splice($index, 1)
-          this.$message({
-            type: 'success',
-            message: '隐藏成功'
-          })
-        })
-    },
     async handleUpdate({ $index, row }) {
       this.temp = Object.assign({}, row) // copy obj
       this.dialogFormVisible = true
       this.$nextTick(() => {
         this.$refs['dataForm'].clearValidate()
       })
-    },
-    async updateData() {
-      const tempData = Object.assign({}, this.temp)
-      await dealJoin(tempData)
-      const rs = await fetchJoin(tempData.id)
-      const index = this.list.findIndex(v => v.id === this.temp.id)
-      this.list.splice(index, 1, rs.data.info)
-      this.dialogFormVisible = false
-      this.$notify({
-        title: '成功',
-        message: '更新成功',
-        type: 'success',
-        duration: 2000
-      })
     }
   }
 }