更新

src/views/partisan/index.vue

@@ -18,7 +18,7 @@
               <el-carousel-item
                 v-for="(item, index) in ruleList"
                 :key="index"
-                @click.native="$router.push({ path: '/partisan/listDetail', query: { col_name: '图片新闻', id: 'id', display: '1' } })"
+                @click.native="$router.push({ path: '/partisan/listDetail', query: { col_name: '图片新闻', id: item.id, display: '1' } })"
                 class="ruleList"
               >
                 <el-image :src="item.img_url"></el-image>
@@ -36,7 +36,7 @@
               class="info"
               v-for="(item, index) in workList"
               :key="index"
-              @click.native="$router.push({ path: '/partisan/listDetail', query: { col_name: '党建工作', id: 'id', display: '1' } })"
+              @click.native="$router.push({ path: '/partisan/listDetail', query: { col_name: '党建工作', id: item.id, display: '1' } })"
             >
               <span></span><span class="textOver">{{ item.title }}</span
               ><span>{{ item.publish_time }}</span>
@@ -52,7 +52,7 @@
               class="info"
               v-for="(item, index) in stuList"
               :key="index"
-              @click.native="$router.push({ path: '/partisan/listDetail', query: { col_name: '学习园地', id: 'id', display: '1' } })"
+              @click.native="$router.push({ path: '/partisan/listDetail', query: { col_name: '学习园地', id: item.id, display: '1' } })"
             >
               <span></span><span class="textOver">{{ item.title }}</span
               ><span>{{ item.publish_time }}</span>
@@ -68,7 +68,7 @@
               class="info"
               v-for="(item, index) in politicsList"
               :key="index"
-              @click.native="$router.push({ path: '/partisan/listDetail', query: { col_name: '党风廉政', id: 'id', display: '1' } })"
+              @click.native="$router.push({ path: '/partisan/listDetail', query: { col_name: '党风廉政', id: item.id, display: '1' } })"
             >
               <span></span><span class="textOver">{{ item.title }}</span
               ><span>{{ item.publish_time }}</span>
@@ -89,55 +89,39 @@
 import top from '@/layout/common/top.vue';
 import menus from '@/layout/common/menus.vue';
 import foot from '@/layout/common/foot.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: news } = createNamespacedHelpers('news');
 export default {
   name: 'partisan',
   props: {},
   components: { top, menus, foot },
   data: () => ({
     // 图片新闻
-    ruleList: [
-      {
-        title: '标题',
-        img_url: require('@/assets/123.jpg'),
-      },
-    ],
+    ruleList: [],
     // 党建工作
-    workList: [
-      {
-        title: '标题',
-        publish_time: '2020-05-23',
-      },
-      {
-        title: '八条数据',
-        publish_time: '2020-05-23',
-      },
-    ],
+    workList: [],
     // 学习园地
-    stuList: [
-      {
-        title: '标题',
-        publish_time: '2020-05-23',
-      },
-      {
-        title: '八条数据',
-        publish_time: '2020-05-23',
-      },
-    ],
+    stuList: [],
     // 党风廉政
-    politicsList: [
-      {
-        title: '标题',
-        publish_time: '2020-05-23',
-      },
-      {
-        title: '八条数据',
-        publish_time: '2020-05-23',
-      },
-    ],
+    politicsList: [],
   }),
-  created() {},
+  created() {
+    this.searchInfo();
+  },
   computed: {},
-  methods: {},
+  methods: {
+    ...news({ newsQuery: 'query', newsFetch: 'fetch' }),
+    async searchInfo({ skip = 0, limit = 8, status = 2, ...info } = {}) {
+      let res = await this.newsQuery({ skip, limit, status, col_name: '图片新闻' });
+      if (this.$checkRes(res)) this.$set(this, `ruleList`, res.data);
+      res = await this.newsQuery({ skip, limit, status, col_name: '党建工作' });
+      if (this.$checkRes(res)) this.$set(this, `workList`, res.data);
+      res = await this.newsQuery({ skip, limit, status, col_name: '学习园地' });
+      if (this.$checkRes(res)) this.$set(this, `stuList`, res.data);
+      res = await this.newsQuery({ skip, limit, status, col_name: '党风廉政' });
+      if (this.$checkRes(res)) this.$set(this, `politicsList`, res.data);
+    },
+  },
 };
 </script>
 

src/views/partisan/listDetail.vue

@@ -32,7 +32,7 @@
                   <span>{{ columnName }}</span>
                 </el-col>
                 <el-col :span="24" class="list">
-                  <newsList :list="list" :total="total" @detailBtn="detailBtn"></newsList>
+                  <newsList :list="list" :total="total" @detailBtn="detailBtn" @searchList="searchList"></newsList>
                 </el-col>
               </span>
               <span v-else>
