最近开发的项目下单系统，涉及到tab切换，单选，全选，数量加减自动计算选中的价格与数量，网上找了都是同一个页面的下单，所以决定自己撸一个！
特点：
1、通过切换tab，上一个tab选中状态保持，方便在tab之间来回切换
2、通过云函数一次把所有商品请求回来，然后再通过虚拟数组 imitate，便于在tab切换不用再去云函数请求
3、便于再不同的tab之间切换，统一选中商品数量与总价
由于采用了云开发小程序，通过请求云函数把公司产品一次性请求回来，通过前端对产品列表按tab进行分类
data: {
envId:app.globalData.envId,
productList:[],//所有产品
//模拟新数组，含分组
imitate:[
{
"class_id":0,"selectAllStatus":false,"list":[]
},{
"class_id":1,"selectAllStatus":false,"list":[]
},{
"class_id":2,"selectAllStatus":false,"list":[]
},{
"class_id":3,"selectAllStatus":false,"list":[]
},{
"class_id":4,"selectAllStatus":false,"list":[]
}
],
tabList:["标签","标签","标签","标签","标签"],//tab选项卡
currentIndex:0,//当前选项卡
totalPrice:0,//总价，初始为0
goodsNum:0,//商品总数量
selectGoods:[],//选中的商品数据
},
通过向云函数向后端请求回来的数组，遍历进行分组
//云函数请求不便展示，此处省略
//重组数组
let arr=res.result.data //云函数返回的数组
arr.forEach(function(item, index){
that.data.imitate[item.class_id].list.push(item) //class_id 产品分类ID，云函数返回
that.setData({
imitate:that.data.imitate
})
})
主要wxml
<!-- Tab -->
<view class="tab-box">
<view wx:for="{{tabList}}" wx:key="item" data-index="{{index}}" class="tab {{index==currentIndex?'selected':''}}" bindtap="tabclick">{{item}}</view>
</view>
<!-- 商品列表 -->
<view class="goods-list">
<block wx:for="{{imitate[currentIndex].list}}" wx:key="item">
<view class="goods">
<icon wx:if="{{item.selected}}" type="success" size="25" class="select-icon" color="#FF5F10" bindtap="selectList" data-index="{{index}}" />
<icon wx:else type="circle" size="25" class="select-icon" bindtap="selectList" data-index="{{index}}"/>
<view class="goods_img">
<image mode="widthFix" src="{{item.cover}}" class="pro-img" mode="widthFix"></image>
</view>
<view class="goods-info">
<view class="goods-name">{{item.title}}</view>
<view class="goods-item">
<view class="goods-price"><text class="goods-sign">￥</text>{{filter.toFix(item.channel)}}</view>
<!-- 增加减少数量按钮 -->
<view wx:if="{{item.selected}}" class="num-box">
<view class="goods-btn btn-minus" data-index="{{index}}" data-num="{{item.num}}" bindtap="subtraction">—</view>
<input class='num' type='number' data-index="{{index}}" bindblur="numIputBlur" value='{{item.num}}'></input>
<view class="goods-btn btn-add" data-index="{{index}}" data-num="{{item.num}}" bindtap="addtion">+</view>
</view>
<!-- 默认是加号按钮 -->
<view wx:else class="iconfont icon-jia" data-index="{{index}}" bindtap="selectList"></view>
</view>
</view>
</view>
</block>
<component-no-data wx:if="{{imitate[currentIndex].list.length<1}}"></component-no-data>
</view>
<view class="bottom">
<view class="allSelect">
<!-- wx:if 是否全选显示不同图标 -->
<icon wx:if="{{imitate[currentIndex].selectAllStatus}}" type="success" size="25" color="#FF5F10" bindtap="selectAll"/>
<icon wx:else type="circle" size="25" bindtap="selectAll"/>
<view class="allSelect-text">全选</view>
</view>
<view class="count">
<text class="count-label">合计:</text><text class="count-sign">￥</text>{{totalPrice}}
</view>
<view class="submit-btn" bindtap="submitOrder">提交订单</view>
</view>
主要js代码
//tab选项卡切换
tabclick(e){
let productList=this.data.productList //所有产品
let currentIndex=e.currentTarget.dataset.index;
this.setData({
currentIndex:currentIndex,//获取当前分组与下标
})
},
//计算价格与数量
getTotalPrice() {
let total = 0;//总金额
let goodsNum=0;//总数量
//先获取外层分组长度
let outer=this.data.imitate.length
for(let t=0;t<outer;t++){
//根据外层得到内层list长度，循环内层
let list=this.data.imitate[t].list
for(let i=0;i<list.length;i++){
let selected=list[i].selected
let num=list[i].num
let channel=list[i].channel
//判断选中的i
if(selected){
total += num * channel; // 所有价格加起来
goodsNum += num
}
}
}
console.log("imitate:",this.data.imitate)
this.setData({
totalPrice: total.toFixed(2),
goodsNum:goodsNum,
});
console.log("totalPrice:", total.toFixed(2))
console.log("goodsNum:",goodsNum)
},
//单选
selectList(e) {
const index = e.currentTarget.dataset.index; // 获取data- 传进来的inde
let currentIndex=this.data.currentIndex
//判断是不是周末
var day=util.isWorkday();
if(day==false){
this.setData({
showMask:!this.data.showMask
})
return;
}
//开始操作数组
let list = this.data.imitate[currentIndex].list; // 获取购物车列表
console.log("imitate[currentIndex]:",this.data.imitate[currentIndex])
const selected = this.data.imitate[currentIndex].list[index].selected; // 获取当前商品的选中状态
let f = 'imitate[' + currentIndex + '].list['+ index +'].selected'//默认商品选中状态
let num = 'imitate[' + currentIndex + '].list['+ index +'].num'//默认商品数量
if(selected){
//更新为未选择
this.setData({
[f]:false,
[num]:''
})
}else{
//更新为选中
this.setData({
[f]:true,
[num]:1
})
}
//当勾选全选后，取消一个单选，全选则消失
let select = 'imitate[' + currentIndex + '].selectAllStatus'
console.log(" list.length:", list.length)
//不是比较全部单选勾选的长度，而是判断所有的单选是否都勾选为true
for (let i = 0; i < list.length; i++) {
console.log("遍历list列表i：",list[i].selected,"i:",i)
if (list[i].selected==false || list[i].selected==undefined) {
this.setData({
[select]:false
})
break //跳出循环
}else{
this.setData({
[select]:true
})
}
}
// 重新获取总价
this.getTotalPrice();
},
//全选
selectAll(e) {
//判断是不是周末
var day=util.isWorkday();
if(day==false){
this.setData({
showMask:!this.data.showMask
})
return;
}
let currentIndex=this.data.currentIndex
let selectAllStatus = this.data.imitate[currentIndex].selectAllStatus; // 是否全选状态
selectAllStatus = !selectAllStatus;
let list = this.data.imitate[currentIndex].list; // 获取tab列表
for (let i = 0; i < list.length; i++) {
let f = 'imitate[' + currentIndex + '].list['+ i +'].selected'
let num = 'imitate[' + currentIndex + '].list['+ i +'].num'
let select = 'imitate[' + currentIndex + '].selectAllStatus'
this.setData({
[f]:selectAllStatus,// 改变所有商品状态
[num]:1,//默认数量
[select]:selectAllStatus,//更新全部选中状态
})
}
// 重新获取总价
this.getTotalPrice();
},
//手动加号添加
addtion: function (e) {
var that = this
var index = e.currentTarget.dataset.index
var num = e.currentTarget.dataset.num
let currentIndex=this.data.currentIndex
let newnum = 'imitate[' + currentIndex + '].list['+ index +'].num'
//默认1000件
if (num < 1000) {
num++
}
that.setData({
goodsNum:+num,
[newnum]: num
})
this.getTotalPrice();
},
//手动减号减少
subtraction: function (e) {
var that = this
var index = e.currentTarget.dataset.index
let currentIndex=this.data.currentIndex
console.log("index：",index)
var num = e.currentTarget.dataset.num
let newnum = 'imitate[' + currentIndex + '].list['+ index +'].num'
console.log("newnum:",newnum)
//当数量为1件时，提示不能再减少
if (num < 2) {
wx.showToast({
title: '亲，该商品不能减少了哦~',
icon: 'none'
})
return false;
} else {
num-
that.setData({
[newnum]: num-1
})
}
this.getTotalPrice();
},
//输入数量
numIputBlur:function(e){
var that = this
var num = parseInt(e.detail.value)
var index = e.currentTarget.dataset.index
let currentIndex=this.data.currentIndex
let newnum = 'imitate[' + currentIndex + '].list['+ index +'].num'
if (!num) { //盘空
wx.showToast({
title: '亲，该商品数量不能为空',
icon: 'none'
})
}else if (num < 1) {
wx.showToast({
title: '亲，该商品不能减少了哦~',
icon: 'none'
})
}else if(num>1000){
wx.showToast({
title: '亲，该商品最多购买1000件哦~',
icon: 'none'
})
}else{
that.setData({
[newnum]: num
})
}
this.getTotalPrice();
},
有用得上得兄弟收藏，同时欢迎大神指正！
