1

src/views/live/index.vue

@@ -6,30 +6,23 @@
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          <!-- <van-tabs v-model="active">
-            <van-tab title="科技成果在线">
-              <product :province="province" :place="place" news="1"></product>
-            </van-tab>
-            <van-tab title="人才对接在线">
-              <personal :province="province" :place="place" news="2"></personal>
-            </van-tab>
-            <van-tab title="专家培训在线">
-              <exports :province="province" :place="place" news="3"></exports>
-            </van-tab>
-          </van-tabs> -->
-          <span v-if="columnview == '1'">
+          <span v-if="columnview == '0'">
             <product :province="province" :place="place"></product>
           </span>
-          <span v-else-if="columnview == '2'">
+          <span v-else-if="columnview == '1'">
             <personal :province="province" :place="place"></personal>
           </span>
-          <span v-else-if="columnview == '3'">
+          <span v-else-if="columnview == '2'">
             <exports :province="province" :place="place"></exports>
           </span>
         </el-col>
-        <!-- <el-col :span="24" class="foot">
-          <footInfo @changetxt="changetxt"></footInfo>
-        </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>
@@ -58,18 +51,18 @@ export default {
   data: function() {
     return {
       // 头部标题
-      title: '',
+      title: '科技成果在线',
       // meta为true
       isleftarrow: '',
       // 返回
       navShow: true,
-      active: 0,
       // 省
       province: [],
       // 市
       place: [],
       // 显示模块
-      columnview: '1',
+      columnview: '0',
+      active: 0,
     };
   },
   async created() {
@@ -95,19 +88,17 @@ export default {
         }
       }
     },
-    changetxt(data) {
-      this.$set(this, `columnview`, data.code);
-      console.log(data);
-    },
     // 选择栏目
-    changecolumn() {
-      if (this.columnview == '1') {
+    changeType(value) {
+      if (value == '0') {
         this.$set(this, `title`, '科技成果在线');
-      } else if (this.columnview == '2') {
+      } else if (value == '1') {
         this.$set(this, `title`, '人才对接在线');
-      } else if (this.columnview == '3') {
+      } else if (value == '2') {
         this.$set(this, `title`, '专家培训在线');
       }
+      this.$set(this, `columnview`, value);
+      this.$set(this, `active`, value);
     },
   },
   computed: {
@@ -121,20 +112,11 @@ export default {
       immediate: true,
       deep: true,
       handler(val) {
-        // console.log(val);
         this.sesstoken();
       },
     },
-    columnview: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        this.changecolumn();
-      },
-    },
   },
   mounted() {
-    // this.title = this.$route.meta.title;
     this.isleftarrow = this.$route.meta.isleftarrow;
   },
 };

src/views/live/parts/product.vue

@@ -2,17 +2,29 @@
   <div id="product">
     <el-row>
       <el-col :span="24" class="main">
-        <van-tabs v-model="active1">
-          <van-tab title="正在直播">
-            <liveList :list="listNow" :total="nowTotal" status="1" @query="searchList" :province="province" :place="place"></liveList>
-          </van-tab>
-          <van-tab title="下期预告">
-            <liveList :list="listPre" :total="nowTotal" status="0" @query="searchList" :province="province" :place="place"></liveList>
-          </van-tab>
-          <van-tab title="往期直播">
-            <liveList :list="listPast" :total="nowTotal" status="2" @query="searchList" :province="province" :place="place"></liveList>
-          </van-tab>
-        </van-tabs>
+        <el-col :span="24" class="search">
+          <el-col :span="6" class="type">
+            <el-select v-model="status" placeholder="请选择" clearable @change="typeChange">
+              <el-option v-for="(item, index) in typelist" :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="list">
+          <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>
@@ -40,16 +52,22 @@ export default {
   },
   data: function() {
     return {
-      active1: 0,
+      active: 0,
       // 下期预告
       listPre: [],
-      preTotal: 0,
       // 正在直播
       listNow: [],
-      nowTotal: 0,
       // 往期直播
       listPast: [],
-      pastTotal: 0,
+      // 查询
+      name: '',
+      status: '',
+      // 类型
+      typelist: [
+        { name: '正在直播', status: '0' },
+        { name: '下期预告', status: '1' },
+        { name: '已往直播', status: '2' },
+      ],
     };
   },
   async created() {
@@ -65,17 +83,33 @@ export default {
       let res = await this.dockQuery({ is_allowed: 1, skip, status, ...info });
       if (res.errcode === 0) {
         if (status == '0') {
-          this.$set(this, `preTotal`, res.total);
           this.$set(this, `listPre`, res.data);
         } else if (status == '1') {
-          this.$set(this, `nowTotal`, res.total);
           this.$set(this, `listNow`, res.data);
         } else if (status == '2') {
-          this.$set(this, `pastTotal`, res.total);
           this.$set(this, `listPast`, res.data);
         }
       }
     },
+    // 输入框是搜索
+    async searchTxt({ ...info } = {}) {
+      info.status = this.status == 0 ? 1 : this.status == 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.typelist.findIndex(i => i.status == this.status);
+          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);
@@ -85,6 +119,29 @@ export default {
         }
       }
     },
+    // 选择类型
+    typeChange(value) {
+      if (value) {
+        this.active = '';
+        this.$set(this, `status`, value);
+        let index = this.typelist.findIndex(i => i.status == value);
+        if (index) {
+          this.$set(this, `active`, index);
+        }
+      }
+    },
+    // 输入框查询
+    onSearch(data) {
+      this.$set(this, `name`, data);
+      if (this.status) {
+        this.searchTxt();
+      } else {
+        this.$notify({
+          message: '请选择直播状态',
+          type: 'danger',
+        });
+      }
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -109,4 +166,40 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  position: relative;
+  .search {
+    position: fixed;
+    width: 100%;
+    z-index: 999;
+    border-bottom: 1px solid #ccc;
+    .type {
+      /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;
+      }
+    }
+  }
+  .list {
+    position: absolute;
+    width: 100%;
+    top: 54px;
+    background: #f9fafc;
+    padding: 0 0 40px 0;
+  }
+}
+</style>