1

src/views/journ/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="科技资讯">
-              <kjzxList :list="kjzxLists" @detailBtn="detailBtn"></kjzxList>
-            </van-tab>
-            <van-tab title="工作动态">
-              <kjzxList :list="gzdtLists" @detailBtn="detailBtn"></kjzxList>
-            </van-tab>
-            <van-tab title="通知通告">
-              <kjzxList :list="tztgLists" @detailBtn="detailBtn"></kjzxList>
-            </van-tab>
-            <van-tab title="技术前沿">
-              <kjzxList :list="jsqyLists" @detailBtn="detailBtn"></kjzxList>
-            </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 column" :key="index" :label="item.title" :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="科技资讯">
+                <kjzxList :list="kjzxLists" @detailBtn="detailBtn"></kjzxList>
+              </van-tab>
+              <van-tab title="工作动态">
+                <kjzxList :list="gzdtLists" @detailBtn="detailBtn"></kjzxList>
+              </van-tab>
+              <van-tab title="通知通告">
+                <kjzxList :list="tztgLists" @detailBtn="detailBtn"></kjzxList>
+              </van-tab>
+              <van-tab title="技术前沿">
+                <kjzxList :list="jsqyLists" @detailBtn="detailBtn"></kjzxList>
+              </van-tab>
+            </van-tabs>
+          </el-col>
         </el-col>
-        <!-- <el-col :span="24" class="foot">
-          <footInfo></footInfo>
-        </el-col> -->
       </el-col>
     </el-row>
   </div>
@@ -56,7 +65,7 @@ export default {
       // 返回
       navShow: true,
       //菜单显示
-      active: '1',
+      active: 0,
       //科技资讯
       kjzxLists: [],
       //科技动态
@@ -67,6 +76,9 @@ export default {
       jsqyLists: [],
       //栏目
       column: [],
+      // 类型
+      name: '',
+      type: '',
     };
   },
   async created() {
@@ -79,7 +91,8 @@ export default {
     async searchColumn() {
       const res = await this.columnquery();
       if (this.$checkRes(res)) {
-        this.$set(this, `column`, res.data);
+        console.log(_.orderBy(res.data, ['meta.createdAt'], ['asc']));
+        this.$set(this, `column`, _.orderBy(res.data, ['meta.createdAt'], ['asc']));
       }
     },
     async searchList() {
@@ -112,6 +125,45 @@ export default {
         }
       }
     },
+    async search({ ...info } = {}) {
+      info.column_id = this.type;
+      if (this.name) {
+        info.title = this.name;
+        const res = await this.newsquery({ ...info });
+        if (this.$checkRes(res)) {
+          let col = this.column.find(i => i.id == this.type);
+          if (col.site == 'kjzx') this.$set(this, `kjzxLists`, _.orderBy(res.data, ['publish_time'], ['desc']));
+          else if (col.site == 'gzdt') this.$set(this, `gzdtLists`, _.orderBy(res.data, ['publish_time'], ['desc']));
+          else if (col.site == 'tztg') this.$set(this, `tztgLists`, _.orderBy(res.data, ['publish_time'], ['desc']));
+          else if (col.site == 'jsqy') this.$set(this, `jsqyLists`, _.orderBy(res.data, ['publish_time'], ['desc']));
+        }
+      } else {
+        this.searchList();
+      }
+    },
+    // 选择类型
+    typeChange(value) {
+      if (value) {
+        this.active = '';
+        this.$set(this, `type`, value);
+        let index = this.column.findIndex(i => i.id == value);
+        if (index) {
+          this.$set(this, `active`, index);
+        }
+      }
+    },
+    // 输入框查询
+    onSearch(data) {
+      this.$set(this, `name`, data);
+      if (this.type) {
+        this.search();
+      } else {
+        this.$notify({
+          message: '请选择信息类型',
+          type: 'danger',
+        });
+      }
+    },
     detailBtn(data) {
       this.$router.push({ path: '/journ/detail', query: { id: data.id } });
     },
@@ -135,6 +187,41 @@ 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;
+      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;