使用APICloud AVM框架封装SKU(商品规格选择)组件

简介: 本文介绍使用APICloud AVM框架封装SKU(商品规格选择)组件,该SKU组件可实现商品图片与颜色属性进行联动,通过颜色、版本来控制价格,总价通过购买数量与所选商品价格进行自动计算;可进行缺货设

本文介绍使用APICloud AVM框架封装SKU(商品规格选择)组件,该SKU组件可实现商品图片与颜色属性进行联动,通过颜色、版本来控制价格,总价通过购买数量与所选商品价格进行自动计算;可进行缺货设定。

上述功能点是通过商品数据结构和代码逻辑进行配合来实现的。

商品数据结构如下:

goodsList:[

{id:'100016015112',

image:'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/210630/17/8651/208682/618a5bd6Eddc8ea0e/b5e55e1a03bc0126.jpg!q80.dpg.web',

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:'https://img14.360buyimg.com/n4/jfs/t1/216079/14/3895/201095/618a5c0cEe0b9e2ba/cf5b98fb6128a09e.jpg',

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:'https://img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg',

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:'https://img14.360buyimg.com/n4/jfs/t1/203247/8/14659/237368/618a5c87Ecc968774/b0bb25331e5e2d1a.jpg',

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:'https://img14.360buyimg.com/n4/jfs/t1/160950/40/25098/234168/618a5cb9E65ba975e/7f8f93ea7767a51b.jpg',

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

¥{selectGuige.price?selectGuige.price*count:0}

商品编号:{selectGoods.id}

颜色

{item.color}

版本

{item.label}

购买数量

+

export default {

name: 'easy-sku',

installed(){

this.data.selectGoods=this.props.goodsList[0];

// this.data.selectGuige=this.props.goodsList[0].guige[1];

this.data.guigeList = this.props.goodsList[0].guige;

},

props:{

goodsList:Array,

},

data() {

return{

ico_close:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAjUlEQVR42mNgGNlg1qxZbTNnzrxFgvqnQJyLUwHQsKtA/B+InxEyDKjmI0gt0MD9hBQ+ImQozDAgvkyUV/AZSrJh+Awl2zBshlJsGBZDKTcMmjR+Ihn4kVqGHQS5jiJDkQ1D8j55hmIzjGxD8RlGsqFABe8IGYbF0Pv4FAUAXbiIhCS1ac6cOXYjvEwFAL7uy3s7L72GAAAAAElFTkSuQmCC',

selectGoods:{},

selectGuige:{},

count:1,

guigeList:[]

}

},

methods: {

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;

}

}

}

},

setGuige(e){

// console.log(JSON.stringify(e));

let item = e.currentTarget.dataset.item;

if(item.status){

this.data.selectGuige = item;

}

},

countAdd(){

this.data.count++;

},

countDel(){

if(this.data.count>0){

this.data.count--;

}

},

cancel(){

this.fire('cancel','');

},

submit(){

this.fire('submit',{goods:this.data.selectGoods,guige:this.data.selectGuige,count:this.data.count});

}

}

}

.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

选择商品

<easy-sku

oncancel="closeSKU"

onsubmit="getSKU"

:goodsList="goodsList"

v-if="isShow"

import '../../components/easy-sku.stml'

export default {

name: 'demo-easy-sku',

apiready(){//like created

},

data() {

return{

isShow:false,

goodsList:[

{id:'100016015112',

image:'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/210630/17/8651/208682/618a5bd6Eddc8ea0e/b5e55e1a03bc0126.jpg!q80.dpg.web',

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:'https://img14.360buyimg.com/n4/jfs/t1/216079/14/3895/201095/618a5c0cEe0b9e2ba/cf5b98fb6128a09e.jpg',

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:'https://img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg',

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:'https://img14.360buyimg.com/n4/jfs/t1/203247/8/14659/237368/618a5c87Ecc968774/b0bb25331e5e2d1a.jpg',

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:'https://img14.360buyimg.com/n4/jfs/t1/160950/40/25098/234168/618a5cb9E65ba975e/7f8f93ea7767a51b.jpg',

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}

]}

],

}

},

