update[litemall-wx,litemall-wx-api,litemall-db]: 实现专题评论

litemall-wx-api/src/main/java/org/linlinjava/litemall/wx/web/WxCommentController.java

@@ -72,10 +72,10 @@ public class WxCommentController {
      */
     @RequestMapping("list")
     public Object list(Byte typeId, Integer valueId, Integer showType,
-                       @RequestParam(value = "page", defaultValue = "0") Integer page,
+                       @RequestParam(value = "page", defaultValue = "1") Integer page,
                        @RequestParam(value = "size", defaultValue = "10") Integer size) {
         if(typeId == null || valueId == null || showType == null){
-            return ResponseUtil.fail401();
+            return ResponseUtil.badArgument();
         }
 
         List<LitemallComment> commentList = commentService.query(typeId, valueId, showType, page, size);
@@ -94,6 +94,7 @@ public class WxCommentController {
         }
         Map<String, Object> data = new HashMap();
         data.put("data", commentVoList);
+        data.put("count", count);
         data.put("currentPage", page);
         return ResponseUtil.ok(data);
     }

litemall-wx/app.json

@@ -4,6 +4,7 @@
     "pages/catalog/catalog",
     "pages/newGoods/newGoods",
     "pages/hotGoods/hotGoods",
+    "pages/ucenter/index/index",        
     "pages/ucenter/address/address",
     "pages/ucenter/addressAdd/addressAdd",
     "pages/ucenter/footprint/footprint",
@@ -15,11 +16,12 @@
     "pages/auth/register/register",
     "pages/auth/reset/reset",
     "pages/payResult/payResult",
-    "pages/ucenter/index/index",
-    "pages/topic/topic",
     "pages/comment/comment",
     "pages/commentPost/commentPost",
+    "pages/topic/topic",        
     "pages/topicComment/topicComment",
+    "pages/topicDetail/topicDetail",
+    "pages/topicCommentPost/topicCommentPost",        
     "pages/brand/brand",
     "pages/brandDetail/brandDetail",
     "pages/search/search",
@@ -28,8 +30,7 @@
     "pages/shopping/checkout/checkout",
     "pages/shopping/address/address",
     "pages/shopping/addressAdd/addressAdd",
-    "pages/goods/goods",
-    "pages/topicDetail/topicDetail"
+    "pages/goods/goods"
   ],
   "window": {
     "backgroundTextStyle": "dark",

litemall-wx/pages/topic/topic.js

@@ -3,7 +3,6 @@ var api = require('../../config/api.js');
 var app = getApp()
 Page({
     data: {
-        // text:"这是一个页面"
         topicList: [],
         page: 1,
         size: 10,
@@ -14,7 +13,6 @@ Page({
     onLoad: function (options) {
         // 页面初始化 options为页面跳转所带来的参数
         this.getTopic();
-
     },
     onReady: function () {
         // 页面渲染完成
@@ -29,7 +27,6 @@ Page({
         // 页面关闭
     },
     nextPage: function (event) {
-      console.log();
         var that = this;
         if (this.data.page+1 > that.data.count / that.data.size) {
             return true;
@@ -37,7 +34,7 @@ Page({
 
         
         that.setData({
-            "page": parseInt(that.data.page) + 1
+            page: that.data.page + 1
         });
 
         this.getTopic();
@@ -79,7 +76,7 @@ Page({
 
         var that = this;
         that.setData({
-            "page": parseInt(that.data.page) - 1
+            page: that.data.page - 1
         });
         this.getTopic();
     }

litemall-wx/pages/topicComment/topicComment.wxml

@@ -3,8 +3,8 @@
     <view class="item" wx:for="{{comments}}" wx:key="id">
       <view class="info">
         <view class="user">
-          <image src="{{item.userInfo.avatar}}"></image>
-          <text>{{item.userInfo.nickname}}</text>
+          <image src="{{item.userInfo.avatarUrl}}"></image>
+          <text>{{item.userInfo.nickName}}</text>
         </view>
         <view class="time">{{item.addTime}}</view>
       </view>

litemall-wx/pages/topicCommentPost/topicCommentPost.js

@@ -0,0 +1,179 @@
+// 上传组件 基于https://github.com/Tencent/weui-wxss/tree/master/src/example/uploader
+var app = getApp();
+var util = require('../../utils/util.js');
+var api = require('../../config/api.js');
+Page({
+  data: {
+    valueId: 0,
+    topic: {},
+    content: '',
+    stars: [0, 1, 2, 3, 4],
+    star: 5,
+    starText: '十分满意',
+    hasPicture: false,
+    picUrls: [],
+    files: []
+  },
+  chooseImage: function (e) {
+    if (this.data.files.length >= 5) {
+      util.showErrorToast('只能上传五张图片')
+      return false;
+    }
+
+    var that = this;
+    wx.chooseImage({
+      count: 1,
+      sizeType: ['original', 'compressed'],
+      sourceType: ['album', 'camera'],
+      success: function (res) {
+        that.setData({
+          files: that.data.files.concat(res.tempFilePaths)
+        });
+        that.upload(res);
+      }
+    })
+  },
+  upload: function (res) {
+    var that = this;
+    const uploadTask = wx.uploadFile({
+      url: api.StorageUpload,
+      filePath: res.tempFilePaths[0],
+      name: 'file',
+      success: function (res) {
+        var _res = JSON.parse(res.data);
+        if (_res.errno === 0) {
+          var url = _res.data.url
+          that.data.picUrls.push(url)
+          that.setData({
+            hasPicture: true,
+            picUrls: that.data.picUrls
+          })
+        }
+      },
+      fail: function (e) {
+        wx.showModal({
+          title: '错误',
+          content: '上传失败',
+          showCancel: false
+        })
+      },
+    })
+
+    uploadTask.onProgressUpdate((res) => {
+      console.log('上传进度', res.progress)
+      console.log('已经上传的数据长度', res.totalBytesSent)
+      console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
+    })
+
+  },
+  previewImage: function (e) {
+    wx.previewImage({
+      current: e.currentTarget.id, // 当前显示图片的http链接
+      urls: this.data.files // 需要预览的图片http链接列表
+    })
+  },
+  selectRater: function (e) {
+    var star = e.currentTarget.dataset.star + 1;
+    var starText;
+    if (star == 1) {
+      starText = '很差';
+    }
+    else if (star == 2) {
+      starText = '不太满意';
+    }
+    else if (star == 3) {
+      starText = '满意';
+    }
+    else if (star == 4) {
+      starText = '比较满意';
+    }
+    else {
+      starText = '十分满意'
+    }
+    this.setData({
+      star: star,
+      starText: starText
+    })
+
+  },
+  onLoad: function (options) {
+    if (parseInt(options.typeId) !== 1){
+      return;
+    }
+
+    var that = this;
+    that.setData({
+      valueId: options.valueId
+    });
+    this.getTopic();
+  },
+  getTopic: function () {
+    let that = this;
+    util.request(api.TopicDetail, { id: that.data.valueId }).then(function (res) {
+      if (res.errno === 0) {
+
+        that.setData({
+          topic: res.data,
+        });
+
+      }
+    });    
+  },
+  onClose: function () {
+    wx.navigateBack();
+  },
+  onPost: function () {
+    let that = this;
+
+    if (!this.data.content) {
+      util.showErrorToast('请填写评论')
+      return false;
+    }
+
+    util.request(api.CommentPost, {
+      typeId: 1,
+      valueId: that.data.valueId,
+      content: that.data.content,
+      star: that.data.star,
+      hasPicture: that.data.hasPicture,
+      picUrls: that.data.picUrls
+    }, 'POST').then(function (res) {
+      if (res.errno === 0) {
+        wx.showToast({
+          title: '评论成功',
+          complete: function () {
+            wx.navigateBack();
+          }
+        })
+      }
+    });
+  },
+  bindInputValue(event) {
+
+    let value = event.detail.value;
+
+    //判断是否超过140个字符
+    if (value && value.length > 140) {
+      return false;
+    }
+
+    this.setData({
+      content: event.detail.value,
+    })
+  },
+  onReady: function () {
+
+  },
+  onShow: function () {
+    // 页面显示
+
+  },
+  onHide: function () {
+    // 页面隐藏
+
+  },
+  onUnload: function () {
+    // 页面关闭
+
+  }
+})

litemall-wx/pages/topicCommentPost/topicCommentPost.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "评价商品"
+}

litemall-wx/pages/topicCommentPost/topicCommentPost.wxml

@@ -0,0 +1,55 @@
+<view class="container">
+  <view class="post-comment">
+    <view class="goods">
+      <view class="img">
+        <image src="{{topic.scenePicUrl}}"></image>
+      </view>
+      <view class="info">
+        <view class="t">
+          <text class="name">{{topic.title}}</text>
+        </view>
+        <view class="attr">{{topic.subtitle}}</view>
+      </view>
+    </view>
+    <view class="rater">
+      <text class="rater-title">评分</text>
+      <block wx:for="{{stars}}" wx:key="*this" wx:for-item="item">
+        <image src="/static/images/icon_collect_checked.png" bindtap="selectRater" data-star="{{item}}" wx:if="{{item < star}}"></image>
+        <image src="/static/images/icon_collect.png" bindtap="selectRater" data-star="{{item}}" wx:else></image>
+      </block>
+      <text class="rater-desc">{{starText}}</text>
+    </view>
+    <view class="input-box">
+      <textarea class="content" focus="true" bindinput="bindInputValue" maxlength="140" placeholder="留言经过筛选后，对所有人可见" />
+      <text class="count">{{140 - content.length}}</text>
+    </view>
+
+    <view class="weui-uploader">
+      <view class="weui-uploader__hd">
+        <view class="weui-uploader__title">图片上传</view>
+        <view class="weui-uploader__info">{{picUrls.length}}/{{files.length}}</view>
+      </view>
+      <view class="weui-uploader__bd">
+        <view class="weui-uploader__files" id="uploaderFiles">
+          <block wx:for="{{files}}" wx:key="*this">
+            <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
+              <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
+            </view>
+            <!-- <view class="weui-uploader__file weui-uploader__file_status" bindtap="previewImage" id="{{item}}">
+              <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
+              <view class="weui-uploader__file-content">50%</view>
+            </view> -->
+          </block>
+          <view class="weui-uploader__input-box">
+            <view class="weui-uploader__input" bindtap="chooseImage"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="btns">
+      <view class="close" bindtap="onClose">取消</view>
+      <view class="post" bindtap="onPost">发表</view>
+    </view>
+  </view>
+</view>

litemall-wx/pages/topicCommentPost/topicCommentPost.wxss

@@ -0,0 +1,246 @@
+page, .container {
+  height: 100%;
+  background: #f4f4f4;
+}
+
+.post-comment {
+  width: 750rpx;
+  height: auto;
+  overflow: hidden;
+  padding: 30rpx;
+  background: #fff;
+}
+
+.post-comment .goods {
+  display: flex;
+  align-items: center;
+  height: 199rpx;
+  margin-left: 31.25rpx;
+}
+
+.post-comment .goods .img {
+  height: 145.83rpx;
+  width: 145.83rpx;
+  background: #f4f4f4;
+}
+
+.post-comment .goods .img image {
+  height: 145.83rpx;
+  width: 145.83rpx;
+}
+
+.post-comment .goods .info {
+  height: 145.83rpx;
+  flex: 1;
+  padding-left: 20rpx;
+}
+
+.post-comment .goods .name {
+  margin-top: 30rpx;
+  display: block;
+  height: 44rpx;
+  line-height: 44rpx;
+  color: #333;
+  font-size: 30rpx;
+}
+
+.post-comment .goods .number {
+  display: block;
+  height: 37rpx;
+  line-height: 37rpx;
+  color: #666;
+  font-size: 25rpx;
+}
+
+.post-comment .goods .status {
+  width: 105rpx;
+  color: #b4282d;
+  font-size: 25rpx;
+}
+
+.post-comment .rater {
+  display: flex;
+  flex-direction: row;
+  height: 55rpx;
+}
+
+.post-comment .rater .rater-title {
+  font-size: 29rpx;
+  padding-right: 10rpx;
+}
+
+.post-comment .rater image {
+  padding-left: 5rpx;
+  height: 50rpx;
+  width: 50rpx;
+}
+
+.post-comment .rater .rater-desc {
+  font-size: 29rpx;
+  padding-left: 10rpx;
+}
+
+.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;
+  border: 5px solid #f4f4f4;
+  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;
+}
+
+.weui-uploader {
+  margin-top: 50rpx;
+}
+
+.weui-uploader__hd {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  padding-bottom: 10px;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+.weui-uploader__title {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  flex: 1;
+}
+
+.weui-uploader__info {
+  color: #b2b2b2;
+}
+
+.weui-uploader__bd {
+  margin-bottom: -4px;
+  margin-right: -9px;
+  overflow: hidden;
+}
+
+.weui-uploader__file {
+  float: left;
+  margin-right: 9px;
+  margin-bottom: 9px;
+}
+
+.weui-uploader__img {
+  display: block;
+  width: 79px;
+  height: 79px;
+}
+
+.weui-uploader__file_status {
+  position: relative;
+}
+
+.weui-uploader__file_status:before {
+  content: " ";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.weui-uploader__file-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  color: #fff;
+}
+
+.weui-uploader__input-box {
+  float: left;
+  position: relative;
+  margin-right: 9px;
+  margin-bottom: 9px;
+  width: 77px;
+  height: 77px;
+  border: 1px solid #d9d9d9;
+}
+
+.weui-uploader__input-box:after, .weui-uploader__input-box:before {
+  content: " ";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  background-color: #d9d9d9;
+}
+
+.weui-uploader__input-box:before {
+  width: 2px;
+  height: 39.5px;
+}
+
+.weui-uploader__input-box:after {
+  width: 39.5px;
+  height: 2px;
+}
+
+.weui-uploader__input-box:active {
+  border-color: #999;
+}
+
+.weui-uploader__input-box:active:after, .weui-uploader__input-box:active:before {
+  background-color: #999;
+}
+
+.weui-uploader__input {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}

litemall-wx/pages/topicDetail/topicDetail.js

@@ -15,10 +15,10 @@ Page({
     // 页面初始化 options为页面跳转所带来的参数
     var that = this;
     that.setData({
-      id: parseInt(options.id)
+      id: options.id
     });
 
-    util.request(api.TopicDetail, { id: that.data.id}).then(function (res) {
+    util.request(api.TopicDetail, { id: that.data.id }).then(function (res) {
       if (res.errno === 0) {
 
         that.setData({
@@ -29,18 +29,17 @@ Page({
       }
     });
 
-    util.request(api.TopicRelated, { id: that.data.id}).then(function (res) {
+    util.request(api.TopicRelated, { id: that.data.id }).then(function (res) {
       if (res.errno === 0) {
-
         that.setData({
           topicList: res.data
         });
       }
     });
   },
-  getCommentList(){
+  getCommentList() {
     let that = this;
-    util.request(api.CommentList, { valueId: that.data.id, typeId: 1, size: 5 }).then(function (res) {
+    util.request(api.CommentList, { valueId: that.data.id, typeId: 1, showType: 0, page: 1, size: 5 }).then(function (res) {
       if (res.errno === 0) {
 
         that.setData({
@@ -50,10 +49,15 @@ Page({
       }
     });
   },
-  postComment (){
-    wx.navigateTo({
-      url: '/pages/commentPost/commentPost?valueId='+this.data.id + '&typeId=1',
-    })
+  postComment() {
+    if (!app.globalData.hasLogin) {
+      wx.navigateTo({ url: "/pages/auth/login/login" });
+    }
+    else {
+      wx.navigateTo({
+        url: '/pages/topicCommentPost/topicCommentPost?valueId=' + this.data.id + '&typeId=1',
+      })
+    }
   },
   onReady: function () {
 

litemall-wx/pages/topicDetail/topicDetail.wxml

@@ -15,8 +15,8 @@
         <view class="item" wx:for="{{commentList}}" wx:key="id">
           <view class="info">
             <view class="user">
-              <image class="avatar" src="{{item.userInfo.avatar}}"></image>
-              <text class="nickname">{{item.userInfo.nickname}}</text>
+              <image class="avatar" src="{{item.userInfo.avatarUrl}}"></image>
+              <text class="nickname">{{item.userInfo.nickName}}</text>
             </view>
             <view class="time">{{item.addTime}}</view>
           </view>
@@ -41,7 +41,7 @@
       <text class="txt">专题推荐</text>
     </view>
     <view class="b">
-      <navigator class="item" wx:for="{{topicList}}" url="../topicDetail/topicDetail?id={{item.id}}">
+      <navigator class="item" wx:for="{{topicList}}" wx:key="id" url="../topicDetail/topicDetail?id={{item.id}}">
         <image class="img" src="{{item.scenePicUrl}}"></image>
         <text class="title">{{item.title}}</text>
       </navigator>

litemall-wx/project.config.json

@@ -215,6 +215,18 @@
 					"name": "购买商品评价",
 					"pathName": "pages/commentPost/commentPost",
 					"query": "orderId=2&typeId=0&valueId=1116011"
+				},
+				{
+					"id": 31,
+					"name": "专题评论列表",
+					"pathName": "pages/topicComment/topicComment",
+					"query": "valueId=314&typeId=1"
+				},
+				{
+					"id": -1,
+					"name": "专题评论添加",
+					"pathName": "pages/topicCommentPost/topicCommentPost",
+					"query": "valueId=314&typeId=1"
 				}
 			]
 		}