微信小程序多规格选择
解析都在代码里面，先看看效果
1.index.html
<view class="goodsdetialtwo">
<view class='guige' bindtap='guigeselect'>
<view style='color:#676767;'>规格：</view>
<view style='width:80%;'>
请选择
<text style='margin-right:20rpx;' wx:for="{{goods_spec}}" wx:key>{{item[0].spec_name}}</text>
</view>
<image src='../../images/jian.png'></image>
</view>
<view animation="{{animationData}}" class='animation' catchtouchmove='noMove'>
<view class='tophead'>
<view class='topimg'>
<image src='{{goodsList.original_img}}'></image>
</view>
<view class='topright'>
<view>{{goodsList.goods_name}}</view>
<view class='imgcha'>
<view style='color:#ef5426;'>{{guilist.price}}</view>
<image src='../../images/cha.png' bindtap='guigeno'></image>
</view>
<view style='margin:10rpx 0;color:#999999;'>库存:{{guilist.store_count}}</view>
<view>规格:
<text style="margin-right:20rpx;" wx:for="{{selectGuigeName}}" wx:key>{{item}}</text>
</view>
</view>
</view>
<view class='guigeclass' wx:for="{{goods_spec}}" wx:for-index="fuindex" wx:key>
<view class='ggtitle'>{{item[0].spec_name}}</view>
<view class='xuanze'>
<view class="selectkuai {{textStates[items.isClick]}}" catchtap='selectGuige' wx:for-index="chindex" wx:for-item="items" data-fuindex="{{fuindex}}" data-chindex="{{chindex}}" data-id="{{items.item_id}}" data-item="{{items.item}}" wx:for="{{item}}" wx:key>{{items.item}}</view>
</view>
<view style='height:2rpx; width:100%;background-color:#eeeeee;'></view>
</view>
<view class='guigecount'>
<view class='countname'>数量</view>
<view class='countright'>
<view class="num">
<i-input-number value="{{ num }}" min="1" max="999999" bindchange="numChange" />
</view>
</view>
</view>
<view class='yesyes' catchtap='queDing'>
确定
</view>
</view>
</view>2.index.js
Page({
data: {
//数据格式
result: {
"goods": {
"unit": "件",
"goods_id": 436886,
"store_count": 158,
"market_price": "10.00",
"shop_price": "0.01",
"cost_price": "10.00",
"goods_name": "小龙虾221",
"original_img": "http://boweisou.oss-cn-shenzhen.aliyuncs.com/images/170/2018/06/o49599VttZZU84VkczGt1j9t5Tcu4t.jpg",
"goods_attr_list": [],
"goods_spec_list": [
[{
"spec_name": "颜色",
"item_id": 535385,
"item": "白色",
"src": "",
"isClick": 0
},
{
"spec_name": "颜色",
"item_id": 535386,
"item": "黑色",
"src": "",
"isClick": 0
}
],
[{
"spec_name": "尺寸",
"item_id": 535692,
"item": "170",
"src": "",
"isClick": 0
},
{
"spec_name": "尺寸",
"item_id": 535693,
"item": "180",
"src": "",
"isClick": 0
}
],
[{
"spec_name": "哈哈",
"item_id": 552569,
"item": "去",
"src": "",
"isClick": 0
},
{
"spec_name": "哈哈",
"item_id": 552570,
"item": "不",
"src": "",
"isClick": 0
}
]
]
},
"spec_goods_price": [{
"id": 1018269,
"key": "535385_535692_552569",
"price": "10.00",
"productprice": "0.00",
"store_count": 20
},
{
"id": 1018270,
"key": "535385_535692_552570",
"price": "20.00",
"productprice": "0.00",
"store_count": 20
},
{
"id": 1018271,
"key": "535385_535693_552569",
"price": "30.00",
"productprice": "0.00",
"store_count": 20
},
{
"id": 1018272,
"key": "535385_535693_552570",
"price": "40.00",
"productprice": "0.00",
"store_count": 20
},
{
"id": 1018273,
"key": "535386_535692_552569",
"price": "50.00",
"productprice": "0.00",
"store_count": 20
},
{
"id": 1018274,
"key": "535386_535692_552570",
"price": "60.00",
"productprice": "0.00",
"store_count": 20
},
{
"id": 1018275,
"key": "535386_535693_552569",
"price": "70.00",
"productprice": "0.00",
"store_count": 20
},
{
"id": 1018276,
"key": "535386_535693_552570",
"price": "80.00",
"productprice": "0.00",
"store_count": 18
}
],
"goods_attr_list": [],
"comment": [],
},
//微信小程序动画
animationData: {},
animationisno: false,
guilist: {},
arrId: [],
arrName: [],
textStates: ["view-btns-text-normal", "view-btns-text-select"],
num:1,
},
onLoad: function(options) {
let that = this;
let guilists = that.data.guilist;
guilists.price = that.data.result.goods.shop_price;
guilists.store_count = that.data.result.goods.store_count;
that.setData({
goodsList: that.data.result.goods,
goods_spec: that.data.result.goods.goods_spec_list,
spec_goods_price: that.data.result.spec_goods_price,
guilist: guilists
})
},
selectGuige(e) {
let that = this,
// 获取第一个循环的index
fuindex = e.currentTarget.dataset.fuindex,
// 获取第二个循环的index
chindex = e.currentTarget.dataset.chindex,
// 获取当前点击的id
selectId = e.currentTarget.dataset.id,
// 获取当前点击的规格名称
selectName = e.currentTarget.dataset.item,
// 初始化arrId
arrId = that.data.arrId,
// 初始化arrName
arrName = that.data.arrName,
guilists = {},
goods_spec = that.data.goods_spec;
// 通过循环来判断点击了哪一个规格，根据数据结构来；
// goods_spec[fuindex]根据fuindex来判断点击了哪一种类型的规格
for (let i = 0; i < goods_spec[fuindex].length; i++) {
// 当i等于当前点击的规格时，设置isClick=1
if (i == chindex) {
goods_spec[fuindex][i].isClick = 1;
}
// 否则设置其他的isClick=0
else {
goods_spec[fuindex][i].isClick = 0;
}
};
// 把点击的规格名称和规格id存起来
arrId[fuindex] = selectId;
arrName[fuindex] = selectName;
// 拼接规格id，（后台返回的数据是这个）
let selectGuigeId = arrId.join('_');
for (let i = 0; i < that.data.spec_goods_price.length; i++) {
// 找对应的规格组合
if (that.data.spec_goods_price[i].key == selectGuigeId) {
guilists = that.data.spec_goods_price[i];
}
}
that.setData({
goods_spec: goods_spec,
arrId,
guilist: guilists,
selectGuigeName: arrName
})
},
numChange(e) {
this.setData({
num: e.detail.value
})
},
queDing() {
let that = this;
let selectguigeid = that.data.arrId.join('_');
for (let i = 0; i < that.data.spec_goods_price.length; i++) {
// 判断是否选择规格
if (that.data.spec_goods_price[i].key == selectguigeid) {
wx.showModal({
showCancel: false,
content: '选择成功',
success: function(res) {}
});
// 判断库存是否充足
if (selectguigeid.store_count <= 0) {
wx.showModal({
showCancel: false,
content: '库存不足',
success: function(res) {}
});
}
// 两种情况满足跳转
else {
wx.showModal({
showCancel: false,
content: '跳转页面',
success: function(res) {}
});
}
return
} else {
wx.showModal({
showCancel: false,
content: '请选择规格',
success: function(res) {
if (res.confirm) {}
}
})
}
}
},
// 选择规格页面弹出 微信小程序动画
guigeselect: function() {
let that = this;
let animal1 = wx.createAnimation({
timingFunction: 'ease-in'
}).translate(0, -600).step({
duration: 300
})
that.setData({
animationData: animal1.export(),
})
},
// 选择规格页面隐藏 微信小程序动画
guigeno: function() {
let that = this
let animal1 = wx.createAnimation({
timingFunction: 'ease-in'
}).translate(0, 600).step({
duration: 300
})
that.setData({
animationData: animal1.export()
})
}
})3.index.wxss
page {
background: #fff;
}
.guige {
height: 80rpx;
line-height: 80rpx;
font-size: 28rpx;
width: 94%;
margin: 0 3%;
display: flex;
align-items: center;
}
.guige image {
width: 22rpx;
height: 30rpx;
}
.animation {
width: 100%;
height: 1000rpx;
background-color: #fff;
position: fixed;
z-index: 333;
/* top:0; */
bottom: -600px;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
.tophead {
display: flex;
margin: 30rpx 3%;
width: 94%;
align-items: center;
text-align: center;
}
.topimg {
width: 200rpx;
height: 200rpx;
}
.topimg image {
width: 100%;
height: 100%;
border-radius: 20rpx;
background-color: red;
}
.topright {
margin-left: 30rpx;
font-size: 28rpx;
text-align: left;
width: 66%;
}
.xuanze {
display: flex;
flex-wrap: wrap;
}
.imgcha {
display: flex;
justify-content: space-between;
align-items: center;
}
.imgcha image {
width: 38rpx;
height: 38rpx;
}
.guigeclass {
margin: 0 3%;
width: 94%;
font-size: 28rpx;
}
.ggtitle {
font-size: 30rpx;
margin-top: 20rpx;
}
.xuanze {
width: 100%;
}
.selectkuai {
border: solid 1px black;
margin: 20rpx;
padding: 5rpx 20rpx;
border-radius: 20rpx;
}
.guigecount {
margin: 30rpx 3%;
width: 94%;
font-size: 28rpx;
}
.countright {
float: right;
display: flex;
text-align: center;
align-items: center;
}
.countname {
margin-bottom: 20rpx;
font-size: 30rpx;
}
.yesyes {
position: absolute;
bottom: 0;
width: 70%;
margin: 0 15% 20rpx 15%;
text-align: center;
z-index: 66;
height: 80rpx;
background-color: #fe6732;
border-radius: 40rpx;
color: white;
font-size: 32rpx;
line-height: 80rpx;
}
.view-btns-text-normal {
color: #4d4d4d;
}
.view-btns-text-select {
color: #fff;
background: #fb4d00;
}
.num {
display: inline-block;
}
这里引用了iview里面 InputNumber 数字输入框，如果需要跑起来的话，要么把这个组件去掉，要么引入，
商品多规格的实现主要看后台返回的数据格式，有些后台返回的可能不是上面的数据，这时就要根据数据格式来实现了