微信截图_20190110111629.png
wxml
{{item.name}}
{{item.classtitle}}
课程规格：几节课
¥
{{item.price}}
全选
合计：
¥ {{ priceAll}}
结算({{count}})
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