11

src/router/index.js

@@ -17,34 +17,34 @@ const routes = [
   {
     path: '/live/index',
     name: 'live_index',
-    meta: { title: '直播大厅', isleftarrow: false },
+    meta: { title: '直播大厅', isleftarrow: true },
     component: () => import('../views/live/index.vue'),
   },
-  {
-    path: '/live/detail',
-    name: 'detail',
-    meta: { title: '视频详情', isleftarrow: true },
-    component: () => import('../views/live/detail.vue'),
-  },
-  // 1005视频详情
-  {
-    path: '/live/detailtwo',
-    name: 'detailtwo',
-    meta: { title: '视频详情', isleftarrow: true },
-    component: () => import('../views/live/detailtwo.vue'),
-  },
-  {
-    path: '/live/personalDetail',
-    name: 'personalDetail',
-    meta: { title: '人才招聘详情', isleftarrow: true },
-    component: () => import('../views/live/personalDetail.vue'),
-  },
-  {
-    path: '/live/exportsDetail',
-    name: 'exportsDetail',
-    meta: { title: '专家培训详情', isleftarrow: true },
-    component: () => import('../views/live/exportsDetail.vue'),
-  },
+  // {
+  //   path: '/live/detail',
+  //   name: 'detail',
+  //   meta: { title: '视频详情', isleftarrow: true },
+  //   component: () => import('../views/live/detail.vue'),
+  // },
+  // // 1005视频详情
+  // {
+  //   path: '/live/detailtwo',
+  //   name: 'detailtwo',
+  //   meta: { title: '视频详情', isleftarrow: true },
+  //   component: () => import('../views/live/detailtwo.vue'),
+  // },
+  // {
+  //   path: '/live/personalDetail',
+  //   name: 'personalDetail',
+  //   meta: { title: '人才招聘详情', isleftarrow: true },
+  //   component: () => import('../views/live/personalDetail.vue'),
+  // },
+  // {
+  //   path: '/live/exportsDetail',
+  //   name: 'exportsDetail',
+  //   meta: { title: '专家培训详情', isleftarrow: true },
+  //   component: () => import('../views/live/exportsDetail.vue'),
+  // },
   // 科技超市
   {
     path: '/market/index',

src/views/live copy/index.vue

@@ -0,0 +1,138 @@
+<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">
+          <span v-if="columnview == '0'">
+            <product :province="province" :place="place"></product>
+          </span>
+          <span v-else-if="columnview == '1'">
+            <personal :province="province" :place="place"></personal>
+          </span>
+          <span v-else-if="columnview == '2'">
+            <exports :province="province" :place="place"></exports>
+          </span>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <van-tabbar v-model="active" @change="changeType">
+            <van-tabbar-item icon="cluster-o">科技成果在线</van-tabbar-item>
+            <van-tabbar-item icon="friends-o" disabled>人才对接在线</van-tabbar-item>
+            <van-tabbar-item icon="manager-o">专家培训在线</van-tabbar-item>
+          </van-tabbar>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import product from './parts/product.vue';
+import personal from './parts/personal.vue';
+import exports from './parts/exports.vue';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+const { mapActions: place } = createNamespacedHelpers('place');
+const jwt = require('jsonwebtoken');
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    NavBar,
+    // footInfo,
+    product,
+    personal,
+    exports,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '科技成果在线',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      // 省
+      province: [],
+      // 市
+      place: [],
+      // 显示模块
+      columnview: '0',
+      active: 0,
+    };
+  },
+  async created() {
+    await this.searchPlace();
+  },
+  methods: {
+    ...mapMutations(['setUser']),
+    ...place({ palcequery: 'query', transactiondtetle: 'delete' }),
+    async searchPlace() {
+      let res1 = await this.palcequery({ level: 1 });
+      let arr = await this.palcequery({ level: 2 });
+      if (res1 || arr) {
+        this.$set(this, `province`, res1.data);
+        this.$set(this, `place`, arr.data);
+      }
+    },
+    sesstoken() {
+      if (this.token) {
+        sessionStorage.setItem('token', this.token);
+        let user = jwt.decode(this.token);
+        if (user && user.uid) {
+          this.setUser(user);
+        }
+      }
+    },
+    // 选择栏目
+    changeType(value) {
+      if (value == '0') {
+        this.$set(this, `title`, '科技成果在线');
+      } else if (value == '1') {
+        this.$set(this, `title`, '人才对接在线');
+      } else if (value == '2') {
+        this.$set(this, `title`, '专家培训在线');
+      }
+      this.$set(this, `columnview`, value);
+      this.$set(this, `active`, value);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    token() {
+      return this.$route.query.token;
+    },
+  },
+  watch: {
+    token: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        this.sesstoken();
+      },
+    },
+  },
+  mounted() {
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+  position: relative;
+  z-index: 999;
+}
+</style>

