本文介绍使用APICloud AVM框架封装SKU（商品规格选择）组件，该SKU组件可实现商品图片与颜色属性进行联动，通过颜色、版本来控制价格，总价通过购买数量与所选商品价格进行自动计算；可进行缺货设定。
\
上述功能点是通过商品数据结构和代码逻辑进行配合来实现的。
\
商品数据结构如下：
\
goodsList:[
{id:'100016015112',
image:'m.360buyimg.com/mobilecms/s…',
color:'亮黑色',
status:true,
guige:[
{label:'8G+128G',price:'3999',status:false},
{label:'8G+256G',price:'5999',status:true},
{label:'16G+512G',price:'6999',status:true},
{label:'16G+1024G',price:'9999',status:false}
]},
{id:'100016015113',
image:'img14.360buyimg.com/n4/jfs/t1/2…',
color:'釉白色',
status:true,
guige:[
{label:'8G+128G',price:'3799',status:true},
{label:'8G+256G',price:'5799',status:true},
{label:'16G+512G',price:'6799',status:true},
{label:'16G+1024G',price:'9799',status:false}
]},
{id:'100016015132',
image:'img14.360buyimg.com/n4/jfs/t1/2…',
color:'秘银色',
status:true,
guige:[
{label:'8G+128G',price:'3599',status:true},
{label:'8G+256G',price:'5599',status:true},
{label:'16G+512G',price:'6599',status:true},
{label:'16G+1024G',price:'9599',status:false}
]},
{id:'200016015117',
image:'img14.360buyimg.com/n4/jfs/t1/2…',
color:'夏日胡杨',
status:false,
guige:[
{label:'8G+128G',price:'3899',status:false},
{label:'8G+256G',price:'5899',status:false},
{label:'16G+512G',price:'6899',status:false},
{label:'16G+1024G',price:'9899',status:false}
]},
{id:'100013415456',
image:'img14.360buyimg.com/n4/jfs/t1/1…',
color:'冬日暖阳',
status:true,
guige:[
{label:'8G+128G',price:'3199',status:true},
{label:'8G+256G',price:'5199',status:true},
{label:'16G+512G',price:'6199',status:true},
{label:'16G+1024G',price:'9199',status:false}
]}
]
每个商品的版本有多条数据，每条数据都对应不同的价格，同时会有字段标识是否有货。
\
每一个商品也会有字段标识是否有货。
\
当切换商品属性时，需要通过函数进行判断，以保证在商品缺货的情况下，不能被选中。
\
setGoods(e){
// console.log(JSON.stringify(e));
let item = e.currentTarget.dataset.item;
if(item.status){
this.data.selectGoods = item;
this.data.guigeList = item.guige;
for (let index = 0; index < item.guige.length; index++) {
const element = item.guige[index];
//保证默认选中的商品是有货的
if(element.status){
this.data.selectGuige = element;
break;
}
}
}
},
组件文件
easy-sku.stml
\
.easy-sku_container { position: absolute; height: 100%; width: 100%; background-color: rgba(0,0,0,0.1); } .easy-sku_box{ align-items: center; justify-content: space-between; position: absolute; bottom: 0; width: 100%; height: 70%; background-color: #ffffff; border-top-left-radius: 30px; border-top-right-radius: 30px; padding: 15px; } .easy-sku_base{ width: 100%; padding: 15px; } .easy-sku_base-pic{ width: 80px; height: 80px; } .easy-sku_base{ flex-flow: row nowrap; justify-content: space-between; align-items: flex-end; } .easy-sku_base-info{ flex: 1; padding-left: 10px; } .easy-sku_base-info-price{ color: #fa2c19; font-size: 16px; } .easy-sku_base-info-num{ color: #666666; font-size: 12px; } .easy-sku_close-box{ height: 100%; } .easy-sku_close-ico{ width: 20px; } .easy-sku_scroll-box{ width: 100%; flex: 1; } .easy-sku_guige-box{ width: 100%; } .easy-sku_guige-title{ padding: 10px 0; } .easy-sku_guige-title-label{ font-size: 16px; font-weight: bolder; } .easy-sku_guige-item-box{ flex-flow: row wrap; justify-content: flex-start; align-items: center; } .easy-sku_guige-item--default{ background-color: #f2f2f2; border: 0.5px solid #f2f2f2; border-radius: 18px; padding: 8px 18px; margin-right: 10px; margin-bottom: 10px; } .easy-sku_guige-item-label--default{ font-size: 14px; color: #333333; } .easy-sku_guige-item--select{ background-color: #fee0dd; border: 0.5px solid #fa2c19; border-radius: 18px; padding: 8px 18px; margin-right: 10px; margin-bottom: 10px; } .easy-sku_guige-item-label-select{ font-size: 14px; color: #fa2c19; } .easy-sku_guige-item-label-disable{ font-size: 14px; color: #b5b5b5; /* text-decoration: line-through; */ } .easy-sku_count-box{ width: 100%; flex-flow: row nowrap; justify-content: space-between; align-items: center; margin-top: 10px; } .easy-sku_count-result-tool{ flex-flow: row nowrap; justify-content: space-between; align-items: center; } .easy-sku_count-result-item{ font-size: 25px; padding: 0 5px; color: #333333; } .easy-sku_count-result-item--disable{ font-size: 25px; padding: 0 5px; color: #b5b5b5; } .easy-sku_count-result-input{ background-color: #f0f0f0; border: 0; height: 18px; width: 40px; text-align: center; border-radius: 5px; } .easy-sku_count-label{ font-size: 16px; color: #333333; } .easy-sku_bottom{ width: 100%; } .easy-sku_btn{ background-color: #fa2c19; border-radius: 21px; font-size: 15px; color: #fff; padding: 10px; }\
示例文件
demo-easy-sku.stml
\
.page { height: 100%; background-color: #f6f6f6; } .item{ background-color: #ffffff; margin: 15px; padding: 15px; border-radius: 5px; }\
