hhh

src/router/index.js

@@ -19,13 +19,32 @@ const routes = [
     meta: { title: '错误页面', isleftarrow: false },
     component: () => import('../views/error.vue'),
   },
-  // 直播大厅
+  // 主页
   {
     path: '/live/index',
     name: 'live_index',
     meta: { title: '直播大厅', isleftarrow: true },
+    component: () => import('../views/index.vue'),
+  },
+  // 直播大厅
+  {
+    path: '/live/roomlist',
+    name: 'live_roomlist',
+    meta: { title: '直播大厅', isleftarrow: true },
     component: () => import('../views/live/index.vue'),
   },
+  {
+    path: '/live/roomrecord',
+    name: 'live_roomrecord',
+    meta: { title: '直播大厅', isleftarrow: true },
+    component: () => import('../views/record/index.vue'),
+  },
+  {
+    path: '/onlive/videoinfo',
+    name: 'live_roomvideo',
+    meta: { title: '直播大厅', isleftarrow: true },
+    component: () => import('../views/record/videoDetail.vue'),
+  },
   // 直播详情
   {
     path: '/live/roomDetail',

src/store/onlive/room.js

@@ -14,7 +14,7 @@ const state = () => ({});
 const mutations = {};
 
 const actions = {
-  async query({ commit }, { skip = 0, limit = 10, ...info } = {}) {
+  async query({ commit }, { skip = 0, limit = 1000, ...info } = {}) {
     const res = await this.$axios.$get(api.roomInfo, {
       skip,
       limit,

src/store/user/auth-user.js

@@ -4,9 +4,9 @@ import _ from 'lodash';
 //用户的菜单选项增删改查
 Vue.use(Vuex);
 const api = {
-  interface: `/api/auth/user`,
-  getMenu: `/api/auth/user/menus`,
-  bindInfo: `/api/auth/user/bind`,
+  interface: `/api/onlive/user`,
+  getMenu: `/api/onlive/user/menus`,
+  bindInfo: `/api/onlive/user/bind`,
 };
 const state = () => ({});
 const mutations = {};

src/views/index.vue

@@ -1,15 +1,31 @@
 <template>
-  <div id="index">
+  <div id="index" class="container">
     <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 :span="24" class="title">
+          <span>叁多健康管理平台</span>
         </el-col>
         <el-col :span="24" class="main">
-          无用页面
+          <el-col class="guide-box">
+            <el-col class="single-box" @click.native="$router.push({ path: '/live/roomlist' })">
+              <el-image class="icon" :src="require('@/assets/multiroom.png')"> </el-image>
+              <span class="label">直播入口</span>
+              <span class="desc"></span>
+            </el-col>
+            <el-col class="single-box" @click.native="$router.push({ path: '/live/roomrecord' })">
+              <el-image class="icon" :src="require('@/assets/voice.png')"> </el-image>
+              <span class="label">往期讲堂</span>
+              <span class="desc"></span>
+            </el-col>
+            <el-col class="single-box" @click.native="$router.push({ path: '/user/index' })">
+              <el-image class="icon" :src="require('@/assets/export.png')"> </el-image>
+              <span class="label">个人中心</span>
+              <span class="desc"></span>
+            </el-col>
+          </el-col>
         </el-col>
         <el-col :span="24" class="foot">
-          <footInfo></footInfo>
+          <span>潍坊恒源科技有限公司</span>
         </el-col>
       </el-col>
     </el-row>
@@ -17,15 +33,12 @@
 </template>
 
 <script>
-import NavBar from '@/layout/common/topInfo.vue';
-import footInfo from '@/layout/common/footInfo.vue';
+import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
+const jwt = require('jsonwebtoken');
 export default {
   name: 'index',
   props: {},
-  components: {
-    NavBar,
-    footInfo,
-  },
+  components: {},
   data: () => ({
     // 头部标题
     title: '',
@@ -33,53 +46,110 @@ export default {
     isleftarrow: '',
     // 返回
     navShow: true,
-    img_path: require('@/assets/logo.png'),
   }),
-  created() {},
-  computed: {},
+  created() {
+    if (this.token) {
+      this.sesstoken();
+    }
+  },
   methods: {
-    uploadSuccess({ type, data }) {
-      console.log(type, data);
-      // if (type !== 'img_path') {
-      //   let arr = _.get(this.uploads, type);
-      //   if (arr !== undefined) {
-      //     this.uploads[type].push({ name: data.name, uri: data.uri });
-      //   } else {
-      //     let newArr = [{ name: data.name, uri: data.uri }];
-      //     this.$set(this.uploads, `${type}`, newArr);
-      //   }
-      // } else {
-      //   this.picLoading = false;
-      //   this.$set(this.info, `${type}`, data.uri);
-      //   this.$nextTick(() => {
-      //     this.picLoading = true;
-      //   });
-      // }
+    ...mapMutations(['setUser']),
+    sesstoken() {
+      sessionStorage.setItem('token', this.token);
+      let user = jwt.decode(this.token);
+      this.setUser(user);
+    },
+    handleEntry(data) {
+      if (data === 1) {
+      } else if (data === 2) {
+      } else if (data === 3) {
+      }
     },
   },
-  mounted() {
-    this.title = this.$route.meta.title;
-    this.isleftarrow = this.$route.meta.isleftarrow;
+  computed: {
+    ...mapState(['user']),
+    token() {
+      return this.$route.query.token;
+    },
   },
+  mounted() {},
 };
 </script>
 
 <style lang="less" scoped>
 .style {
-  width: 100%;
-  min-height: 667px;
-  position: relative;
-  background-color: #f9fafc;
-}
-.top {
-  height: 46px;
-  overflow: hidden;
+  background-image: url(https://mc.qcloudimg.com/static/img/7da57e0050d308e2e1b1e31afbc42929/bg.png);
+  background-color: #333;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
 }
+
 .main {
   min-height: 570px;
 }
 .foot {
   position: absolute;
-  bottom: 0;
+  bottom: 20px;
+  text-align: center;
+  font-size: 16px;
+}
+
+.title {
+  color: #ffffff;
+  padding-top: 30px;
+  padding-bottom: 40px;
+  line-height: 60rpx;
+  height: 46px;
+  overflow: hidden;
+  position: relative;
+  z-index: 999;
+  text-align: center;
+  font-size: 18px;
+}
+.tips {
+  color: #ffffff;
+  font-size: 12px;
+  text-align: center;
+}
+.guide-box {
+  display: flex;
+  flex-wrap: wrap;
+  text-align: center;
+  padding: 20px 5vw;
+}
+.single-box {
+  width: 35vw;
+  height: 33vw;
+  background-color: rgba(0, 0, 0, 0.55);
+  text-align: center;
+  vertical-align: top;
+  margin: 5vw;
+  margin-bottom: 30px;
+}
+.icon {
+  display: block;
+  width: 50px;
+  height: 50px;
+  padding-top: 10px;
+  margin: 0 auto 0;
+}
+.label {
+  display: block;
+  padding-top: 12px;
+  color: #cfe4ff;
+  font-size: 16px;
+}
+.desc {
+  display: block;
+  margin-top: 2px;
+  color: #cfe4ff;
+  font-size: 16px;
+  white-space: nowrap;
 }
 </style>

src/views/live/index.vue

@@ -21,7 +21,6 @@ import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
 import NavBar from '@/layout/common/topInfo.vue';
 import footInfo from '@/layout/common/footInfo.vue';
 import liveList from './parts/liveList.vue';
-const jwt = require('jsonwebtoken');
 export default {
   name: 'index',
   props: {},
@@ -40,25 +39,9 @@ export default {
       navShow: true,
     };
   },
-  created() {
-    if (this.token) {
-      this.sesstoken();
-    }
-  },
-  methods: {
-    ...mapMutations(['setUser']),
-    sesstoken() {
-      sessionStorage.setItem('token', this.token);
-      let user = jwt.decode(this.token);
-      this.setUser(user);
-    },
-  },
-  computed: {
-    ...mapState(['user']),
-    token() {
-      return this.$route.query.token;
-    },
-  },
+  created() {},
+  methods: {},
+  computed: {},
   mounted() {
     this.title = this.$route.meta.title;
     this.isleftarrow = this.$route.meta.isleftarrow;

src/views/live/roomDetail.vue

@@ -145,6 +145,7 @@ export default {
     ...room(['lookuserFetch', 'fetch', 'lookusercount', 'lookquery', 'lookupdate', 'lookrecord']),
     ...chat(['query', 'create']),
     async recordSave() {
+      console.log(2121);
       let data = {};
       data.type = '1';
       data.roomid = this.id;

src/views/record/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div id="index">
+    <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">
+          <liveList></liveList>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
+import NavBar from '@/layout/common/topInfo.vue';
+import liveList from './parts/liveList.vue';
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    NavBar,
+    liveList, //直播列表
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '往期讲堂',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {},
+  mounted() {
+    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>

src/views/record/parts/liveList.vue

@@ -0,0 +1,127 @@
+<template>
+  <div id="liveList">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col class="list" :span="12" v-for="(item, index) in list" :key="index">
+          <!-- <el-col :span="18" class="left">
+            <p class="textOver">{{ item.title }}</p>
+            <p>
+              举办城市:<span>{{ item.province }}{{ item.places }}</span>
+            </p>
+            <p>
+              直播时间:<span>{{ item.start_time }}</span>
+            </p>
+          </el-col>
+          <el-col :span="6" class="right">
+            <p @click="$router.push({ path: '/live/roomDetail', query: { id: item.id, roomname: item.roomname } })" v-if="item.roomname">进入房间</p>
+            <p @click="$router.push({ path: '/live/detail', query: { id: item.id } })" v-else>进入房间</p>
+            <p @click="$router.push({ path: '/onlive/roomInfo', query: { roomname: item.roomname } })" v-if="item.roomname">房间详情</p>
+          </el-col> -->
+          <el-col :span="24" class="detail" @click.native="$router.push({ path: '/onlive/videoinfo', query: { id: item.id } })">
+            <el-image :src="item.filedir"></el-image>
+            <p class="textOver">{{ item.title }}</p>
+            <van-col :span="24" class="starttime"><van-icon name="underway-o" />主讲人:{{ item.username }}</van-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: room } = createNamespacedHelpers('room');
+export default {
+  name: 'liveList',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      list: [],
+    };
+  },
+  created() {
+    this.searchInfo();
+  },
+  methods: {
+    ...room({ roomQuery: 'query' }),
+    async searchInfo() {
+      const info = {};
+      info.ishis = '1';
+      let res = await this.roomQuery(info);
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  padding: 10px;
+}
+// .list {
+//   background: #fff;
+//   padding: 10px;
+//   border-radius: 5px;
+//   margin: 0 0 10px 0;
+//   .left {
+//     font-size: 16px;
+//     color: #ccc;
+//     p {
+//       padding: 0 0 10px 0;
+//       span {
+//         color: #000;
+//       }
+//     }
+//     p:first-child {
+//       color: #000;
+//     }
+//   }
+//   .right {
+//     text-align: center;
+//     p {
+//       background: #409eff;
+//       color: #fff;
+//       padding: 5px 8px;
+//       border-radius: 5px;
+//       margin: 0 0 10px 0;
+//     }
+//   }
+// }
+.list {
+  padding: 5px;
+  height: 140px;
+  margin: 0 0 5px 0;
+}
+.detail {
+  border-radius: 5px;
+  height: 140px;
+  border: 1px solid #f5f5f5;
+}
+/deep/.el-image {
+  overflow: hidden;
+  border-radius: 5px;
+  height: 100px;
+}
+.detail p {
+  font-size: 12px;
+}
+.starttime {
+  font-size: 12px;
+}
+/deep/.van-icon::before {
+  font-size: 10px;
+  margin-right: 3px;
+}
+</style>

src/views/record/videoDetail.vue

@@ -0,0 +1,152 @@
+<template>
+  <div id="videoDetail">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="video">
+          <video id="player-container-id" preload="auto" controls="controls" style="height: 200px; width: 100%;">
+            您的浏览器不支持 video 标签。
+          </video>
+        </el-col>
+        <el-col :span="24" class="chat">
+          <van-col :span="24">
+            <van-swipe :autoplay="3000">
+              <van-swipe-item v-for="(advert, index) in roomInfos.adverts" :key="index">
+                <img width="100%" height="100px" v-lazy="advert.imgdir" @click="imgclick(advert.imgurl)" />
+              </van-swipe-item>
+            </van-swipe>
+          </van-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: room } = createNamespacedHelpers('room');
+
+export default {
+  name: 'videoDetail',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      file_path: '',
+      roomInfos: {},
+    };
+  },
+  created() {
+    this.seachInfo();
+  },
+  watch: {
+    options: {
+      handler(newV, oldV) {
+        this.$nextTick(() => {
+          this.loadJS();
+        });
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {
+    ...room(['fetch']),
+    async seachInfo() {
+      // 根据房间id查询房间详细信息
+      let result = await this.fetch(this.id);
+      if (this.$checkRes(result)) {
+        console.log(result.data);
+        this.$set(this, `roomInfos`, result.data);
+      }
+    },
+    onoptions(cur, old) {
+      this.$nextTick(() => {
+        this.loadJS();
+      });
+    },
+    onPlay() {
+      const player = TCPlayer('player-container-id', {
+        // player-container-id 为播放器容器ID，必须与html中一致
+        fileID: this.roomInfos.file_id, // 请传入需要播放的视频filID 必须
+        appID: '1400380125', // 请传入点播账号的appID 必须
+        //其他参数请在开发文档中查看
+      });
+    },
+    loadTcScript(callback) {
+      this.loadScript(callback, {
+        id: 'tcPlayerScriptId',
+        url: '//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js',
+      });
+    },
+    loadScript(callback, params) {
+      if (document.getElementById(params.id)) {
+        callback();
+      } else {
+        const script = document.createElement('script');
+        script.async = true;
+        script.src = params.url;
+        script.id = params.id;
+        script.onload = () => {
+          callback();
+        };
+        document.body.appendChild(script);
+      }
+    },
+    loadJS() {
+      if (window.TCPlayer) {
+        this.onPlay();
+      } else {
+        this.loadTcScript(() => {
+          this.onPlay();
+        });
+      }
+    },
+  },
+  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>
+@import url('//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css');
+.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>