1

src/views/channel/index.vue

@@ -5,18 +5,30 @@
         <el-col :span="24" class="top">
           <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="创新成果">
-              <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 :span="24" class="down">
+          <el-col :span="24" class="search">
+            <el-col :span="6" class="type">
+              <el-select v-model="type" placeholder="请选择" clearable @change="typeChange">
+                <el-option v-for="(item, index) in typelist" :key="index" :label="item.name" :value="item.id"> </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="data">
+            <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-col>
     </el-row>
@@ -53,6 +65,8 @@ export default {
       threelist: [],
       // 类型
       typelist: [],
+      name: '',
+      type: '',
     };
   },
   async created() {
@@ -62,25 +76,63 @@ export default {
   methods: {
     ...markettype({ markettypeList: 'query' }),
     ...channel(['query', 'delete', 'update', 'create']),
-    async search() {
+    async search({ ...info } = {}) {
       let type = this.typelist;
       let one = type.find(f => f.code == '040');
-      let res = await this.query({ type: one.id });
+      let res = await this.query({ type: one.id, ...info });
       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 });
+      res = await this.query({ type: two.id, ...info });
       if (this.$checkRes(res)) {
         this.$set(this, `twolist`, res.data);
       }
       let three = type.find(f => f.code == '042');
-      res = await this.query({ type: three.id });
+      res = await this.query({ type: three.id, ...info });
       if (this.$checkRes(res)) {
         this.$set(this, `threelist`, res.data);
       }
     },
-
+    // 输入框是搜索
+    async searchList({ ...info } = {}) {
+      info.type = this.type;
+      if (this.name) {
+        info.title = this.name;
+        let res = await this.query({ ...info });
+        if (this.$checkRes(res)) {
+          let index = this.typelist.findIndex(i => i.id == this.type);
+          if (index == 0) this.$set(this, `onelist`, res.data);
+          else if (index == 1) this.$set(this, `twolist`, res.data);
+          else if (index == 2) this.$set(this, `threelist`, res.data);
+        }
+      } else {
+        this.search();
+      }
+    },
+    // 选择类型
+    typeChange(value) {
+      if (value) {
+        this.active = '';
+        this.$set(this, `type`, value);
+        let index = this.typelist.findIndex(i => i.id == value);
+        if (index) {
+          this.$set(this, `active`, index);
+        }
+      }
+    },
+    // 输入框查询
+    onSearch(data) {
+      this.$set(this, `name`, data);
+      if (this.type) {
+        this.searchList();
+      } else {
+        this.$notify({
+          message: '请选择频道类型',
+          type: 'danger',
+        });
+      }
+    },
     // 查询字典表
     async searchtype() {
       // 类型
@@ -113,6 +165,40 @@ export default {
   height: 100%;
   position: relative;
   background-color: #f9fafc;
+  .down {
+    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;
+        }
+      }
+    }
+    .data {
+      position: absolute;
+      width: 100%;
+      top: 54px;
+      background: #f9fafc;
+    }
+  }
 }
 .top {
   height: 46px;