新增商品sku
1、需求:需要写一个新增商品的页面,主要难点就sku
2、思路:总体来说就是前端生成适合排版的sku属性数据,之后经过转换成符合接口的上传数据,刚开始转换的时候没有思路也是花了点时间,毕竟不设限制的sku可以有很多,层级也很深,所以主要用的是递归来处理
前端排版时的属性数据
[ { id: new Date().getTime(), name: "颜色", value: [ { name: '黄色', id: new Date().getTime() * Math.random() }, { name: '红色', id: new Date().getTime() * Math.random() }] }, { id: new Date().getTime() * Math.random(), name: "大小", value: [{ name: '大', id: new Date().getTime() * Math.random() }, { name: '小', id: new Date().getTime() * Math.random() },] }, { id: new Date().getTime() * Math.random(), name: "品质", value: [{ name: '优', id: new Date().getTime() * Math.random() }, { name: '劣', id: new Date().getTime() * Math.random() },] }, ]
对应
接口上传时的数据
对应
3、实现
其中用中间体数据过渡了一下
js
getSku() { try { const skuAttribute = this.data.skuAttribute//排版的属性数据 let skuAddParams = this.data.form.skuAddParams let data = []//过渡用的数据 let skuAllList = this.data.skuAllList if (skuAttribute.length == 0) { return } skuAttribute.map(e => { data.push(e.value.map(el => el.name)) }) if (data.length == 0) { return } console.log(data, 0, undefined, []) skuAllList = this.repeat(data, 0, undefined, [])//过渡用的数据 skuAddParams = [] skuAllList.map(e => { skuAddParams.push({ "addInventory": 0, "baseSkuParams": e.map((el, i) => { return { "attributeName": skuAttribute[i].name, "specName": el } }), "channelAmount": 0, "goodsSkuId": 0, "goodsSkuImage": "", "inventory": '', "isChannel": 0, "originalPrice": '', "sellingPrice": '', "specCode": "", "vipPrice": '' }) }) this.setData({ 'form.skuAddParams': skuAddParams,//需要上传的数据 skuAllList }) } catch { console.log('GG') } }, repeat(list, index, arr, all) { list[index].map((e, i) => { if (index == 0) { let arr = [] arr.push(e) if (list.length !== 1) { this.repeat(list, index + 1, arr, all) } else { arr[index] = e all.push(JSON.parse(JSON.stringify(arr))) } } else if (index < list.length - 1) { arr[index] = e this.repeat(list, index + 1, arr, all) } else if (index == list.length - 1) { arr[index] = e all.push(JSON.parse(JSON.stringify(arr))) } }) return all },