<scroll-view class="page-container" scroll-y="true" enable-back-to-top="{{true}}">
//多选组
<checkbox-group bindchange="checkboxChange">
<view class="box" wx:for="{{records}}" wx:key="id">
//使用label包裹多选框和自定义样式
<label class="box-checkbox {{item.checked? 'is-checked':''}}">
//隐藏原生多选框
<checkbox value="{{item.id}}" hidden="{{true}}" checked="{{item.checked}}"/>
//自定义多选框
<view class="box-checkbox_icon"></view>
</label>
<view class="box-item">
//...记录项内容
</view>
</view>
</checkbox-group>
</scroll-view>
<!-- 底部固定卡片 -->
<view class="fixedCard">
<view class="fixedCard-text">
<view class="fixedCard-text_allcheck">
<checkbox-group bindchange="handleAllCheck" >
<label class="box-checkbox {{allcheck? 'is-checked':''}}">
<checkbox value="{{allcheck}}" hidden="{{true}}" checked="{{allcheck}}" />
<view class="box-checkbox_icon"></view>
</label>
</checkbox-group>
<view>全选</view>
</view>
<view>
共<text class="fixedCard-text_highlight">{{totalOrder}}</text>个订单,<text class="fixedCard-text_highlight">{{totalMoney}}</text>元
</view>
</view>
<view class="fixedCard-button" bind:tap="handleNextStep">下一步</view>
</view>
//选择订单项
checkboxChange(e){
const records = this.data.records //获得当前页面全部记录集合
let _allcheck=false //假设未全选
const values = e.detail.value //当前已选择项的id集合,因为checkbox的value="{{item.id}}"
const lenI = records.length
const lenJ = values.length
if(lenI==lenJ){ //全选,选中项集合长度和当前页面记录长度一致
console.log("选择全部")
records.forEach(x=>{
x.checked=true
})
_allcheck=true //标记全选
}else{ //非全选
for (let i = 0; i < lenI; ++i) {
records[i].checked = false
for (let j = 0; j < lenJ; ++j) {
if (records[i].id == values[j]) {
records[i].checked = true
break
}
}
}
}
//计算选中项数值总计
this.countTotal(records.filter(x=> x.checked==true))
this.setData({ //更新数据重新渲染页面
allcheck:_allcheck,
records:records
})
},
// 全选按钮
handleAllCheck(e){
const records = this.data.records
if(records.length==0){
wx.showToast({
title: '无订单',
icon: 'none',
duration: 1500
})
return
}
if(!this.data.allcheck){ //全选
records.forEach(x=>{
x.checked=true
})
this.countTotal(records)
}else{ //取消全选,即全不选
records.forEach(x=>{
x.checked=false
})
this.countTotal([])
}
this.setData({
allcheck:!this.data.allcheck,
records:records
})
},
//计算
countTotal(val){
let money=0,order=0
if(val.length!=0){
orderorder=val.length
val.forEach(x=>{
money+=x.totalDeductionFee
})
//小数点第三位之后四舍五入
money=Math.round(money * 100) / 100
}
this.setData({
totalOrder:order,
totalMoney:money
})
},
//下一步
handleNextStep(){
const orderIds=[]
this.data.records.map(function(item){
if(item.checked==true){orderIds.push(item.id)}
})
// console.log("已选订单id集合",orderIds)
if(orderIds.length > 0){
wx.navigateTo({
url:`/pages/submitApply?orderIds=${orderIds}`
})
}else{
wx.showToast({
title: '请选择订单',
icon: 'none',
duration: 1500
})
}
},
box-checkbox{
display: block;
width: 38rpx;
height: 38rpx;
margin-right: 25rpx;
border-radius: 50%;
border: 2rpx solid #dadbda;
background-color: #fff;
position: relative;
&_icon::after{//小勾
box-sizing: content-box;
content: "";
border: 4rpx solid rgb(0, 0, 0);
border-radius: 10rpx;
border-left: 0;
border-top: 0;
height: 20rpx;
width: 10rpx;
left: calc(50% - 7rpx);
top: calc(50% - 14rpx);
position: absolute;
transform: rotate(45deg) scaleY(0);
transition: transform .05s ease-in .05s;
transform-origin: center;
}
&.is-checked { //选中样式
background-color: #ffd900;
.box-checkbox_icon::after {
transform: rotate(45deg) scaleY(1);
}
}
}