小程序实现添加购物车选择规格

detail.wxml:

class="swiper"
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
circular="{{circular}}">
wx:for="{{picture}}">

class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{item.img}}"
mode='scaleToFill'
class="slide-image"/>



class="goods">
class='name'>{{goods_info.goods_name}}
class='price'>
class='left'>￥class='shop_price'>{{goods_info.shop_price}}
class='market_price'>{{goods_info.market_price}}


class='line'>
class='choose_spec'>
class='left'>已选
class='spec'>{{selectName}}
class='more'
bindtap='modal_show'
data-flag="0">class='right'
src='/images/detail/more.png'
bindtap='choose_spec'>

class='line'>
class='comment_head'>
评价
class='comment_right'>
class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/images/detail/more.png">


class="line1">
class='comment'>
class="top">
class='head_img'
style="background: url('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg') no-repeat; background-size: cover;">
class='nick_name'>疯狂的李狗蛋儿
class='star'
class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/images/detail/star5.png">

class='comment_content'>回家为维护和额我好卡IE我人文环境人文环境业务8二维大家很快哒二球的大健康大厦火炬大厦会尽快打死大家好的委屈的健康啦即可登录三打架了可完全打卡机
class='comment_img'>
class='comment_item_img'
class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg">
class='comment_item_img'
class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg">
class='comment_item_img'
class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg">
class='comment_item_img'
class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg">


class="line">
class='des'>
class='des_head'>商品详情
class='line1'>
class='des_img'
mode='widthFix'
class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://img.alicdn.com/imgextra/i2/3001906498/TB2uxtyXiHmJKJjy0FfXXb9aVXa_!!3001906498.jpg">


class='detail_footer'>
class='detail_cart'>
class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/images/common/cart1.png">
class='cart_font'>购物车

class='buy'
bindtap='modal_show'
data-flag="1">立即购买
class='addCart'
bindtap='modal_show'
data-flag="2">加入购物车


class='mask'
style="display:{{choose_modal}}">
class="choose"
style="display:{{choose_modal}}">
class="spec_img_container">
class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{default_spe_img}}">
class="amount">￥{{amount}}
class="clear"
type='clear'
bindtap="modal_none">


class="spec_view_container">
class="modal_de_select">{{selectName}}
class="modal_spec">
wx:for="{{spec}}"
wx:for-index="group_idx">
class="modal_spec_name">{{item.name}}：
class='modal_spec_group'>
wx:for="{{item.child}}">
class="modal_spec_item_{{item.isSelect ? 'active' : ''}}"
data-select-index="{{group_idx}}"
data-attr-index="{{index}}"
data-attr-id="{{item.id}}"
bindtap='clickAttr'>{{item.name}}






class="buy_num">
class="font_num">购买数量：
class="stepper">

class="{{minusStatus}}"
bindtap="bindMinus">-

type="number"
bindchange="bindManual"
value="{{num}}"
/>

class="normal"
bindtap="bindPlus">+


wx:if="{{flag > 0}}">
class="modal_button">确认

else>
class="modal_button_two">
class="modal_cart">加入购物车
class="modal_buy">立即购买

detail.wxss:

