11

src/views/user/index/news.vue

@@ -1,9 +1,21 @@
 <template>
   <div id="news">
     <el-row>
-      <el-col :span="24">
-        <p>新闻资讯</p>
+      <el-col :span="24" class="news">
+        <el-col :span="24" class="search">
+          <van-search v-model="value" placeholder="请输入信息标题" @search="onSearch" />
+        </el-col>
+        <el-col :span="24" class="mess">
+          <el-col :span="24" v-for="(item, index) in list" :key="index" class="list">
+            <p class="title textOver">{{ item.title }}</p>
+            <p>
+              <span class="textOver">发布时间：{{ item.publish_time }}</span>
+              <span class="textOver">来源：{{ item.orgin || '暂无' }}</span>
+            </p>
+          </el-col>
+        </el-col>
       </el-col>
+      <el-backtop :bottom="50" :right="10"> </el-backtop>
     </el-row>
   </div>
 </template>
@@ -19,10 +31,37 @@ export default {
   props: {},
   components: {},
   data: function() {
-    return {};
+    return {
+      value: '',
+      //列表
+      list: [],
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...scienceNews(['query', 'delete', 'update', 'create']),
+    async search() {
+      const res = await this.query();
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+      }
+      // console.log(res);
+    },
+    //搜索
+    async onSearch({ ...info } = {}) {
+      if (this.value) {
+        info.title = this.value;
+        const res = await this.query({ ...info });
+        if (this.$checkRes(res)) {
+          this.$set(this, `list`, res.data);
+        }
+      } else {
+        this.search();
+      }
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
   },
@@ -30,4 +69,40 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.news {
+  position: relative;
+  .search {
+    position: fixed;
+    width: 100%;
+    z-index: 999;
+    border-bottom: 1px solid #ccc;
+    background-color: #fff;
+    .van-search {
+      padding: 10px 12px 10px 12px;
+    }
+  }
+  .mess {
+    padding: 0px 10px;
+    margin-top: 55px;
+    .list {
+      padding: 10px 0px;
+      border-bottom: 1px dashed #ccc;
+      .title {
+        font-size: 18px;
+        font-weight: bold;
+      }
+      p:nth-child(2) {
+        margin-top: 5px;
+        span {
+          display: inline-block;
+          width: 50%;
+          height: 42px;
+          line-height: 42px;
+          color: #666;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/user/index/notice.vue

@@ -1,9 +1,21 @@
 <template>
   <div id="notice">
     <el-row>
-      <el-col :span="24">
-        <p>通知通告</p>
+      <el-col :span="24" class="notice">
+        <el-col :span="24" class="search">
+          <van-search v-model="value" placeholder="请输入信息标题" @search="onSearch" />
+        </el-col>
+        <el-col :span="24" class="mess">
+          <el-col :span="24" v-for="(item, index) in list" :key="index" class="list">
+            <p class="title textOver">{{ item.title }}</p>
+            <p>
+              <span class="textOver">发布时间：{{ item.publish_time }}</span>
+              <span class="textOver">来源：{{ item.orgin || '暂无' }}</span>
+            </p>
+          </el-col>
+        </el-col>
       </el-col>
+      <el-backtop :bottom="50" :right="10"> </el-backtop>
     </el-row>
   </div>
 </template>
@@ -20,10 +32,48 @@ export default {
   props: {},
   components: {},
   data: function() {
-    return {};
+    return {
+      columnList: [],
+      colId: '',
+      list: [],
+      value: '',
+    };
+  },
+  async created() {
+    await this.search();
+    await this.searchList();
+  },
+  methods: {
+    ...journcolumn(['query', 'delete', 'update', 'create']),
+    ...journnews({ newQuery: 'query' }),
+    //查栏目
+    async search() {
+      const res = await this.query();
+      if (this.$checkRes(res)) {
+        this.$set(this, `columnList`, res.data);
+        const colData = this.columnList.find(i => i.site == 'tztg');
+        this.colId = colData.id;
+      }
+    },
+    //查列表
+    async searchList() {
+      const res = await this.newQuery({ column_id: this.colId });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+      }
+    },
+    async onSearch({ ...info } = {}) {
+      if (this.value) {
+        info.title = this.value;
+        const res = await this.newQuery({ ...info });
+        if (this.$checkRes(res)) {
+          this.$set(this, `list`, res.data);
+        }
+      } else {
+        this.searchList();
+      }
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
   },
@@ -31,4 +81,40 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.notice {
+  position: relative;
+  .search {
+    position: fixed;
+    width: 100%;
+    z-index: 999;
+    border-bottom: 1px solid #ccc;
+    background-color: #fff;
+    .van-search {
+      padding: 10px 12px 10px 12px;
+    }
+  }
+  .mess {
+    padding: 0px 10px;
+    margin-top: 55px;
+    .list {
+      padding: 10px 0px;
+      border-bottom: 1px dashed #ccc;
+      .title {
+        font-size: 18px;
+        font-weight: bold;
+      }
+      p:nth-child(2) {
+        margin-top: 5px;
+        span {
+          display: inline-block;
+          width: 50%;
+          height: 42px;
+          line-height: 42px;
+          color: #666;
+        }
+      }
+    }
+  }
+}
+</style>