1

src/views/scienceNews/index.vue

@@ -6,20 +6,25 @@
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="down">
-          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="show(item)">
-            <el-col :span="18" class="title textOver">
-              {{ item.title }}
-            </el-col>
-            <el-col :span="6" class="date">
-              {{ item.publish_time }}
-            </el-col>
-            <el-col :span="24" class="other">
-              <p class="textOver">
-                作者：<span>{{ item.publish || '系统管理员' }}</span>
-              </p>
-              <p class="textOver">
-                信息来源：<span>{{ item.orgin }}</span>
-              </p>
+          <el-col :span="24" class="search">
+            <van-search v-model="name" @search="onSearch" placeholder="请输入信息标题" />
+          </el-col>
+          <el-col :span="24" class="data">
+            <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="show(item)">
+              <el-col :span="18" class="title textOver">
+                {{ item.title }}
+              </el-col>
+              <el-col :span="6" class="date">
+                {{ item.publish_time }}
+              </el-col>
+              <el-col :span="24" class="other">
+                <p class="textOver">
+                  作者：<span>{{ item.publish || '系统管理员' }}</span>
+                </p>
+                <p class="textOver">
+                  信息来源：<span>{{ item.orgin }}</span>
+                </p>
+              </el-col>
             </el-col>
           </el-col>
         </el-col>
@@ -50,6 +55,7 @@ export default {
       // 返回
       navShow: true,
       list: [],
+      name: '',
     };
   },
   async created() {
@@ -58,6 +64,7 @@ export default {
   methods: {
     ...scienceNews(['query', 'fetch', 'create', 'update', 'delete']),
     async search({ skip = 0, limit = 10, ...info } = {}) {
+      if (this.name) info.title = this.name;
       let res = await this.query({ skip, ...info });
       if (this.$checkRes(res)) {
         this.$set(this, `list`, res.data);
@@ -66,6 +73,10 @@ export default {
     show(data) {
       this.$router.push({ path: '/scienceNews/detail', query: { id: data.id } });
     },
+    onSearch(data) {
+      this.$set(this, `name`, data);
+      this.search();
+    },
   },
   mounted() {
     this.title = this.$route.meta.title;
@@ -89,28 +100,32 @@ export default {
     overflow: hidden;
   }
   .down {
-    padding: 10px;
-    .list {
-      background-color: #fff;
-      border-radius: 5px;
-      margin: 0 0 10px 0;
-      padding: 5px;
-      .title {
-        font-size: 18px;
-        font-weight: bold;
-      }
-      .date {
-        text-align: right;
-        font-size: 16px;
-        padding: 6px 0 0 0;
-      }
-      .other {
-        margin: 5px 0 0 0;
-        p {
+    .search {
+    }
+    .data {
+      padding: 10px;
+      .list {
+        background-color: #fff;
+        border-radius: 5px;
+        margin: 0 0 10px 0;
+        padding: 5px;
+        .title {
+          font-size: 18px;
+          font-weight: bold;
+        }
+        .date {
+          text-align: right;
           font-size: 16px;
-          padding: 5px 0;
-          span {
-            color: #666;
+          padding: 6px 0 0 0;
+        }
+        .other {
+          margin: 5px 0 0 0;
+          p {
+            font-size: 16px;
+            padding: 5px 0;
+            span {
+              color: #666;
+            }
           }
         }
       }