VUE类似淘宝选择商品多规格(库存判断)

1.组件效果展示

也可访问链接查看网页效果...

后面又用uni-app写过一次，比这次稍微清晰一些

uni-app类似淘宝选择商品多规格(库存判断)

瞎封装组件系列：

VUE简单提示框

VUE树形图(递归实现)

VUE多店铺购物车

2.使用方法

引入组件：

import goodsspec from '../../../../components/ghGoodsSpec/ghGoodsSpec.vue'

在<template>合适的区域使用

<goodsspec :goods="goods" :isShow="modalIsShow" @closeModal="closeModal"></goodsspec>

组件规定需要从父组件传商品规格信息的JSON，和一个布尔值，控制规格选择弹出框显示状态。

商品规格信息JSON必须符合组件规定标准(下面是例子中的JSON，库存的json，规格json)：


modalIsShow:false,
goods: {defaultimg:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3457897174,1250176029&fm=26&gp=0.jpg',"priceInfo": [{"SKU": "1_1_5_11","stock": 888,"price": 15535400.00,"difference": "黑色;34;帆布鞋",goodsimg:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3323728883,1529837998&fm=26&gp=0.jpg'}, {"SKU": "1_3_5_12","stock": 99,"price": 100.00,"difference": "黑色;34;凉鞋",goodsimg:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1006940732,1295991734&fm=26&gp=0.jpg'}, {"SKU": "1_4_6_13","stock": 150,"price": 10011.00,"difference": "粉色;36;运动鞋",goodsimg:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1916398967,1152344977&fm=26&gp=0.jpg'},{"SKU": "1_3_5_12","stock": 9999,"price": 100.00,"difference": "红色;35;凉鞋",goodsimg:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2755143450,1175568520&fm=26&gp=0.jpg'}, {"SKU": "1_4_5_13","stock": 100000,"price": 10088.00,"difference": "粉色;35;运动鞋",goodsimg:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3305162035,1457776276&fm=26&gp=0.jpg'}],"SKUInfo": [{"name": "颜色","sort": 1,"items": [{"name": "黑色","value": 1,"sort": 1},{"name": "红色","value": 3,"sort": 2},{"name": "粉色","value": 4,"sort": 3}]}, {"name": "尺码","sort": 2,"items": [{"name": "35","value": 5,"sort": 1},{"name": "36","value": 6,"sort": 2},{"name": "34","value": 7,"sort": 3}]}, {"name": "分类","sort": 4,"items": [{"name": "帆布鞋","value": 11,"sort": 1},{"name": "凉鞋","value": 12,"sort": 2},{"name": "运动鞋","value": 13,"sort": 3}]}]
}

3.代码实现

实现原理：

点击规格按钮时，把所选规格装到一个数组中，最后把组合的规格代入商品数量的json中查找。

