更新

src/router/index.js

@@ -34,6 +34,13 @@ const routes = [
     component: () => import('../views/live/index.vue'),
   },
   // 直播详情
+  {
+    path: '/live/roomDetail',
+    name: 'live_detail',
+    meta: { title: '直播详情', isleftarrow: true },
+    component: () => import('../views/live/roomDetail.vue'),
+  },
+  // 直播详情
   {
     path: '/live/detail',
     name: 'live_detail',

src/views/live/detail.vue

@@ -1,16 +1,13 @@
 <template>
-  <div id="detail">
+  <div id="roomDetail">
     <el-row>
       <el-col :span="24" class="style">
         <el-col :span="24" class="top">
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          <liveDetail></liveDetail>
+          <videoDetail></videoDetail>
         </el-col>
-        <!-- <el-col :span="24" class="foot">
-          <footInfo></footInfo>
-        </el-col> -->
       </el-col>
     </el-row>
   </div>
@@ -20,14 +17,14 @@
 import { mapState, createNamespacedHelpers } from 'vuex';
 import NavBar from '@/layout/common/topInfo.vue';
 import footInfo from '@/layout/common/footInfo.vue';
-import liveDetail from './parts/liveDetail.vue';
+import videoDetail from './parts/videoDetail.vue';
+
 export default {
-  name: 'detail',
+  name: 'roomDetail',
   props: {},
   components: {
     NavBar,
-    // footInfo,
-    liveDetail, //直播详情
+    videoDetail, //视频
   },
   data: function() {
     return {
@@ -39,9 +36,7 @@ export default {
       navShow: true,
     };
   },
-  created() {
-    console.log(this.user);
-  },
+  created() {},
   methods: {},
   computed: {
     ...mapState(['user']),

src/views/live/parts/liveList.vue

@@ -13,7 +13,8 @@
             </p>
           </el-col>
           <el-col :span="6" class="right">
-            <p @click="$router.push({ path: '/live/detail' })">进入房间</p>
+            <p @click="$router.push({ path: '/live/roomDetail', query: { id: item.id } })" v-if="item.roomid">进入房间</p>
+            <p @click="$router.push({ path: '/live/detail', query: { id: item.id } })" v-else>进入房间</p>
           </el-col>
         </el-col>
       </el-col>
@@ -25,7 +26,6 @@
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: dock } = createNamespacedHelpers('dock');
 const { mapActions: place } = createNamespacedHelpers('place');
-
 export default {
   name: 'liveList',
   props: {},

src/views/live/parts/liveDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="liveDetail">
+  <div id="roomsDetail">
     <el-row>
       <el-col :span="24" class="info">
         <el-col :span="24" class="video">
@@ -35,7 +35,7 @@ import { videoPlayer } from 'vue-video-player';
 import 'videojs-flash';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
-  name: 'liveDetail',
+  name: 'roomsDetail',
   props: {},
   components: {
     videoPlayer,

src/views/live/parts/videoDetail.vue

@@ -0,0 +1,103 @@
+<template>
+  <div id="videoDetail">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="video">
+          <video :src="file_path" controls="controls" style="height: 200px; width: 100%;">
+            您的浏览器不支持 video 标签。
+          </video>
+        </el-col>
+        <el-col :span="24" class="chat">
+          <el-col :span="24" class="chatList">
+            聊天列表
+          </el-col>
+          <el-col :span="24" class="chatInput">
+            <el-col :span="19" class="input">
+              <el-input v-model="input"></el-input>
+            </el-col>
+            <el-col :span="5" class="btn">
+              <el-button type="primary" size="mini" @click="onSubmit">发送</el-button>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+export default {
+  name: 'videoDetail',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      input: '',
+      file_path: '',
+    };
+  },
+  created() {
+    this.seachInfo();
+  },
+  methods: {
+    ...dock({ dockQuery: 'query', palcefetch: 'fetch' }),
+    async seachInfo() {
+      let res = await this.palcefetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `file_path`, res.data.file_path);
+        console.log(res.data.file_path);
+      }
+    },
+    onSubmit() {
+      console.log(this.input);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  padding: 10px;
+  .video {
+    background: #fff;
+    padding: 10px;
+    margin: 0 0 10px 0;
+    height: 225px;
+  }
+  .chat {
+    background: #fff;
+    padding: 10px;
+    .chatList {
+      border: 1px solid #ccc;
+      min-height: 300px;
+      margin: 0 0 10px 0;
+      border-radius: 10px;
+      padding: 5px 10px;
+    }
+    .chatInput {
+      .el-button {
+        width: 100%;
+        padding: 13px 0;
+      }
+    }
+  }
+}
+/deep/.video-js {
+  height: 190px !important;
+  border-radius: 10px;
+}
+</style>

src/views/live/roomDetail.vue

@@ -0,0 +1,73 @@
+<template>
+  <div id="roomDetail">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          <roomsDetail></roomsDetail>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import roomsDetail from './parts/roomsDetail.vue';
+export default {
+  name: 'roomDetail',
+  props: {},
+  components: {
+    NavBar,
+    // footInfo,
+    roomsDetail, //直播详情
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+    };
+  },
+  created() {
+    console.log(this.user);
+  },
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+  position: relative;
+  z-index: 999;
+}
+.main {
+  min-height: 570px;
+}
+.foot {
+  position: absolute;
+  bottom: 0;
+}
+</style>