小程序?qū)崿F(xiàn)添加購物車選擇規(guī)格

detail.wxml:

<swiper
class="swiper"
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
circular="{{circular}}">
<block
wx:for="{{picture}}">
<swiper-item>
<image
src="{{item.img}}"
mode='scaleToFill'
class="slide-image"/>
</swiper-item>
</block>
</swiper>
<view
class="goods">
<view
class='name'>{{goods_info.goods_name}}</view>
<view
class='price'>
<text
class='left'>￥</text><text
class='shop_price'>{{goods_info.shop_price}}</text>
<text
class='market_price'>{{goods_info.market_price}}</text>
</view>
</view>
<view
class='line'></view>
<view
class='choose_spec'>
<text
class='left'>已選</text>
<view
class='spec'>{{selectName}}</view>
<view
class='more'
bindtap='modal_show'
data-flag="0"><image
class='right'
src='/images/detail/more.png'
bindtap='choose_spec'></image></view>
</view>
<view
class='line'></view>
<view
class='comment_head'>
<text>評價</text>
<view
class='comment_right'>
<image
src="/images/detail/more.png"></image>
</view>
</view>
<view
class="line1"></view>
<view
class='comment'>
<view
class="top">
<view
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;"></view>
<text
class='nick_name'>瘋狂的李狗蛋兒</text>
<image
class='star'
src="/images/detail/star5.png"></image>
</view>
<view
class='comment_content'>回家為維護和額我好卡IE我人文環(huán)境人文環(huán)境業(yè)務(wù)8二維大家很快噠二球的大健康大廈火炬大廈會盡快打死大家好的委屈的健康啦即可登錄三打架了可完全打卡機</view>
<view
class='comment_img'>
<image
class='comment_item_img'
src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image>
<image
class='comment_item_img'
src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image>
<image
class='comment_item_img'
src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image>
<image
class='comment_item_img'
src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image>
</view>
</view>
<view
class="line"></view>
<view
class='des'>
<view
class='des_head'>商品詳情</view>
<view
class='line1'></view>
<image
class='des_img'
mode='widthFix'
src="https://img.alicdn.com/imgextra/i2/3001906498/TB2uxtyXiHmJKJjy0FfXXb9aVXa_!!3001906498.jpg"></image>
</view>

<view
class='detail_footer'>
<view
class='detail_cart'>
<image
src="/images/common/cart1.png"></image>
<view
class='cart_font'>購物車</view>
</view>
<view
class='buy'
bindtap='modal_show'
data-flag="1">立即購買</view>
<view
class='addCart'
bindtap='modal_show'
data-flag="2">加入購物車</view>
</view>

<view
class='mask'
style="display:{{choose_modal}}"></view>
<view
class="choose"
style="display:{{choose_modal}}">
<view
class="spec_img_container">
<image
src="{{default_spe_img}}"></image>
<view
class="amount">￥{{amount}}</view>
<icon
class="clear"
type='clear'
bindtap="modal_none"></icon>
</view>

<view
class="spec_view_container">
<view
class="modal_de_select">{{selectName}}</view>
<view
class="modal_spec">
<block
wx:for="{{spec}}"
wx:for-index="group_idx">
<view
class="modal_spec_name">{{item.name}}：</view>
<view
class='modal_spec_group'>
<block
wx:for="{{item.child}}">
<view
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}}</view>
</block>
</view>
</block>
</view>
</view>

<view
class="buy_num">
<view
class="font_num">購買數(shù)量：</view>
<view
class="stepper">

<text
class="{{minusStatus}}"
bindtap="bindMinus">-</text>

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

