问题反馈

<form bindsubmit="onSubmit" report-submit="true">
  <text class="helptop">问题及反馈：</text>
  <view class="formarea">
    <textarea bindinput="inputContent" name="content" auto-focus placeholder="请描述您的问题与反馈，您的反馈会在24小时内得到答复。" placeholder-class="pc"></textarea>
    <text>4-200字</text>
  </view>
  <view class="forminput">
    <text>联系方式：</text>
    <input bindinput="inputPhone" name="phone"></input>
  </view>
  <view class="formimg">
    <text class="formimgtit">添加图片：</text>
    <view class='uploader-img  df' wx:if="{pics}">
      <view class='uploader-list' wx:for="{pics}" wx:key="item" >
        <image src='{item}' data-index="{index}" mode="aspectFit" bindtap='previewImg1'/>
        <image class='delete' data-index="{index}" src='../../images/delete.png' bindtap='deleteImg'/>
      </view>
    </view>
    <view class='upAdd' bindtap='chooseImg'>
      <image src='../../images/plus.png' mode="widthFix"/>
    </view>
  </view>
  <view class="btn">
    <button formType="submit" disabled="{disabled}">提交</button>
    <view class="callGetPhone" wx:if="{store.phone}">客服电话：{store.phone}<text bindtap='callGetPhone' data-phone="{store.phone}">马上咨询</text></view>
  </view>
</form>

// pages/user/help.js
const App = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    disabled: false,
    pics: [],//图片
    imglist:[]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let _this = this;
    App._get('user/getkefu', {}, function (result) {
      _this.setData({
        store: result.data.store
      });
    });
  },
  inputContent: function (e) {
    this.setData({
      content: e.detail.value
    })
  },
  inputPhone: function (e) {
    this.setData({
      phone: e.detail.value
    })
  },
  /**
   * 图片放大查看
   */
  previewImg: function (e) {
    var index = e.target.dataset.index;//当前图片地址
    var imgArr = e.target.dataset.list;//所有要预览的图片的地址集合 数组形式
    // console.log(index, imgArr)
    wx.previewImage({
      current: imgArr[index],
      urls: imgArr,
    })
  },
  /**
   * 图片上传
   * 
   */
  //上传图片开始
  chooseImg: function (e) {
    var _this = this, pics = _this.data.pics;
    let wxapp_id = App.getWxappId();
    if (pics.length < 3) {
      wx.chooseImage({
        count: 3, // 最多可以选择的图片张数，默认9
        sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
        sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
        success: function (res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          var tempFilePaths = res.tempFilePaths;
          for (var i = 0; i < tempFilePaths.length; i++) {
            wx.uploadFile({
              url: App.api_root + 'user/image',
              filePath: tempFilePaths[i],
              name: 'head',
              formData: {
                wxapp_id: wxapp_id,
                user_id: App.getUserId()
              },
              success: function (resu) {
                var resu = JSON.parse(resu.data);
                if (resu.code == 1) {
                  let picurl=resu.data.url;
                  _this.setData({
                    imglist: _this.data.imglist.concat(picurl),
                  })
                } else {
                  App.showError('上传失败');
                }
              }
            });
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 
            pics.push(tempFilePaths[i]);
          }
          _this.setData({
            pics: pics
          })
        },
      });
    } else {
      App.showError('最多上传3张图片');
    }
  },
  // 删除图片
  deleteImg: function (e) {
    var that = this;
    var pics = this.data.pics;
    var imglist = this.data.imglist;
    var index = e.currentTarget.dataset.index;
    pics.splice(index, 1);
    imglist.splice(index, 1);
    this.setData({
      imglist: imglist,
      pics: pics,
    })
  },
  // 预览图片
  previewImg1: function (e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var pics = this.data.pics;
    wx.previewImage({
      //当前显示图片
      current: pics[index],
      //所有图片
      urls: pics
    })
  },
  /**
   * 表单验证
   */
  validation: function (values) {
    var _this = this;
    if (values.content === '') {
      this.data.error = '问题及反馈不能为空';
      return false;
    }
    if (values.phone == "") {
      this.data.error = '联系方式不能为空';
      return false;
    }
    return true;
  },
  onSubmit(e) {
    let _this = this,
      values = e.detail.value;
    values.imglist = _this.data.imglist;
    // 记录formid
    App.saveFormId(e.detail.formId);
    // 表单验证
    if (!_this.validation(values)) {
      App.showError(_this.data.error);
      _this.setData({
        disabled: false
      });
      return false;
    }
    // 按钮禁用
    _this.setData({
      disabled: true
    });
    // 提交到后端
    App._post_form('user/feedBack', values, result => {
      if (result.code == 1) {
        App.showSuccess('提交成功', function () {
          wx.switchTab({
            url: '../user/index'
          })
        });
      } else {
        App.showError('提交失败');
      }
    }, false, () => {
      // 解除禁用
      _this.setData({
        disabled: false
      });
    });
  },
  // 拨打电话给收件人
  callGetPhone(e) {
    let _this = this;
    // 号码
    let phoneNumber = e.currentTarget.dataset.phone;
    wx.makePhoneCall({
      phoneNumber: phoneNumber,
      success: function () {
        console.log("拨打电话成功！")
      },
      fail: function () {
        console.log("拨打电话失败！")
      }
    })
  },
})

