11

src/store/index.js

@@ -10,6 +10,9 @@ import news from './live/news';
 // 项目路演
 import newsroadshow from './live/newsroadshow';
 import newsguidance from './live/newsguidance';
+//科技在线
+import channel from './live/channel';
+
 // 11-3新闻资讯
 import journcolumn from './market/journcolumn';
 import journnews from './market/journnews';
@@ -73,5 +76,6 @@ export default new Vuex.Store({
     // 11-3新闻资讯
     journcolumn,
     journnews,
+    channel,
   },
 });

src/store/live/channel.js

@@ -0,0 +1,42 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  channelInfo: `/api/live/channel`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit, ...info } = {}) {
+    const res = await this.$axios.$get(`${api.channelInfo}`, {
+      skip,
+      limit,
+      ...info,
+    });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.channelInfo}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.channelInfo}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...data }) {
+    const res = await this.$axios.$post(`${api.channelInfo}/update/${id}`, data);
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.channelInfo}/${payload}`);
+    return res;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/views/channel/index.vue

@@ -1,8 +1,25 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24">
-        <p>列表</p>
+      <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">
+          <el-col :span="24" class="con">
+            <el-col :span="24" class="list" v-for="(item, index) in lists" :key="index">
+              <el-col :span="11" class="video">
+                <video :src="item.videodata[0].url" controls style="width:100%;height:100%"></video>
+                <!-- <el-col :span="24" v-else style="width:100%;height:100%;background:gray"></el-col> -->
+              </el-col>
+              <el-col :span="13" class="text">
+                <el-col :span="24" class="title">{{ item.title }}</el-col>
+                <el-col :span="24" class="desc">{{ item.desc }}</el-col>
+                <el-col :span="24" class="time">{{ item.create_time }}</el-col>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -10,23 +27,103 @@
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+import NavBar from '@/layout/common/topInfo.vue';
+const { mapActions: channel } = createNamespacedHelpers('channel');
+
 export default {
   metaInfo() {
     return { title: this.$route.meta.title };
   },
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    NavBar,
+  },
   data: function() {
-    return {};
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      //列表
+      lists: [],
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...channel(['query', 'fetch']),
+    async search() {
+      const res = await this.query();
+      console.log(res);
+      if (this.$checkRes(res)) {
+        this.$set(this, `lists`, res.data);
+      }
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
   },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
   watch: {},
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  .con {
+    padding: 0 10px;
+    background: gainsboro;
+    min-height: 620px;
+    .list {
+      padding: 10px;
+      margin: 20px 0px 0px 0px;
+      background-color: #fff;
+      height: 120px;
+      .video {
+        height: 100%;
+      }
+      .text {
+        padding-left: 15px;
+        .title {
+          font-size: 18px;
+          font-weight: bolder;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .desc {
+          margin-top: 9px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+        .time {
+          margin-top: 9px;
+        }
+      }
+    }
+  }
+}
+</style>