1

src/views/service/index.vue

@@ -97,9 +97,16 @@
           </el-col> -->
         </el-col>
         <el-col :span="24" class="main1">
-          <!-- <el-col :span="24" class="main1top">
-            技术交流
-          </el-col> -->
+          <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.type"> </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="main1info">
             <van-tabs v-model="active">
               <van-tab title="专家问诊">
@@ -117,9 +124,6 @@
             </van-tabs>
           </el-col>
         </el-col>
-        <!-- <el-col :span="24" class="foot">
-          <footInfo></footInfo>
-        </el-col> -->
       </el-col>
     </el-row>
   </div>
@@ -167,6 +171,15 @@ export default {
       twoList: [],
       threeList: [],
       fourList: [],
+      // 查询
+      typelist: [
+        { name: '专家问诊', type: '1' },
+        { name: '行业研究', type: '2' },
+        { name: '嘉宾访谈', type: '3' },
+        { name: '项目路演', type: '4' },
+      ],
+      name: '',
+      type: '',
     };
   },
   async created() {
@@ -191,23 +204,62 @@ export default {
       for (const i of column) {
         if (i.name == '专家问诊') {
           const res = await this.newsList({ column_id: i._id });
-          if (this.$checkRes(res)) {
-            this.$set(this, `oneList`, res.data);
-          }
+          if (this.$checkRes(res)) this.$set(this, `oneList`, res.data);
         } else if (i.name == '行业研究') {
           const res = await this.newsList({ column_id: i._id });
-          if (this.$checkRes(res)) {
-            this.$set(this, `twoList`, res.data);
-          }
+          if (this.$checkRes(res)) this.$set(this, `twoList`, res.data);
         }
       }
       const jiabin = await this.danceQuery();
-      if (this.$checkRes(jiabin)) {
-        this.$set(this, `threeList`, jiabin.data);
-      }
+      if (this.$checkRes(jiabin)) this.$set(this, `threeList`, jiabin.data);
       const luyan = await this.adshowQuery();
-      if (this.$checkRes(luyan)) {
-        this.$set(this, `fourList`, luyan.data);
+      if (this.$checkRes(luyan)) this.$set(this, `fourList`, luyan.data);
+    },
+    // 输入框是搜索
+    async searchList({ ...info } = {}) {
+      if (this.name) {
+        info.title = this.name;
+        let type = this.type;
+        if (type == 1) {
+          let expertCol = this.columnList.find(i => i.name == '专家问诊');
+          const res = await this.newsList({ column_id: expertCol._id, ...info });
+          if (this.$checkRes(res)) this.$set(this, `oneList`, res.data);
+        } else if (type == 2) {
+          let workCol = this.columnList.find(i => i.name == '行业研究');
+          const res = await this.newsList({ column_id: workCol._id, ...info });
+          if (this.$checkRes(res)) this.$set(this, `twoList`, res.data);
+        } else if (type == 3) {
+          const jiabin = await this.danceQuery({ ...info });
+          if (this.$checkRes(jiabin)) this.$set(this, `threeList`, jiabin.data);
+        } else if (type == 4) {
+          const luyan = await this.adshowQuery({ ...info });
+          if (this.$checkRes(luyan)) this.$set(this, `fourList`, luyan.data);
+        }
+      } else {
+        this.search();
+      }
+    },
+    // 选择类型
+    typeChange(value) {
+      if (value) {
+        this.active = '';
+        this.$set(this, `type`, value);
+        let index = this.typelist.findIndex(i => i.type == 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',
+        });
       }
     },
     // 智慧推荐
@@ -304,12 +356,37 @@ export default {
   // }
 }
 .main1 {
-  .main1top {
-    height: 46px;
-    line-height: 46px;
-    text-align: center;
-    background: #2c69fe;
-    color: #fff;
+  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;
+      }
+    }
+  }
+  .main1info {
+    position: absolute;
+    width: 100%;
+    top: 54px;
+    background: #f9fafc;
   }
 }
 .foot {