微信小程序实现-单选-以及全选功能
目录
微信小程序实现-单选-以及全选功能。
<view class="list">
<view class="operation-buttons">
<button class="btn add-btn" bindtap="addNew">新增</button>
<button class="btn delete-btn" bindtap="deleteSelected">删除</button>
<button class="btn publish-btn" bindtap="publish">发布</button>
<button class="btn task-btn" bindtap="assignTask">异常任务</button>
</view>
<!-- 说明文字 -->
<view class="note">
<text class="star">*</text>以下"时间"为开始时间
</view>
<!-- 列表头部（带全选） -->
<view class="list-header">
<view class="list-item header">
<checkbox-group bindchange="onCheckAllChange">
<checkbox
checked="{{allChecked}}"
value="all"
class="checkbox"
/>
</checkbox-group>
</view>
<view class="header-item">车牌号</view>
<view class="header-item">班次</view>
<view class="header-item">套班</view>
<view class="header-item">时间</view>
</view>
<view class="vehicle-list">
<view class="list-container">
<checkbox-group bindchange="onItemCheck">
<view class="vehicle-item" wx:for="{{items}}" wx:key="id">
<checkbox
checked="{{item.checked}}"
value="{{item.id}}"
class="item-checkbox"
/>
<view class="item-content">{{item.plateNumber}}</view>
<view class="item-content">{{item.shiftTypeStr}}</view>
<view class="item-content">{{item.mainShiftFlagStr}}</view>
<view class="item-content">{{item.beginTime}}</view>
</view>
</checkbox-group>
</view>
</view>
</view>js:
const requestApi = require('../../../../utils/request.js');
const app = getApp();
Page({
data: {
items: [],//渲染的数据
// 全选状态
allChecked: false,
// 选中的项目
selectedItems: [],
isFilterShow: false,
routeName:'',
startPoint:'',
endPoint:'',
pageNum:1,
routeid:'',
date:'',
endDate:'',
operationDateArray:["星期一","星期二","星期三","星期四","星期五"],
},
onLoad(options) {
this.setData({
routeName: options.routeName?options.routeName:'',
startPoint: options.startPoint?options.startPoint:'',
endPoint: options.endPoint?options.endPoint:'',
routeid: options.id
});
const newModel = this.data.items.map(item => {
return {
...item,
checked: false
};
});
this.setData({
items: newModel
});
this.getList();
},
getList: function () {
},
// 全选框状态改变
onCheckAllChange(e) {
const checked = e.detail.value.includes('all');
console.log('全选状态改变:', checked);
// 更新所有选项的选中状态
const updatedItems = this.data.items.map(item => ({
...item,
checked: checked
}));
// 更新数据
this.setData({
allChecked: checked,
items: updatedItems,
selectedItems: checked ? [...updatedItems] : []
});
},
// 列表项状态改变
onItemCheck(e) {
const selectedIds = e.detail.value;
console.log('选中的ID:', selectedIds);
// 更新每个选项的选中状态
const updatedItems = this.data.items.map(item => ({
...item,
checked: selectedIds.includes(item.id)
}));
// 检查是否所有选项都被选中
const allChecked = updatedItems.every(item => item.checked);
// 获取选中的项目
const selectedItems = updatedItems.filter(item => item.checked);
// 更新数据
this.setData({
items: updatedItems,
allChecked: allChecked,
selectedItems: selectedItems
});
},
deleteSelected() {
if (this.data.selectedItems.length === 0) {
wx.showToast({
title: '没有选中任何删除项',
icon: 'none'
});
return;
}
const plateNumber = this.data.selectedItems.map(item => item.plateNumber).join(', ');
const shanchuid = this.data.selectedItems.map(item => item.id).join(', ');
wx.showModal({
title: '提示',
content: `确定要删除选中的 ${plateNumber} 辆车吗？`,
success: function (res) {
if (res.confirm) {
} else {
console.log('用户点击取消')
}
}
})
},
//确定按钮
confirmDispatch(){
if (this.data.selectedItems.length === 0) {
wx.showToast({
title: '没有选中任何项',
icon: 'none'
});
return;
}
const shanchuid = this.data.selectedItems.map(item => item.id).join(', ');
console.log(shanchuid,'8552221');
var that = this;
wx.showLoading({
title: '加载中...',
});
requestApi.post("", {
ids:[shanchuid],
operationDateArray:this.data.operationDateArray,
dateTimeValue:[this.data.endDate,this.data.date],
}).then(res => {
wx.showToast({
title: '发布成功',
icon: 'success',
duration: 2000
})
this.getList();
}).catch(err => {
wx.hideLoading();
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh();
wx.showToast({
title: '数据获取异常',
icon: 'none',
duration: 3000,
});
});
},
publish() {
const isShow = !this.data.isFilterShow;
this.setData({ isFilterShow: isShow });
},
hideModal(){
this.setData({
isFilterShow: false
});
},
bindDateChange(e) {
this.setData({
date: e.detail.value
});
},
bindendDateChange(e){
this.setData({
endDate: e.detail.value
});
},
addNew(){
wx.navigateTo({
url: '../addShift/addShift',
})
},
assignTask(){
wx.navigateTo({
url: '../exceptionalTask/exceptionalTask',
})
},
});
样式：
.container {
padding: 16rpx;
}
/* 线路信息样式 */
.route-info {
width: 95%;
background-color: white;
border-radius: 14rpx;
padding: 20rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.route-title {
font-size: 34rpx;
font-weight: bold;
color: #333;
margin-bottom: 16rpx;
}
.route-details {
display: flex;
flex-direction: column;
gap: 12rpx;
}
.route-item {
display: flex;
font-size: 30rpx;
}
.label {
font-size: 35rpx;
color: #3f3f3f;
min-width: 120rpx;
}
.value {
color: #333;
flex: 1;
}
/* 操作按钮样式 */
.operation-buttons {
display: flex;
gap: 16rpx;
flex-wrap: wrap;
padding: 20rpx 20rpx 0rpx 20rpx;
}
.btn {
flex: 1;
min-width: 160rpx;
height: 75rpx;
line-height:75rpx;
text-align: center;
border-radius: 50rpx;
border: none;
padding: 0;
font-weight: 400;
font-size: 33rpx;
color: #FFFFFF;
}
.add-btn {
background-color: #1A73E8;
}
.delete-btn {
background-color: #F44336;
}
.publish-btn {
background-color: #4CAF50;
}
.task-btn {
background-color: #FF9800;
}
/* 说明文字样式 */
.note {
width: 100%;
color: #D90B0B;
font-size: 30rpx;
margin-bottom: 20rpx;
padding-left: 45rpx;
}
.star {
color: #F44336;
}
/* 列表样式 */
.list {
width: 100%;
background-color: white;
border-radius: 14rpx;
}
.list-header {
display: flex;
align-items: center;
padding: 0 20rpx;
height: 80rpx;
font-size: 28rpx;
font-weight: bold;
color: #333;
}
.select-all {
margin-right: 16rpx;
}
.header-item {
flex: 1;
text-align: center;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 33rpx;
color: #000000;
line-height: 50rpx;
}
.vehicle-list {
width: 100%;
background-color: white;
border-radius: 0 0 8rpx 8rpx;
margin-bottom: 20rpx;
}
.vehicle-item {
display: flex;
align-items: center;
padding: 0 20rpx;
height: 90rpx;
border-bottom: 1px solid #eee;
font-size: 33rpx;
color: #333;
}
.vehicle-item:last-child {
border-bottom: none;
}
.item-checkbox {
margin-right: 16rpx;
}
.item-content {
color: #000000;
flex: 1;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 弹出层和筛选区域样式 */
.modal-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.filter-area {
position: fixed;
background-color: #fff;
width: 90%;
height: 40%;
z-index: 999;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20rpx;
text-align: center;
padding-top: 20rpx;
}
.modal-form-item {
display: flex;
align-items: center;
margin: 20rpx;
padding: 10rpx;
background-color: #f5f7f9;
}
.modal-label {
width: 217rpx;
font-size: 35rpx;
color: #000;
}
.filter-picker {
flex: 1;
padding: 10rpx;
border-radius: 5rpx;
font-size: 35rpx;
/* border: 1rpx solid #eee; */
}
.modal-btn-group {
display: flex;
justify-content: flex-end;
margin-top: 40rpx;
}
.modal-btn {
width: 280rpx !important;
height: 80rpx;
line-height: 50rpx;
text-align: center;
margin-left: 20rpx;
}
.cancel-btn {
background-color: #fff;
border: 1rpx solid #ccc;
}
.confirm-btn {
background-color: #007aff;
color: #fff;
}
.module-icon {
width: 70rpx;
height: 70rpx;
margin-right:12rpx;
/* margin-top:15rpx; */
}