小程序新增、删除数组以及图片上传问题

<view class='prepay'>
<form bindsubmit="formSubmit" bindreset="formReset">
<view class='dd' wx:for="{{list.orderDetailPrepayDOList}}" wx:for-index="index" wx:key="index">
  <view class='prepay-main'>订单号:<view class='num' name="{{id}}">{{id}}</view></view>
  <view class='prepay-main'>垫款项目:<input type='text' data-index="{{index}}" bindinput='nameTab' name="name{{index}}" value='{{inputVal[index]}}' placeholder="请输入垫款项目"></input></view>
   <view class='prepay-main1'>单据照片:
  <view class='prepay-img'><image src='{{imge[index]}}' data-index="{{index}}" bindtap='img' name="{{imgs}} " mode="aspecFill"></image></view>
  </view >
  <view class='prepay-main'>垫付款:
  <input type='number' data-index="{{index}}" bindinput='setModal'  maxlength="10" name="money{{index}}"  value='{{moneyVal[index]}}' placeholder="请输入垫付款金额" bindinput='moneyTab'></input>
  </view> 
    <button class='delButton' bindtap='del' data-index="{{index}}" wx:if="{{list.orderDetailPrepayDOList.length >1}}">删除</button>
     <button class='delButton' disabled  wx:else>删除</button>
</view>
  <view class='prepay-main'>   
  <button  class='button' disabled bindtap='addPrepay' wx:if="{{list.orderDetailPrepayDOList.length >2}}" data-index="{{index}}">新增</button>
  <button  class='button'  bindtap='addPrepay' wx:else>新增</button>
  <button  class='button'  bindtap='skipPrepay'>跳过</button>
  <button  class='button'  form-type='submit'>保存</button>
  <button  class='button'  bindtap='cancely'>取消</button>
  </view>
  </form>
</view>

 

data: {
    imge: ['../../../../images/upload.png'],
    id:'',
    list: {
      orderDetailPrepayDOList: [
        {
          img: '',
          money:'',
          name:''
        }
      ],
    },
    imgs:[],
    imgs0:"",
    imgs1: "",
    imgs2: "",
    inputVal:[],
    moneyVal:[],
    array:{},
    arrayMoney:{},
    arrayImgs:{}
  },
// 单据照片
  img: function (e) {
    var imag=e.currentTarget.dataset.index
    var imge = this.data.imge;
    this.setData({
      imag: imag
            })
    var that = this;
    wx.chooseImage({
      count: 3,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        imge[imag] = res.tempFilePaths;
        that.setData({
          imge: imge
          })
        var front = res.tempFilePaths;
        api.uploadRequest(api.apiUrl.UPLOAD_TMP_POST, front[0], null, function (res) {
          var imgs = JSON.parse(res.data).data
          if (imag == 0) {
            that.setData({
              imgs0: imgs
            })
            imge.push(that.data.imgs0)
          } else if (imag == 1) {
            that.setData({
              imgs1: imgs
            })
            imge.push(that.data.imgs1)
          } else if (imag == 2) {
            that.setData({
              imgs2: imgs
            })
            imge.push(that.data.imgs2)
          }
          var arrayImgs = that.data.arrayImgs
          arrayImgs[imag] = imge
          that.setData({
            imgs: imge,
            arrayImgs: arrayImgs
          })
          console.log('显示的图片', that.data.imge)
          console.log('返回的图片', that.data.imgs)
        });
      }
    })
  },
  formSubmit: function (e){
    console.log('表单value值',e.detail.value)
    const params = e.detail.value
    //校验表单
    if (!this.WxValidate.checkForm(params)) {
      const error = this.WxValidate.errorList[0]
      this.showToast(error)
      return false
    }
    var that = this
    console.log('第一张图片', that.data.imgs0)
    console.log('第二张图片', that.data.imgs1)
    console.log('第三张图片', that.data.imgs2)
    var orderList = that.data.list.orderDetailPrepayDOList
    for (var i = 0; i < orderList.length; i++) {
      console.log(orderList[i]);//遍历输出
      if (i == 0) {
        var name = e.detail.value.name0
        var money = e.detail.value.money0
        orderList[i].img = that.data.imgs0,
          orderList[i].money = money,
          orderList[i].name = name
      } else if (i == 1) {
        var name = e.detail.value.name1
        var money = e.detail.value.money1
        orderList[i].img = that.data.imgs1,
          orderList[i].money = money,
          orderList[i].name = name
      }
      else if (i == 2) {
        var name = e.detail.value.name2
        var money = e.detail.value.money2
        orderList[i].img = that.data.imgs2,
          orderList[i].money = money,
          orderList[i].name = name
      }
    }
    console.log("最后上传数据",that.data.list)
    api.putRequest('/weChat/orders/' + that.data.id + '/prepay.do', that.data.list, function (res) {
      that.showToast1()
      setTimeout(function () {
        wx.navigateBack({
          delta: 2
        })
      }, 2000)
    })
  },
