微信小程序 動態添加 view input picker

微信小程序 動態添加view、input、picker等，添加之后取到input或者picker的值傳給后台時，取到的這些值為數組，因為動態添加的無法給它們設置唯一的name值或class值。效果如下：

index.wxml

<!-- checkout.wxml -->
<view class="container">
    <form bindsubmit="save">
        <!-- Total -->
        <view class="confirm-summury">
            <view class="summury-total" style="height: 85rpx;">
                <view style="float:left;">訂單信息</view>
                <view class="xinzeng" bindtap="addView">+</view>
            </view>
            <view wx:for="{{view_arr}}">
                <view class="summury-detail">
                    汽車品牌：
                    <input placeholder="請輸入汽車品牌" bindinput="car_brand" data-idx="{{index}}"></input>
                </view>
                <view class="summury-detail">
                    汽車車型：
                    <input placeholder="請輸入汽車車型" bindinput="car_model" data-idx="{{index}}"></input>
                </view>
                <view class="summury-detail">
                    <view style="float:left;">腳墊類型：</view>
                    <picker bindchange="bindPadChange" data-idx="{{index}}" value="{{index2[index]?index2[index]:0}}" range="{{pad}}" class="picker" style="margin-left: 10rpx;">
                        <view class="picker" class="input-item">
                            {{pad[index2[index]?index2[index]:0]}}
                        </view>
                    </picker>
                </view>
                <view class="summury-detail">
                    腳墊數量：
                    <input placeholder="請輸入腳墊數量" bindinput="pad_num" data-idx="{{index}}"></input>
                </view>
            </view>
        </view>

        <!-- Submit -->
        <view class="confirm-submit">
            <button formType="submit" class="submit-button dark active" style="margin-bottom: 50rpx;">
                提交
            </button>
        </view>
    </form>
</view>

index.wxss

/* checkout.wxss */
page, .container{
  height: 100%;
  padding: 0;
}

.confirm-summury {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-top: #e2e2e2 1px solid;
    border-bottom: #e2e2e2 1px solid;
    background-color: #ffffff;
    margin-top: 20rpx;
    /* padding-bottom: 120rpx; */
}

.confirm-summury .summury-total {
    display: block;
    height: 68rpx;
    overflow: hidden;
    color: #404245;
    font-size: 30rpx;
    font-weight: bold;
    line-height: 68rpx;
    padding-left: 28rpx;
}

.confirm-summury .summury-total .xinzeng {
    float: right;
    color: #000;
    width: 53rpx;
    text-align: center;
    border-radius: 50%;
    margin-right: 32rpx;
    margin-top: 15rpx;
    height: 53rpx;
    line-height: 44rpx;
    border: 1px solid #000;
    font-size: 42rpx;
}

.confirm-summury .summury-detail {
    display: block;
    height: 80rpx;
    line-height: 80rpx;
    border-bottom:1px solid #ddd;
    overflow: hidden;
    font-size: 26rpx;
    font-weight: normal;
    margin:0 28rpx 28rpx 28rpx;
}
.confirm-summury .summury-detail input{
    float: right;
    width: 560rpx;
    line-height: 80rpx;
    height: 80rpx;
}

.confirm-submit {

    z-index: 100;
    width: 100%;
    height: 88rpx;
    box-sizing: border-box;
}

.confirm-submit .submit-total {
    float: left;
    position: relative;
    display: block;
    width: 60%;
    height: 100%;
    box-sizing: border-box;
    color: #404245;
    font-size: 28rpx;
    font-weight: normal;
    text-align: right;
    line-height: 70rpx;
    background-color: #f7f7f7;
    padding-right: 16rpx;
}

.confirm-submit .submit-total .total-discount {
    width: 100%;
    height: 40rpx;
    color: #64686d;
    font-size: 26rpx;
    font-weight: bold;
    text-align: right;
    line-height: 40rpx;
}