methods: {

openSKU(){

this.data.isShow=true;

},

closeSKU(){

this.data.isShow=false;

},

getSKU(e){

console.log(JSON.stringify(e));

api.toast({

msg:'颜色:'+e.detail.goods.color+'/规格:'+e.detail.guige.label+'/数量:'+e.detail.count+'/总价:'+e.detail.count*e.detail.guige.price,

location:'middle'

})

this.data.isShow = false;

}

}

}

.page {

height: 100%;

background-color: #f6f6f6;

}

.item{

background-color: #ffffff;

margin: 15px;

padding: 15px;

border-radius: 5px;

}

点击立即使用AVM框架

目录
相关文章
|
8月前
|
监控 前端开发 JavaScript
实战篇:商品API接口在跨平台销售中的有效运用与案例解析
随着电子商务的蓬勃发展,企业为了扩大市场覆盖面,经常需要在多个在线平台上展示和销售产品。然而,手工管理多个平台的库存、价格、商品描述等信息既耗时又容易出错。商品API接口在这一背景下显得尤为重要,它能够帮助企业在不同的销售平台之间实现商品信息的高效同步和管理。本文将通过具体的淘宝API接口使用案例,展示如何在跨平台销售中有效利用商品API接口,以及如何通过代码实现数据的统一管理。
|
1月前
|
监控 数据挖掘 API
探索淘宝商品评论接口:功能、应用与开发者指南
在电子商务蓬勃发展的今天,商品评论已成为消费者购买决策的重要依据之一。作为国内最大的电商平台,淘宝通过其强大的商品评论系统,不仅为消费者提供了丰富的购物参考,也为商家提供了宝贵的用户反馈。而这一切的背后,离不开高效、稳定的商品评论接口支持。本文将深入探讨淘宝商品评论接口的功能、应用场景以及为开发者提供的指南,帮助大家更好地理解并利用这一资源。
|
3月前
|
前端开发 JavaScript API
Vue3商品SKU多规格编辑组件
Vue3商品SKU多规格编辑组件
181 5
|
4月前
|
XML 前端开发 Java
谷粒商城笔记+踩坑(5)——商品服务-属性分组、品牌关联分类,spu+sku+分页拦截器
SPU和SKU、属性分组的增删改查、QueryWrapper的and和or用法、获取当前品牌关联的所有分类
谷粒商城笔记+踩坑(5)——商品服务-属性分组、品牌关联分类,spu+sku+分页拦截器
|
开发者
【 uniapp - 黑马优购 | 商品列表 】如何实现数据获取、结构渲染、自定义组件的封装
【 uniapp - 黑马优购 | 商品列表 】如何实现数据获取、结构渲染、自定义组件的封装
417 0
|
8月前
|
搜索推荐 安全 数据管理
微店获得微店商品详情 API(micro.item_get)在电商中的发展
微店商品详情API(micro.item_get)在电商领域中有着广泛的应用和发展前景。随着移动互联网和电子商务的迅猛发展,越来越多的商家选择在微店平台上开展网络销售,而微店商品详情API则成为了这些商家展示和推广商品的重要工具。
|
8月前
|
前端开发 数据库
实战SSM_O2O商铺_31【商品】商品添加之View层的实现
实战SSM_O2O商铺_31【商品】商品添加之View层的实现
55 0
|
移动开发 JavaScript 前端开发
APICloud AVM框架 封装SKU(商品规格选择)组件
该SKU组件可实现商品图片与颜色属性进行联动,通过颜色、版本来控制价格,总价通过购买数量与所选商品价格进行自动计算;可进行缺货设定。
APICloud AVM框架 封装SKU(商品规格选择)组件
|
小程序 Shell API
【小程序项目开发 -- 京东商城】uni-app 商品分类页面(上)
【小程序项目开发 -- 京东商城】uni-app 商品分类页面(上)
【小程序项目开发 -- 京东商城】uni-app 商品分类页面(上)
|
小程序 开发工具 git
【小程序项目开发 -- 京东商城】uni-app 商品分类页面(下)
【小程序项目开发 -- 京东商城】uni-app 商品分类页面(下)