新闻列表

src/views/info/list.vue

@@ -6,60 +6,74 @@
         <el-breadcrumb separator=">">
           <el-breadcrumb-item :to="{ path: '/' }"><span style="color:#666666">网站首页</span></el-breadcrumb-item>
           <el-breadcrumb-item>
-            <a href="/"><span style="color:#666666">创业案例</span></a>
+            <a href="info/list"><span style="color:#666666">新闻列表</span></a>
           </el-breadcrumb-item>
-          <el-breadcrumb-item><span style="color:#999999">文章列表</span></el-breadcrumb-item>
         </el-breadcrumb>
       </el-col>
     </el-row>
     <el-row>
-      <el-col :span="24" style="margin-top: 1rem; width:50%">
-        <el-input size="mini" placeholder="请输入文章标题" v-model="input3">
+      <!-- <el-col :span="24" style="margin-top: 1rem; width:50%">
+        <el-input size="mini" placeholder="请输入标题" v-model="input3">
           <el-button slot="append" icon="el-icon-search"></el-button>
         </el-input>
-      </el-col>
+      </el-col> -->
     </el-row>
     <el-row
       style="border-bottom-style:dashed; border-width:1px;border-color:#666666;font-size: small; padding: 0.5rem 0;"
-      v-for="(item, index) in 10"
+      v-for="(item, index) in list"
       :key="index"
     >
       <el-col style="padding-top: 0.5rem;" :span="21">
-        <el-link @click="$router.push({ path: '/info/detail', query: { id: 'none' } })">学有所成，扎根农村，做新时代的“现代农民”</el-link>
+        <el-link @click="$router.push({ path: '/info/detail', query: { id: item.id } })">{{ item.title }}</el-link>
+      </el-col>
+      <el-col :span="3" style="color:#999999; padding-top: 0.7rem;">
+        <span style="padding: 0.5rem 0;">{{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}</span>
       </el-col>
-      <el-col :span="3" style="color:#999999; padding-top: 0.7rem;"><span style="padding: 0.5rem 0;">2016-11-25</span></el-col>
     </el-row>
     <el-row style="margin-top:1rem;">
-      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="15" layout="total, prev, pager, next, jumper" :total="100">
+      <el-pagination @current-change="search" :current-page="currentPage" :page-size="$limit" layout="total, prev, pager, next, jumper" :total="totalRow">
       </el-pagination>
     </el-row>
   </div>
 </template>
 
 <script>
+import { mapActions, mapState } from 'vuex';
 export default {
-  methods: {
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-    },
-    test(val) {
-      this.$set(this, `activeMenu`, val);
-    },
-  },
   name: 'index',
   props: {},
 
   components: {},
   data: () => ({
     input3: '',
-    currentPage4: 1,
+    list: [],
+    searchInfo: {},
+    totalRow: 0,
+    currentPage: 1,
     activeMenu: '1',
   }),
-  created() {},
+  created() {
+    this.search();
+  },
   computed: {},
+  methods: {
+    ...mapActions(['newsOperation']),
+    async search(page) {
+      let skip = 0;
+      if (page) {
+        skip = (page - 1) * this.$limit;
+      }
+      let newData = { skip: skip, limit: this.$limit, ...this.searchInfo };
+      let result = await this.newsOperation({ type: 'list', data: { site: this.$site, ...newData } });
+      if (`${result.errcode}` === '0') {
+        //给this=>vue的实例下在中的list属性，赋予result。data的值
+        this.$set(this, 'list', result.data);
+        this.$set(this, `totalRow`, result.total);
+      } else {
+        this.$message.error(result.errmsg ? result.errmsg : 'error');
+      }
+    },
+  },
 };
 </script>