src/views/live copy/parts/liveList.vue

@@ -0,0 +1,108 @@
+<template>
+  <div id="liveList">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="left">
+            <p class="textOver">{{ item.title }}</p>
+            <p>
+              举办城市:<span>{{ getprovince(item.province) }}-{{ getplace(item.place) }}</span>
+            </p>
+            <p>
+              直播时间:<span>{{ item.start_time }}</span>
+            </p>
+          </el-col>
+          <el-col :span="24" style="text-align:center">
+            <span v-if="item.room_id == '1005'">
+              <el-button type="primary" size="mini" @click="$router.push({ path: '/live/detailtwo', query: { id: item.id } })" v-if="item.status == '1'"
+                >进入房间</el-button
+              >
+            </span>
+            <span v-else>
+              <el-button type="primary" size="mini" @click="$router.push({ path: '/live/detail', query: { id: item.id } })" v-if="item.status == '1'"
+                >进入房间</el-button
+              >
+            </span>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'liveList',
+  props: {
+    list: { type: Array },
+    status: { type: String, default: '0' },
+    news: { type: String, default: '0' },
+    // 省
+    province: { type: Array, default: () => [] },
+    // 市
+    place: { type: Array, default: () => [] },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {
+    // 过滤省
+    getprovince(item) {
+      let res = this.province.find(i => i.code == item);
+      if (res) return res.name;
+    },
+    // 过滤市
+    getplace(item) {
+      let res = this.place.find(i => i.code == item);
+      if (res) return res.name;
+    },
+  },
+  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;
+    }
+  }
+}
+</style>

src/views/live/index.vue

@@ -1,26 +1,42 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24" class="style">
+      <el-col :span="24" class="con">
         <el-col :span="24" class="top">
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          <span v-if="columnview == '0'">
-            <product :province="province" :place="place"></product>
+          <span v-if="itemIndex == 0">
+            <onlineEx :province="province" :place="place"></onlineEx>
           </span>
-          <span v-else-if="columnview == '1'">
-            <personal :province="province" :place="place"></personal>
+          <span v-if="itemIndex == 1">
+            <channel :province="province" :place="place"></channel>
           </span>
-          <span v-else-if="columnview == '2'">
-            <exports :province="province" :place="place"></exports>
+          <span v-if="itemIndex == 2">
+            <span v-if="chooseText == '嘉宾访谈'">
+              <interview></interview>
+            </span>
+            <span v-else-if="chooseText == '技能培训'">
+              <skill></skill>
+            </span>
+            <!-- <training :province="province" :place="place" :chooseText="chooseText"> </training> -->
+          </span>
+          <span v-if="itemIndex == 3">
+            <roadshow :province="province" :place="place"></roadshow>
           </span>
         </el-col>
         <el-col :span="24" class="foot">