@@ -58,6 +58,7 @@ import foot from '@/layout/common/foot.vue';
 import newsList from './parts/newsList.vue';
 import newsDetail from './parts/newsDetail.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: news } = createNamespacedHelpers('news');
 export default {
   name: 'listDetail',
   props: {},
@@ -89,51 +90,110 @@ export default {
       // 总数
       total: 10,
       // 详情
-      details: {
-        title: '信息标题',
-        source: '信息部',
-        date: '2020-02-02',
-        content: '信息内容',
-      },
+      details: {},
     };
   },
   created() {
     this.changeColumn();
+    if (this.id) {
+      this.searchInfo();
+    }
   },
   methods: {
+    ...news({ newsQuery: 'query', newsFetch: 'fetch' }),
     // 选择栏目
-    changeColumn() {
+    async changeColumn({ skip = 0, limit = 14, status = 2, ...info } = {}) {
       if (this.col_name == '图片新闻') {
         this.menuIndex = 0;
         this.columnName = this.col_name;
         this.menuColor = 'rgb(5,73,130)';
         this.$set(this, `displays`, this.display);
+        let res = await this.newsQuery({ skip, limit, status, col_name: '图片新闻' });
+        if (this.$checkRes(res)) {
+          this.$set(this, `list`, res.data);
+          this.$set(this, `total`, res.total);
+        }
       } else if (this.col_name == '党建工作') {
         this.menuIndex = 1;
         this.columnName = this.col_name;
         this.menuColor = 'rgb(5,73,130)';
         this.$set(this, `displays`, this.display);
+        let res = await this.newsQuery({ skip, limit, status, col_name: '党建工作' });
+        if (this.$checkRes(res)) {
+          this.$set(this, `list`, res.data);
+          this.$set(this, `total`, res.total);
+        }
       } else if (this.col_name == '学习园地') {
         this.menuIndex = 2;
         this.columnName = this.col_name;
         this.menuColor = 'rgb(5,73,130)';
         this.$set(this, `displays`, this.display);
+        let res = await this.newsQuery({ skip, limit, status, col_name: '学习园地' });
+        if (this.$checkRes(res)) {
+          this.$set(this, `list`, res.data);
+          this.$set(this, `total`, res.total);
+        }
       } else if (this.col_name == '党风廉政') {
         this.menuIndex = 3;
         this.columnName = this.col_name;
         this.menuColor = 'rgb(5,73,130)';
         this.$set(this, `displays`, this.display);
+        let res = await this.newsQuery({ skip, limit, status, col_name: '党风廉政' });
+        if (this.$checkRes(res)) {
+          this.$set(this, `list`, res.data);
+          this.$set(this, `total`, res.total);
+        }
       }
     },
     // 点击选择菜单
-    changeMenu(name, index) {
+    async changeMenu(name, index) {
       this.menuIndex = index;
       this.columnName = name;
       this.menuColor = 'rgb(5,73,130)';
       this.$set(this, `displays`, 0);
+      this.searchList();
+    },
+    // 点击选择查询列表
+    async searchList({ skip = 0, limit = 14, status = 2, ...info } = {}) {
+      if (this.columnName == '图片新闻') {
+        let res = await this.newsQuery({ skip, limit, status, col_name: '图片新闻' });
+        if (this.$checkRes(res)) {
+          this.$set(this, `list`, res.data);
+          this.$set(this, `total`, res.total);
+        }
+      } else if (this.columnName == '党建工作') {
+        let res = await this.newsQuery({ skip, limit, status, col_name: '党建工作' });
+        if (this.$checkRes(res)) {
+          this.$set(this, `list`, res.data);
+          this.$set(this, `total`, res.total);
+        }
+      } else if (this.columnName == '学习园地') {
+        let res = await this.newsQuery({ skip, limit, status, col_name: '学习园地' });
+        if (this.$checkRes(res)) {
+          this.$set(this, `list`, res.data);
+          this.$set(this, `total`, res.total);
+        }
+      } else if (this.columnName == '党风廉政') {
+        let res = await this.newsQuery({ skip, limit, status, col_name: '党风廉政' });
+        if (this.$checkRes(res)) {
+          this.$set(this, `list`, res.data);
+          this.$set(this, `total`, res.total);
+        }
+      }
+    },
+    // 详情
+    async searchInfo(id) {
+      let res = await this.newsFetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `details`, res.data);
+      }
     },
     // 点击详情
-    detailBtn(id) {
+    async detailBtn(id) {
+      let res = await this.newsFetch(id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `details`, res.data);
+      }
       this.$set(this, `displays`, 1);
     },
   },

src/views/partisan/parts/newsDetail.vue

@@ -3,11 +3,14 @@
     <el-row>
       <el-col :span="24" class="info">
         <h3>{{ details.title }}</h3>
-        <div>
-          <span>文章来源:{{ details.source }}</span>
-          <span>时间:{{ details.date }}</span>
+        <div class="date">
+          <span>发布单位:{{ details.publish_unit }}</span>
+          <span>时间:{{ details.publish_time }}</span>
         </div>
-        <p>{{ details.content }}</p>
+        <el-col :span="24" class="image">
+          <el-image :src="details.img_url"></el-image>
+        </el-col>
+        <p v-html="details.content"></p>
       </el-col>
     </el-row>
   </div>
@@ -46,7 +49,7 @@ export default {
     color: #005293;
     text-align: center;
   }
-  div {
+  .date {
     text-align: center;
     border-bottom: 1px solid #ccc;
     padding: 0 0 40px 0;
@@ -56,5 +59,9 @@ export default {
       padding: 0 10px;
     }
   }
+  .image {
+    text-align: center;
+    margin-bottom: 0 0 15px 0;
+  }
 }
 </style>

src/views/partisan/parts/newsList.vue

@@ -5,10 +5,10 @@
         <el-col :span="24" class="list" @click.native="detailBtn(item.id)" v-for="(item, index) in list" :key="index">
           <span></span>
           <span class="textOver">{{ item.title }}</span>
-          <span>{{ item.date }}</span>
+          <span>{{ item.publish_time }}</span>
         </el-col>
         <el-col :span="24" class="page">
-          <pagination :total="total"></pagination>
+          <pagination :total="total" @query="searchList"></pagination>
         </el-col>
       </el-col>
     </el-row>
@@ -35,6 +35,9 @@ export default {
     detailBtn(id) {
       this.$emit('detailBtn', id);
     },
+    searchList() {
+      this.$emit('searchList');
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -76,6 +79,9 @@ export default {
       text-align: right;
     }
   }
+  .list:hover {
+    cursor: pointer;
+  }
   .page {
     height: 50px;
   }