<listing id="r7f1v"></listing>
<listing id="r7f1v"><var id="r7f1v"></var></listing><listing id="r7f1v"><cite id="r7f1v"><i id="r7f1v"></i></cite></listing>
<listing id="r7f1v"><cite id="r7f1v"></cite></listing>
<listing id="r7f1v"></listing>
<listing id="r7f1v"></listing>
<thead id="r7f1v"><cite id="r7f1v"></cite></thead>
<listing id="r7f1v"></listing>
<listing id="r7f1v"><cite id="r7f1v"></cite></listing>
<listing id="r7f1v"></listing>
<listing id="r7f1v"></listing>
<progress id="r7f1v"><var id="r7f1v"></var></progress>
<listing id="r7f1v"></listing>
APP開發平臺 > Blog > 使用APICloud AVM框架封裝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


<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"

onsubmit="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框架

高效的App定制平臺,標準化、便宜、快!

提交APP定制開發需求
欧美激情一区二区,国产精品区免费视频,欧美激情视频在线播放,久久久亚洲综合久久98,久久国产精品99精品国产