-          <van-tabbar v-model="active" @change="changeType">
-            <van-tabbar-item icon="cluster-o">科技成果在线</van-tabbar-item>
-            <van-tabbar-item icon="friends-o" disabled>人才对接在线</van-tabbar-item>
-            <van-tabbar-item icon="manager-o">专家培训在线</van-tabbar-item>
+          <van-tabbar v-model="active" @change="clickItem">
+            <van-tabbar-item icon="home-o">在线展会</van-tabbar-item>
+            <van-tabbar-item icon="search">科技频道</van-tabbar-item>
+            <van-tabbar-item icon="friends-o" class="train" @click="trainClick"
+              >培训访谈
+              <el-col :span="4" class="itemCon" v-if="show">
+                <el-col :span="24" class="text" @click.native.stop="interviewClick('嘉宾访谈')">嘉宾访谈</el-col>
+                <el-col :span="24" class="text" @click.native.stop="interviewClick('技能培训')">技能培训</el-col>
+              </el-col>
+            </van-tabbar-item>
+            <van-tabbar-item icon="setting-o">项目路演</van-tabbar-item>
           </van-tabbar>
         </el-col>
       </el-col>
@@ -29,40 +45,59 @@
 </template>
 
 <script>
-import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
 import NavBar from '@/layout/common/topInfo.vue';
-import footInfo from '@/layout/common/footInfo.vue';
-import product from './parts/product.vue';
-import personal from './parts/personal.vue';
-import exports from './parts/exports.vue';
+//在线展会
+import onlineEx from './parts/onlineEx.vue';
+//科技频道
+import channel from './parts/channel.vue';
+//嘉宾访谈
+import interview from './parts/interview.vue';
+//技能培训
+import skill from './parts/skill.vue';
+//项目路演
+import roadshow from './parts/roadshow.vue';
+import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
 const { mapActions: dock } = createNamespacedHelpers('dock');
 const { mapActions: place } = createNamespacedHelpers('place');
 const jwt = require('jsonwebtoken');
 export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
   name: 'index',
   props: {},
   components: {
+    //顶部
     NavBar,
-    // footInfo,
-    product,
-    personal,
-    exports,
+    //在线展会
+    onlineEx,
+    //科技频道
+    channel,
+    //项目路演
+    roadshow,
+    //嘉宾访谈
+    interview,
+    //技能培训
+    skill,
   },
   data: function() {
     return {
-      // 头部标题
-      title: '科技成果在线',
+      //头部标题
+      title: '在线展会',
       // meta为true
       isleftarrow: '',
       // 返回
       navShow: true,
+      //底部标签
+      active: 0,
+      //默认显示item的index值
+      itemIndex: 0,
       // 省
       province: [],
       // 市
       place: [],
-      // 显示模块
-      columnview: '0',
-      active: 0,
+      chooseText: '',
+      show: false,
     };
   },
   async created() {
@@ -88,17 +123,31 @@ export default {
         }
       }
     },
