feat: support like the comments in topic detail

Author: Lsnsh

src/dc/api.js

@@ -109,6 +109,53 @@ export class TopicCollect extends Base {
   }
 }
 
+// 评论
+export class Reply extends Base {
+  constructor() {
+    super();
+    this.sCreateUrl = '/topic/:topic_id/replies';
+    this.sLikeOrDislikeUrl = '/reply/:reply_id/ups';
+  }
+  /**
+   * 新建评论
+   * post 参数
+   * accesstoken String 用户的 accessToken
+   * content String 评论的主体
+   * reply_id String 如果这个评论是对另一个评论的回复，请务必带上此字段。这样前端就可以构建出评论线索图。
+   * @param {Object} oOption
+   * @param {Function} fnDataModel
+   */
+  create(oOption = {}, fnDataModel) {
+    return fnDataProcess(
+      {
+        url: this.sCreateUrl,
+        method: 'post',
+        ...oOption
+      },
+      fnDataModel
+    );
+  }
+  /**
+   * 为评论点赞或取消点赞
+   * 接受 post 参数
+   * accesstoken String
+   * 接口会自动判断用户是否已点赞，如果否，则点赞；如果是，则取消点赞。点赞的动作反应在返回数据的 action 字段中，up or down。
+   * @param {Object} oOption
+   * @param {Function} fnDataModel
+   */
+  likeOrDislike(oOption = {}, fnDataModel) {
+    return fnDataProcess(
+      {
+        url: this.sLikeOrDislikeUrl,
+        method: 'post',
+        ...oOption
+      },
+      fnDataModel
+    );
+  }
+}
+
+// 用户
 export class User extends Base {
   constructor() {
     super();

src/dc/base.js

@@ -1,11 +1,13 @@
 export default class Base {
   constructor() {
     this.sListUrl = '';
+    this.sCreateUrl = '';
     this.sUpdateUrl = '';
     this.sDetailUrl = '';
     this.sDeleteUrl = '';
   }
   list() {}
+  create() {}
   update() {}
   detail() {}
   delete() {}

src/dc/index.js

@@ -1,9 +1,10 @@
-import { Topic, TopicCollect, User } from './api';
+import { Topic, TopicCollect, Reply, User } from './api';
 
 wx.initDataCenter = function() {
   wx.dc = {
     topic: new Topic(),
     topicCollect: new TopicCollect(),
+    reply: new Reply(),
     user: new User()
   };
 };

src/pages/topic/topic.js

@@ -4,12 +4,14 @@ Page({
   data: {
     bIsReady: false, // 页面是否准备就绪
     sTopicId: '', // 主题id
+    oUserInfo: {}, // 当前登录用户的基本信息
     oTopicDetail: {} // 主题详情
   },
   onLoad(options) {
     this.fnFetchTopicDetail(options.id);
     this.setData({
-      sTopicId: options.id
+      sTopicId: options.id,
+      oUserInfo: wx.getStorageSync('oUserInfo') || {}
     });
   },
   onShow() {
@@ -29,6 +31,50 @@ Page({
       this.fnNetSwitchTopicCollectStatus(!this.data.oTopicDetail.is_collect);
     }
   },
+  // 切换评论的点赞状态
+  fnTapLikeCommentOrDislike(e) {
+    let oDataSet = e.currentTarget.dataset;
+    this.fnNetLikeCommentOrDislike(oDataSet.id, oDataSet.index);
+  },
+  // 切换评论的点赞状态
+  fnNetLikeCommentOrDislike(sCommentId, nCommentIndex) {
+    // 显示标题栏加载效果
+    wx.showNavigationBarLoading();
+    wx.dc.reply
+      .likeOrDislike({
+        urlData: {
+          reply_id: sCommentId
+        }
+      })
+      .then(res => {
+        let aCommentUps = this.data.oTopicDetail.replies[nCommentIndex].ups,
+          oUpdateData = {};
+        // 点赞评论
+        if (res.action === 'up') {
+          // 将当前用户id，加入到该评论的点赞者列表中
+          aCommentUps.push(this.data.oUserInfo.id);
+          oUpdateData = {
+            [`oTopicDetail.replies[${nCommentIndex}].is_uped`]: true,
+            [`oTopicDetail.replies[${nCommentIndex}].ups`]: aCommentUps
+          };
+        }
+        // 取消点赞评论
+        if (res.action === 'down') {
+          // 将当前用户id，从该评论的点赞者列表中移除
+          aCommentUps = aCommentUps.filter(sUserId => sUserId !== this.data.oUserInfo.id);
+          oUpdateData = {
+            [`oTopicDetail.replies[${nCommentIndex}].is_uped`]: false,
+            [`oTopicDetail.replies[${nCommentIndex}].ups`]: aCommentUps
+          };
+        }
+        // 更新data数据
+        this.setData(oUpdateData);
+        wx.hideNavigationBarLoading();
+      })
+      .catch(() => {
+        wx.hideNavigationBarLoading();
+      });
+  },
   // 切换主题收藏状态
   fnNetSwitchTopicCollectStatus(bIsCollect) {
     // 显示标题栏加载效果
@@ -118,11 +164,13 @@ Page({
       is_collect: oData.is_collect, // 是否收藏
       create_at: wx.moment(oData.create_at).fromNow(), // 创建时间
       content: oData.content, // 主题内容
-      reply_count: oData.reply_count // 回复数
+      reply_count: oData.reply_count // 评论数
     };
-    // 回复列表
+    // 评论列表
     oResult.replies = oData.replies.map(oItem => {
       return {
+        is_uped: oItem.is_uped, // 当前登录用户是否点赞该评论
+        id: oItem.id, // 评论id
         avatar_url: oItem.author.avatar_url, // 评论者头像
         loginname: oItem.author.loginname, // 评论者名称
         create_at: wx.moment(oItem.create_at).format('YYYY-MM-DD HH:mm:ss'), // 创建时间

src/pages/topic/topic.wxml

@@ -27,9 +27,10 @@
   </view>
   <!-- 评论列表 -->
   <view class="topic-comment-list">
-    <view class="topic-comment-list-header">{{oTopicDetail.replies.length}}条回复</view>
+    <view class="topic-comment-list-header">{{oTopicDetail.replies.length}}条评论</view>
     <view class="topic-comment-item" wx:for="{{oTopicDetail.replies}}" wx:key="{{index}}">
       <view class="vh-parent clf">
+        <!-- 评论者信息 -->
         <view class="topic-comment-left fl-left">
           <image class="w-p100 h-p100 rounded-p50" src="{{item.avatar_url}}" />
         </view>
@@ -41,11 +42,19 @@
             <text>{{item.create_at}}</text>
           </view>
         </view>
-        <view class="v" style="color: #757575;right: 10rpx;font-size: 24rpx;">
-          <i class="icon icon-up" style="font-size: 50rpx;margin-right: 10rpx;"></i>
+        <!-- 点赞icon和点赞数 -->
+        <view
+          class="v"
+          style="color: #757575;right: 10rpx;font-size: 24rpx;"
+          data-id="{{item.id}}"
+          data-index="{{index}}"
+          bindtap="fnTapLikeCommentOrDislike"
+        >
+          <i class="icon icon-up {{item.is_uped ? 'color-green' : ''}}" style="font-size: 50rpx;margin-right: 10rpx;"></i>
           <text class="inbl vtal-top" style="height: 50rpx;line-height: 60rpx;">{{item.ups.length}}</text>
         </view>
       </view>
+      <!-- 评论内容 -->
       <view class="topic-comment-content">
         <wemark type="wemark" md="{{item.content}}" highlight link></wemark>
       </view>