.swiper{
height: 750rpx;
width: 750rpx;
box-sizing: border-box;
}
.swiper .slide-image{
width: 750rpx;
height: 750rpx;
}
.goods{
width: 750rpx;
height: 215rpx;
padding: 34rpx
30rpx;
box-sizing: border-box;
}
.goods .name{
width: 702rpx;
height: 70rpx;
line-height:
35rpx;
font-size: 28rpx;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient:
vertical;
-webkit-line-clamp:
2;
}
.goods .name{
width: 702rpx;
height: 70rpx;
}
.goods .price{
margin-top:20rpx;
color: #C62127;
font-size: 32rpx;
}
.goods .price
.left{
font-size: 24rpx;
}
.goods .price
.shop_price{
font-weight:
700;
}
.goods .price
.market_price{
font-size: 24rpx;
color: #D7D7D7;
margin-left:20rpx;
text-decoration-line:
line-through;
}
.line{
width: 750rpx;
height: 10rpx;
background: #EFEFF4;
}
.choose_spec{
width: 750rpx;
height: 90rpx;
padding: 0
20rpx;
line-height:
90rpx;
box-sizing: border-box;
}
.choose_spec
.left{
font-size: 24rpx;
color: #B6B6B6;
float: left;
}
.choose_spec
.spec{
height: 90rpx;
width: 550rpx;
margin-left:30rpx;
line-height:
90rpx;
font-size: 24rpx;
color: #707070;
float: left;
}
.choose_spec
.more{
width: 60rpx;
height: 90rpx;
margin-left:650rpx;
}
.choose_spec
.right{
width: 38rpx;
height: 8rpx;
}
.comment_head{
width: 750rpx;
height: 90rpx;
line-height:
90rpx;
font-size: 24rpx;
color: #B6B6B6;
padding: 0
20rpx;
box-sizing: border-box;
}
.comment_head
text{
float: left;
}
.comment_head
.comment_right{
width: 50rpx;
height: 90rpx;
float: left;
margin-left:604rpx;
}
.comment_head
image{
width: 38rpx;
height: 8rpx;
}
.line1{
width: 750rpx;
height: 2rpx;
background:#D7D7D7;
}
.comment{
width: 750rpx;
height: 428rpx;
padding: 20rpx
20rpx;
box-sizing: border-box;
}
.comment .top{
width: 100%;
height: 100rpx;
line-height:
100rpx;
}
.comment .top
.head_img{
width: 100rpx;
height: 100rpx;
border-radius:
50%;
float: left;
}
.comment .top
.nick_name{
font-size: 21rpx;
margin-left:12rpx;
}
.comment .top
.star{
width: 120rpx;
height: 18rpx;
margin-left:310rpx;
}
.comment .comment_content{
margin-top:20rpx;
height: 64rpx;
line-height:
32rpx;
font-size: 24rpx;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient:
vertical;
-webkit-line-clamp:
2;
}
.comment .comment_img{
height: 165rpx;
width: 165rpx;
overflow: hidden;
margin-top:20rpx;
}
.comment .comment_img{
height: 165rpx;
width: 100%;
}
.comment .comment_img
.comment_item_img{
width: 165rpx;
height: 165rpx;
box-sizing: border-box;

padding: 10rpx
10rpx;
}
.des{
width: 750rpx;
margin-bottom:
100rpx;
}
.des .des_head{
width: 750rpx;
height: 100rpx;
line-height:
100rpx;
font-size: 28rpx;
color: #707070;
text-align: center;
}
.des .des_img{
width: 750rpx;
}
.detail_footer{
width: 750rpx;
height: 100rpx;
position: fixed;
bottom: 0;
border-top: 4rpx

D7D7D7 solid;

box-sizing: border-box;
}
.detail_footer
.detail_cart{
width: 250rpx;
height: 100rpx;
background: #fff;
float: left;
}
.detail_footer
.detail_cart image{
width: 46rpx;
height: 46rpx;
margin-left:
100rpx;
margin-top:10rpx;
}
.detail_footer
.detail_cart .cart_font{
font-size: 24rpx;
text-align:center;
}
.detail_footer
.buy{
width: 250rpx;
height: 100rpx;
background:#FF9500;
margin-left:250rpx;
text-align: center;
line-height:
100rpx;
color: #fff;
}
.detail_footer
.addCart{
position: fixed;
bottom: 0;
right: 0;
width: 250rpx;
height: 99rpx;
background: #C62127;
text-align: center;
line-height:
99rpx;
color: #fff;
}
/蒙版 /
.mask{
width: 750rpx;
height: 100%;
background: #C0C0C0;
z-index: 10;
position: fixed;
top: 0;
opacity: 0.8;
}
/选择规格层面/
.choose{
display: none;
flex-direction:
row;
align-items:
center;
background-color:

fff;

position: fixed;
bottom: 0;
right: 0;

.choose .modal_button{
flex-direction:
row;
background-color:

C62127;

position: inherit;
bottom: 0;
z-index: 100;
width: 750rpx;
height: 106rpx;
line-height:106rpx;
color: #fff;
text-align:center;
margin:0
auto;
}
/不知道从哪点进来时候/
.choose .modal_button_two{
flex-direction:
row;
align-items:
center;
float: left;
background-color:

fff;

position: inherit;
bottom: 0;
right: 0;
z-index: 10;
width: 100%;
height: 50px;
}
.choose .modal_button_two
button{
width: 50%;
float: left;
color: #fff;
border-radius:
0px;
}
.choose .modal_button_two
.modal_cart{
background: #FFB03F;
}
.choose .modal_button_two
.modal_buy{
background: #f44336;
}

.choose .spec_img_container{
height:100px;
border-bottom:
2px solid #F5F5F5;
position: relative;
}
.choose .spec_img_container
image{
width: 200rpx;
height: 200rpx;
position: absolute;
top:-40rpx;
left: 20rpx;
border: 2px

F5F5F5 solid;

border-radius:
5px;
}
.choose .spec_img_container
.amount{
width: 400rpx;
color: red;
position: absolute;
top: 80rpx;
left:240rpx;
}
.choose .spec_img_container
.clear{
position:absolute;
top:20rpx;
right:20rpx;
}
.choose .spec_view_container{
width: 100%;
}
.choose .spec_view_container
.modal_de_select{
font-size: 28rpx;
color: #808080;
margin-left:
20rpx;
margin-top:10rpx;
}
.choose .spec_view_container
.modal_spec{
margin-left:20rpx;
margin-top:10rpx;
font-size:28rpx;
}
.choose .spec_view_container
.modal_spec_name{
margin-left:5rpx;
margin-top:10rpx;
font-size:28rpx;
color:#8B0000;
}

.choose .spec_view_container
.modal_spec_item_{
width: 750rpx;
display: inline-block;
width:fit-content;
width:-webkit-fit-content;
width:-moz-fit-content;
min-width: 80rpx;
max-width: 400rpx;
height: 50rpx;
line-height:
50rpx;
border: 2rpx

707070 solid;

margin-left:20rpx;
margin-top:20rpx;
border-radius:
10rpx;
text-align: center;
}
.choose .spec_view_container
.modal_spec_item_active{
width: 750rpx;
display: inline-block;
width:fit-content;
width:-webkit-fit-content;
width:-moz-fit-content;
min-width: 80rpx;
max-width: 400rpx;
height: 50rpx;
line-height:
50rpx;

border-left:
2rpx solid

ccc;

border-right:
2rpx solid

ccc;

}
/普通样式/
.choose .buy_num
.stepper .normal{
color: black;
}
/禁用样式/
.choose .buy_num
.stepper .disabled{
color: #ccc;
}

detail.js：

const app = getApp();
var selectIndex;//选择的大规格key
var attrIndex;//选择的小规格的key
var selectIndexArray = [
];//选择属性名字的数组
var selectAttrid = [];//选择的属性id
Page({

bindManual: function (e) {
var num = e.detail.value;
if (isNaN(num)) {
num = 1;
}
// 将数值与状态写回
this.setData({
num: parseInt(num)
});
this.change_spec();
this.change_price();
},
//弹出
modal_show: function (e) {
var flag = e.currentTarget.dataset.flag;
this.setData({
flag: flag,
choose_modal: "block",
});
},
//消失
modal_none: function () {
this.setData({
choose_modal: "none",
});
},
clickAttr: function (e) {
// console.log(e);return;
var selectIndex = e.currentTarget.dataset.selectIndex;
var attrIndex = e.currentTarget.dataset.attrIndex;
var spec = this.data.spec;
var count = spec[selectIndex].child.length;
// console.log(count); return;
for (var i =
0; i spec[selectIndex].child[i].isSelect = false;
}
spec[selectIndex].child[attrIndex].isSelect = true;
var name = spec[selectIndex].child[attrIndex].name;//点击属性的名称
var attrid = spec[selectIndex].child[attrIndex].id;
// //点击过，修改属性
var selectName =
"";
//点击过，修改属性
selectIndexArray[selectIndex].value = name;
selectAttrid[selectIndex] = attrid;
var selectIndexArraySize = selectIndexArray.length;
//将数组的所有属性名拼接起来
for (var i =
0; i selectName += ' "' + selectIndexArray[i].value +
'" ';
}
console.log(selectName);
this.setData({
spec: spec,//变换选择框
selectName: selectName,
selectAttrid: selectAttrid
});
},
//初始化规格选择
init_attr: function () {
//初始化规格选择
var name = "";
var spec = this.data.spec;
var size = spec.length;
for (var i =
0; i selectIndexArray.push({ key: i, value: spec[i].child[0].name });
selectAttrid.push(spec[i].child[0].id)
name += ' "' + selectIndexArray[i].value +
'" ';
}
var selectName =
this.data.selectName;
selectName = name;
this.setData({
selectName: selectName,
selectAttrid: selectAttrid
});
}
})

作者：周瑾ruiqi
链接：https://www.jianshu.com/p/1656398a071f