微信小程序中类似后台添加商品规格的设置

类似于这样一个需求，添加一个商品规格属性的设置(增加，编辑集成一个页面)

这是以下代码所实现的商品属性规格的数组：

思路如下：

<form bindsubmit="complete" report-submit="true">
  <block wx:for="{{spec_arr}}" wx:key="{{index}}">
    <view style='margin-bottom:20rpx' wx:if="{{item!=0}}">
      <view class='flex align-items-center shuxing'>
        <view class='left'>
          <view class='flex align-items-center'>
            <view class='leftl'>型号:</view>
            <view style='position:relative;width:72%'>
              <input class="shu_inp" name="version{{index}}" placeholder='商品型号' value='{{item.version}}' type="text" style='width:100%' />
              <view class='img' bindtap='chooseimg' id="{{index}}">
                <image src="{{IMG_URL}}/mod/coupon/assets/img/scenic/pic.png" style='width:100%;height:100%;'></image>
              </view>
            </view>
          </view>

          <view style='height:10rpx'></view>

          <view class='flex align-items-center'>
            <view class='leftl'>库存:</view>
            <input class="shu_inp" name="istock{{index}}" placeholder='0表示不做限制' value="{{item.istock}}" type="digit" />
          </view>

          <view style='height:10rpx'></view>

          <view class='flex align-items-center'>
            <view class='leftl'>价格:</view>
            <input class="shu_inp" name="ismoney{{index}}" placeholder='商品价格' value='{{item.ismoney}}' type="digit" />
          </view>

        </view>
        <view class='right' bindtap='del' id="{{index}}">
          <image src='{{IMG_URL}}/mod/coupon/assets/img/scenic/del.png' style='width:48rpx;height:48rpx'></image>
        </view>
      </view>
      <view wx:if="{{item.toggle}}" style='background:#fff;overflow:hidden;padding-right:18rpx'>
        <!--这是一个自定义组件，在本博客小程序图片上传有介绍哦~-->
        <!--这里设置只允许上传一张照片-->
        <uploadpic id="logopic{{index}}" txt="上传商品图片" files="{{item.picurl}}" maxnum="1" minnum="0" title="商品" showdel="1"  ></uploadpic>
      </view>
    </view>
  </block>
  
  <view class='flex align-items-center add' catchtap='add'>
    <image src="{{IMG_URL}}/mod/coupon/assets/img/add.png" style='width:48rpx;height:48rpx;margin-right:20rpx'></image>添加商品型号
  </view>

  <view style='height:120rpx'></view>

  <view class='position-fixed'>
    <button type='primary' form-type='submit'>确定</button>
  </view>
</form>

.shuxing{
  background: #fff;
  font-size: 32rpx;
  padding: 20rpx;
}
.left{
  width:90%;
}
.right{
  width: 10%;
}
.leftl{
  width:20%;
}
.shu_inp{
  width:72%;
  border:1rpx solid #d9d9d9;
  padding-left: 15rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  height: 1.8rem;
}
.img{
  position:absolute;
  right: 1rpx;
  top:50%;
  width:36rpx;
  height: 40rpx;
  margin-top:-20rpx; 
  padding-right: 10rpx;
  background: #fff;
  z-index: 10;
}
.position-fixed{
  width:100%;
  padding:15rpx;
  bottom:0;
  background:#fff;
  box-sizing:border-box;
  z-index: 100;
}
.add{
  padding: 0 20rpx;
  font-size: 32rpx;
}

Page({
  /**
   * 页面的初始数据
   */
  data: {
    IMG_URL: constant.IMG_URL,
    spec_arr: [{ version: '', istock: '', ismoney: ''}]
  },
  chooseimg(e){
    let idx=e.currentTarget.id;
    this.setData({
      ['spec_arr[' + idx + '].toggle']: true
    })
  },

  onLoad: function (e) {
    let prepage = getCurrentPages()[getCurrentPages().length - 2];
    let spec_arr = prepage.data.spec_arr;
    console.log(spec_arr)

    spec_arr.forEach(function(item,i){
      if (item.picurl) {
        if (item.picurl[0]) {
          item.toggle = true;
          //贵公司的图片服务器地址
          let isi = item.picurl[0].indexOf('http://xxxx');
          if (isi == -1) {
            item.picurl[0] = 'http://xxxx/' + item.picurl[0];
          }
        } else {
          item.toggle = false;
        }
      }
      
    })
    console.log(spec_arr)
    this.setData({
      spec_arr: spec_arr != '' ? spec_arr : this.data.spec_arr
    })
  },

  // 添加
  add() {
    let that=this;
    let spec_arr=this.data.spec_arr;
    let num;
    num = spec_arr.length;
    that.setData({
      ['spec_arr[' + num +']']: {}
    })
    console.log(this.data.spec_arr)

  },
  // 删除
  del(e) {
    let that = this;
    let idx=e.currentTarget.id;
    this.setData({
      ['spec_arr['+idx+']']: 0
    })
    console.log(this.data.spec_arr)
  },
  uppic(fun, spec_arr) {
    let that = this;
    let all_l = spec_arr.length;
    
    spec_arr.forEach(function (item, i) {
      if(item.toggle){
        //注意这里是一个图片上传的自定义组件，在本博客小程序图片上传中有介绍可以移步去看
        that.selectComponent("#logopic" + i).upload(function (data) {
          console.log(data)
          item.picurl = data;
          console.log('all_lpic', all_l)
          all_l = all_l - 1;
          if (all_l == 0) {
            typeof fun == "function" && fun(spec_arr);
          }
        })
      } else {
        console.log('all_l', all_l)
        all_l = all_l - 1;
        if (all_l == 0) {
          typeof fun == "function" && fun(spec_arr);
        }
      } 
      
    })
    
  },
  // 提交
  complete(e) {
    let that=this;
    let val=e.detail.value;
    let spec_arr = this.data.spec_arr;
    let is_all = 1;

    let newspec_arr=[];
    spec_arr.forEach(function (item, i){
      if (item != 0){
        item.version = val['version' + i];
        item.istock = val['istock' + i];
        item.ismoney = val['ismoney' + i];
        if (is_all != 0) {
           if (item.version == '' || item.istock == '' || item.ismoney == '') {
              is_all = 0;
              wx.showModal({
                title: '提示',
                content: '请补全商品属性',
                showCancel: false,
                success: function (res) {}
              })
            }
        }
        newspec_arr.push(item);
      }
    })
    console.log(newspec_arr)
    
    if (is_all == 0) {
      return;
    }
    
    let prepage = getCurrentPages()[getCurrentPages().length - 2];

    if (newspec_arr.length>0){
      that.uppic(function (data) {
        console.log(data);
        let isdata=[];
        data.forEach(function(item,i){
          if(item!=0){
            isdata.push(item);
          }
        })
        prepage.setData({
          spec_arr: isdata
        })
        wx.navigateBack({
          delta: 1
        })

      }, spec_arr)

    }else{
      prepage.setData({
        spec_arr: []
      })
      wx.navigateBack({
        delta: 1
      })
    }
       
  }
})