一、多规格实现代码
1、index.wxss
.view1 {
margin-left: 2%;
margin-right: 2%;
}
.viewkey {
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.view2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-right: 4%;
margin-left: 4%;
}
.view2 view {
border: 1rpx solid #d3d3d3;
margin-right: 30rpx;
padding-right: 20rpx;
padding-left: 20rpx;
border-radius: 10rpx;
}
2、 index.wxml
<view class="view1">
<block wx:for="{{sizes}}" wx:key="index" wx:for-index="index1">
<view class="viewkey">{{item.key}}</view>
<view class="view2">
<block wx:for="{{item.sizeList}}" wx:for-item="items">
<view style="color: {{items.state?(items.disState?'#000':'white'):items.disState?'#000':'#000'}};background-color: {{items.state?(items.disState?'#D3D3D3':'red'):items.disState?'#D3D3D3':'white'}}; pointer-events: {{items.disState?'none':''}};" bindtap="selectValue" data-value="{{items.value}}" data-key="{{item.key}}" data-index1="{{index1}}" data-selectvale="{{item.selectValue}}" data-index="{{index}}">{{items.value}}</view>
</block>
</view>
</block>
</view>
3、index.js
// index.js
Page({
data: {
// 该商品所有规格组合列表
sizeList:[
{price:35,stock:8,priceId:1,sizeList:[
{key:"重量",value:"五斤"},
{key:"尺寸",value:"大号"},
{key:"数量",value:"十个"},
{key:"颜色",value:"白色"}]},
{price:35,stock:8,priceId:2,sizeList:[
{key:"重量",value:"五斤"},
{key:"尺寸",value:"大号"},
{key:"数量",value:"三十个"},
{key:"颜色",value:"白色"}]},
{price:35,stock:8,priceId:3,sizeList:[
{key:"重量",value:"十五斤"},
{key:"尺寸",value:"大号"},
{key:"数量",value:"三十个"},
{key:"颜色",value:"白色"}]},
{price:70,stock:8,priceId:4,sizeList:[
{key:"重量",value:"五斤"},
{key:"尺寸",value:"特大号"},
{key:"数量",value:"五十个"},
{key:"颜色",value:"白色"}]},
{price:75,stock:8,priceId:5,sizeList:[
{key:"重量",value:"十斤"},
{key:"尺寸",value:"大号"},
{key:"数量",value:"五十个"},
{key:"颜色",value:"土黄色"}]},
{price:35,stock:8,priceId:6,sizeList:[
{key:"重量",value:"十斤"},
{key:"尺寸",value:"特大号"},
{key:"数量",value:"十个"},
{key:"颜色",value:"白色"}]},
{price:35,stock:8,priceId:7,sizeList:[
{key:"重量",value:"十五斤"},
{key:"尺寸",value:"大号"},
{key:"数量",value:"五十个"},
{key:"颜色",value:"土黄色"}]},
{price:35,stock:8,priceId:8,sizeList:[
{key:"重量",value:"十斤"},
{key:"尺寸",value:"大号"},
{key:"数量",value:"五十个"},
{key:"颜色",value:"土黄色"}]}
],
// 商品所有规格列表
sizes:[],
// 筛选后规格组合列表
newsize:[],
},
// 初始化数据 -----> 规格列表(sizes)
getSize:function(){
let sizeList=this.data.sizeList
let sizes=this.data.sizes
for(let i=0;i<sizeList.length;i++){
for(let j=0;j<sizeList[i].sizeList.length;j++){
let num=this.isKey(sizes,sizeList[i].sizeList[j].key);
if(num==-1){
let item={}
item.key=sizeList[i].sizeList[j].key
item.selectValue=""
let items={}
items.value=sizeList[i].sizeList[j].value
items.state=false
items.disState=false
let sizeList1=[]
sizeList1.push(items)
item.sizeList=sizeList1
sizes.push(item)
}else{
let num1=this.isValue(sizes[num].sizeList,sizeList[i].sizeList[j].value);
if(num1==1){
let item1={}
item1.value=sizeList[i].sizeList[j].value
item1.state=false
item1.disState=false
sizes[num].sizeList.push(item1)
}
}
}
}
this.setData({
sizes:sizes,
newsize:this.data.sizeList
})
},
// 判断规格名(是否存在) -----> key
isKey:function(sizes,key){
if(sizes.length==0){
return -1;
}else{
for(let i=0;i<sizes.length;i++){
if(sizes[i].key==key){
return i
}
}
}
return -1;
},
// 判断规格名值(是否存在) -----> value
isValue:function(sizes,values){
for(let i=0;i<sizes.length;i++){
if(sizes[i].value==values){
return -1;
}
}
return 1;
},
// 点击事件
selectValue:function(e){
let index1=e.currentTarget.dataset.index1
let value=e.currentTarget.dataset.value
let key=e.currentTarget.dataset.key
let selectvale=e.currentTarget.dataset.selectvale
let index=e.currentTarget.dataset.index
let sizes=this.data.sizes
// 判断是否点击同一个按钮
if(selectvale == value && sizes[index1].key == key){
// 取消按钮
this.disSelect(sizes,value,key,index1,index)
}else{
// 点击按钮
this.selectClick(sizes,value,key,index1)
}
},
// 获取已选择数量
getNum:function(sizes){
let count=0;
sizes.forEach(element => {
if(element.selectValue != "" && element.selectValue.length > 0){
count++;
}
});
return count;
},
// 点击按钮
selectClick:function(sizes,value,key,index1,unselect){
var count=this.getNum(sizes)
// 选择同行按钮---->(选中按钮数为1时,更改选中按钮为其他同行按钮)
if(count == 1 && sizes[index1].key == key && sizes[index1].selectValue != value){
for(let i = 0;i < sizes[index1].sizeList.length; i++){
if(sizes[index1].sizeList[i].value == sizes[index1].selectValue){
sizes[index1].sizeList[i].state = false
count = 0
sizes[index1].selectValue = ""
break
}
}
}
let newsize=[]
let sizelist=[]
// 判断是否第一次选择
if(count < 1){
sizelist=this.data.sizeList
}else{
sizelist=this.data.newsize
}
// console.log(sizelist)
// 筛选符合条件的规格组合
for(let i = 0;i < sizelist.length; i++){
for(let j = 0;j < sizelist[i].sizeList.length; j++){
if(sizelist[i].sizeList[j].key == key && sizelist[i].sizeList[j].value == value){
newsize.push(sizelist[i])
}
}
}
// 全部按钮置为不可选 ----->disState表示是否可选(false表示可选)
for(let i = 0;i < sizes.length; i++){
for(let j = 0;j < sizes[i].sizeList.length; j++){
sizes[i].sizeList[j].disState=true
}
}
// 将符合条件的按钮置为可选
for(let i = 0;i < sizes.length; i++){
for(let j = 0;j < newsize.length; j++){
for(let k = 0;k < newsize[j].sizeList.length; k++){
if(newsize[j].sizeList[k].key == sizes[i].key){
for(let h = 0;h < sizes[i].sizeList.length; h++){
if(newsize[j].sizeList[k].value == sizes[i].sizeList[h].value){
sizes[i].sizeList[h].disState = false
}
// 保证一个按钮时同一行都可选
if((count < 2 && unselect == true && index1 == i) || (count < 1 && index1 == i)){
sizes[i].sizeList[h].disState = false
}
}
}
}
}
}
// 改变选中按钮颜色,state表示选中状态(true 表示选中)
for(let i = 0;i < sizes.length; i++){
if(sizes[i].key == key){
for(let j = 0;j < sizes[i].sizeList.length; j++){
if(sizes[i].sizeList[j].value == value){
sizes[i].sizeList[j].state = true
sizes[i].selectValue = value
}
}
}
}
this.setData({
sizes:sizes,
newsize:newsize
})
},
// 取消按钮
disSelect:function(sizes,value,key,index1,index){
// 取消按钮
sizes[index1].selectValue = ""
// 初始化数据----->当取消最后一个按钮时,所有的selectValue都是空字符串
// 不会进入selectClick方法,需要初始化所有按钮的状态(state、disState)
for(let i = 0;i < sizes.length; i++){
for(let j = 0;j < sizes[i].sizeList.length; j++){
sizes[i].sizeList[j].state = false
sizes[i].sizeList[j].disState = false
}
}
// 更新修改的数据
// 更改newsize数据,改为未筛选前
this.setData({
sizes:sizes,
newsize:this.data.sizeList
})
// 重新筛选
for(let i = 0;i < sizes.length; i++){
if(sizes[i].selectValue != "" && sizes[i].selectValue.length > 0){
this.selectClick(sizes,sizes[i].selectValue,sizes[i].key,i,true)
}
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
onShow() {
this.getSize()
},
})
二、效果展示
三、总结
1、一个商品的规格组合以及规格都可以通过后端处理生成,也可以只处理规格组合,规格列表由前端处理生成。
2、本博客未考虑库存显示的场景,规格组合默认去除库存为零的情况。在选择完按钮后,可以通过newsize数组来获取价格和库存。文章来源:https://www.toymoban.com/news/detail-598294.html
3、只实现了第一次选择时同行相互切换,多行还未实现(例如:选择15斤后,第二个按钮选择三十个,之后可切换三十个为十个)文章来源地址https://www.toymoban.com/news/detail-598294.html
到了这里,关于微信小程序之多规格选择的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!