更新

src/layout/user/clickBtn.vue

@@ -23,6 +23,9 @@
         <el-col :span="24" class="native">
           <van-cell is-link @click="$router.push({ path: '/user/league' })">积分榜</van-cell>
         </el-col>
+        <el-col :span="24" class="native">
+          <van-cell is-link @click="$router.push({ path: '/user/live' })">直播</van-cell>
+        </el-col>
       </el-col>
     </el-row>
   </div>

src/router/index.js

@@ -177,6 +177,17 @@ const routes = [
     meta: { title: '积分榜', isleftarrow: true },
     component: () => import('../views/user/league.vue'),
   },
+  // 直播
+  {
+    path: '/user/live',
+    meta: { title: '直播', isleftarrow: true },
+    component: () => import('../views/user/live.vue'),
+  },
+  {
+    path: '/user/liveDetail',
+    meta: { title: '直播详情', isleftarrow: true },
+    component: () => import('../views/user/liveDetail.vue'),
+  },
   //正在登陆
   {
     path: '/login',

src/store/index.js

@@ -30,6 +30,7 @@ import chatroom from '@frame/store/chatroom';
 import answerchat from '@frame/store/answerchat';
 import classtype from '@frame/store/classtype';
 import personalscore from '@frame/store/personalscore';
+import liveroom from '@frame/store/liveroom';
 import * as ustate from '@frame/store/user/state';
 import * as umutations from '@frame/store/user/mutations';
 Vue.use(Vuex);
@@ -70,5 +71,6 @@ export default new Vuex.Store({
     location,
     personalscore,
     classtype,
+    liveroom,
   },
 });

src/views/user/live.vue

@@ -0,0 +1,79 @@
+<template>
+  <div id="live">
+    <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">
+          <liveframe :liveList="liveList"></liveframe>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import liveframe from './live/live.vue';
+import NavBar from '@/layout/common/topTitle.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: liveroom } = createNamespacedHelpers('liveroom');
+export default {
+  metaInfo: { title: '直播列表' },
+  name: 'live',
+  props: {},
+  components: {
+    NavBar, //头部导航
+    liveframe, //直播列表
+  },
+  data: function() {
+    return {
+      title: '',
+      isleftarrow: '',
+      transitionName: 'fade',
+      navShow: true,
+      // 直播列表
+      liveList: [],
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...liveroom(['query']),
+    async search() {
+      const res = await this.query({ status: '1' });
+      if (this.$checkRes(res)) {
+        this.$set(this, `liveList`, res.data);
+      }
+    },
+  },
+  computed: { ...mapState(['user']) },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+  watch: {
+    $route(to, from) {
+      this.title = to.meta.title;
+      this.isleftarrow = to.meta.isleftarrow;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  min-height: 570px;
+}
+</style>

src/views/user/live/detail.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="num"> 房间号：{{ liveInfo.number }} </el-col>
+        <el-col :span="24" class="video">
+          直播页面
+        </el-col>
+        <el-col :span="24" class="info">
+          <p>
+            直播课程：<span>{{ liveInfo.subname }}</span>
+          </p>
+          <p>
+            主讲教师：<span>{{ liveInfo.teacher }}</span>
+          </p>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'detail',
+  props: {
+    liveInfo: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.main {
+  padding: 0 10px;
+  .num {
+    font-size: 18px;
+    text-align: center;
+    font-weight: bold;
+    padding: 15px 0;
+  }
+  .video {
+    height: 400px;
+    overflow: hidden;
+    background-color: #000;
+  }
+  .info {
+    margin: 10px 0;
+    p {
+      float: left;
+      width: 50%;
+      text-align: center;
+      font-size: 18px;
+      color: #ccc;
+      span {
+        color: #000;
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>

src/views/user/live/live.vue

@@ -0,0 +1,73 @@
+<template>
+  <div id="live">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="liveList" v-for="(item, index) in liveList" :key="index">
+          <el-col :span="24" class="num"> 房间号：{{ item.number }} </el-col>
+          <el-col :span="24" class="info">
+            <span>直播科目：{{ item.subname }}</span>
+            <span>主讲教师：{{ item.teacher }}</span>
+          </el-col>
+          <el-col :span="24" class="btn">
+            <el-button type="primary" size="mini" @click="$router.push({ path: '/user/liveDetail', query: { id: item.id } })">进入直播</el-button>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'live',
+  props: {
+    liveList: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  margin: 10px 0 0 0;
+  padding: 0 10px;
+  .liveList {
+    background-color: #fff;
+    margin: 0 0 10px 0;
+    border-radius: 10px;
+    padding: 5px 10px;
+    .num {
+      font-size: 18px;
+    }
+    .info {
+      text-align: center;
+      padding: 5px 0;
+      span {
+        display: inline-block;
+        width: 50%;
+        text-align: left;
+        font-size: 16px;
+      }
+    }
+    .btn {
+      text-align: center;
+      margin: 5px 0;
+    }
+  }
+}
+</style>

src/views/user/liveDetail.vue

@@ -0,0 +1,85 @@
+<template>
+  <div id="liveDetail">
+    <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">
+          <liveInfos :liveInfo="liveInfo"></liveInfos>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import liveInfos from './live/detail.vue';
+import NavBar from '@/layout/common/topTitle.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: liveroom } = createNamespacedHelpers('liveroom');
+export default {
+  name: 'liveDetail',
+  props: {},
+  components: {
+    NavBar, //头部导航
+    liveInfos, //直播详情
+  },
+  data: function() {
+    return {
+      title: '',
+      isleftarrow: '',
+      transitionName: 'fade',
+      navShow: true,
+      // 直播详情
+      liveInfo: {},
+    };
+  },
+  created() {
+    if (this.id) {
+      this.searchInfo();
+    }
+  },
+  methods: {
+    ...liveroom(['fetch']),
+    async searchInfo() {
+      const res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `liveInfo`, res.data);
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+  watch: {
+    $route(to, from) {
+      this.title = to.meta.title;
+      this.isleftarrow = to.meta.isleftarrow;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  min-height: 570px;
+}
+</style>