平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
wuyan-goods-sku 一个仿淘宝的商品多规格选择组件
喜欢请给个好评吧
引用方法
import specificationsnew from '@/components/specificationsnew.vue';:**
< template > 模板
<template>
<view class="">
<view @click="selectSukid">选择规格</view>
<specificationsnew @submitSukid="update" v-if="JSON.stringify(goodsInfo)!='{}' && JSON.stringify(gspecList)!='{}'" :goodsInfo="goodsInfo" :gspecList="gspecList" ref="mychild"></specificationsnew>
</view>
</template>
< script >模板
<script>
import specificationsnew from '@/components/specificationsnew.vue';
export default {
components: {
specificationsnew
},
data() {
return {
gspecList: {},
goodsInfo: {},
};
},
onLoad() {
this.getlist();
},
methods: {
selectSukid:function(){
if(JSON.stringify(this.goodsInfo)!='{}' && JSON.stringify(this.gspecList)!='{}'){
this.$refs.mychild.toggleSpec();
}else{
uni.showToast({
title: '请稍后再试',
mask: false,
duration: 1500
});
}
},
update:function(e){
console.log(e)
},
getlist: function() {
setTimeout(() => {
this.gspecList = {
//模拟后台返回的数据 多规格
goods_spec: [
{
thumb: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1841931946,2601594367&fm=26&gp=0.jpg',
specs: '2_5',
id: 23,
stock: 10,
title: '热+有糖(半勺)',
price: '20.00'
},
{
thumb: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3942074681,1492806778&fm=26&gp=0.jpg',
specs: '2_6',
id: 22,
stock: 0,
title: '热+无糖',
price: '20.00'
}
],
spec_info_list: [
{
spec_name: '温度',
spec_id: 3,
value: [
{
spec_value_name: '热',
spec_name: '温度',
spec_id: 3,
spec_value_id: 2
},
{
spec_value_name: '冷',
spec_name: '温度',
spec_id: 3,
spec_value_id: 3
}
]
},
{
spec_name: '口味',
spec_id: 4,
value: [
{
spec_value_name: '有糖(半勺)',
spec_name: '口味',
spec_id: 4,
spec_value_id: 5
},
{
spec_value_name: '无糖',
spec_name: '口味',
spec_id: 4,
spec_value_id: 6
},
{
spec_value_name: '有糖(一勺)',
spec_name: '口味',
spec_id: 4,
spec_value_id: 7
}
]
}
]
};
this.goodsInfo = {
thumb: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2346693831,2195431178&fm=26&gp=0.jpg',
stock: 100,
price: '30.00'
};
}, 1500);
}
}
};
</script>
参数说明
熟悉 |
类型 |
说明 |
gspecList |
object |
商品sku信息 |
goodsInfo |
object |
商品详情 |
specClass |
string |
规格弹窗是否显示 |
goodsInfoNew |
object |
当规格选择完成时重新覆盖商品信息 |
skutitlename |
string |
提示用户例如:请选择温度,口味;或者提示用户已选择温度,口味 |
skutitlenamelist |
array |
存储规格标题 |
selectArr |
array |
存放被选中的值 |
shopItemInfo |
object |
存放要和选中的值进行匹配的数据 |
subIndex |
array |
是否选中 因为不确定是多规格还是单规格,所以这里定义数组来判断 |
skuId |
string |
规格id |
方法 & 事件