feat 专题添加评论功能

app.json

@@ -1,6 +1,5 @@
 {
-  "pages":[
-    
+  "pages": [
     "pages/index/index",
     "pages/catalog/catalog",
     "pages/newGoods/newGoods",
@@ -20,6 +19,8 @@
     "pages/ucenter/index/index",
     "pages/topic/topic",
     "pages/comment/comment",
+    "pages/commentPost/commentPost",
+    "pages/topicComment/topicComment",
     "pages/brand/brand",
     "pages/brandDetail/brandDetail",
     "pages/search/search",
@@ -27,15 +28,15 @@
     "pages/cart/cart",
     "pages/shopping/checkout/checkout",
     "pages/shopping/address/address",
-    "pages/shopping/addressAdd/addressAdd",        
+    "pages/shopping/addressAdd/addressAdd",
     "pages/goods/goods",
     "pages/topicDetail/topicDetail"
   ],
-  "window":{
-    "backgroundTextStyle":"dark",
+  "window": {
+    "backgroundTextStyle": "dark",
     "navigationBarBackgroundColor": "#fff",
     "navigationBarTitleText": "仿网易严选",
-    "navigationBarTextStyle":"black",
+    "navigationBarTextStyle": "black",
     "enablePullDownRefresh": "true"
   },
   "tabBar": {
@@ -43,36 +44,42 @@
     "borderStyle": "white",
     "selectedColor": "#b4282d",
     "color": "#666",
-    "list": [{
-      "pagePath": "pages/index/index",
-      "iconPath": "static/images/ic_menu_choice_nor.png",
-      "selectedIconPath": "static/images/ic_menu_choice_pressed.png",
-      "text": "首页"
-    }, {
-      "pagePath": "pages/topic/topic",
-      "iconPath": "static/images/ic_menu_topic_nor.png",
-      "selectedIconPath": "static/images/ic_menu_topic_pressed.png",
-      "text": "专题"
-    }, {
-      "pagePath": "pages/catalog/catalog",
-      "iconPath": "static/images/ic_menu_sort_nor.png",
-      "selectedIconPath": "static/images/ic_menu_sort_pressed.png",
-      "text": "分类"
-    }, {
-      "pagePath": "pages/cart/cart",
-      "iconPath": "static/images/ic_menu_shoping_nor.png",
-      "selectedIconPath": "static/images/ic_menu_shoping_pressed.png",
-      "text": "购物车"
-    },  {
-      "pagePath": "pages/ucenter/index/index",
-      "iconPath": "static/images/ic_menu_me_nor.png",
-      "selectedIconPath": "static/images/ic_menu_me_pressed.png",
-      "text": "我的"
-    }]
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "iconPath": "static/images/ic_menu_choice_nor.png",
+        "selectedIconPath": "static/images/ic_menu_choice_pressed.png",
+        "text": "首页"
+      },
+      {
+        "pagePath": "pages/topic/topic",
+        "iconPath": "static/images/ic_menu_topic_nor.png",
+        "selectedIconPath": "static/images/ic_menu_topic_pressed.png",
+        "text": "专题"
+      },
+      {
+        "pagePath": "pages/catalog/catalog",
+        "iconPath": "static/images/ic_menu_sort_nor.png",
+        "selectedIconPath": "static/images/ic_menu_sort_pressed.png",
+        "text": "分类"
+      },
+      {
+        "pagePath": "pages/cart/cart",
+        "iconPath": "static/images/ic_menu_shoping_nor.png",
+        "selectedIconPath": "static/images/ic_menu_shoping_pressed.png",
+        "text": "购物车"
+      },
+      {
+        "pagePath": "pages/ucenter/index/index",
+        "iconPath": "static/images/ic_menu_me_nor.png",
+        "selectedIconPath": "static/images/ic_menu_me_pressed.png",
+        "text": "我的"
+      }
+    ]
   },
   "networkTimeout": {
     "request": 10000,
     "downloadFile": 10000
   },
   "debug": true
-}
+}

config/api.js

