小程序数组新增或删除数组对象的一行数据(2）

1.效果图
图1

图2

2.静态页面

<view class="rank" >
     <view wx:for="{{lists}}" wx:key="{{index}}">
      <view class='list1'>
          <text class='del-li' data-index="{{index}}" bindtap='delList'>一</text>
           <text class='prize-name' wx:if="{{index==0 && lists.length>1}}">一</text>
           <text class='prize-name' wx:if="{{index==1}}">二</text>
           <text class='prize-name' wx:if="{{index==2}}">三</text>
           <text class='prize-name' wx:if="{{index==3}}">四</text>
           <text class='prize-name' wx:if="{{index==4}}">五</text>
           <text class='prize-name' wx:if="{{index==5}}">六</text>
           <text class='prize-name' wx:if="{{index==6}}">七</text>
           <text class='prize-name' wx:if="{{index==7}}">八</text>
           <text class='prize-name' wx:if="{{index==8}}">九</text>
           <text class='prize-name' wx:if="{{index==9}}">十</text> 
           <text>等奖名称</text>    
        <input class='input' data-id="{{item.reward}}" data-index="{{index}}"  value='{{item.reward}}' placeholder="请输入奖品名称"  bindblur='bindRewrdInput' ></input>
      </view>
      <view class='list2' style="border-bottom: 1px solid #dcdcdc;">
        <text class='del-li'></text>
        <text class='prize-name'>奖品分数</text>
       <input class='input1' data-id="{{item.num}}"  data-index="{{index}}" value='{{item.num}}' placeholder="份数"  bindblur='bindNumInput'></input>
        <text class='counts'>个</text>
      </view> 
    </view>
    <view class='add-li' bindtap='addList' >+ 添加奖项
    </view>
    </view>

3.css样式

.rank{
  padding: 35rpx;
  background: white;
  font-size: 14px;
  margin-bottom:200rpx;
}
.list1{
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #dcdcdc;
  padding-top: 25rpx;
  padding-bottom: 25rpx;
  align-items: center;
}
.list2{
  display: flex;
  flex-direction: row;
  padding-top: 25rpx;
  padding-bottom: 25rpx;
  align-items: center;
}
.prize-name{
  font-size: 14px;
}
.del-li{
font-size:12px;
background:red;
width:15rpx;
height:15rpx;
line-height:15rpx;
text-align:center;
color:white;
padding:5rpx;
margin-right:15rpx;
font-size:12rpx;
border-radius:15rpx;
}
/*输入框*/
.input{
  font-size: 14px;
  /* border: 1px solid #414141; */
  width: 515rpx;
  position: absolute;
  right: 35rpx;
  text-align: right;
  padding: 10rpx;
  letter-spacing: 2px;
}
.input1{
  font-size: 14px;
  /* border: 1px solid #414141;  */
  width: 465rpx;
  position: absolute;
  right: 80rpx;
  text-align: right;
  padding: 10rpx;
  letter-spacing: 2px;
}
p-input{
  font-size: 14px;
  color: #919191;
}
.counts{
  position: absolute;
  right: 50rpx;
  font-size: 14px;
}
.add-li{
font-size:35rpx;
text-align:center;
height:80rpx;
line-height:80rpx;
 background:red;
 border-bottom: 1px solid #dcdcdc;
}

4.js页面

Page({

  /**
   * 页面的初始数据
   */
  data: {
    lists:[
      {
       "rank":"",
       "reward":"",
       "num":undefined
      },
    ],
  },
  addList: function(){
    var  lists = this.data.lists;
        if(lists.length>9){
        wx.showToast({
          title: '最多添加十个奖项',
          image: '/img/cuowu.png',
          duration: 1200
        })
      }else{
        var newData = {
          "rank":"",
          "reward":"",
          "num":undefined
        };
        lists.push(newData);//实质是添加lists数组内容，使for循环多一次
        this.setData({
          lists: lists,
        })  
            }   
  },
  delList: function (e) {
    var lists = this.data.lists;
    let index = e.currentTarget.dataset.index  // 获取数据的索引
    lists.splice(index,1)
    //lists.pop();      //实质是删除lists数组内容，使for循环少一次
    this.setData({
      lists: lists,
    })
  }, 
  bindRewrdInput:function(e){
    let that = this
    var val = e.detail.value;
    let index = e.currentTarget.dataset.index  // 获取数据的索引
    let reward = 'lists[' + index +'].reward'  // 获取lists[index].reward
    var lists = that.data.lists;
    that.setData({
      [reward]:val
     })
       console.log(lists)
  },
  bindNumInput:function(e){
    let that = this
    var val = e.detail.value;
    let index = e.currentTarget.dataset.index  // 获取数据的索引
    let num = 'lists[' + index +'].num'  // 获取lists[index].num
    var lists = that.data.lists;
    that.setData({
      [num]:val
     })
       console.log(lists)
  },

//提交数据到后台的方法
submitData: function() {
    var that = this
    var lists = that.data.lists;
    var flag=0;
    for (let i = 0; i < lists.length; i++) {
      let  rank= 'lists[' + i +'].rank'  // 获取lists[index].rank
      if(lists[i].num==undefined || lists[i].num==""){
        flag++;
      }else if(lists[i].reward==undefined ||lists[i].reward==""){
        flag++;
      }
      that.setData({
        [rank]:i+1
       })
}
 //请求发布抽奖活动
                  wx.request({
                    //访问后台路径
url: publicFun.serverUrl + 'luckyman/',
                    data: {
                      ranklist:JSON.stringify(lists)
                    },
                    header: {
                      'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    method: 'POST',
                    success: function(res) {
                      console.log('发布活动:', res.data)
                    },
                    fail: function() {
                      wx.showToast({
                        title: '发布失败！',
                        icon: "loading",
                        duration: 1200
                      })
                    }
                  })
  },
})