1

src/store/index.js

@@ -12,6 +12,7 @@ import newsroadshow from './live/newsroadshow';
 import newsguidance from './live/newsguidance';
 //科技在线
 import channel from './live/channel';
+import channelVideo from './live/channelVideo';
 
 // 11-3新闻资讯
 import journcolumn from './market/journcolumn';
@@ -77,5 +78,6 @@ export default new Vuex.Store({
     journcolumn,
     journnews,
     channel,
+    channelVideo,
   },
 });

src/store/live/channelVideo.js

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

src/views/channel/detail.vue

@@ -29,13 +29,8 @@
               <span>选集</span>
             </el-col>
             <el-col :span="24" class="two">
-              <!-- <van-swipe :loop="false" :width="150">
-                <van-swipe-item class="list" v-for="(item, index) in form.videodata" :key="index" @click="searchvideo(index, item)">
-                  <p :class="{ active: changeColor == index }">{{ item.name }}</p>
-                </van-swipe-item>
-              </van-swipe> -->
               <van-swipe>
-                <van-swipe-item class="list" v-for="(item, index) in form.videodata" :key="index" @click="searchvideo(index, item)">
+                <van-swipe-item class="list" v-for="(item, index) in videodata" :key="index" @click="changevideo(index, item)">
                   <p :class="{ active: changeColor == index }">{{ item.name }}</p>
                 </van-swipe-item>
               </van-swipe>
@@ -51,6 +46,9 @@
 import { mapState, createNamespacedHelpers } from 'vuex';
 import NavBar from '@/layout/common/topInfo.vue';
 const { mapActions: channel } = createNamespacedHelpers('channel');
