更新

src/pages/index/views/home.vue

@@ -56,7 +56,7 @@
           查看更多
         </el-col>
       </el-row>
-      <el-row type="flex" v-for="(item, index) in news.infoList" :key="index" class="data_list">
+      <el-row type="flex" @click.native="toHtml(`news.html#/${item.id}`)" v-for="(item, index) in news.infoList" :key="index" class="data_list">
         <el-col :span="6"> 【{{ news.title }}】 </el-col>
         <el-col :span="18">{{ item.title }}</el-col>
       </el-row>

src/pages/news/router.js

@@ -6,7 +6,7 @@ Vue.use(Router);
 const router = new Router({
   routes: [
     {
-      path: '/',
+      path: '/:id',
       component: () => import('./views/detail.vue'),
     },
   ],

src/pages/news/store/index.js

@@ -10,6 +10,7 @@ import * as letters from '@/store/letters';
 import * as jobfair from '@/store/jobfair';
 import * as school from '@/store/schoolList';
 import * as user from '@/store/user';
+import * as news from '@/store/news';
 
 Vue.use(Vuex);
 
@@ -25,5 +26,6 @@ export default new Vuex.Store({
     jobfair: jobfair,
     school: school,
     user: user,
+    news: news,
   },
 });

src/pages/news/views/detail.vue

@@ -1,36 +1,47 @@
 <template>
   <div id="detail">
-    <el-row>
+    <el-row style="background:#fff;min-height: 736px;">
       <el-col :span="24" class="top">
         <p class="title">{{ info.title }}</p>
-        <p class="date">发表于：{{ info.date }}</p>
+        <p class="date">发表于：{{ info.meta && info.meta.createdAt ? new Date(info.meta.createdAt).toLocaleDateString() : '' || '' }}</p>
       </el-col>
       <el-col :span="24" class="image">
-        <el-image style="width:100%;height:195px;" :src="info.pic"></el-image>
-      </el-col>
-      <el-col :span="24" class="content">
-        <p>{{ info.content }}</p>
+        <el-image style="width:100%;height:195px;" :src="info.pic ? info.pic : pic"></el-image>
       </el-col>
+      <el-col :span="24" class="content" v-html="info.content"> </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import { mapActions, mapState } from 'vuex';
 export default {
   name: 'detail',
   props: {},
   components: {},
   data: () => ({
-    info: {
-      title: '我校在吉林省高校就业指导课程教学大赛中取得优异成绩',
-      date: '2019-11-21',
-      pic: require('@/assets/logo.jpg'),
-      content: '详情',
-    },
+    info: {},
+    pic: require('@/assets/moren.jpg'),
   }),
-  created() {},
+  created() {
+    console.log(this.$route.params.id);
+    if (this.$route.params.id) {
+      this.search();
+    }
+  },
   computed: {},
-  methods: {},
+  methods: {
+    ...mapActions(['newsOperation']),
+    async search() {
+      let result = await this.newsOperation({ type: 'search', data: { id: this.$route.params.id } });
+      if (`${result.errcode}` === '0') {
+        console.log(result.data);
+        this.$set(this, `info`, result.data);
+      } else {
+        this.$message.error(result.errmsg ? result.errmsg : 'error');
+      }
+    },
+  },
 };
 </script>
 
@@ -59,7 +70,9 @@ p {
 .content {
   padding: 0 10px 10px 10px;
 }
-.content p {
+/deep/.content p {
+  padding: 0;
+  margin: 0;
   color: rgb(70, 70, 70);
   font-family: 宋体;
   font-size: 18px;