1

src/views/market/index.vue

@@ -5,25 +5,34 @@
         <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="技术成果">
-              <achieve :list="achieveList" @detailBtn="detailBtn"></achieve>
-            </van-tab>
-            <van-tab title="科技需求">
-              <technology :list="technologyList" @detailBtn="detailBtn"></technology>
-            </van-tab>
-            <van-tab title="商务服务">
-              <business :list="businessList" @detailBtn="detailBtn"></business>
-            </van-tab>
-            <van-tab title="专家智库">
-              <expert :list="expertList" @detailBtn="expertBtn"></expert>
-            </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.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="data">
+            <van-tabs v-model="active">
+              <van-tab title="技术成果">
+                <achieve :list="achieveList" @detailBtn="detailBtn"></achieve>
+              </van-tab>
+              <van-tab title="科技需求">
+                <technology :list="technologyList" @detailBtn="detailBtn"></technology>
+              </van-tab>
+              <van-tab title="商务服务">
+                <business :list="businessList" @detailBtn="detailBtn"></business>
+              </van-tab>
+              <van-tab title="专家智库">
+                <expert :list="expertList" @detailBtn="expertBtn"></expert>
+              </van-tab>
+            </van-tabs>
+          </el-col>
         </el-col>
-        <!-- <el-col :span="24" class="foot">
-          <footInfo></footInfo>
-        </el-col> -->
       </el-col>
     </el-row>
   </div>
@@ -63,7 +72,7 @@ export default {
       // 返回
       navShow: true,
       // 显示菜单
-      active: '1',
+      active: 0,
       // 技术成果
       achieveList: [],
       // 科技需求
@@ -72,6 +81,15 @@ export default {
       businessList: [],
       // 专家智库
       expertList: [],
+      // 查询
+      typeList: [
+        { name: '技术成果', type: '0' },
+        { name: '科技需求', type: '1' },
+        { name: '商务服务', type: '2' },
+        { name: '专家智库', type: '3' },
+      ],
+      type: '',
+      name: '',
     };
   },
   async created() {
@@ -98,6 +116,49 @@ export default {
     expertBtn(data) {
       this.$router.push({ path: '/market/exportDetail', query: { id: data.id } });
     },
+    // 查询
+    async searchList({ ...info } = {}) {
+      let type = this.type;
+      if (this.name) {
+        info.name = this.name;
+        if (type == 0) {
+          let res = await this.query({ skip: 0, type: '1', status: '1', ...info });
+          if (this.$checkRes(res)) this.$set(this, `achieveList`, res.data);
+        } else if (type == 1) {
+          let res = await this.query({ skip: 0, type: '0', status: '1', ...info });
+          if (this.$checkRes(res)) this.$set(this, `technologyList`, res.data);
+        } else if (type == 2) {
+          let res = await this.query({ skip: 0, type: '2', status: '1', ...info });
+          if (this.$checkRes(res)) this.$set(this, `businessList`, res.data);
+        } else if (type == 3) {
+          let res = await this.expertquery({ skip: 0, status: '1', ...info });
+          if (this.$checkRes(res)) this.$set(this, `expertList`, res.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',
+        });
+      }
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -118,6 +179,41 @@ export default {
   min-height: 667px;
   position: relative;
   background-color: #f9fafc;
+  .down {
+    position: relative;
+    .search {
+      position: fixed;
+      width: 100%;
+      z-index: 999;
+      border-bottom: 1px solid #ccc;
+      background-color: #fff;
+      .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;