<text
class="normal"
bindtap="bindPlus">+</text>
</view>
</view>
<block
wx:if="{{flag > 0}}">
<view
class="modal_button">確認(rèn)</view>
</block>
<block
else>
<view
class="modal_button_two">
<button
class="modal_cart">加入購物車</button>
<button
class="modal_buy">立即購買</button>
</view>
</block>
</view>

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;
/* border:2rpx #C62127 solid; */
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;
}
/選擇規(guī)格層面/
.choose{
display: none;
flex-direction:
row;
align-items:
center;
background-color:

fff;

position: fixed;
bottom: 0;
right: 0;
/* border: 1px solid #f44336; /
z-index: 100;
width: 750rpx;
box-sizing: border-box;
}
/知道從來點擊來時候 */
.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_name::after{
content: "";
clear: both;
display: block;
overflow: hidden;
} /
/ .choose .spec_view_container .radio-group{
padding:18rpx;
} */
.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: 2rpx red solid; /
margin-left:20rpx;
margin-top:20rpx;
border-radius:
10rpx;
text-align: center;
background: #C62127;
color: #fff;
}
.choose .buy_num {
margin-top:40rpx;
margin-bottom:
120rpx;
font-size: 28rpx;
}
.choose .buy_num
.font_num{
margin-left:
20rpx;
}
/主容器/
.choose .buy_num
.stepper {
width: 200rpx;
height: 62rpx;
/給主容器設(shè)一個邊框/
border: 2rpx
solid #ccc;
border-radius:
3px;
margin-left:40rpx;
margin-top:20rpx;
}
/加號和減號/
.choose .buy_num
.stepper text {
width: 58rpx;
line-height:
62rpx;
text-align:
center;
float: left;
}
/數(shù)值/
.choose .buy_num
.stepper input {
width: 80rpx;
height: 62rpx;
float: left;
margin: 0
auto;
text-align:
center;
font-size:
32rpx;
/給中間的input設(shè)置左右邊框即可*/
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;//選擇的大規(guī)格key
var attrIndex;//選擇的小規(guī)格的key
var selectIndexArray = [
];//選擇屬性名字的數(shù)組
var selectAttrid = [];//選擇的屬性id
Page({
/**

• 頁面的初始數(shù)據(jù)
  /
  data: {
  picture: [{ img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3438576193,3301397209&fm=27&gp=0.jpg' },
  { img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1525546566,2404337493&fm=27&gp=0.jpg' },
  { img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3028702483,4182396631&fm=27&gp=0.jpg' },
  ],
  //swiper相關(guān)
  indicatorDots: true,
  autoplay: true,
  interval: 3000,
  duration: 1000,
  circular: true,
  //選擇的規(guī)格
  num: 1,//初始數(shù)量
  amount: 0,//初始金額
  minusStatus: 'disabled',
  // 使用data數(shù)據(jù)對象設(shè)置樣式名
  choose_modal: "block",
  // 規(guī)格數(shù)量框
  flag: 0,//點選規(guī)格時來源 0：規(guī)格點 1：立即購買 2：加入購物車
  //規(guī)格數(shù)據(jù)
  spec: [{
  "id":
  1, "name":
  "\u989c\u8272", "child": [{
  "id": 11, "name":
  "\u7ea2\u8272", "isSelect":
  true
  }, {
  "id":
  111, "name":
  "\u767d\u8272", "isSelect":
  false
  }]
  }, {
  "id":
  2, "name":
  "\u5c3a\u7801", "child": [{
  "id": 21, "name":
  "\u5c0f\u53f7", "isSelect":
  true
  }, {
  "id":
  22, "name":
  "\u5927\u53f7", "isSelect":
  false
  }]
  }],
  selectName: "",//已選的屬性名字
  selectAttrid: [],//選擇的屬性id
  //商品信息
  goods_info: {},
  },
  /*
• 生命周期函數(shù)--監(jiān)聽頁面加載
  /
  onLoad: function (options) {
  var that = this;
  wx.request({
  url: app.globalData.host + '/index.php/app/goods/goodsDetails/goods_id/34',
  header: {
  'Content-type':
  'application/json'
  },
  success: function (res) {
  console.log(res.data.data.goods_info);
  that.setData({
  goods_info: res.data.data.goods_info,
  });
  that.init_attr();
  }
  })
  },
  /*
• 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
  /
  onReady: function () {
  },
  /*
• 生命周期函數(shù)--監(jiān)聽頁面顯示
  /
  onShow: function () {
  },
  /*
• 生命周期函數(shù)--監(jiān)聽頁面隱藏
  /
  onHide: function () {
  },
  /*
• 生命周期函數(shù)--監(jiān)聽頁面卸載
  /
  onUnload: function () {
  },
  /*
• 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
  /
  onPullDownRefresh: function () {
  },
  /*
• 頁面上拉觸底事件的處理函數(shù)
  /
  onReachBottom: function () {
  },
  /*
• 用戶點擊右上角分享
  /
  onShareAppMessage: function () {
  },
  / 點擊減號 /
  bindMinus: function () {
  var num = this.data.num;
  // 如果大于1時，才可以減
  if (num > 1) {
  num--;
  }
  // 只有大于一件的時候，才能normal狀態(tài)卤材，否則disable狀態(tài)
  var minusStatus = num <=
  1 ? 'disabled' :
  'normal';
  // 將數(shù)值與狀態(tài)寫回
  this.setData({
  num: num,
  minusStatus: minusStatus
  });
  this.change_spec();
  this.change_price();
  },
  bindPlus: function () {
  var num = this.data.num;
  // 不作過多考慮自增1
  num++;
  // 只有大于一件的時候瘫俊，才能normal狀態(tài)，否則disable狀態(tài)
  var minusStatus = num <
  1 ? 'disabled' :
  'normal';
  // 將數(shù)值與狀態(tài)寫回
  this.setData({
  num: num,
  minusStatus: minusStatus
  });
  this.change_spec();
  this.change_price();
  },
  / 輸入框事件 */
  bindManual: function (e) {
  var num = e.detail.value;
  if (isNaN(num)) {
  num = 1;
  }
  // 將數(shù)值與狀態(tài)寫回
  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 < count; 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;
  //將數(shù)組的所有屬性名拼接起來
  for (var i =
  0; i < selectIndexArraySize; i++) {
  selectName += ' "' + selectIndexArray[i].value +
  '" ';
  }
  console.log(selectName);
  this.setData({
  spec: spec,//變換選擇框
  selectName: selectName,
  selectAttrid: selectAttrid
  });
  },
  //初始化規(guī)格選擇
  init_attr: function () {
  //初始化規(guī)格選擇
  var name = "";
  var spec = this.data.spec;
  var size = spec.length;
  for (var i =
  0; i < size; 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
  });
  }
  })