//获取输入框的值
nameTab:function(e){
    var value = e.detail.value
    var index = e.currentTarget.dataset.index;
    var nameVal = this.data.inputVal;
    nameVal[index] = value;//修改对应索引值的内容
    var array = this.data.array
    array[index] = nameVal
    this.setData({
      inputVal: nameVal,
      array: array
    })
    console.log("垫款项目", this.data.inputVal)
    console.log("垫款项目", this.data.array)
  },
  moneyTab:function(e){
    var values = e.detail.value
    var index = e.currentTarget.dataset.index;
    var moneyVal = this.data.moneyVal;
    var arrayMoney = this.data.arrayMoney
    arrayMoney[index] = moneyVal
    moneyVal[index] = values;
    this.setData({
      moneyVal: moneyVal,
      arrayMoney: arrayMoney
    })
    console.log("垫付款", this.data.moneyVal)
  },
 // 新增
  addPrepay:function(e){
    let list = this.data.list;
    var inputVal =this.data.inputVal
    var moneyVal = this.data.moneyVal;
    var imge = this.data.imge;
    var imgs = this.data.imgs;
    var arrayImgs = this.data.arrayImgs;
    imge.push('../../../../images/upload.png')
    this.setData({
        imge: imge
    })
    if (inputVal[0] == null || arrayImgs[0] == null || moneyVal[0] == null){
      wx.showModal({
        title: '提示',
        content: '垫款项目、单据照片、垫款金额不能为空',
        showCancel: false
      })
    } else if (list.orderDetailPrepayDOList.length==2&&(inputVal[1] == null || arrayImgs[1] == null || moneyVal[1] == null)) {
      wx.showModal({
        title: '提示',
        content: '垫款项目、单据照片、垫款金额不能为空',
        showCancel: false
      })
    }
    else{
      list.orderDetailPrepayDOList.push(
        {
          img: '',
          money: '',
          name:''
        }
      )
        this.setData({
        list: list
      })
    }
  },// 新增
  addPrepay:function(e){
    let list = this.data.list;
    var inputVal =this.data.inputVal
    var moneyVal = this.data.moneyVal;
    var imge = this.data.imge;
    var imgs = this.data.imgs;
    var arrayImgs = this.data.arrayImgs;
    imge.push('../../../../images/upload.png')
    this.setData({
        imge: imge
    })
    if (inputVal[0] == null || arrayImgs[0] == null || moneyVal[0] == null){
      wx.showModal({
        title: '提示',
        content: '垫款项目、单据照片、垫款金额不能为空',
        showCancel: false
      })
    } else if (list.orderDetailPrepayDOList.length==2&&(inputVal[1] == null || arrayImgs[1] == null || moneyVal[1] == null)) {
      wx.showModal({
        title: '提示',
        content: '垫款项目、单据照片、垫款金额不能为空',
        showCancel: false
      })
    }
    else{
      list.orderDetailPrepayDOList.push(
        {
          img: '',
          money: '',
          name:''
        }
      )
        this.setData({
        list: list
      })
    }
  },
// 跳过
  skipPrepay:function(){
    var that = this;
    var skipData = {
      orderNo: '',
      dto: {},
    }
    api.putRequest('/weChat/orders/' + that.data.id + '/prepay.do', skipData, function (res) {
      console.log('submit success');
      wx.navigateTo({
        url: '../receipt/receipt?pid=' + that.data.id
      })
    })
  },
  // 删除
  del:function(e){
    var that = this
    var index = e.currentTarget.dataset.index
    var oldInputVal = that.data.inputVal;
    var list = that.data.list;
    var moneyVal = that.data.moneyVal;
    var imge = this.data.imge
    var imgs = this.data.imgs
    var array = this.data.array
    var arrayMoney = this.data.arrayMoney
    var arrayImgs = this.data.arrayImgs
    wx.showModal({
      title: '提示',
      content: '确定删除',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定',list)
          list.orderDetailPrepayDOList.splice(index, 1);
          oldInputVal.splice(index, 1);
          moneyVal.splice(index, 1);
          imge.splice(index,1)
          imgs.splice(index, 1)
          delete (array[index]);
          delete (arrayMoney[index]);
          delete (arrayImgs[index]);
            if (index == 0) {
              that.setData({
                imgs0: that.data.imgs1,
                imgs1: that.data.imgs2,
                imgs2: '',
              })
            } else if (index == 1) {
              that.setData({
                imgs1: that.data.imgs2,
                imgs2: '',
              })
            }
          if (list.orderDetailPrepayDOList.length < 1) {
            list.orderDetailPrepayDOList = [
              {
                img: '',
                money: '',
                name: ''
              }
            ]
          }
          that.setData({
            list: list,
            inputVal: oldInputVal,
            moneyVal: moneyVal,
            imge: imge
          })
          console.log('删除后显示', array)
          console.log('删除后显示的图片', imge)
        } else if (res.cancel) {
          // console.log('用户点击取消')
        }
      }
    })
  },
  // 取消
  cancely: function () {
    wx.navigateBack({
      delta: 2
    })
  }

因为图片设置的是上传一张就调用一次接口,并将返回的图片存入到数组,最后赋值提交.但每添加一个图片就上传成功了 即使删除了显示图片,但上传成功的图片依然存在,所以我将上传成功的图片用键值对的方式存入,再根据key只删除,判断下标然后赋值,这样提交时就是对应的了

提交时要判断是否为空,所以我将输入的值也存入键值对,再判断是否为空以及利用数组长度判断新增后的数据是否为空