1

src/store/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import refute from './refute';
 
 Vue.use(Vuex);
 
@@ -7,5 +8,7 @@ export default new Vuex.Store({
   state: {},
   mutations: {},
   actions: {},
-  modules: {},
+  modules: {
+    refute,
+  },
 });

src/store/refute.js

@@ -0,0 +1,40 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  refute: `/api/article/refute`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit, ...info } = {}) {
+    const res = await this.$axios.$get(api.refute, { skip, limit, ...info });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.refute}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.refute}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...info } = {}) {
+    const res = await this.$axios.$post(`${api.refute}/update/${id}`, {
+      ...info,
+    });
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.refute}/${payload}`);
+    return res;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/views/index.vue

@@ -63,7 +63,7 @@ export default {
   .top {
     height: 40px;
     overflow: hidden;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid #f1f1f1;
   }
   .info {
     overflow-y: auto;
@@ -71,7 +71,7 @@ export default {
   .foot {
     height: 50px;
     overflow: hidden;
-    border-top: 1px solid #ccc;
+    border-top: 1px solid #f1f1f1;
   }
 }
 </style>

src/views/refute/detail.vue

@@ -5,9 +5,7 @@
         <el-col :span="24" class="top">
           <top topType="2" @upBack="upBack"></top>
         </el-col>
-        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }" @scroll.native="scrollEvent">
-          内容
-        </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }" @scroll.native="scrollEvent"> </el-col>
       </el-col>
     </el-row>
   </div>
@@ -16,6 +14,7 @@
 <script>
 import top from '@/layout/common/top.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: mapRefute } = createNamespacedHelpers('refute');
 export default {
   name: 'index',
   props: {},
@@ -35,7 +34,13 @@ export default {
     this.$set(this, `clientHeight`, clientHeight);
   },
   methods: {
-    search() {},
+    ...mapRefute(['fetch']),
+    async search() {
+      if (this.id) {
+        let res = await this.fetch(this.id);
+        console.log(res);
+      }
+    },
     // 返回上一页
     upBack() {
       this.$router.push({ path: '/refute/index' });
@@ -43,17 +48,14 @@ export default {
   },
   computed: {
     ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
   },
   metaInfo() {
     return { title: this.$route.meta.title };
   },
-  watch: {
-    test: {
-      deep: true,
-      immediate: true,
-      handler(val) {},
-    },
-  },
+  watch: {},
 };
 </script>
 
@@ -62,7 +64,7 @@ export default {
   .top {
     height: 40px;
     overflow: hidden;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid #f1f1f1;
   }
   .info {
     overflow-y: auto;

src/views/refute/index.vue

@@ -21,6 +21,8 @@ import list from './parts/list.vue';
 import top from '@/layout/common/top.vue';
 import page from '@/layout/common/page.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: mapRefute } = createNamespacedHelpers('refute');
+
 export default {
   name: 'index',
   props: {},
@@ -99,8 +101,14 @@ export default {
     this.$set(this, `clientHeight`, clientHeight);
   },
   methods: {
-    search({ skip = 0, limit = 10, searchName, ...info } = {}) {
-      console.log(searchName);
+    ...mapRefute(['query']),
+    async search({ skip = 0, limit = 5, searchName, ...info } = {}) {
+      if (searchName) info.title = searchName;
+      let res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `refuteList`, res.data);
+        this.$set(this, `total`, res.total);
+      }
     },
     // 详情
     detailBtn(data) {

src/views/refute/parts/list.vue

@@ -4,7 +4,11 @@
       <el-col :span="24" class="main">
         <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
           <el-col :span="8" class="image">
-            <el-image :src="item.imgUrl"></el-image>
+            <el-image :src="item.imgUrl">
+              <div slot="error" class="image-slot">
+                <img :src="noImg" alt="" />
+              </div>
+            </el-image>
           </el-col>
           <el-col :span="16" class="info">
             <el-col :span="24" class="title">
@@ -12,7 +16,7 @@
             </el-col>
             <el-col :span="24" class="date">
               <span>{{ item.renew_time }}</span>
-              <span>阅读:{{ item.num >= 10000 ? '1万+' : item.num }}</span>
+              <span>阅读:{{ item.read >= 10000 ? '1万+' : item.read }}</span>
             </el-col>
           </el-col>
         </el-col>
@@ -30,7 +34,9 @@ export default {
   },
   components: {},
   data: function() {
-    return {};
+    return {
+      noImg: require('@a/noImg.jpg'),
+    };
   },
   created() {},
   methods: {
@@ -68,6 +74,10 @@ export default {
         height: 100%;
         border-radius: 5px;
       }
+      /deep/.image-slot img {
+        width: 100%;
+        height: 100%;
+      }
     }
     .info {
       padding: 0 8px;

vue.config.js

@@ -22,7 +22,7 @@ module.exports = {
         target: 'http://broadcast.waityou24.cn',
       },
       '/api': {
-        target: 'http://broadcast.waityou24.cn',
+        target: 'http://192.168.1.19:10010',
         changeOrigin: true,
         ws: true,
       },