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

最新推荐文章于 2024-07-19 11:42:08 发布
最新推荐文章于 2024-07-19 11:42:08 发布
阅读量142 收藏
点赞数
分类专栏： APICloud app开发教程 文章标签： android 前端
原文链接：https://www.apicloud.com
版权

本文介绍使用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

<template>

<view class="easy-sku_container">

<view class="easy-sku_box">

<view class="easy-sku_base">

<view class="easy-sku_base-pic-box">

<image class="easy-sku_base-pic" src={selectGoods.image} mode="widthFix"></image>

</view>

<view class="easy-sku_base-info">

<text class="easy-sku_base-info-price">¥{selectGuige.price?selectGuige.price*count:0}</text>

<text class="easy-sku_base-info-num">商品编号：{selectGoods.id}</text>

</view>

<view class="easy-sku_close-box" @click="cancel">

<image class="easy-sku_close-ico" src={ico_close} mode="widthFix"></image>

</view>

</view>

<scroll-view class="easy-sku_scroll-box" scroll-y>

<view class="easy-sku_guige-box">

<view class="easy-sku_guige-title">

<text class="easy-sku_guige-title-label">颜色</text>

</view>

<view class="easy-sku_guige-item-box">

<view :class="selectGoods.id==item.id?'easy-sku_guige-item--select':'easy-sku_guige-item--default'" v-for="(item,index) in goodsList" data-item={item} @click="setGoods">

<text :class="selectGoods.id==item.id?'easy-sku_guige-item-label-select':item.status?'easy-sku_guige-item-label--default':'easy-sku_guige-item-label-disable'">{item.color}</text>

</view>

</view>

</view>

<view class="easy-sku_guige-box">

<view class="easy-sku_guige-title">

<text class="easy-sku_guige-title-label">版本</text>

</view>

<view class="easy-sku_guige-item-box">

<view :class="selectGuige.label==item.label?'easy-sku_guige-item--select':'easy-sku_guige-item--default'" v-for="(item,index) in guigeList" data-item={item} @click="setGuige">

<text :class="selectGuige.label==item.label?'easy-sku_guige-item-label-select':item.status?'easy-sku_guige-item-label--default':'easy-sku_guige-item-label-disable'">{item.label}</text>

</view>

</view>

</view>

<view class="easy-sku_count-box">

<text class="easy-sku_count-label">购买数量</text>

<view class="easy-sku_count-result-tool">

<text :class="count>0?'easy-sku_count-result-item':'easy-sku_count-result-item--disable'" @click="countDel">-</text>

<input class="easy-sku_count-result-input" placeholder="" keyboard-type="number" v-model="count"/>

<text class="easy-sku_count-result-item" @click="countAdd">+</text>

</view>

</view>

</scroll-view>

<view class="easy-sku_bottom">

<button class="easy-sku_btn" @click="submit">确认</button>

</view>

<safe-area></safe-area>

</view>

</view>

</template>

<script>

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});

}

}

}

</script>

<style>

.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;

}

</style>

示例文件

demo-easy-sku.stml

<template>

<view class="page">

<safe-area></safe-area>

<view class="item" @click="openSKU">

<text>选择商品</text>

</view>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      

<easy-sku

oncancel="closeSKU"

οnsubmit="getSKU"

:goodsList="goodsList"

v-if="isShow"

>

</easy-sku>

</view>

</template>

<script>

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;

}

}

}

</script>

<style>

.page {

height: 100%;

background-color: #f6f6f6;

}

.item{

background-color: #ffffff;

margin: 15px;

padding: 15px;

border-radius: 5px;

}

</style>

点击立即使用AVM框架