.confirm-submit .submit-button {
    float: left;
    position: relative;
    display: block;
    width: 40%;
    height: 100%;
    box-sizing: border-box;
    color: #404245;
    background-color: #f7f7f7;
    line-height: 70rpx;
    text-align: center;
    opacity: 0.25;
}

.confirm-submit .submit-button.active {
    opacity: 1.0;
}

.confirm-submit .submit-button.dark {
    color: #ffffff;
    background-color: #555555;
}

.confirm-submit .submit-button.dark.active {
    color: #ffffff;
    background-color: #2E3760;
    margin-top: 80rpx;
    width: 80%;
    margin-left: 10%;
    border-radius: 20rpx;
    font-size: 30rpx;
}
.picker{
    float: left;
    margin-left: 32rpx;
}

index.js

import util from '../../utils/util.js';

Page({
  /**
   * 頁面的初始數據
   */
  data: {
    pad: ['請選擇類型','類型1','類型2','類型3'], //腳墊類型
    index2: [0],
    view_arr: [1],  // 循環view組件數組值
    car_brand: [],  //汽車品牌
    car_model: [],  //汽車車型
    pad_num: [],  //腳墊數量
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  //添加
  addView:function(){
    var old=this.data.view_arr;
    old.push(1);//這里不管push什么，只要數組長度增加1就行
    this.setData({
      view_arr: old
    })
  },
  // 汽車品牌
  car_brand: function(e) {
    var nowIdx=e.currentTarget.dataset.idx;//獲取當前索引
    var val=e.detail.value;//獲取輸入的值
    var oldVal=this.data.car_brand;
    oldVal[nowIdx]=val;//修改對應索引值的內容
    this.setData({
      car_brand:oldVal
    })
  },
  // 汽車車型
  car_model: function(e) {
    var nowIdx=e.currentTarget.dataset.idx;//獲取當前索引
    var val=e.detail.value;//獲取輸入的值
    var oldVal=this.data.car_model;
    oldVal[nowIdx]=val;//修改對應索引值的內容
    this.setData({
      car_model:oldVal
    })
  },
  // 腳墊數量
  pad_num: function(e) {
    var nowIdx=e.currentTarget.dataset.idx;//獲取當前索引
    var val=e.detail.value;//獲取輸入的值
    var oldVal=this.data.pad_num;
    oldVal[nowIdx]=val;//修改對應索引值的內容
    this.setData({
      pad_num:oldVal
    })
  },
  // 腳墊類型
  bindPadChange: function (e) {
    var nowIdx=e.currentTarget.dataset.idx;//獲取當前索引
    var val=e.detail.value;//獲取輸入的值
    var oldVal=this.data.index2;
    oldVal[nowIdx]=val;//修改對應索引值的內容
    this.setData({
      // index2: e.detail.value,
      index2: oldVal
    })
  },

  // 保存
  save(event) {
    let self = this,
      eventDA = event.detail.value;

    if (self.data.car_brand.length <= 0) {
      util.showToast('請輸入汽車品牌', 'none');
      return false;
    }
    if (self.data.car_model.length <= 0) {
      util.showToast('請輸入汽車車型', 'none');
      return false;
    }
    var foot_pad = [];
    var foot_id = [];
    var suoyin = self.data.index2;
    var pad = self.data.pad;
    var pad_id = self.data.pad_id;
    if(suoyin[0] == 0){
      util.showToast('請選擇腳墊類型', 'none');
      return false;
    }else{
      suoyin.forEach(function (value,index, array){
        foot_pad[index] = pad[value];
        foot_id[index] = pad_id[value];
      })
    }

    if (self.data.pad_num.length <= 0) {
      util.showToast('請輸入腳墊數量', 'none');
      return false;
    }

    util.request(util.apiUrl + 'order.create', 'POST', {
      car_brand: self.data.car_brand,
      car_model: self.data.car_model,
      foot_pad: foot_pad,
      pad_num: self.data.pad_num,
    }).then(res => {
      util.showToast('創建成功！', 'success');
      wx.navigateBack({
        delta: 1 // 1返回上一個界面，2返回上上個頁面
      })
    }).catch(err => {

    });
  }
});