1

src/router/index.js

@@ -225,6 +225,12 @@ const routes = [
     meta: { title: '新闻资讯', isleftarrow: false },
     component: () => import('../viewTwo/news/index.vue'),
   },
+  {
+    path: '/viewTwo/news/detail',
+    name: 'news',
+    meta: { title: '新闻资讯详情', isleftarrow: true },
+    component: () => import('../viewTwo/news/detail.vue'),
+  },
   // 账号管理
   {
     path: '/viewTwo/account/index',

src/viewTwo/news/detail.vue

@@ -0,0 +1,155 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="detail">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow" @onClickLeft="onClickLeft"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-col :span="24" class="title">{{ info.title }}</el-col>
+          <el-col :span="24" class="other">
+            <p>
+              <span class="textOver">信息来源：{{ info.orgin || '暂无' }}</span>
+              <span class="textOver">发布时间：{{ info.publish_time || '暂无' }}</span>
+            </p>
+            <p class="textOver">文章作者：{{ info.publish || '系统管理员' }}</p>
+          </el-col>
+          <el-col :span="24" v-if="info.picture != null || undefined" class="img">
+            <van-image :src="info.picture">
+              <div slot="error" class="image-slot">
+                <i class="el-icon-picture-outline"></i>
+              </div>
+            </van-image>
+          </el-col>
+          <el-col :span="24" class="con" v-html="info.content"> </el-col>
+          <el-col :span="24" class="four" v-if="info.filepath">
+            <h4>附件：</h4>
+            <el-link :href="info.filepath" :underline="false">{{ info.filepathname || '附件下载' }}</el-link>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import NavBar from '@/layout/common/topInfo.vue';
+const { mapActions: scienceNews } = createNamespacedHelpers('scienceNews');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'detail',
+  props: {},
+  components: {
+    NavBar,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      //详情
+      info: {},
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...scienceNews(['fetch']),
+    //查询详情
+    async search() {
+      const res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `info`, res.data);
+      }
+    },
+    // 返回
+    onClickLeft() {
+      this.$router.push({ path: '/viewTwo/news/index' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.detail {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  // min-height: 570px;
+  // margin: 0 0 50px 0;
+  padding: 10px;
+  .title {
+    text-align: center;
+    color: #044b79;
+    font-size: 18px;
+    font-weight: bolder;
+  }
+  .other {
+    font-size: 16px;
+    color: #666;
+    padding: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    p:nth-child(1) {
+      span {
+        display: inline-block;
+        width: 50%;
+      }
+    }
+    p:nth-child(2) {
+      text-align: center;
+    }
+  }
+  .img {
+    text-align: center;
+    margin: 0 0 15px 0;
+    .el-image {
+      width: 60%;
+    }
+  }
+  .con {
+    margin-top: 20px;
+  }
+}
+/deep/table {
+  width: 100%;
+}
+/deep/.con p img {
+  width: 100%;
+  height: 300px;
+  margin: 5px 0px;
+  display: block;
+}
+/deep/.con div img {
+  width: 100%;
+  height: 260px;
+  display: block;
+}
+/deep/.con p {
+  font-size: 14px;
+  color: #444;
+}
+</style>

src/viewTwo/news/index.vue

@@ -1,32 +1,139 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24">
-        <p>新闻资讯</p>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="down">
+          <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>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import NavBar from '@/layout/common/topInfo.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: scienceNews } = createNamespacedHelpers('scienceNews');
 export default {
   metaInfo() {
     return { title: this.$route.meta.title };
   },
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    NavBar,
+  },
   data: function() {
-    return {};
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      list: [],
+      name: '',
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...scienceNews(['query']),
+    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);
+      }
+    },
+    show(data) {
+      this.$router.push({ path: '/viewTwo/news/detail', query: { id: data.id } });
+    },
+    onSearch() {
+      this.search();
+    },
   },
-  created() {},
-  methods: {},
-  computed: {
-    ...mapState(['user']),
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
   },
   watch: {},
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #f9fafc;
+  .top {
+    height: 46px;
+    overflow: hidden;
+  }
+  .down {
+    position: relative;
+    .search {
+      position: fixed;
+      width: 100%;
+      z-index: 999;
+    }
+    .data {
+      position: absolute;
+      width: 100%;
+      top: 54px;
+      padding: 10px;
+      background: #f9fafc;
+      .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 {
+            font-size: 16px;
+            padding: 5px 0;
+            span {
+              color: #666;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>