/* pages/user/help.wxss */
.helptop {
  border-top: 2rpx solid #eee;
  display: block;
  font-size: 28rpx;
  color: #666;
  padding: 0 32rpx;
  padding-top: 20rpx;
  padding-bottom: 15rpx;
}
.formarea {
  padding: 0 32rpx;
  border-bottom: 2rpx solid #eee;
  position: relative;
}
.formarea .pc {
  font-size: 28rpx;
  color: #D2D2D2;
}
.formarea textarea {
  width: 100%;
  height: 200rpx;
  font-size: 28rpx;
  color: #666;
}
.formarea text {
  position: absolute;
  font-size: 28rpx;
  color: #D2D2D2;
  display: block;
  right: 25rpx;
  bottom: 18rpx;
}
.forminput {
  position: relative;
}
.forminput text {
  font-size: 28rpx;
  color: #666666;
  line-height: 68rpx;
  height: 68rpx;
  display: block;
  position: absolute;
  left: 31rpx;
}
.forminput input {
  line-height: 70rpx;
  height: 70rpx;
  padding-right: 31rpx;
  padding-left: 170rpx;
  border-bottom: 2rpx solid #eee;
  font-size: 28rpx;
  color: #666666;
}
.formimg {
  padding: 0 31rpx;
  border-bottom: 2rpx solid #eee;
  padding-bottom: 30rpx;
  margin-bottom: 79rpx;
}
.formimg .formimgtit {
  font-size: 28rpx;
  color: #666666;
  padding-top: 20rpx;
  display: block;
  margin-bottom: 20rpx;
}
.formimg .upAdd image {
  width: 118rpx;
  height: 118rpx;
}
.uploader-img {
  flex-wrap: wrap;
}
.uploader-list {
  position: relative;
  width: 20%;
  overflow: hidden;
  margin-right: 2%;
}
.uploader-list image {
  width: 120rpx;
  height: 120rpx;
}
.uploader-list .delete {
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  right: 0rpx;
  top: 10rpx;
}
.btn button {
  display: block;
  width: 619rpx;
  height: 90rpx;
  text-align: center;
  line-height: 90rpx;
  color: #fff;
  background: #03AC67;
  font-size: 32rpx;
  border-radius: 50rpx;
  margin: 0 auto;
}
.btn button::after {
  display: none;
}
.btn .callGetPhone {
  text-align: center;
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-top: 25rpx;
}
.btn .callGetPhone text {
  display: inline-block;
  color: #03ac67;
  margin-left: 10rpx;
  margin-top: 0;
}