chore[litemall-wx, litemall-wx-api]: 意见反馈组件优化

1. 删除fastjson依赖库
2. 支持图片选择
3. 小程序端校验用户手机号码

litemall-wx-api/pom.xml

@@ -49,12 +49,6 @@
             <artifactId>weixin-java-miniapp</artifactId>
         </dependency>
 
-        <dependency>
-            <groupId>com.alibaba</groupId>
-            <artifactId>fastjson</artifactId>
-            <version>1.2.45</version>
-        </dependency>
-
     </dependencies>
 
     <build>

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

@@ -1,6 +1,6 @@
 package org.linlinjava.litemall.wx.web;
 
-import com.alibaba.fastjson.JSONObject;
+import org.linlinjava.litemall.core.util.JacksonUtil;
 import org.linlinjava.litemall.core.util.RegexUtil;
 import org.linlinjava.litemall.core.util.ResponseUtil;
 import org.linlinjava.litemall.db.domain.LitemallFeedback;
@@ -12,17 +12,11 @@ import org.apache.commons.logging.Log;
 import org.apache.commons.logging.LogFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.validation.annotation.Validated;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.ResponseBody;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
 
 import javax.servlet.http.HttpServletRequest;
-import java.io.BufferedReader;
-import java.io.IOException;
 import java.time.LocalDateTime;
 
-
 /**
  * @author Yogeek
  * @date 2018/8/25 14:10
@@ -36,67 +30,33 @@ public class WxFeedbackController {
     @Autowired
     private LitemallFeedbackService feedbackService;
     @Autowired
-    protected HttpServletRequest request;
-    @Autowired
     private LitemallUserService userService;
 
     /**
      * 意见反馈
      */
     @PostMapping("submit")