cuicuiniu521
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
规格组件-SKU&SPU
Ifenglala的博客
05-31 945
官方话术： SPU（Standard Product Unit）：标准化产品单元。是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性。通俗点讲，属性值、特性相同的商品就可以称为一个SPU。 SKU（Stock Keeping Unit）库存量单位，即库存进出计量的单位， 可以是以件、盒、托盘等为单位。SKU是物理上不可分割的最小存货单元。在使用时要根据不同业态，不同管理模式来处理。 画图理解： 总结一下： spu代表一个商品，拥有很多相同的属性。 sk
数量选择控件(+，-，数量编辑)如购物车商品选择时
02-28
数量选择控件(+，-，数量编辑)如购物车商品选择时,包含库存设定，最大最小值设定
APICloud AVM框架 封装SKU（商品规格选择）组件
白鱼赤乌的博客
07-21 843
该SKU组件可实现商品图片与颜色属性进行联动，通过颜色、版本来控制价格，总价通过购买数量与所选商品价格进行自动计算；可进行缺货设定。
YII 商品选择器组件
肆月之风的专栏
04-06 187
系统中可能很多地方都需要选择商品，例如模板机制、活动等地方。 系统中可参考商品赠品的功能实现。 使用方法如下： 1.引入js： {script src='@static/js/jquery.widget.js'}  2.在页面中指定组件的容器，所谓组件就是指ajax加载的一个已经实现了大部分功能的页面，为了方便管理，需要为此加载的页面指定一块区域来容纳它，一般容器可以选择DIV，方便前...
Android 商品属性SKU选择
03-14
Android商品属性SKU选择，效仿淘宝的选择样式，选择多种属性。
act:[AVM] [组件] [案例] ACT 是 AVM Component & Template 的缩写。 Vant 组件库的 AVM 实现
04-09
在组件化开发的框架下，参考了业界使用率比较高的 Vant 组件库来作为设计范本， 使用 AVM 的组织方式来实现了ACT（AVM Component & Template.）。 框架特点 Vant 本身是大家所熟知的，常用的组件库。 Vant 有完整的...
hello-app:[AVM] [示例] APICloud多端开发演示。APICloud多端技术提供一套代码同时开发原生 Android & iOS 平台的 APP 以及小程序的能力。多端技术基于 avm.js 语法进行代码编写，通过 APICloud Studio3 或云编译生成 APP 以及小程序代码
04-22
AVM 跨端框架（APICloud-View-Model)是一个跨端的高性能 JavaScript 框架，更趋近于原生的编程体验。它提供简洁的模型来分离应用的用户界面、业务逻辑和数据模型，适合高度定制化的项目。2 开发工具 APICloud Studio...
mx-app-templates:[AVM] [链接] [合集] APICloud3.x AVM.JS 应用案例源码合集，收集一些优秀的基于 APICloud3.x AVM技术开发的应用模板和学习资料
05-15
该项目是为了向大家介绍多端技术 AVM.js 上手演示项目文档。 仓库重点关注 README.md 中的上手步骤文本。 可以通过该文档，从 0 到 1 搭建项目工具环境、创建项目、预览体验等基本操作。 另外还附带了提交打包等后续...
海康VM框架软件PLC通信功能使用详解
07-19
海康VM框架软件是一款专用于机器视觉业务的高级软件平台，其PLC（Programmable Logic Controller）通信功能是与工业自动化设备交互的关键组件。在本文中，我们将深入探讨海康VM V4.1版本的PLC通信功能，了解如何使用...
AVM.rar_AVM_PIC
09-19
在构建AVM系统中，我们可以选择适合的型号，如PIC16或PIC18系列，它们拥有足够的输入/输出引脚和计算能力，可以处理实时的数据采集和处理任务。 三、AVM系统硬件设计 1. 电流测量：采用电流互感器或分流器来感应...
android SKU算法(商品属性选择框)demo
02-13
商品属性选择框，效果类似淘宝的属性选择，附json数据结构段与效果图。自己项目也在用，sku算法是git上的。跟大家分享一下
APICloud AVM框架打造数字滚动组件
cuicuiniu521的博客
07-13 98
数字滚动组件，用于数字的动态效果展示。今天用APICloud AVM框架打造数字滚动组件。组件中用到的核心功能点是，background-position属性设置背景图像的起始位置。每个数字占位的背景图片是一个0-9数字组成的图片，通过随机产生不同的图片其实位置来展示不同的数字。通过延迟产生每次的位置，来控制数字切换的频率，这个是可以自定义的。可自定义数字其实位置，靠左，靠右，居中。可自定义展示的数字个数。组件文件 count-up.stml...
【VK】商品多规格SKU选择器组件豪华版（uniapp版，可编译成H5、APP、各大小程序）
wwqwwq112的博客
09-27 3441
【VK】【开箱即用】商品sku选择器组件豪华独立版，支持多种皮肤。
Android多维商品属性SKU选择
胡逸枫的博客
01-22 6758
前言： 最近又做到这一块的需求，以前也做过类似仿淘宝的属性选择，当时在网上下载的demo参考，最多也支持两组商品属性，用的两个gridview结合，扩展性很差，这次不打算用之前的代码，所以重新自己写了一个demo**（文末附上项目地址）**如图所示，界面UI这一块肯定不用gridview，那样太过繁琐，所以采用recyclerview，item里面渲染ViewGroup，根据数据源的数量，往Vie
Android 实现SKU选择通用方式
u010766458的博客
11-18 2554
效果如下： 说明： 实现sku的方式一般采用在获取到数据后拆分所有条件的可能性，实现方式参考js的实现，代码如下： SkuHelp.kt /** 不考虑服务端的格式类型，将对应格式翻译成如下格式: *[ * { "颜色": "红", "尺码": "大", "型号": "A", "skuId": "3158055" }, * { "颜色": "白", "尺码": "大", "型号": "A", "skuId": "3158054" }, * { "颜色": "白",
element-ui封装dialog组件提供商品选择(支持单选/全选及已选择商品翻页保存)
Timora_的博客
07-15 981
父组件调用及需传入值说明 ① parentSelectArr：此属性主要传入父组件表格已选择的商品数据 ① handleSubmit：此事件在子组件点击确定按钮时触发，接收子组件传递过来的商品数据，然后把商品数据push到父组件的商品列表中 父组件显示的商品数据如上（调用的element-ui的table标签展示商品数据） <add :visible.sync="showAddDialog" @onSubmit="handleSubmit" :paren
vue 商品选择规格
uuai
01-02 7509
&lt;!doctype html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.
小程序商品规格属性界面布局，实现每种属性选择一个
热门推荐
kangzai的博客
07-30 1万+
废话不多说，上代码， wxml: &lt;scroll-view class="container" style='height:{{noScrollHeight}};overflow:hidden;margin-bottom:100rpx;'&gt; &lt;view&gt; &lt;swiper class="goodsimgs" indicator-dots="true" ...
Android 一体机等root后的机器指令截屏
最新发布
csdn_zxw的博客
07-19 332
Android 一体机等root后的机器指令截屏
深入理解Avm2虚拟机与AS3性能优化技巧
在深入探讨Avm2虚拟机时，我们知道它是Adobe Flash Player为了支持ActionScript 3.0（AS3）而引入的关键组件。从Flash Player 9.0开始，AVM2采用了Just-In-Time (JIT) 和解释器的混合执行模式，这使得AS3的运行速度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值