+const { mapActions: markettype } = createNamespacedHelpers('markettype');
+const { mapActions: channelVideo } = createNamespacedHelpers('channelVideo');
+
 export default {
   metaInfo() {
     return { title: this.$route.meta.title };
@@ -68,30 +66,51 @@ export default {
       isleftarrow: '',
       // 返回
       navShow: true,
+      // 类型
+      typelist: [],
       activeNames: ['1'],
       form: {},
-      changeColor: 0,
+      videodata: [],
       videoUrl: '',
+      changeColor: 0,
     };
   },
   async created() {
+    await this.searchtype();
     await this.search();
-    this.searchvideo('0', this.form.videodata[0]);
+    await this.searchvideo();
+    this.searchvideo('0', this.videodata[0]);
   },
   methods: {
+    ...markettype({ markettypeList: 'query' }),
     ...channel(['query', 'fetch']),
+    ...channelVideo({ videoquery: 'query' }),
     async search() {
       const res = await this.fetch(this.id);
       if (this.$checkRes(res)) {
         this.$set(this, `form`, res.data);
       }
     },
-    searchvideo(index, item) {
+    async searchvideo() {
+      const res = await this.videoquery({ user_id: this.id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `videodata`, res.data);
+      }
+    },
+    changevideo(index, item) {
       this.changeColor = index;
       this.$set(this, `videoUrl`, item.url);
     },
     back() {
-      this.$router.push({ path: 'index' });
+      this.$router.push({ path: '/channel/index' });
+    },
+    // 查询字典表
+    async searchtype() {
+      // 类型
+      let res = await this.markettypeList({ category: '04' });
+      if (this.$checkRes(res)) {
+        this.$set(this, `typelist`, res.data);
+      }
     },
   },
   computed: {

src/views/channel/index.vue

@@ -6,22 +6,17 @@
           <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 list" :key="index" @click.native="show(item)">
-              <el-col :span="11" class="video">
-                <el-image :src="item.image_path">
-                  <div slot="error" class="image-slot">
-                    <el-image :src="noimage"> </el-image>
-                  </div>
-                </el-image>
-              </el-col>
-              <el-col :span="13" class="text">
-                <p class="title textOver">{{ item.title }}</p>
-                <p class="desc">{{ item.desc }}</p>
-                <p class="time textOver">{{ item.create_time }}</p>
-              </el-col>
-            </el-col>
-          </el-col>
+          <van-tabs v-model="active">
+            <van-tab title="创新成果">
+              <list :channellist="onelist"></list>
+            </van-tab>
+            <van-tab title="科技普及">
+              <list :channellist="twolist"></list>
+            </van-tab>
+            <van-tab title="专家讲堂">
+              <list :channellist="threelist"></list>
+            </van-tab>
+          </van-tabs>
         </el-col>
       </el-col>
     </el-row>
@@ -31,8 +26,9 @@
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
 import NavBar from '@/layout/common/topInfo.vue';
+import list from './parts/list.vue';
 const { mapActions: channel } = createNamespacedHelpers('channel');
-
+const { mapActions: markettype } = createNamespacedHelpers('markettype');
 export default {
   metaInfo() {
     return { title: this.$route.meta.title };
@@ -41,6 +37,7 @@ export default {
   props: {},
   components: {
     NavBar,
+    list,
   },
   data: function() {
     return {
@@ -50,24 +47,47 @@ export default {
       isleftarrow: '',
       // 返回
       navShow: true,
-      //列表
-      list: [],
-      noimage: require('@/assets/kjzx.jpg'),
+      active: 0,
+      onelist: [],
+      twolist: [],
+      threelist: [],
+      // 类型
+      typelist: [],
     };
   },
-  created() {
-    this.search();
+  async created() {
+    await this.searchtype();
+    await this.search();
   },
   methods: {
-    ...channel(['query', 'fetch']),
+    ...markettype({ markettypeList: 'query' }),
+    ...channel(['query', 'delete', 'update', 'create']),
     async search() {
-      const res = await this.query();
+      let type = this.typelist;
+      let one = type.find(f => f.code == '040');
+      let res = await this.query({ type: one.id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `onelist`, res.data);
+      }
+      let two = type.find(f => f.code == '041');
+      res = await this.query({ type: two.id });
       if (this.$checkRes(res)) {
-        this.$set(this, `list`, res.data);
+        this.$set(this, `twolist`, res.data);
+      }
+      let three = type.find(f => f.code == '042');
+      res = await this.query({ type: three.id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `threelist`, res.data);
       }
     },
-    show(data) {
-      this.$router.push({ path: '/channel/detail', query: { id: data.id } });
+
+    // 查询字典表
+    async searchtype() {
+      // 类型
+      let res = await this.markettypeList({ category: '04' });
+      if (this.$checkRes(res)) {
+        this.$set(this, `typelist`, res.data);
+      }
     },
   },
   computed: {
@@ -98,57 +118,4 @@ export default {
   height: 46px;
   overflow: hidden;
 }
-.main {
-  .con {
-    padding: 10px;
-    // background: #f1f1f1;
-    min-height: 620px;
-    .list {
-      padding: 10px;
-      background-color: #fff;
-      border-radius: 5px;
-      margin: 0 0 10px 0;
-      .video {
-        height: 100px;
-        overflow: hidden;
-        .el-image {
-          width: 100%;
-          height: 100%;
-          border-radius: 10px;
-          /deep/.image-slot {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-      .text {
-        height: 100px;
-        overflow: hidden;
-        position: relative;
-        padding: 0 0 0 10px;
-        .title {
-          font-size: 16px;
-          font-weight: bold;
-        }
-        .desc {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 3;
-          -webkit-box-orient: vertical;
-          padding: 3px 0;
-          font-size: 12px;
-          color: #666;
-        }
-        .time {
-          position: absolute;
-          bottom: 0px;
-          width: 95%;
-          font-size: 12px;
-          color: #666;
-        }
-      }
-    }
-  }
-}
 </style>

src/views/channel/parts/list.vue

@@ -0,0 +1,98 @@
+<template>
+  <div id="list">
+    <el-row>
+      <el-col :span="24" class="con">
+        <el-col :span="24" class="list" v-for="(item, index) in channellist" :key="index" @click.native="show(item)">
+          <el-col :span="11" class="video">
+            <el-image :src="noimage"> </el-image>
+          </el-col>
+          <el-col :span="13" class="text">
+            <p class="title textOver">{{ item.title }}</p>
+            <p class="desc">{{ item.desc }}</p>
+            <p class="time textOver">{{ item.create_time }}</p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'list',
+  props: {
+    channellist: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {
+      noimage: require('@/assets/kjzx.jpg'),
+    };
+  },
+  created() {},
+  methods: {
+    show(data) {
+      this.$router.push({ path: '/channel/detail', query: { id: data.id } });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.con {
+  padding: 10px;
+  // background: #f1f1f1;
+  min-height: 620px;
+  .list {
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 5px;
+    margin: 0 0 10px 0;
+    .video {
+      height: 100px;
+      overflow: hidden;
+      .el-image {
+        width: 100%;
+        height: 100%;
+        border-radius: 10px;
+        /deep/.image-slot {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text {
+      height: 100px;
+      overflow: hidden;
+      position: relative;
+      padding: 0 0 0 10px;
+      .title {
+        font-size: 16px;
+        font-weight: bold;
+      }
+      .desc {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        padding: 3px 0;
+        font-size: 12px;
+        color: #666;
+      }
+      .time {
+        position: absolute;
+        bottom: 0px;
+        width: 95%;
+        font-size: 12px;
+        color: #666;
+      }
+    }
+  }
+}
+</style>