<!-- 批售出库 -->
```html
<article class="out_bound demo-block" id="upload-pic-demo1">
  <lx-upload-pic
    :images.sync="images"
    :show-name="imagesConfig.showName"
    :dragable="imagesConfig.dragable"
    @upload="ImgUpload"
    @delete="ImgDelete"
  >
    <p class="title">
      {{ imagesConfig.title }}
    </p>
  </lx-upload-pic>
  <lx-upload-pic
    :images.sync="addimages"
    :show-name="addimagesConfig.showName"
    :dragable="addimagesConfig.dragable"
    :count="addimagesConfig.length"
    :bg-url="addimagesConfig.bgUrl"
    @upload="AddImgUpload"
    @delete="AddImgDelete"
  >
    <p class="red_dots title">
      {{ addimagesConfig.title }}
    </p>
  </lx-upload-pic>
</article>

<script>
// UploadPic.md
// import bgimg from '../assets/demo/4.jpg'
// import bgUrl from '../assets/uploadpic/default2.png'
const createImage = function(src) {
  var img = new Image()
  img.src = src
  return img
}
const bgimg = createImage('/static/image/assets/demo/4.jpg')
const bgUrl = '/static/image/assets/uploadpic/default2.png'

new Vue({
  el: '#upload-pic-demo1',
  data: {
    show: true,
    images: [
      { src: '', name: '1', code: 'other_1' },
      { src: '', name: '2', code: 'other_2' },
      { src: '', name: '3', code: 'other_3' },
      { src: '', name: '4', code: 'other_4' },
      { src: '', name: '5', code: 'other_5' },
      { src: '', name: '6', code: 'other_6' },
      { src: '', name: '7', code: 'other_7' }
    ],
    imagesConfig: {
      requestUrl: 'getImageByAuction',
      showName: true,
      dragable: true,
      title: 'default模式示例'
      // length: 7
    },
    addimages: [],
    addimagesConfig: {
      requestUrl: 'getImageByAuction',
      showName: false,
      dragable: false,
      bgUrl: bgUrl,
      title: 'add模式示例',
      length: 7
    }
  },
  methods: {
    ImgUpload(i) {
      console.log(`第${i}张图片准备上传`)
      // this.$wechat.imgUpLoad(this, i, this.iamges, this.imagesConfig.requestUrl)
      this.imgUpLoad(i, this.images, bgimg, 6)
    },
    ImgDelete(i) {
      console.log(`第${i}张图片准备删除`)
      // this.$wechat.imgDelete(i, this.iamges)
      this.imgDelete(i, this.images, 6)
    },
    AddImgUpload(i) {
      console.log(`第${i}张图片准备上传`)
      // this.$wechat.imgUpLoad(this, i, this.iamges, this.imagesConfig.requestUrl)
      this.imgUpLoad(i, this.addimages, bgimg)
    },
    AddImgDelete(i) {
      console.log(`第${i}张图片准备删除`)
      // this.$wechat.imgDelete(i, this.iamges)
      this.imgDelete(i, this.addimages)
    },
    /**
     *单个图片上传
    *
    * @param {*} i 当前上传的图片序号
    * @param {*} images 当前展示的图片数组
    * @param {string} [url=''] 上传图片请求的url地址
    * @param {number} [initLen=0] 图片数组的初始化长度
    * @param {string} [key='src'] 图片地址属性
    */
    imgUpLoad(i, images, url = '', initLen = 0, key = 'src') {
      if (!i && i !== 0) {
        let autoIncreateKey = images.length - initLen
        let newImg = {
          code: `other_${autoIncreateKey}`,
          name: `其他`,
          name2: `（选填）` // 第二行名称
        }
        newImg[key] = url
        images.push(newImg)
      } else {
        images[i][key] = url
      }
    },
    /**
     *删除上传的图片
    *
    * @param {*} i 当前上传的图片序号
    * @param {*} images 当前展示的图片数组
    * @param {*} count 要求的图片张数
    * @param {*} key 图片地址属性
    */
    imgDelete(i, images, initLen = -1, key = 'src') {
      if (images.length > 0 && initLen < i) {
        images.splice(i, 1)
      } else {
        images[i][key] = ''
      }
    }
  }
})
</script>
<style>
.out_bound .weui_cell_hd {width: 105px;}
.out_bound .deal_date .weui_cell_bd{
  width: 105px;
  overflow: hidden;
  p{display: inline-block;}
}
.out_bound .deal_date .vux-label-desc {
  color: red;
  float: left;
}
.out_bound .red_dots{color: red;}

.data_state {
  padding: 15px;
  color: #ababab;
  font-size: 15px;
}
</style>
```