-    @ResponseBody
-    public Object save(@LoginUser Integer userId){
-        if(userId == null){
+    public Object submit(@LoginUser Integer userId, @RequestBody LitemallFeedback feedback) {
+        if (userId == null) {
             return ResponseUtil.unlogin();
         }
 
-        LitemallUser user = userService.findById(userId);
-        String username = user.getUsername();
-        //获取客户端对象
-        JSONObject feedbackJson = this.getJsonRequest();
-
-        if (null != feedbackJson) {
-            LitemallFeedback feedback = new LitemallFeedback();
-
-            String mobile = feedbackJson.getString("mobile");
-            // 测试手机号码是否正确
-            if (!RegexUtil.isMobileExact(mobile)) {
-                return ResponseUtil.badArgument();
-            }
-            String[] feedType = new String [] {"请选择反馈类型", "商品相关", "功能异常", "优化建议", "其他"};
-            int index = feedbackJson.getInteger("index");
-            String content = feedbackJson.getString("content");
-
-            feedback.setUserId(userId);
-            feedback.setUsername(username);
-            feedback.setMobile(mobile);
-            feedback.setAddTime(LocalDateTime.now());
-            feedback.setFeedType(feedType[index]);
-            //状态默认是0，1表示状态已发生变化
-            feedback.setStatus(1);
-            feedback.setContent(content);
-            feedbackService.add(feedback);
-
-            return ResponseUtil.ok("感谢您的反馈");
-        }
-        return ResponseUtil.badArgument();
-    }
-
-    private JSONObject getJsonRequest() {
-        JSONObject result = null;
-        StringBuilder sb = new StringBuilder();
-        try (BufferedReader reader = request.getReader();) {
-            char[] buff = new char[1024];
-            int len;
-            while ((len = reader.read(buff)) != -1) {
-                sb.append(buff, 0, len);
-            }
-            result = JSONObject.parseObject(sb.toString());
-        } catch (IOException e) {
-            e.printStackTrace();
+        // 测试手机号码是否正确
+        if (!RegexUtil.isMobileExact(feedback.getMobile())) {
+            return ResponseUtil.badArgument();
         }
 
-        return result;
+        LitemallUser user = userService.findById(userId);
+        String username = user.getUsername();
+        feedback.setId(null);
+        feedback.setUserId(userId);
+        feedback.setUsername(username);
+        feedback.setAddTime(LocalDateTime.now());
+        //状态默认是0，1表示状态已发生变化
+        feedback.setStatus(1);
+        feedbackService.add(feedback);
+
+        return ResponseUtil.ok();
     }
 
 }

litemall-wx/pages/ucenter/feedback/feedback.js

@@ -1,47 +1,108 @@
 var util = require('../../../utils/util.js');
+var check = require('../../../utils/check.js');
 var api = require('../../../config/api.js');
 
-
-
 var app = getApp();
 
 Page({
   data: {
     array: ['请选择反馈类型', '商品相关', '功能异常', '优化建议', '其他'],
     index: 0,
-    content:'',
-    contentLength:0,
-    mobile:''
+    content: '',
+    contentLength: 0,
+    mobile: '',
+    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)
+    })
+
   },
-  bindPickerChange: function (e) {
-    console.log('picker发送选择改变，携带值为', e.detail.value);
+  previewImage: function (e) {
+    wx.previewImage({
+      current: e.currentTarget.id, // 当前显示图片的http链接
+      urls: this.data.files // 需要预览的图片http链接列表
+    })
+  },  
+  bindPickerChange: function(e) {
     this.setData({
       index: e.detail.value
     });
   },
-  mobileInput: function (e) {
-    let that = this;
+  mobileInput: function(e) {
     this.setData({
-      mobile: e.detail.value,
+      mobile: e.detail.value
     });
-    console.log(that.data.mobile);
   },
-  contentInput: function (e) {
-   
-    let that = this;
+  contentInput: function(e) {
     this.setData({
       contentLength: e.detail.cursor,
       content: e.detail.value,
     });
-    console.log(that.data.content);
   },
-  cleanMobile:function(){
-    let that = this;
-
+  clearMobile: function(e) {
+    this.setData({
+      mobile: ''
+    });
   },
-  sbmitFeedback : function(e){
+  submitFeedback: function(e) {
+    if (!app.globalData.hasLogin) {
+      wx.navigateTo({
+        url: "/pages/auth/login/login"
+      });
+    }
+
     let that = this;
-    if (that.data.index == 0){
+    if (that.data.index == 0) {
       util.showErrorToast('请选择反馈类型');
       return false;
     }
@@ -55,55 +116,69 @@ Page({
       util.showErrorToast('请输入手机号码');
       return false;
     }
+
+    if (!check.isValidPhone(this.data.mobile)) {
+      this.setData({
+        mobile: ''
+      });
+      util.showErrorToast('请输入手机号码');
+      return false;
+    }
+
     wx.showLoading({
       title: '提交中...',
-      mask:true,
-      success: function () {
+      mask: true,
+      success: function() {
 
       }
     });
 
-    console.log(that.data);
+    util.request(api.FeedbackAdd, {
+      mobile: that.data.mobile,
+      feedType: that.data.array[that.data.index],
+      content: that.data.content,
+      hasPicture: that.data.hasPicture,
+      picUrls: that.data.picUrls
+    }, 'POST').then(function(res) {
+      wx.hideLoading();
 
-    util.request(api.FeedbackAdd, { mobile: that.data.mobile, index: that.data.index, content: that.data.content},'POST').then(function (res) {
       if (res.errno === 0) {
-        console.log(res.data);
-      
-        wx.hideLoading();
-
         wx.showToast({
-          title: res.data,
+          title: '感谢您的反馈！',
           icon: 'success',
           duration: 2000,
-          complete: function () {
-            console.log('重新加载');
+          complete: function() {
             that.setData({
               index: 0,
               content: '',
               contentLength: 0,
-              mobile: ''
+              mobile: '',
+              hasPicture: false,
+              picUrls: [],
+              files: []
             });
           }
         });
       } else {
-        util.showErrorToast(res.data);
+        util.showErrorToast(res.errmsg);
       }
-      
+
     });
   },
-  onLoad: function (options) {
+  onLoad: function(options) {
+
   },
-  onReady: function () {
+  onReady: function() {
 
   },
-  onShow: function () {
+  onShow: function() {
 
   },
-  onHide: function () {
+  onHide: function() {
     // 页面隐藏
 
   },
-  onUnload: function () {
+  onUnload: function() {
     // 页面关闭
   }
 })

litemall-wx/pages/ucenter/feedback/feedback.json

@@ -1,3 +1,3 @@
 {
-
+  "navigationBarTitleText": "意见反馈"
 }

litemall-wx/pages/ucenter/feedback/feedback.wxml

@@ -10,18 +10,26 @@
     </view>
   </picker>
   <view class="fb-body">
-    <textarea class="content" placeholder="对我们网站、商品、服务，你还有什么建议吗？你还希望在商城上买到什么？请告诉我们..."  bindinput ="contentInput" maxlength="500" auto-focus="true" value="{{content}}"/>
+    <textarea class="content" placeholder="对我们网站、商品、服务，你还有什么建议吗？你还希望在商城上买到什么？请告诉我们..." bindinput="contentInput" maxlength="500" auto-focus="true" value="{{content}}" />
+    <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>
+      </block>
+      <view class="weui-uploader__input-box" wx:if="{{ files.length < 5 }}">
+        <view class="weui-uploader__input" bindtap="chooseImage"></view>
+      </view>
+    </view>
     <view class="text-count">{{contentLength}}/500</view>
   </view>
   <view class="fb-mobile">
     <view class="label">手机号码</view>
     <view class="mobile-box">
-      <input class="mobile" maxlength="11" type="number" placeholder="方便我们与你联系" bindinput ="mobileInput" value="{{mobile}}"/>
-      <!--
-      <image class="clear-icon" src="https://platform-wxmall.oss-cn-beijing.aliyuncs.com/upload/20180727/150647657fcdd0.png" bindtap="cleanMobile"></image>
-      -->
+      <input class="mobile" maxlength="11" type="number" placeholder="方便我们与你联系" bindinput="mobileInput" value="{{mobile}}" />
+      <image class="clear-icon" src="/static/images/clear_input.png" wx:if="{{ mobile.length > 0 }}" catchtap="clearMobile"></image>
     </view>
   </view>
 
-  <view class="fb-btn" bindtap="sbmitFeedback">提交</view>
+  <view class="fb-btn" bindtap="submitFeedback">提交</view>
 </view>

litemall-wx/pages/ucenter/feedback/feedback.wxss

@@ -1,4 +1,4 @@
-page{
+  page{
     background: #f4f4f4;
     min-height: 100%;
 }
@@ -36,20 +36,83 @@ page{
 .fb-body{
   width: 100%;
   background: #fff;
-  height: 374rpx;
+  height: 600rpx;
   padding: 18rpx 30rpx 64rpx 30rpx;
 }
 
 .fb-body .content{
   width: 100%;
-  height: 100%;
+  height: 400rpx;
   color: #333;
   line-height: 40rpx;
   font-size: 28rpx;
 }
 
+.weui-uploader__files{
+  width: 100%;
+}
+
+.weui-uploader__file {
+  float: left;
+  margin-right: 9px;
+  margin-bottom: 9px;
+}
+
+.weui-uploader__img {
+  display: block;
+  width: 50px;
+  height: 50px;
+}
+
+.weui-uploader__input-box {
+  float: left;
+  position: relative;
+  margin-right: 9px;
+  margin-bottom: 9px;
+  width: 50px;
+  height: 50px;
+  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;
+}
+
 .fb-body .text-count{
-  padding-top: 17rpx;
   line-height: 30rpx;
   float: right;
   color: #666;
@@ -95,12 +158,13 @@ page{
   font-size: 24rpx;
 }
 
-.clear-icon{
+.fb-mobile .clear-icon{
   position: absolute;
-  top: 43rpx;
+  top: 27rpx;
   right: 30rpx;
   width: 48rpx;
   height: 48rpx;
+  z-index: 2;
 }
 
 .fb-btn{

litemall-wx/project.config.json

@@ -28,7 +28,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 32,
+			"current": 33,
 			"list": [
 				{
 					"id": -1,
@@ -225,7 +225,14 @@
 				{
 					"id": -1,
 					"name": "测试更新",
-					"pathName": "pages/index/index"
+					"pathName": "pages/index/index",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "意见反馈",
+					"pathName": "pages/ucenter/feedback/feedback",
+					"query": ""
 				}
 			]
 		}