<template><div class="ui-shade" v-show="isShow"  @click="changisshow"><div class="modal_cont" :class="isShow ? 'silderout':''" @click.stop="changisshow()"><div class="page_modal" @click.stop><div id="geuige"><div class="cose_modal" @click="changisshow()"><span>×</span></div><div class="goods_intro flex-star"><img :src="defaultimg"><div class="goods_info"><div class="goods_price">{{price}}</div><div class="kucun">库存<span>{{num}}</span>件</div><div class="checkre flex-star"><span>已选:</span><div>{{showAttr}}</div></div></div></div><div v-for="(item,itemindex) in goods.SKUInfo" class="chose_item"><p class="chose_item_tit">{{item.name}}</p><div class="chose_item_cont flex-star"><div v-for="(attr,attrindex) in item.items" v-on:click="specificationBtn(attr.name,itemindex,attrindex)"v-bind:class="[attr.isShow?'':'noneActive',subIndex[itemindex] == attrindex?'productActive':'']">{{attr.name}}</div></div></div><div class="num_opt flex-between"><span>购买数量</span><div class="numopt flex-star"><div class="add">-</div><div>2</div><div class="reduce">+</div></div></div><div class="btn_cont flex-star"><input type="button" name="" id="" value="加入购物车" /><input type="button" name="" id="" value="马上抢" /></div></div></div></div></div>
</template><script>export default {data() {return {selectArr: [], //存放被选中的值showAttr: "",num: 0,shopItemInfo: {}, //存放要和选中的值进行匹配的数据subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断price: '', //选中规格的价钱defaultimg:''}},props:{isShow:{type:Boolean,default:false},goods:{type:Object,required:true}},created: function() {var self = this;for (var i in self.goods.priceInfo) {self.shopItemInfo[self.goods.priceInfo[i].difference] = self.goods.priceInfo[i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配}this.defaultimg = this.goods.defaultimg;console.log(this.defaultimg,66666);self.checkItem();// self.specificationBtn("黑色",0,0)},methods: {changisshow(e) {this.$emit("closeModal",false)},specificationBtn: function(item, n, index) {var self = this;console.info(self.selectArr[n] + "66666" + item)if (self.selectArr[n] != item) {self.selectArr[n] = item;self.subIndex[n] = index;} else {self.selectArr[n] = undefined;self.subIndex[n] = -1; //去掉选中的颜色}var showarr = self.selectArr;var tempTop = [];showarr.forEach((item, i, arr) => {if (item) {tempTop.push(item)}})self.showAttr = tempTop.join(";");self.checkItem();tempTop = []},checkItem: function() {var self = this;var option = self.goods.SKUInfo;var result = []; //定义数组存储被选中的值for (var i in option) {result[i] = self.selectArr[i] ? self.selectArr[i] : '';}console.log(result);if (self.shopItemInfo[result.join(";")]) {self.num = self.shopItemInfo[result.join(";")].stock;self.price = "￥" + (self.shopItemInfo[result.join(";")].price).toFixed(2);self.defaultimg = self.shopItemInfo[result.join(";")].goodsimg;} else {self.num = 0;self.price = "￥0.00";self.defaultimg = self.goods.defaultimg;}for (var i in option) {var last = result[i]; //把选中的值存放到字符串last去for (var k in option[i].items) {result[i] = option[i].items[k].name; //赋值，存在直接覆盖，不存在往里面添加name值option[i].items[k].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择}console.info(last)result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖}self.$forceUpdate(); //重绘},isMay: function(result) {for (var i in result) {if (result[i] == '') {return true; //如果数组里有为空的值，那直接返回true}}if (this.shopItemInfo[result.join(";")]) { //匹配选中的数据的库存，若不为空返回true反之返回falsereturn this.shopItemInfo[result.join(";")].stock == 0 ? false : true;}}}}
</script><style scoped="scopedss">.page_modal {width: 100%;background: linear-gradient(to right, #fff, #fff) 0 .2rem no-repeat;background-size: 100% auto;color: #222;position: absolute;bottom: 0;}.goods_intro {padding: 0 .25rem;}.goods_intro img {width: 2rem;height: 2rem;border: 3px solid #fff;border-radius: 4px;box-shadow: 0 0 6px rgba(0, 0, 0, .3);}.goods_info {margin-left: .15rem;}.goods_price {color: #feab27;font-size: .34rem;}.kucun {margin: .05rem 0;}.num_opt {width: calc(100% - .5rem);margin: 0 .25rem;padding: .25rem 0;border-bottom: 1px solid #eeeeee;}.numopt div {width: .7rem;height: .6rem;background: #f5f5f5;text-align: center;line-height: .6rem;color: #666;}.numopt div:nth-child(2) {margin: 0 .08rem;background: white;color: #333;}.chose_item {width: calc(100% - .5rem);margin: 0 .25rem;border-bottom: 1px solid #eeeeee;padding-top: .3rem;}.chose_item_cont {margin-top: .2rem;}.chose_item_cont div {padding: .12rem .24rem;background: #f6f4f5;border-radius: 5px;margin-bottom: .2rem;}.chose_item_cont div:nth-child(n + 2) {margin-left: .2rem;}.chose_item .chose_item_tit {font-size: .3rem;font-weight: bold;}.ui-shade {display: flex;}.silderout {display: block;bottom: 0;animation: silderout .25s;}.btn_cont input {height: .8rem;width: 50%;border: none;color: white;}.btn_cont input:nth-child(1) {background: #ff9e01;border-radius: .8rem 0 0 .8rem;}.btn_cont input:nth-child(2) {background: #ff6f00;border-radius: 0 .8rem .8rem 0;}.btn_cont {width: calc(100% - .5rem);margin: 0 .25rem;padding: .15rem 0;}.productActive {background: #feab27 !important;color: white;}.cose_modal {position: absolute;width: .4rem;top: .4rem;height: .4rem;border: 1px solid #615763;border-radius: 50%;right: .2rem;line-height: .34rem;text-align: center;}@keyframes silderout {from {bottom: -100vh;}to {bottom: 0;}}@keyframes silderin {from {bottom: vh;}to {bottom: -100vh;}}.modal_cont {position: absolute;height: 100vh;width: 100vw;}.noneActive {background-color: #ccc;opacity: 0.4;color: #000;pointer-events: none;}
</style>

写的不好，多多指教。

VUE类似淘宝选择商品多规格(库存判断)相关推荐

uni-app类似淘宝选择商品多规格(库存判断)
1.组件效果展示瞎封装组件系列: VUE简单提示框 VUE树形图(递归实现) VUE多店铺购物车 2.使用方法引入组件: import goodsSpec from '@/components/g ...
vue 实现类似淘宝的商品详情页的商品展示
vue 实现类似淘宝的商品详情页的商品展示利用vue和swiper实现缩略图控制 / Swiper互相控制具体需求描述: 图片大图自动轮播展示,下面的缩略图跟着变化,点击小图切换到对应的大图,大图 ...
vue仿淘宝京东商品多条件筛选（vue实现）
<template><div id="warp">你选择的是:<mark v-for="(item,index) in arr"& ...
vue实现淘宝京东商品放大镜效果
实现原理: 两个盒子,通过映射来同步进行移动,达到移动放大镜的效果. 注意点: 遮罩层的面积/盒子的面积 == 大图展示盒子的面积/大图图片的面积一定要是等比例的才行,严格控制样式效果图: 贴上代 ...
Android仿淘宝京东商品规格参数颜色筛选
Android 选择商品属性sku 最近项目中使用SKU属性查询,类似淘宝京东商品的选择,在网上查询了弄了几个源码看看,发现还是实现不了多属性选择问题,再原基础上改动相当费事,所以想干脆自己处理这个问 ...
仿淘宝京东商品规格属性选择的最简单实现
仿淘宝京东商品规格属性选择的最简单实现商城里面的规格选择,网上大部分是自定义控件实现的,显得很是麻烦,而我的实现方式是大家最常用的控件RecyclerView,特点是性能好,简单.废话不多说,先看实 ...
仿淘宝购物车商品颜色、尺寸选择。
仿淘宝购买商品颜色.尺寸选择. 选项分为三种状态:可选.选中.不可选上图看效果: 1,展示页 2,选中一个颜色,不支持的尺寸会自动变灰,成为不可点击状态如果选择的是尺寸,同样颜色也可以自动筛选可以 ...
Material之Behavior实现支付宝密码弹窗仿淘宝/天猫商品属性选择
版权声明:转载必须注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003 今天的效果在支付宝.淘宝.京东等电商App中很常见.比如支付宝输入密码弹窗.商城下 ...
JavaScript之衣服相册切换效果（类似淘宝商品图切换）
JavaScript之衣服相册切换效果(类似淘宝商品图切换) 话不多说,直接上代码: <!DOCTYPE html> <html lang="en"> &l ...

VUE类似淘宝选择商品多规格(库存判断)

1.组件效果展示

2.使用方法

3.代码实现

VUE类似淘宝选择商品多规格(库存判断)相关推荐

最新文章

热门文章