-    // 选择栏目
-    changeType(value) {
-      if (value == '0') {
-        this.$set(this, `title`, '科技成果在线');
-      } else if (value == '1') {
-        this.$set(this, `title`, '人才对接在线');
-      } else if (value == '2') {
-        this.$set(this, `title`, '专家培训在线');
+    //点击底部标签显示对应的组件
+    clickItem(index) {
+      // console.log(index);
+      this.$set(this, `itemIndex`, index);
+      if (index == 0) {
+        this.$set(this, `title`, '在线展会');
+      } else if (index == 1) {
+        this.$set(this, `title`, '科技频道');
+      } else if (index == 2) {
+        if (this.chooseText == '嘉宾访谈') {
+          this.$set(this, `title`, '培训访谈');
+        } else if (this.chooseText == '技能培训') {
+          this.$set(this, `title`, '技能培训');
+        }
+      } else if (index == 3) {
+        this.$set(this, `title`, '项目路演');
       }
-      this.$set(this, `columnview`, value);
-      this.$set(this, `active`, value);
+    },
+    //嘉宾访谈和技能培训
+    interviewClick(name) {
+      this.$set(this, `show`, false);
+      this.$set(this, `chooseText`, name);
+    },
+    trainClick() {
+      this.show = true;
     },
   },
   computed: {
@@ -123,7 +172,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.style {
+.con {
   width: 100%;
   height: 100%;
   position: relative;
@@ -135,4 +184,30 @@ export default {
   position: relative;
   z-index: 999;
 }
+.train {
+  position: relative;
+}
+// .itemCon_active {
+//   display: block;
+// }
+.itemCon {
+  width: 100px;
+  height: 87px;
+  padding: 13px;
+  // background-color: gold;
+  position: absolute;
+  left: -6px;
+  bottom: 50px;
+  box-shadow: 0px -1px 5px;
+  z-index: 999;
+  background-color: #fff;
+  .text {
+    color: #646566;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    text-align: center;
+    // background: green;
+  }
+}
 </style>

src/views/live/parts/channel.vue

@@ -0,0 +1,191 @@
+<template>
+  <div id="channel">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="input">
+          <van-search v-model="name" @search="onSearch" placeholder="请输入信息标题" />
+        </el-col>
+        <el-col :span="24" class="con">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="11" class="video">
+              <el-image :src="noimage"> </el-image>
+            </el-col>
+            <el-col :span="13" class="text">
+              <p class="title textOver">
+                <span style="color:#ff0000">[{{ item.room_id }}]</span>{{ item.title }}
+              </p>
+              <p class="desc">{{ item.desc }}</p>
+              <p class="type">所属类型：{{ getType(item.type) }}</p>
+              <p class="time textOver">{{ item.create_time }}</p>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: markettype } = createNamespacedHelpers('markettype');
+const { mapActions: channel } = createNamespacedHelpers('channel');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'channel',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      name: '',
+      //类型列表
+      typelist: [],
+      list: [],
+      noimage: require('@/assets/kjzx.jpg'),
+    };
+  },
+  async created() {
+    await this.search();
+    await this.searchtype();
+  },
+  methods: {
+    ...channel(['query', 'delete', 'update', 'create']),
+    ...markettype({ markettypeList: 'query' }),
+    //查列表
+    async search() {
+      const res = await this.query();
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+      }
+    },
+    // 查询字典表
+    async searchtype() {
+      // 类型
+      let res = await this.markettypeList({ category: '04' });
+      if (this.$checkRes(res)) {
+        this.$set(this, `typelist`, res.data);
+      }
+    },
+    //过滤类型
+    getType(type) {
+      let res = this.typelist.find(i => i.id == type);
+      if (res) return res.name;
+    },
+    //搜索
+    async onSearch({ ...info } = {}) {
+      if (this.name) {
+        info.title = this.name;
+        let res = await this.query({ ...info });
+        if (this.$checkRes(res)) {
+          this.$set(this, `list`, res.data);
+        }
+      } else {
+        this.search();
+      }
+    },
+    sesstoken() {
+      if (this.token) {
+        sessionStorage.setItem('token', this.token);
+        let user = jwt.decode(this.token);
+        if (user && user.uid) {
+          this.setUser(user);
+        }
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    token() {
+      return this.$route.query.token;
+    },
+  },
+  watch: {
+    token: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        // console.log(val);
+        this.sesstoken();
+      },
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  position: relative;
+  .input {
+    position: fixed;
+    width: 100%;
+    z-index: 999;
+    border-bottom: 1px solid #ccc;
+    .van-search {
+      padding: 10px 12px 10px 12px;
+    }
+  }
+  .con {
+    padding: 10px;
+    margin-top: 54px;
+    .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;
+        }
+        .type {
+          padding: 3px 0;
+          font-size: 13px;
+          color: #666;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .time {
+          position: absolute;
+          bottom: 0px;
+          width: 95%;
+          font-size: 12px;
+          color: #666;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/live/parts/interview.vue

@@ -0,0 +1,125 @@
+<template>
+  <div id="interview">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="input">
+          <van-search v-model="name" @search="onSearch" placeholder="请输入信息标题" />
+        </el-col>
+        <el-col :span="24" class="con">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="name textOver">
+              {{ item.title }}
+            </el-col>
+            <el-col :span="12" class="date textOver"> 发布时间：{{ item.publish_time }} </el-col>
+            <el-col :span="12" class="date textOver"> 信息来源：{{ item.orgin }} </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: newsguidance } = createNamespacedHelpers('newsguidance');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'interview',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      name: '',
+      list: [],
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...newsguidance({ danceQuery: 'query' }),
+    async search() {
+      const res = await this.danceQuery();
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        console.log(this.list);
+      }
+    },
+    //搜索
+    async onSearch({ ...info } = {}) {
+      if (this.name) {
+        info.title = this.name;
+        let res = await this.danceQuery({ ...info });
+        if (this.$checkRes(res)) {
+          this.$set(this, `list`, res.data);
+        }
+      } else {
+        this.search();
+      }
+    },
+    sesstoken() {
+      if (this.token) {
+        sessionStorage.setItem('token', this.token);
+        let user = jwt.decode(this.token);
+        if (user && user.uid) {
+          this.setUser(user);
+        }
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    token() {
+      return this.$route.query.token;
+    },
+  },
+  watch: {
+    token: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        // console.log(val);
+        this.sesstoken();
+      },
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  position: relative;
+  .input {
+    position: fixed;
+    width: 100%;
+    z-index: 999;
+    border-bottom: 1px solid #ccc;
+    .van-search {
+      padding: 10px 12px 10px 12px;
+    }
+  }
+  .con {
+    padding: 10px;
+    margin-top: 54px;
+    .list {
+      padding: 10px 0;
+      border-bottom: 1px dashed #ccc;
+      .name {
+        font-size: 18px;
+        font-weight: bold;
+      }
+      .date {
+        height: 42px;
+        line-height: 42px;
+        color: #666;
+      }
+    }
+  }
+}
+</style>

src/views/live/parts/liveList.vue

@@ -37,7 +37,6 @@ export default {
   props: {
     list: { type: Array },
     status: { type: String, default: '0' },
-    news: { type: String, default: '0' },
     // 省
     province: { type: Array, default: () => [] },
     // 市

src/views/live/parts/onlineEx.vue

@@ -0,0 +1,210 @@
+<template>
+  <div id="onlineEx">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="search">
+          <el-col :span="6" class="select">
+            <el-select v-model="statusValue" clearable placeholder="请选择" @change="selectChange">
+              <el-option v-for="(item, index) in statuslist" :key="index" :label="item.name" :value="item.status"> </el-option>
+            </el-select>
+          </el-col>
+          <el-col :span="18" class="input">
+            <van-search v-model="name" @search="onSearch" placeholder="请输入信息标题" />
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="tabs">
+          <van-tabs v-model="active">
+            <van-tab title="正在直播">
+              <liveList :list="listNow" status="1" @query="searchList" :province="province" :place="place"></liveList>
+            </van-tab>
+            <van-tab title="下期预告">
+              <liveList :list="listPre" status="0" @query="searchList" :province="province" :place="place"></liveList>
+            </van-tab>
+            <van-tab title="往期直播">
+              <liveList :list="listPast" status="2" @query="searchList" :province="province" :place="place"></liveList>
+            </van-tab>
+          </van-tabs>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
+import liveList from './liveList.vue';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+const { mapActions: place } = createNamespacedHelpers('place');
+const jwt = require('jsonwebtoken');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'onlineEx',
+  props: {
+    // 省
+    province: { type: Array, default: () => [] },
+    // 市
+    place: { type: Array, default: () => [] },
+  },
+  components: { liveList },
+  data: function() {
+    return {
+      //查询
+      name: '',
+      statusValue: '',
+      //类型列表
+      statuslist: [
+        { name: '正在直播', status: '0' },
+        { name: '下期预告', status: '1' },
+        { name: '已往直播', status: '2' },
+      ],
+      //默认的tab
+      active: 0,
+      // 下期预告
+      listPre: [],
+      // 正在直播
+      listNow: [],
+      // 往期直播
+      listPast: [],
+    };
+  },
+  async created() {
+    await this.searchList({ status: '0' });
+    await this.searchList({ status: '1' });
+    await this.searchList({ status: '2' });
+  },
+  methods: {
+    ...mapMutations(['setUser']),
+    ...dock({ dockQuery: 'query' }),
+    ...place({ palcequery: 'query', transactiondtetle: 'delete' }),
+    //查询
+    async searchList({ skip = 0, limit = 10, status, ...info } = {}) {
+      let res = await this.dockQuery({ is_allowed: 1, skip, status, ...info });
+      if (res.errcode == 0) {
+        if (status == '0') {
+          this.$set(this, `listPre`, res.data);
+          // console.log(this.listPre);
+        } else if (status == '1') {
+          this.$set(this, `listNow`, res.data);
+        } else if (status == '2') {
+          this.$set(this, `listPast`, res.data);
+        }
+      }
+    },
+    //下拉选择
+    selectChange(status) {
+      if (status) {
+        let index = this.statuslist.findIndex(i => i.status == status);
+        if (index || index == 0) {
+          this.$set(this, `active`, index);
+        }
+      }
+      // if (status) {
+      //   this.active = '';
+      //   this.$set(this, `statusValue`, status);
+      //   let index = this.statuslist.findIndex(i => i.status == status);
+      //   if (index) {
+      //     this.$set(this, `active`, index);
+      //   }
+      // }
+    },
+    //搜索
+    onSearch(data) {
+      if (this.statusValue) {
+        this.searchTxt();
+      } else {
+        this.$notify({
+          message: '请选择直播状态',
+          type: 'danger',
+        });
+      }
+    },
+    async searchTxt({ ...info } = {}) {
+      info.status = this.statusValue == 0 ? 1 : this.statusValue == 1 ? 0 : 2;
+      // console.log(info);
+      if (this.name) {
+        info.title = this.name;
+        let res = await this.dockQuery({ is_allowed: 1, ...info });
+        if (this.$checkRes(res)) {
+          let index = this.statuslist.findIndex(i => i.status == this.statusValue);
+          if (index == 0) this.$set(this, `listNow`, res.data);
+          else if (index == 1) this.$set(this, `listPre`, res.data);
+          else if (index == 2) this.$set(this, `listPast`, res.data);
+        }
+      } else {
+        this.searchList({ status: '0' });
+        this.searchList({ status: '1' });
+        this.searchList({ status: '2' });
+      }
+    },
+    sesstoken() {
+      if (this.token) {
+        sessionStorage.setItem('token', this.token);
+        let user = jwt.decode(this.token);
+        if (user && user.uid) {
+          this.setUser(user);
+        }
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    token() {
+      return this.$route.query.token;
+    },
+  },
+  watch: {
+    token: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        // console.log(val);
+        this.sesstoken();
+      },
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  position: relative;
+  .search {
+    position: fixed;
+    width: 100%;
+    z-index: 999;
+    border-bottom: 1px solid #ccc;
+    .select {
+      /deep/.el-input__inner {
+        border: none;
+        padding: 0;
+        height: 30px;
+        line-height: 30px;
+      }
+      .el-select {
+        padding: 10px 0px 0px 5px;
+      }
+      /deep/.el-input__icon {
+        line-height: 30px;
+      }
+    }
+    .input {
+      .van-search {
+        padding: 10px 12px 10px 0;
+      }
+    }
+  }
+  .tabs {
+    position: absolute;
+    width: 100%;
+    top: 54px;
+    background: #f9fafc;
+    padding: 0 0 40px 0;
+  }
+}
+</style>

src/views/live/parts/roadshow.vue

@@ -0,0 +1,124 @@
+<template>
+  <div id="roadshow">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="input">
+          <van-search v-model="name" @search="onSearch" placeholder="请输入信息标题" />
+        </el-col>
+        <el-col :span="24" class="con">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="name textOver">
+              {{ item.title }}
+            </el-col>
+            <el-col :span="12" class="date textOver"> 发布时间：{{ item.publish_time }} </el-col>
+            <el-col :span="12" class="date textOver"> 信息来源：{{ item.orgin }} </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'roadshow',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      name: '',
+      list: [],
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...newsroadshow({ adshowQuery: 'query' }),
+    async search() {
+      const res = await this.adshowQuery();
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+      }
+    },
+    //搜索
+    async onSearch({ ...info } = {}) {
+      if (this.name) {
+        info.title = this.name;
+        let res = await this.adshowQuery({ ...info });
+        if (this.$checkRes(res)) {
+          this.$set(this, `list`, res.data);
+        }
+      } else {
+        this.search();
+      }
+    },
+    sesstoken() {
+      if (this.token) {
+        sessionStorage.setItem('token', this.token);
+        let user = jwt.decode(this.token);
+        if (user && user.uid) {
+          this.setUser(user);
+        }
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    token() {
+      return this.$route.query.token;
+    },
+  },
+  watch: {
+    token: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        // console.log(val);
+        this.sesstoken();
+      },
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  position: relative;
+  .input {
+    position: fixed;
+    width: 100%;
+    z-index: 999;
+    border-bottom: 1px solid #ccc;
+    .van-search {
+      padding: 10px 12px 10px 12px;
+    }
+  }
+  .con {
+    padding: 10px;
+    margin-top: 54px;
+    .list {
+      padding: 10px 0;
+      border-bottom: 1px dashed #ccc;
+      .name {
+        font-size: 18px;
+        font-weight: bold;
+      }
+      .date {
+        height: 42px;
+        line-height: 42px;
+        color: #666;
+      }
+    }
+  }
+}
+</style>

src/views/live/parts/skill.vue

@@ -0,0 +1,130 @@
+<template>
+  <div id="skill">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="input">
+          <van-search v-model="name" @search="onSearch" placeholder="请输入信息标题" />
+        </el-col>
+        <el-col :span="24" class="con">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="name textOver">
+              {{ item.title }}
+            </el-col>
+            <el-col :span="12" class="date textOver"> 发布时间：{{ item.publish_time }} </el-col>
+            <el-col :span="12" class="date textOver"> 信息来源：{{ item.orgin }} </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+// const { mapActions: newsguidance } = createNamespacedHelpers('newsguidance');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'skill',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      name: '',
+      list: [
+        {
+          title: '技能培训',
+          publish_time: '2020-11-30',
+          orgin: '高新处',
+        },
+      ],
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    // ...newsguidance({ danceQuery: 'query' }),
+    async search() {
+      // const res = await this.danceQuery();
+      // if (this.$checkRes(res)) {
+      //   this.$set(this, `list`, res.data);
+      // }
+    },
+    //搜索
+    async onSearch({ ...info } = {}) {
+      if (this.name) {
+        info.title = this.name;
+        let res = await this.danceQuery({ ...info });
+        if (this.$checkRes(res)) {
+          this.$set(this, `list`, res.data);
+        }
+      } else {
+        this.search();
+      }
+    },
+    sesstoken() {
+      if (this.token) {
+        sessionStorage.setItem('token', this.token);
+        let user = jwt.decode(this.token);
+        if (user && user.uid) {
+          this.setUser(user);
+        }
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    token() {
+      return this.$route.query.token;
+    },
+  },
+  watch: {
+    token: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        // console.log(val);
+        this.sesstoken();
+      },
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  position: relative;
+  .input {
+    position: fixed;
+    width: 100%;
+    z-index: 999;
+    border-bottom: 1px solid #ccc;
+    .van-search {
+      padding: 10px 12px 10px 12px;
+    }
+  }
+  .con {
+    padding: 10px;
+    margin-top: 54px;
+    .list {
+      padding: 10px 0;
+      border-bottom: 1px dashed #ccc;
+      .name {
+        font-size: 18px;
+        font-weight: bold;
+      }
+      .date {
+        height: 42px;
+        line-height: 42px;
+        color: #666;
+      }
+    }
+  }
+}
+</style>