反馈意见图片上传说明

pages/welfareMall/feedback/feedback.js

@@ -6,7 +6,7 @@ Page({
    */
   data: {
     t_length: 0,
-
+    avatarUrl: []
   },
 
   bindText: function (e) {
@@ -17,6 +17,72 @@ Page({
     }) 
   },
 
+   /** 图片选择 */
+   bindViewTap: function(){
+    var that = this;
+    if(this.data.avatarUrl.length < 4){
+      wx.chooseImage({
+        // 设置最多可以选择的图片张数，默认9,如果我们设置了多张,那么接收时//就不在是单个变量了,
+         count: 4, 
+         sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
+         sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
+         success: function(res){
+          // 获取成功,将获取到的地址赋值给临时变量
+          console.log(res.tempFilePaths);
+          if (res.tempFilePaths.count == 0) {
+            return;
+          }
+          //上传图片
+          var imgArrNow = that.data.avatarUrl;
+          imgArrNow = imgArrNow.concat(res.tempFilePaths);
+          that.setData({
+          //将临时变量赋值给已经在data中定义好的变量
+           avatarUrl:imgArrNow
+          })
+         },
+         fail: function(res) {
+          // fail
+         },
+         complete: function(res) {
+          // complete
+         }
+        })
+    } else {
+      wx.showToast({
+        title: '最多添加4张图片',
+        icon: 'none',
+        duration: 1500
+      })
+    }
+   },
+
+   /** 删除图片Banner */
+  deleteImvBanner: function(e) {
+    var avatarUrl = this.data.avatarUrl;
+    var itemIndex = e.currentTarget.dataset.id;
+    avatarUrl.splice(itemIndex, 1);
+    this.setData({
+      avatarUrl: avatarUrl
+    })
+    //判断是否隐藏选择图片
+    // this.chooseViewShowBanner();
+  },
+
+   /** 图片预览 */
+  previewImage: function(e){
+    var that = this,
+    //获取当前图片的下标
+      index = e.currentTarget.dataset.index,
+      //数据源
+      avatarUrl = this.data.avatarUrl;
+    wx.previewImage({
+    //当前显示下标
+     current: avatarUrl[index],
+     //数据源
+     urls: avatarUrl
+    })
+   },
+
   /**
    * 生命周期函数--监听页面加载
    */

pages/welfareMall/feedback/feedback.wxml

@@ -3,16 +3,21 @@
   <view class="feedback-style flex-column">
     <view class="feedback-title">建议</view>
     <view class="feedback-text flex-column">
-      <view class='suggest_box'>
-        <textarea class='suggest_text' bindinput="bindText" maxlength='200' placeholder='请输入您的建议' placeholder-class='sug_p'>
-          <text class="suggest_text-num flex-column">{{t_length}}/500</text>
+      <textarea class='suggest_text' bindinput="bindText" maxlength='500' placeholder='请输入您的建议' placeholder-class='sug_p'>
         </textarea>
-      </view>
+      <view class="suggest_text-count flex-row"><text class="suggest_text-num">{{t_length}}/500</text></view>
     </view>
-    <view class="feedback-exp flex-row">
+    <view class="feedback-exp flex-row" catchtap="bindViewTap">
       <view class="feedback-explain">图片（选项）（最多添加4张）</view>
       <view></view>
     </view>
-    <view class="explain-img"></view>
+    <view class="explain-img flex-row">
+      <view class="explain-img-style flex-column" wx:for="{{avatarUrl}}" wx:key="key" data-index="{{index}}" bindtap="previewImage">
+        <view class="close-img-style flex-row">
+          <image class="close-img" src="" mode="scaleToFill" catchtap="deleteImvBanner" data-id="{{index}}" src="/images/welfareMall/toDelete.png"></image>
+        </view>
+        <image class="explain-img-preview " src="{{item}}"></image>
+      </view>
+    </view>
   </view>
 </view>

pages/welfareMall/feedback/feedback.wxss

@@ -28,10 +28,19 @@ textarea{
   background: #FFFFFF;
   border: 1rpx solid #3E3E3E;
   border-radius: 10rpx;
+  z-index: 1;
+}
+
+.suggest_text-count{
+  width: 659rpx;
+  height: 40rpx;
+  justify-content: flex-end;
+  margin-right: 28rpx;
 }
 
 .suggest_text-num{
-  align-items: flex-end;
+  z-index: 2;
+  margin-bottom: 86rpx;
 }
 
 .feedback-exp{
@@ -46,4 +55,37 @@ textarea{
   font-size: 24rpx;
   font-weight: 500;
   color: #444444;
+}
+
+.explain-img{
+  width: 659rpx;
+  height: 180rpx;
+  justify-content: space-between;
+}
+
+.explain-img-style{
+  width: 160rpx;
+  height: 180rpx;
+}
+
+.explain-img-preview{
+  width: 154rpx;
+  height: 154rpx;
+  border: 1rpx solid #3E3E3E;
+  border-radius: 10rpx;
+  z-index: 1;
+}
+
+.close-img-style{
+  width: 154rpx;
+  height: 22rpx;
+  justify-content: flex-end;
+  z-index: 2;
+}
+
+.close-img{
+  width: 22rpx;
+  height: 22rpx;
+  margin-top: 30rpx;
+  margin-right: -5rpx;
 }