1

src/store/index.js

@@ -5,6 +5,8 @@ import upload from './upload';
 import refute from './refute';
 import topic from './topic';
 import service from './service';
+// 点赞
+import thumbs from './thumbs';
 import weixin from './weixin';
 
 Vue.use(Vuex);
@@ -30,6 +32,7 @@ export default new Vuex.Store({
     refute,
     topic,
     service,
+    thumbs,
     weixin,
   },
 });

src/store/refute.js

@@ -17,8 +17,10 @@ const actions = {
     const res = await this.$axios.$post(`${api.refute}`, payload);
     return res;
   },
-  async fetch({ commit }, payload) {
-    const res = await this.$axios.$get(`${api.refute}/${payload}`);
+  async fetch({ commit, rootState }, payload) {
+    const res = await this.$axios.$get(`${api.refute}/${payload}`, {
+      openid: rootState.user.openid,
+    });
     return res;
   },
   async update({ commit }, { id, ...info } = {}) {

src/store/thumbs.js

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

src/store/topic.js

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

src/views/refute/detail.vue

@@ -6,7 +6,7 @@
           <top topType="2" @upBack="upBack"></top>
         </el-col>
         <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
-          <info :form="form"></info>
+          <info :form="form" @zanBtn="zanBtn"></info>
         </el-col>
       </el-col>
     </el-row>
@@ -18,6 +18,7 @@ import info from './parts/info.vue';
 import top from '@/layout/common/top.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: mapRefute } = createNamespacedHelpers('refute');
+const { mapActions: mapThumbs } = createNamespacedHelpers('thumbs');
 export default {
   name: 'index',
   props: {},
@@ -28,15 +29,7 @@ export default {
   data: function() {
     return {
       clientHeight: '',
-      form: {
-        // title: '全国七万硕士在送外卖？别被贩卖焦虑的自媒体忽悠',
-        // origin: '系统管理员',
-        // renew_time: '2021-03-25 10:00:00',
-        // fileUrl: '',
-        // website: 'http://broadcast.waityou24.cn/platlive/home.html',
-        // zan: true,
-        // content: '信息内容',
-      },
+      form: {},
     };
   },
   async created() {
@@ -48,6 +41,7 @@ export default {
   },
   methods: {
     ...mapRefute(['fetch']),
+    ...mapThumbs(['create']),
     async search() {
       if (this.id) {
         let res = await this.fetch(this.id);
@@ -60,6 +54,19 @@ export default {
     upBack() {
       this.$router.push({ path: '/refute/index' });
     },
+    // 点赞
+    async zanBtn() {
+      let data = {
+        openid: this.user.openid,
+        type: '0',
+        article_id: this.form.id,
+      };
+      let res = await this.create(data);
+      if (this.$checkRes(res)) {
+        this.$toast({ type: 'success', message: this.form.thumbs ? '取消点赞' : '点赞成功' });
+        this.search();
+      }
+    },
   },
   computed: {
     ...mapState(['user']),

src/views/refute/parts/info.vue

@@ -2,7 +2,7 @@
   <div id="info">
     <el-row>
       <el-col :span="24" class="main">
-        <el-col :span="24" class="title"> {{ form.title }} </el-col>
+        <el-col :span="24" class="title">{{ form.title }}</el-col>
         <el-col :span="24" class="other">
           <span>来源:{{ form.origin || '系统管理员' }}</span>
           <span>更新时间:{{ form.create_time || form.renew_time || '暂无时间' }}</span>
@@ -25,14 +25,14 @@
           </video>
         </el-col>
         <el-col :span="24" class="content">
-          <p v-html="form.content"></p>
+          {{ form.content }}
         </el-col>
         <el-col :span="24" class="web" v-if="form.website">
           <p>原文网址</p>
           <el-link :underline="false" :href="form.website" target="_blank">{{ form.website }}</el-link>
         </el-col>
         <el-col :span="24" class="zan">
-          <img :src="form.zan == true ? zan2 : zan" alt="点赞" @click="zanBtn" />
+          <img :src="form.thumbs ? zan2 : zan" alt="点赞" @click="zanBtn" />
         </el-col>
       </el-col>
     </el-row>
@@ -56,7 +56,7 @@ export default {
   created() {},
   methods: {
     zanBtn() {
-      alert('点赞');
+      this.$emit('zanBtn');
     },
   },
   computed: {
@@ -77,24 +77,28 @@ export default {
     text-align: center;
     padding: 10px 0px 10px 0;
     font-weight: bold;
+    word-wrap: break-word;
   }
   .other {
     font-size: 14px;
     color: #666;
     margin: 0 0 10px 0;
-    span {
+    span:nth-child(2) {
       padding: 0 0 0 5px;
     }
   }
   .video {
-    margin: 0 0 10px 0;
+    margin: 0 0 5px 0;
     video {
       width: 100%;
       height: 100%;
+      border: 1px solid #f1f1f1;
     }
   }
   .content {
     margin: 0 0 10px 0;
+    font-size: 16px;
+    text-align: center;
   }
   .web {
     font-size: 14px;