微信截图_20190110111629.png
wxml
<!--pages/test/test.wxml-->
<view>
<view class="table-view" style="margin-bottom: 400rpx;">
<view class="teacher-kes" wx:for="{{data}}" wx:key="{{index}}" wx:for-index="groupIndex">
<view class="teacher-ke">
<checkbox-group bindchange="checkall" data-index="{{groupIndex}}">
<checkbox checked='{{item.checkeedAll}}'></checkbox>
</checkbox-group>
<text class="teacher-ke-name">{{item.name}}</text>
</view>
<checkbox-group class="hot-div hot-checked" data-groupIndex="{{groupIndex}}" wx:for="{{item.data}}" data-kc="{{item}}" wx:key="{{index}}" data-index="{{item.index}}" bindchange="Checks1" >
<checkbox checked="{{item.checked}}"></checkbox>
<image src="{{item.url}}" class="Hot-div-img"></image>
<view class="Hot-div-shop ">
<view class="hot-price-title">{{item.classtitle}}</view>
<view class="shou-word " style="margin-top: 12rpx;">课程规格：几节课</view>
<view class="order-red" style="margin-top: 8rpx;">
¥
<text>{{item.price}}</text>
<image src='http://bd.eacase.com/budongimg/shanchu.png' data-groupIndex="{{groupIndex}}" data-index="{{index}}" bindtap='shanchuTap'></image>
</view>
<view>
</view>
</view>
</checkbox-group>
</view>
</view>
<view class="shop-check">
<checkbox-group bindchange="AllTap" data-index="{{index}}">
<checkbox checked='{{checkedAll}}'></checkbox>
</checkbox-group>
<text class="shop-check-text">全选</text>
<view class="shop-check-right">
<view class="shop-check-he">
合计：
<text>¥ {{ priceAll}}</text>
</view>
<view class="shop-check-jie">结算({{count}})</view>
</view>
</view>
</view>
wxss
/* pages/test/test.wxss */
.teacher-kes {
width: 90%;
margin: 0rpx auto;
margin-top: 36rpx;
background: #fff;
border-radius: 20rpx;
box-shadow: 0rpx 0rpx 30rpx rgba(0, 0, 0, 0.1);
}
.teacher-ke {
width: 100%;
height: 80rpx;
padding: 12rpx 24rpx;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 2rpx solid #f1f1f1;
}
.teacher-ke-name {
height: 52rpx;
line-height: 52rpx;
color: #333;
float: left;
font-size: 32rpx;
}
.hot-checked {
width: 100%;
padding: 24rpx;
display: flex;
justify-content: flex-start;
align-items: center;
}
.Hot-div-img {
width: 35%;
height: 160rpx;
margin-right: 20rpx;
}
.Hot-div-shop {
width: 55%;
height: 160rpx;
padding: 12rpx 0rpx;
}
.hot-price-title {
font-size: 30rpx;
line-height: 25rpx;
color: #333;
}
.shou-word {
font-size: 28rpx;
color: #ababab;
margin-top: 10rpx;
}
.order-red {
font-size: 28rpx;
color: #ff6300;
display: flex;
}
.Hot-div-shop .order-red image {
width: 40rpx;
height: 40rpx;
margin-left: 62%;
}
.shop-check {
width: 100%;
background: #fff;
padding: 0rpx 24rpx;
display: flex;
justify-content: flex-start;
align-items: center;
position: fixed;
bottom: 0rpx;
left: 0rpx;
}
.shop-check-text {
font-size: 30rpx;
color: #333;
}
.shop-check-right {
width: 68%;
display: flex;
justify-content: flex-end;
align-items: center;
margin-left: 15%;
}
.shop-check-he {
font-size: 28rpx;
color: #333;
}
.shop-check-he text {
color: #ff4500;
font-size: 28rpx;
}
.shop-check-jie {
width: 180rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
margin: 10rpx 0rpx;
border-radius: 40rpx;
font-size: 32rpx;
color: #fff !important;
background: #027ee7;
margin-left: 20rpx;
}
js
// pages/test/test.js// pages/Shop_car/Shop_car.js
Page({
/**
* 页面的初始数据
*/
data: {
data: [
{
name: "蓝调小生1",
index: 0,
state: 0,
checkeedAll: false,
data: [
{
url: "http://bd.eacase.com/budongimg/zuixin1.png",
classtitle: "钢琴1",
index: 0,
state: 0,
checked: false,
price:9.9
}, {
url: "http://bd.eacase.com/budongimg/zuixin1.png",
classtitle: "吉他1",
index: 1,
state: 0,
checked: false,
price: 9.9
},
{
url: "http://bd.eacase.com/budongimg/zuixin1.png",
classtitle: "吉他1",
index: 2,
state: 0,
checked: false,
price: 4.9
}
]
},
{
name: "蓝调小生2",
index: 0,
state: 0,
checkeedAll: false,
data: [
{
url: "http://bd.eacase.com/budongimg/zuixin1.png",
classtitle: "钢琴2",
index: 0,
state: 0,
checked: false,
price: 9.9
}, {
url: "http://bd.eacase.com/budongimg/zuixin1.png",
classtitle: "吉他2",
index: 1,
state: 0,
checked: false,
price: 4.9
}
]
},
],
checkedAll: false,
count:0,
priceAll:0.0
},
checkall: function (e) {
var index = e.target.dataset.index;//点击元素的下标
var list = this.data.data[index].data; //获取到了 当前老师元素的 下的所有课程
var status = this.data.data[index].checkeedAll; //获取老师下的checkeedAll为什么
for (var i = 0; i < list.length; i++) {
list[i].checked = !status; //将当前老师元素下的所有课程 的checked都为 false 或者是 true
};
var dataIndex = 'data[' + index + '].data';//这个可以拿到 data 中 index的老师下的所有课程 数据
var dataStatus = 'data[' + index + '].checkeedAll';//当前老师元素下checkeedAll的属性
this.setData({
[dataIndex]: list,
[dataStatus]: !status,
});
//只有所有单选的 都选中了 当前单选的这块的的父级就会 选中 ，将选中的 父级 添加在一个数组当中 如果过 它本身的数据的length == 它被选中的length 就让 三级的全选 选中
var data = this.data.data;
var datarr = [];
for (var a = 0; a < data.length; a++) {
if (data[a].checkeedAll == true) {
datarr.push(data[a]);
}
}
if (data.length === datarr.length) {
this.setData({
checkedAll: true
});
} else {
this.setData({
checkedAll: false
});
}
//单选 选中的时候 的结算 为多少
var count = [];
var priceAll=0;
for (var b = 0; b < data.length; b++) {
var datacount = data[b].data;
for (var c = 0; c < datacount.length; c++) {
if (datacount[c].checked == true) {
count.push(datacount[c]);
priceAll += datacount[c].price;
}
}
}
var price = Number(priceAll).toFixed(2);
this.setData({
count: (count.length),
priceAll: price
});
},
//点击课程上的 checkbox
Checks1: function (e) {
var groupIndex = e.target.dataset.groupindex; // 拿到老师的index
var index = e.target.dataset.index; // 拿到当前课程 的index
var list = this.data.data[groupIndex].data;//获取到了 当前老师元素的 下的所有课
var list2 = this.data.data[groupIndex].data[index].checked;//获取到了 当前老师元素的 下的所有课程的某一个index 的checked 值
var dataIndexchecked = 'data[' + groupIndex + '].data[' + index + '].checked';//这个可以拿到 data 中 index的老师下的所有课程 数据
var dataStatus = 'data[' + groupIndex + '].checkeedAll';//当前老师元素下checkeedAll的属性
this.setData({
[dataIndexchecked]: !list2,
});
var listcheckedarr=[] //单选 选中的 的课程
for(var i=0;i<list.length;i++){
if(list[i].checked==true){
listcheckedarr.push(list[i]);
}
}
if (list.length === listcheckedarr.length){
this.setData({
[dataStatus]:true
});
}else{
this.setData({
[dataStatus]: false
});
}
//只有所有单选的 都选中了 当前单选的这块的的父级就会 选中 ，将选中的 父级 添加在一个数组当中 如果过 它本身的数据的length == 它被选中的length 就让 三级的全选 选中
var data= this.data.data;
var datarr=[];
for(var a=0;a<data.length;a++){
if(data[a].checkeedAll==true){
datarr.push(data[a]);
}
}
if (data.length === datarr.length){
this.setData({
checkedAll:true
});
}else{
this.setData({
checkedAll: false
});
}
//单选 选中的时候 的结算 为多少 价格为多少
var count=[];
var priceAll=0;
for(var b=0;b<data.length;b++){
var datacount=data[b].data;
for(var c=0;c<datacount.length;c++){
if(datacount[c].checked==true){
count.push(datacount[c]);
priceAll += datacount[c].price;
}
}
}
var price=Number(priceAll).toFixed(2);
this.setData({
count:(count.length),
priceAll:price
});
},
//点击全选
AllTap: function (e) {
var checkedAll = this.data.checkedAll;
var list1 = this.data.data;
for (var i = 0; i < list1.length; i++) {
list1[i].checkeedAll = !checkedAll;
var list2 = this.data.data[i].data;
for (var a = 0; a < list2.length; a++) {
list2[a].checked = !checkedAll;
}
}
//单选 选中的时候 的结算 为多少
var count = [];
var priceAll = 0;
for (var b = 0; b < list1.length; b++) {
var datacount = list1[b].data;
for (var c = 0; c < datacount.length; c++) {
if (datacount[c].checked == true) {
count.push(datacount[c]);
priceAll += datacount[c].price;
}
}
}
var price = Number(priceAll).toFixed(2);
this.setData({
checkedAll: (!checkedAll),
data: list1,
count: (count.length),
priceAll: price
});
},
//点击 单个删除 课程
shanchuTap:function(e){
var that=this;
var groupIndex = e.target.dataset.groupindex; // 拿到老师的index
var index = e.target.dataset.index; // 拿到当前课程 的index
wx.showModal({
title: '',
content: '确定要删除吗？',
cancelColor:"#ababab",
confirmColor:"#027ee7",
success(res) {
if (res.confirm) {
var list2 = that.data.data[groupIndex].data;
list2.splice(index, 1);
var dataStatus = 'data[' + groupIndex + '].data';
that.setData({
[dataStatus]:list2
});
wx.showToast({
title: '删除成功',
icon:"none",
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})