@@ -34,6 +34,7 @@ module.exports = {
 
     CommentList: NewApiRootUrl + 'comment/list',  //评论列表
     CommentCount: NewApiRootUrl + 'comment/count',  //评论总数
+    CommentPost: NewApiRootUrl + 'comment/post',   //发表评论
 
     TopicList: NewApiRootUrl + 'topic/list',  //专题列表
     TopicDetail: NewApiRootUrl + 'topic/detail',  //专题详情

pages/comment/comment.wxss

@@ -20,7 +20,7 @@
 
 .comments .h .item{
     display: inline-block;
-    height: 84rpx;
+    height: 82rpx;
     width: 50%;
     padding: 0 15rpx;
     text-align: center;
@@ -28,9 +28,9 @@
 
 .comments .h .item .txt{
     display: inline-block;
-    height: 84rpx;
+    height: 82rpx;
     padding: 0 20rpx;
-    line-height: 84rpx;
+    line-height: 82rpx;
     color: #333;
     font-size: 30rpx;
     width: 170rpx;
@@ -47,6 +47,10 @@
     width: 720rpx;
 }
 
+.comments .b.no-h{
+    margin-top: 0;
+}
+
 .comments .item{
     height: auto;
     width: 720rpx;

pages/commentPost/commentPost.js

@@ -0,0 +1,80 @@
+var app = getApp();
+var util = require('../../utils/util.js');
+var api = require('../../config/api.js');
+Page({
+  data: {
+    typeId: 0,
+    valueId: 0,
+    content: ''
+  },
+  onLoad: function (options) {
+
+    var that = this;
+    that.setData({
+      typeId: parseInt(options.typeId),
+      valueId: parseInt(options.valueId)
+    });
+
+  },
+  onClose() {
+    wx.navigateBack({
+      delta: 1
+    });
+  },
+  onPost() {
+    let that = this;
+
+    if (!this.data.content) {
+      util.showErrorToast('请填写评论')
+      return false;
+    }
+
+
+    util.request(api.CommentPost, {
+      typeId: that.data.typeId,
+      valueId: that.data.valueId,
+      content: that.data.content
+    }, 'POST').then(function (res) {
+      if (res.errno === 0) {
+        wx.showToast({
+          title: '评论成功',
+          complete: function(){
+            wx.navigateBack({
+              delta: 1
+            });
+          }
+        })
+      }
+      console.log(res)
+    });
+  },
+  bindInpuntValue(event){
+
+    let value = event.detail.value;
+
+    //判断是否超过140个字符
+    if (value && value.length > 140) {
+      return false;
+    }
+
+    this.setData({
+      content: event.detail.value,
+    })
+    console.log(event.detail)
+  },
+  onReady: function () {
+
+  },
+  onShow: function () {
+    // 页面显示
+
+  },
+  onHide: function () {
+    // 页面隐藏
+
+  },
+  onUnload: function () {
+    // 页面关闭
+
+  }
+})

pages/commentPost/commentPost.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "填写留言"
+}

pages/commentPost/commentPost.wxml

@@ -0,0 +1,12 @@
+<view class="container">
+  <view class="post-comment">
+        <view class="input-box">
+            <textarea class="content" focus="true" bindinput="bindInpuntValue" maxlength="140" placeholder="留言经过筛选后，对所有人可见" />
+            <text class="count">{{140 - content.length}}</text>
+        </view>
+        <view class="btns">
+            <view class="close" bindtap="onClose">取消</view>
+            <view class="post" bindtap="onPost">发表</view>
+        </view>
+    </view>
+</view>

pages/commentPost/commentPost.wxss

@@ -0,0 +1,63 @@
+page, .container {
+  height: 100%;
+  background: #f4f4f4;
+}
+
+.post-comment {
+  width: 750rpx;
+  height: auto;
+  overflow: hidden;
+  padding: 30rpx;
+}
+
+.post-comment .input-box {
+  height: 337.5rpx;
+  width: 690rpx;
+  position: relative;
+  background: #fff;
+}
+
+.post-comment .input-box .content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  background: #fff;
+  font-size: 29rpx;
+  color: #333;
+  height: 300rpx;
+  width: 650rpx;
+  padding: 20rpx;
+}
+
+.post-comment .input-box .count {
+  position: absolute;
+  bottom: 20rpx;
+  right: 20rpx;
+  display: block;
+  height: 30rpx;
+  width: 50rpx;
+  font-size: 29rpx;
+  color: #999;
+}
+
+.post-comment .btns {
+  height: 108rpx;
+}
+
+.post-comment .close {
+  float: left;
+  height: 108rpx;
+  line-height: 108rpx;
+  text-align: left;
+  color: #666;
+  padding: 0 30rpx;
+}
+
+.post-comment .post {
+  float: right;
+  height: 108rpx;
+  line-height: 108rpx;
+  text-align: right;
+  padding: 0 30rpx;
+}

pages/topicComment/topicComment.js

@@ -0,0 +1,116 @@
+var app = getApp();
+var util = require('../../utils/util.js');
+
+var api = require('../../config/api.js');
+
+Page({
+  data: {
+    comments: [],
+    allCommentList: [],
+    picCommentList: [],
+    typeId: 0,
+    valueId: 0,
+    showType: 0,
+    allCount: 0,
+    hasPicCount: 0,
+    allPage: 1,
+    picPage: 1,
+    size: 20
+  },
+  getCommentCount: function () {
+    let that = this;
+    util.request(api.CommentCount, { valueId: that.data.valueId, typeId: that.data.typeId}).then(function (res) {
+      if (res.errno === 0) {
+
+        that.setData({
+          allCount: res.data.allCount,
+          hasPicCount: res.data.hasPicCount
+        });
+      }
+    });
+  },
+  getCommentList: function(){
+    let that = this;
+    util.request(api.CommentList, { 
+      valueId: that.data.valueId, 
+      typeId: that.data.typeId, 
+      size: that.data.size,
+      page: (that.data.showType == 0 ? that.data.allPage : that.data.picPage),
+      showType: that.data.showType 
+      }).then(function (res) {
+      if (res.errno === 0) {
+
+        if (that.data.showType == 0) {
+          that.setData({
+            allCommentList: that.data.allCommentList.concat(res.data.data),
+            allPage: res.data.currentPage,
+            comments: that.data.allCommentList.concat(res.data.data)
+          });
+        } else {
+          that.setData({
+            picCommentList: that.data.picCommentList.concat(res.data.data),
+            picPage: res.data.currentPage,
+            comments: that.data.picCommentList.concat(res.data.data)
+          });
+        }
+      }
+    });
+  },
+  onLoad: function (options) {
+    // 页面初始化 options为页面跳转所带来的参数
+    this.setData({
+      typeId: options.typeId,
+      valueId: options.valueId
+    });
+    this.getCommentCount();
+    this.getCommentList();
+  },
+  onReady: function () {
+    // 页面渲染完成
+
+  },
+  onShow: function () {
+    // 页面显示
+
+  },
+  onHide: function () {
+    // 页面隐藏
+
+  },
+  onUnload: function () {
+    // 页面关闭
+
+  },
+  switchTab: function () {
+    this.setData({
+      showType: this.data.showType == 1 ? 0 :1
+    });
+
+    this.getCommentList();
+  },
+  onReachBottom: function(){
+    console.log('onPullDownRefresh');
+    if ( this.data.showType == 0) {
+
+      if (this.data.allCount / this.data.size < this.data.allPage) {
+        return false;
+      }
+
+      this.setData({
+        'allPage' : this.data.allPage + 1
+      });
+    } else {
+      if (this.data.hasPicCount / this.data.size < this.data.picPage) {
+        return false;
+      }
+
+      this.setData({
+        'picPage': this.data.picPage + 1
+      });
+    }
+
+
+
+    this.getCommentList();
+  }
+})

pages/topicComment/topicComment.json

@@ -0,0 +1,3 @@
+{
+
+}

pages/topicComment/topicComment.wxml

@@ -0,0 +1,22 @@
+<view class="comments">
+  <view class="b">
+    <view class="item" wx:for="{{comments}}" wx:key="{{item.id}}">
+      <view class="info">
+        <view class="user">
+          <image src="http://nos.netease.com/yanxuan/8945ae63d940cc42406c3f67019c5cb6.png"></image>
+          <text>用户名</text>
+        </view>
+        <view class="time">{{item.add_time}}</view>
+      </view>
+      <view class="comment">{{item.content}}</view>
+      <view class="imgs" wx:if="{{item.pic_list.length > 0}}">
+        <image class="img" wx:for="{{item.pic_list}}" wx:key="{{pitem.id}}" wx:for-item="pitem" src="{{pitem.pic_url}}"></image>
+      </view>
+      <!--<view class="customer-service" wx:if="{{item.commentReplyVO}}">
+        <text class="u">小选回复：</text>
+        <text class="c">{{item.commentReplyVO.replyContent}}</text>
+      </view>-->
+    </view>
+
+  </view>
+</view>

pages/topicComment/topicComment.wxss

@@ -0,0 +1,108 @@
+.comments{
+    width: 100%;
+    height: auto;
+    padding-left:30rpx;
+    background: #fff;
+    margin: 20rpx 0;
+}
+
+.comments .b{
+    height: auto;
+    width: 720rpx;
+}
+
+.comments .b.no-h{
+    margin-top: 0;
+}
+
+.comments .item{
+    height: auto;
+    width: 720rpx;
+    overflow: hidden;
+    border-bottom: 1px solid #d9d9d9;
+    padding-bottom: 25rpx;
+}
+
+.comments .info{
+    height: 127rpx;
+    width: 100%;
+    padding: 33rpx 0 27rpx 0;
+}
+
+.comments .user{
+    float: left;
+    width: auto;
+    height: 67rpx;
+    line-height: 67rpx;
+    font-size: 0;
+}
+
+.comments .user image{
+    float: left;
+    width: 67rpx;
+    height: 67rpx;
+    margin-right: 17rpx;
+    border-radius: 50%;
+}
+
+.comments .user text{
+    display: inline-block;
+    width: auto;
+    height: 66rpx;
+    overflow: hidden;
+    font-size: 29rpx;
+    line-height: 66rpx;
+}
+
+.comments .time{
+    display: block;
+    float: right;
+    width: auto;
+    height: 67rpx;
+    line-height: 67rpx;
+    color: #7f7f7f;
+    font-size: 25rpx;
+    margin-right: 30rpx;
+}
+
+.comments .comment{
+    width: 720rpx;
+    padding-right: 30rpx;
+    line-height: 45.8rpx;
+    font-size: 29rpx;
+    margin-bottom: 16rpx;
+}
+
+.comments .imgs{
+    width: 720rpx;
+    height: 150rpx;
+    margin-bottom: 25rpx;
+}
+
+.comments .imgs .img{
+    height: 150rpx;
+    width: 150rpx;
+    margin-right: 28rpx;
+}
+
+.comments .customer-service{
+    width: 690rpx;
+    height: auto;
+    overflow: hidden;
+    margin-top: 23rpx;
+    background: rgba(0,0,0,.03);
+    padding: 21rpx;
+}
+
+
+.comments .customer-service .u{
+    font-size: 24rpx;
+    color: #333;
+    line-height: 37.5rpx;
+}
+
+.comments .customer-service .c{
+    font-size: 24rpx;
+    color: #999;
+    line-height: 37.5rpx;
+}

pages/topicDetail/topicDetail.js

@@ -6,11 +6,12 @@ Page({
   data: {
     id: 0,
     topic: {},
-    topicList: []
+    topicList: [],
+    commentCount: 0,
+    commentList: []
   },
   onLoad: function (options) {
     // 页面初始化 options为页面跳转所带来的参数
-
     var that = this;
     that.setData({
       id: parseInt(options.id)
@@ -35,14 +36,30 @@ Page({
         });
       }
     });
+  },
+  getCommentList(){
+    let that = this;
+    util.request(api.CommentList, { valueId: that.data.id, typeId: 1, size: 5 }).then(function (res) {
+      if (res.errno === 0) {
 
+        that.setData({
+          commentList: res.data.data,
+          commentCount: res.data.count
+        });
+      }
+    });
+  },
+  postComment (){
+    wx.navigateTo({
+      url: '/pages/commentPost/commentPost?valueId='+this.data.id + '&typeId=1',
+    })
   },
   onReady: function () {
 
   },
   onShow: function () {
     // 页面显示
-
+    this.getCommentList();
   },
   onHide: function () {
     // 页面隐藏

pages/topicDetail/topicDetail.wxml

@@ -8,60 +8,28 @@
   <scroll-view class="comments">
     <view class="h">
       <text class="t">精选留言</text>
-      <image class="i" src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/comment-add-2aca147c3f.png"></image>
+      <image bindtap="postComment" class="i" src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/comment-add-2aca147c3f.png"></image>
     </view>
-    <view class="post-comment">
-        <view class="input-box">
-            <textarea class="content" placeholder="留言经过筛选后，对所有人可见" />
-            <text class="count">140</text>
-        </view>
-        <view class="btns">
-            <view class="close">取消</view>
-            <view class="post">发表</view>
-        </view>
-    </view>
-    <view class="has-comments">
+     <view class="has-comments" wx:if="{{commentList.length > 0 }}">
       <view class="b">
-        <view class="item">
-          <view class="info">
-            <view class="user">
-              <image src="http://nos.netease.com/mail-online/df67755516bdeea4dbe4e994e8a0af4c/mail180x180.jpg"></image>
-              <text>h****a</text>
-            </view>
-            <view class="time">2016-10-25 11:39:49</view>
-          </view>
-          <view class="comment">
-            第一次知道环保袋原来有这么多讲究！
-          </view>
-        </view>
-        <view class="item">
+        <view class="item" wx:for="{{commentList}}" wx:key="{{item.id}}">
           <view class="info">
             <view class="user">
-              <image src="http://nos.netease.com/mail-online/df67755516bdeea4dbe4e994e8a0af4c/mail180x180.jpg"></image>
-              <text>h****a</text>
+              <image src="{{item.user_info.avatar}}"></image>
+              <text>{{item.user_info.username}}</text>
             </view>
-            <view class="time">2016-10-25 11:39:49</view>
+            <view class="time">{{item.add_time}}</view>
           </view>
           <view class="comment">
-            第一次知道环保袋原来有这么多讲究！话说一个环保袋能用131次，起码得用上一年，不够耐看就算再耐用也会厌吧😂😂还好这两款看起来都超好搭的样子！
-          </view>
-        </view>
-        <view class="item">
-          <view class="info">
-            <view class="user">
-              <image src="http://nos.netease.com/mail-online/df67755516bdeea4dbe4e994e8a0af4c/mail180x180.jpg"></image>
-              <text>h****a</text>
-            </view>
-            <view class="time">2016-10-25 11:39:49</view>
-          </view>
-          <view class="comment">
-            第一次知道环保袋原来有这么多讲究！话说一个环保袋能用131次，起码得用上一年，不够耐看就算再耐用也会厌吧😂😂还好这两款看起来都超好搭的样子！
+            {{item.content}}
           </view>
         </view>
       </view>
-      <view class="load">查看更多</view>
-    </view>
-    <view class="no-comments">
+      <view class="load" wx:if="{{commentCount > 5}}">
+        <navigator url="/pages/topicComment/topicComment?valueId={{topic.id}}&typeId=1">查看更多</navigator>
+      </view>
+    </view> 
+    <view class="no-comments" wx:if="{{commentList.length <= 0}}">
         <view class="b">    
             <image class="icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/no-comment-560f87660a.png"></image>
             <text class="txt">等你来留言</text>

pages/topicDetail/topicDetail.wxss

@@ -115,66 +115,7 @@
     font-size: 38.5rpx;
 }
 
-.post-comment{
-    display: none;
-    width: 690rpx;
-    height: auto;
-    overflow: hidden;
-    margin-top: 20rpx;
-}
-
-.post-comment .input-box{
-    height: 337.5rpx;
-    width: 690rpx;
-    position: relative;
-}
-
-.post-comment .input-box .content{
-    position: absolute;
-    top:0;
-    left:0;
-    display: block;
-    background:  #f4f4f4;
-    font-size: 29rpx;
-    color: #333;
-    height: 300rpx;
-    width: 650rpx;
-    padding: 20rpx;
-}
-
-.post-comment .input-box .count{
-    position: absolute;
-    bottom:20rpx;
-    right: 20rpx;
-    display: block;
-    height: 30rpx;
-    width: 50rpx;
-    font-size: 29rpx;
-    color: #999;
-}
-
-.post-comment .btns{
-    height: 108rpx;
-}
-
-.post-comment .close{
-    float: left;
-    height: 108rpx;
-    line-height: 108rpx;
-    text-align: left;
-    color: #666;
-}
-
-
-.post-comment .post{
-    float: right;
-    height: 108rpx;
-    line-height: 108rpx;
-    text-align: right;
-}
-
 .no-comments{
-    display: none;
     height: 297rpx;
 }