<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选择规格</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css">
</head>
<body>
<div id="app">
<div class="merchant">
<van-row type="flex" align="center" style="flex-wrap: wrap">
<template v-for="(item,index) in recommends">
<van-col :span="8" class="recommendShop">
<div class="shipImg">
<img :src="item.good_image" alt="">
</div>
<p class="shopName">{{item.goods_name}}</p>
<p class="shop_price">
<span class="shop_currentPrice">￥{{item.online_price}}</span>
<van-icon name="add" class="addCart" @click="addCart(item,index)"></van-icon>
</p>
</van-col>
</template>
</van-row>
</div>
<!--规格-->
<div v-if="is_sku" class="specification_mask2" @click="cancelMask">
<div class="specification_com2" @click.stop="is_sku==false">
<van-row class="product_info2">
<van-col :offset="1">
<div class="specification_img2">
<img :src="skuArr.goods_img" alt="">
</div>
</van-col>
<van-col :offset="10" :span="11">
<p class="goods_name2">{{skuArr.goods_name}}</p>
</van-col>
</van-row>
<van-row class="sku_price-stock">
<van-col :span="12">
<span>单价:</span>
<span class="sku_price">￥{{sku_price}}</span>
</van-col>
<van-col :span="12" style="text-align: right">
<span>库存:</span>
<span class="sku_stock">{{sku_stock}}</span>
</van-col>
</van-row>
<div class="sku_specification2 choose_sku2">
<div v-for="(item,n) in skuArr.data.skuList" :key="n">
<p class="sku_title2 margin_bottom">{{item.name}}</p>
<ul class="sku_ul2">
<li class="sku_li2" v-for="(l,index) in item.list" @click="specificationBtn(l.name,n,$event,index)" :class="[l.isShow?'':'noneActive',subIndex[n] == index?'productActive':'']">
{{l.name}}
</li>
</ul>
</div>
</div>
<van-row type="flex" align="center" class="sku_specification2">
<van-col :span="12">数量</van-col>
<van-col :span="12" style="text-align: right">
<van-stepper v-model="sku_num" integer :min="1" />
</van-col>
</van-row>
<van-row>
<van-button :span="24" class="sku_addCart" @click="sku_addCart" style="width: 100%;">加入购物车</van-button>
</van-row>
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- 引入组件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
recommends: [], //推荐商品
is_sku: false, //规格弹窗
skuArr: [], //规格
sku_price: 0, //规格.价格
sku_stock: 0, //规格.库存
sku_num: 1, //规格.数量
selectArr: [], //存放被选中的值
shopItemInfo: {}, //存放要和选中的值进行匹配的数据
subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
},
created: function() {
var that = this;
//商家推荐
$.getJSON("./data/indexGoodsShow.json", function(data) {
if (data.status == 1) {
that.recommends = data.info;
}
});
},
methods: {
//点击蒙层取消
cancelMask: function() {
this.is_sku = false
},
//选择购买的商品规格
specificationBtn: function(item, n, event, index) {
var self = this;
if (self.selectArr[n] != item) {
self.selectArr[n] = item;
self.subIndex[n] = index;
} else {
self.selectArr[n] = "";
self.subIndex[n] = -1;
}
self.checkItem()
},
checkItem: function() {
var self = this;
var option = self.skuArr.data.skuList;
var result = []; //定义数组存储被选中的值
for (var i in option) {
result[i] = self.selectArr[i] ? self.selectArr[i] : '';
}
for (var i in option) {
var last = result[i]; //把选中的值存放到字符串last去
for (var k in option[i].list) {
result[i] = option[i].list[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
option[i].list[k].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
}
result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
}
//取消商品规格选择的价格*库存
if (self.selectArr[0] == '' && self.selectArr[1] == '') {
var cur = JSON.parse(localStorage.getItem('curData'));
self.sku_stock = parseInt(cur.goods_num);
self.sku_price = cur.online_price;
}
self.$forceUpdate(); //重绘
},
isMay: function(result) {
var that = this;
for (var i in result) {
if (result[i] == '') {
return true; //如果数组里有为空的值，那直接返回true
}
}
//商品规格选择的价格*库存
that.sku_stock = that.shopItemInfo[result].num;
that.sku_price = that.shopItemInfo[result].online_price;
return this.shopItemInfo[result].num == 0 ? false : true; //匹配选中的数据的库存，若不为空返回true反之返回false
},
//加入购物车
addCart: function(item, index) {
var recommends = this.recommends;
if (recommends[index].attributeid && recommends[index].attribute == 2) {
console.log("选择规格");
localStorage.setItem('curData', JSON.stringify(item))
this.getGoodsSku(item, index)
} else {
var data = {
goods_id: recommends[index].goods_id,
num: 1
}
this.joinCart(data);
console.log("加入购物车");
}
},
//获取商品规格
getGoodsSku: function(item, index) {
var that = this;
$.getJSON("./data/getGoodsSku.json", function(res) {
if (res.status == 1) {
that.is_sku = true;
that.skuArr = res;
that.sku_price = item.online_price;
that.sku_stock = parseInt(item.goods_num); //规格.库存
that.sku_num = 1; //规格.数量
for (var i in that.skuArr.data.skuDetailList) {
//修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
that.shopItemInfo[that.skuArr.data.skuDetailList[i].sku] = that.skuArr.data.skuDetailList[i];
}
that.checkItem();
}
});
},
//添加成功
joinCart: function(data) {
var status = 1;
if (status == 1) {
console.log(data);
this.$toast('添加成功')
} else {
this.$toast('添加失败')
}
},
//
sku_addCart: function() {
var skulen = this.skuArr.data.skuList.length;
if (this.selectArr.length == 0 || this.selectArr.length != skulen) {
this.$toast('请选择商品规格')
} else {
for (var i = 0; i < skulen; i++) {
if (this.selectArr[i] == '') {
return this.$toast('请选择商品规格');
} else {
console.log(this.selectArr[i]);
this.$toast('支付去');
}
}
}
}
}
})
</script>
</html>
.merchant {
background: #fff;
box-sizing: border-box;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.recommendShop>.shipImg {
width: 100px;
height: 100px;
}
.recommendShop>.shipImg>img {
width: 100%;
height: 100%;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.recommendShop>.shop_price {
display: flex;
align-items: center;
justify-content: space-between;
}
.addCart {
font-size: 24px;
color: #fd633a;
}
.specification_mask2 {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.specification_com2 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #fff;
}
.product_info2 {
box-sizing: border-box;
padding: .25rem 0 .55rem;
}
.product_info2>.van-col>.margin_bottom {
margin-bottom: .15rem;
}
.specification_img2 {
width: 80px;
height: 80px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
position: absolute;
top: -1.3rem;
background: #fff;
padding: .15rem;
box-shadow: 0 0 1px 1px #f1f1f1;
}
.specification_img2>img {
width: 100%;
height: 100%;
display: block;
}
.goods_name2 {
font-size: 15px;
}
.product_color2 {
color: #fd633a;
}
.Stock2 {
color: #888;
font-size: 15px;
}
.sku_specification2 {
box-sizing: border-box;
padding: 10px;
}
.choose_sku2 {
max-height: 300px;
overflow: scroll;
}
.sku_title2 {
font-size: 15px;
height: .5rem;
line-height: .5rem;
}
.sku_ul2 {
display: flex;
flex-wrap: wrap;
}
.sku_li2 {
box-sizing: border-box;
padding: 5px 10px;
background: #f1f1f1;
margin: 0 .15rem .15rem 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 14px;
}
.sku_price-stock {
box-sizing: border-box;
padding: 10px;
border-bottom: 1px solid #f1f1f1;
}
.sku_price,
.sku_stock {
color: #fd633a;
font-size: 15px;
}
.sku_addCart {
background: #ffd100;
border: none;
}
.noneActive {
background-color: #ccc;
opacity: 0.4;
pointer-events: none;
}
.productActive {
background: #ffd100;
}data下json数据
getGoodsSku.json
{"goods_img":"https:\/\/oem.mobzhifu.com\/Uploads\/Picture\/Goods\/2018-10-26\/5bd2c69e6f2bf.png","goods_name":"\u6d4b\u8bd5\u6d4b\u8bd5","data":{"skuDetailList":[{"id":"346","goods_id":"514","sku":"\u7ea2\u8272,\u5fae\u8fa3","sku_res":"515,721","online_price":"21.00","num":"113","shop_mem_price":0},{"id":"347","goods_id":"514","sku":"\u7ea2\u8272,\u4e2d\u8fa3","sku_res":"515,722","online_price":"22.00","num":"13","shop_mem_price":0},{"id":"348","goods_id":"514","sku":"\u7ea2\u8272,\u7279\u8fa3","sku_res":"515,723","online_price":"23.00","num":"134","shop_mem_price":0},{"id":"349","goods_id":"514","sku":"\u7ea2\u8272,\u4e0d\u8fa3","sku_res":"515,724","online_price":"24.00","num":"135","shop_mem_price":0},{"id":"350","goods_id":"514","sku":"\u7ea2\u8272,\u751c","sku_res":"515,725","online_price":"25.00","num":"136","shop_mem_price":0},{"id":"351","goods_id":"514","sku":"\u7eff\u8272,\u5fae\u8fa3","sku_res":"516,721","online_price":"26.00","num":"137","shop_mem_price":0},{"id":"352","goods_id":"514","sku":"\u7eff\u8272,\u4e2d\u8fa3","sku_res":"516,722","online_price":"27.00","num":"129","shop_mem_price":0},{"id":"353","goods_id":"514","sku":"\u7eff\u8272,\u7279\u8fa3","sku_res":"516,723","online_price":"28.00","num":"11","shop_mem_price":0},{"id":"354","goods_id":"514","sku":"\u7eff\u8272,\u4e0d\u8fa3","sku_res":"516,724","online_price":"29.00","num":"15","shop_mem_price":0},{"id":"355","goods_id":"514","sku":"\u7eff\u8272,\u751c","sku_res":"516,725","online_price":"30.00","num":"17","shop_mem_price":0},{"id":"356","goods_id":"514","sku":"\u84dd\u8272,\u5fae\u8fa3","sku_res":"517,721","online_price":"21.00","num":"18","shop_mem_price":0},{"id":"357","goods_id":"514","sku":"\u84dd\u8272,\u4e2d\u8fa3","sku_res":"517,722","online_price":"22.00","num":"25","shop_mem_price":0},{"id":"358","goods_id":"514","sku":"\u84dd\u8272,\u7279\u8fa3","sku_res":"517,723","online_price":"23.00","num":"99","shop_mem_price":0},{"id":"359","goods_id":"514","sku":"\u84dd\u8272,\u4e0d\u8fa3","sku_res":"517,724","online_price":"24.00","num":"999","shop_mem_price":0},{"id":"360","goods_id":"514","sku":"\u84dd\u8272,\u751c","sku_res":"517,725","online_price":"25.00","num":"78","shop_mem_price":0}],"skuList":[{"name":"\u989c\u8272","list":[{"path":"515","name":"\u7ea2\u8272"},{"path":"516","name":"\u7eff\u8272"},{"path":"517","name":"\u84dd\u8272"}]},{"name":"\u53e3\u5473","list":[{"path":"721","name":"\u5fae\u8fa3"},{"path":"722","name":"\u4e2d\u8fa3"},{"path":"723","name":"\u7279\u8fa3"},{"path":"724","name":"\u4e0d\u8fa3"},{"path":"725","name":"\u751c"}]}]},"status":1,"msg":"\u67e5\u8be2\u6210\u529f"}indexGoodsShow.json
{ "status": 1, "info": [{ "id": "215", "storeid": "12", "merchantid": "45", "goods_id": "113", "addtime": "1539940538", "status": "1", "type": "1", "old_money": null, "starttime": null, "endtime": null, "good_image": "https://oem.mobzhifu.com/Uploads/Picture/Goods/2018-10-13/5bc1ac6ae3858.jpg", "goods_num": "471.00", "goods_name": "秋冬卫衣", "online_price": "78.00", "vip_online_state": "1", "vip_online_integral": null, "vip_online_price": null, "attributeid": "9,", "attribute": "2" }, { "id": "740", "storeid": "12", "merchantid": "45", "goods_id": "514", "addtime": "1542009890", "status": "1", "type": "1", "old_money": null, "starttime": null, "endtime": null, "good_image": "https://oem.mobzhifu.com/Uploads/Picture/Goods/2018-10-26/5bd2c69e6f2bf.png", "goods_num": "2175.00", "goods_name": "测试测试", "online_price": "20.00", "vip_online_state": "1", "vip_online_integral": null, "vip_online_price": null, "attributeid": "5,7,", "attribute": "2" }, { "id": "1456", "storeid": "12", "merchantid": "45", "goods_id": "516", "addtime": "1543717117", "status": "1", "type": "1", "old_money": null, "starttime": null, "endtime": null, "good_image": "https://oem.mobzhifu.com/Uploads/Goods/2018-10-25/5bd1408fbeab2.jpg", "goods_num": "16.00", "goods_name": "品名ABC", "online_price": "14.00", "vip_online_state": "0", "vip_online_integral": "0", "vip_online_price": "0.00", "attributeid": null, "attribute": "1" }, { "id": "1374", "storeid": "12", "merchantid": "45", "goods_id": "482", "addtime": "1543326320", "status": "1", "type": "1", "old_money": null, "starttime": null, "endtime": null, "good_image": "https://oem.mobzhifu.com/Uploads/Picture/Goods/2018-10-23/5bcef41da4674.jpg", "goods_num": "23.00", "goods_name": "测试产品", "online_price": "140.00", "vip_online_state": "1", "vip_online_integral": null, "vip_online_price": null, "attributeid": "5,7,", "attribute": "2" }] }