1

src/store/index.js

@@ -7,6 +7,8 @@ import topic from './topic';
 import service from './service';
 // 点赞
 import thumbs from './thumbs';
+// 评论
+import reply from './reply';
 import weixin from './weixin';
 
 Vue.use(Vuex);
@@ -33,6 +35,7 @@ export default new Vuex.Store({
     topic,
     service,
     thumbs,
+    reply,
     weixin,
   },
 });

src/store/reply.js

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

src/views/community/detail.vue

@@ -19,11 +19,19 @@
         </el-col>
         <el-col :span="24" class="foot">
           <el-col :span="8" class="button"><i class="el-icon-position"></i>分享</el-col>
-          <el-col :span="8" class="button"><i class="el-icon-chat-line-round"></i>评论</el-col>
+          <el-col :span="8" class="button" @click.native="chatBtn"><i class="el-icon-chat-line-round"></i>评论</el-col>
           <el-col :span="8" class="button zan" @click.native="zanBtn"><img :src="detailInfo.thumbs ? zan2 : zan" /><span>点赞</span></el-col>
         </el-col>
       </el-col>
     </el-row>
+    <van-dialog class="dialog" v-model="dialog" title="填写评论" :close-on-click-overlay="true" :show-confirm-button="false">
+      <van-form @submit="onSubmit">
+        <van-field v-model="form.content" rows="4" autosize label="评论内容" type="textarea" maxlength="100" placeholder="请输入内容" show-word-limit />
+        <div style="margin: 16px;">
+          <van-button round block type="info" native-type="submit">发送</van-button>
+        </div>
+      </van-form>
+    </van-dialog>
   </div>
 </template>
 
@@ -34,6 +42,8 @@ import top from '@/layout/common/top.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: mapTopic } = createNamespacedHelpers('topic');
 const { mapActions: mapThumbs } = createNamespacedHelpers('thumbs');
+const { mapActions: reply } = createNamespacedHelpers('reply');
+const moment = require('moment');
 export default {
   name: 'detail',
   props: {},
@@ -50,29 +60,13 @@ export default {
       // 评论
       active: 'first',
       // 用户评论列表
-      commentList: [
-        {
-          icon: require('@a/system.png'),
-          name: '测试用户',
-          content: '你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好',
-          renew_time: '2021-02-01 10:00:00',
-        },
-        {
-          icon: require('@a/system.png'),
-          name: '测试用户1',
-          content: '你好1',
-          renew_time: '2021-02-01 10:00:00',
-        },
-        {
-          icon: require('@a/system.png'),
-          name: '测试用户2',
-          content: '你好2',
-          renew_time: '2021-02-01 10:00:00',
-        },
-      ],
+      commentList: [],
       // 点赞
       zan: require('@a/zan.png'),
       zan2: require('@a/zan2.png'),
+      // 评论
+      dialog: false,
+      form: {},
     };
   },
   async created() {
@@ -85,12 +79,17 @@ export default {
   methods: {
     ...mapTopic(['fetch']),
     ...mapThumbs(['create']),
+    ...reply({ replyQuery: 'query', replyCreate: 'create' }),
     async search() {
       if (this.id) {
         let res = await this.fetch(this.id);
         if (this.$checkRes(res)) {
           this.$set(this, `detailInfo`, res.data);
         }
+        res = await this.replyQuery({ article_id: this.id });
+        if (this.$checkRes(res)) {
+          this.$set(this, `commentList`, res.data);
+        }
       }
     },
     // 返回上一页
@@ -106,10 +105,34 @@ export default {
       };
       let res = await this.create(data);
       if (this.$checkRes(res)) {
+        this.$set(this.detailInfo, `thumbs`, res.data);
         this.$toast({ type: 'success', message: this.detailInfo.thumbs ? '取消点赞' : '点赞成功' });
+      }
+    },
+    // 打开评论
+    chatBtn() {
+      this.dialog = true;
+    },
+    // 发送评论
+    async onSubmit() {
+      let data = this.form;
+      data.name = this.user.name;
+      data.icon = this.user.icon;
+      data.openid = this.user.openid;
+      data.reply_time = moment().format('YYYY-MM-DD HH:mm:ss');
+      data.article_id = this.id;
+      let res = await this.replyCreate(data);
+      if (this.$checkRes(res)) {
+        this.$toast({ type: 'success', message: '评论成功' });
+        this.dialogClose();
         this.search();
       }
     },
+    // 关闭弹框
+    dialogClose() {
+      this.form = {};
+      this.dialog = false;
+    },
   },
   computed: {
     ...mapState(['user']),

src/views/refute/detail.vue

@@ -29,7 +29,9 @@ export default {
   data: function() {
     return {
       clientHeight: '',
-      form: {},
+      form: {
+        thumbs: false,
+      },
     };
   },
   async created() {
@@ -63,8 +65,8 @@ export default {
       };
       let res = await this.create(data);
       if (this.$checkRes(res)) {
+        this.$set(this.form, `thumbs`, res.data);
         this.$toast({ type: 'success', message: this.form.thumbs ? '取消点赞' : '点赞成功' });
-        this.search();
       }
     },
   },