微信截圖_20190110111629.png
wxml
<!--pages/Shop_car/Shop_car.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 bindchange="Checks1" data-index="{{groupIndex}}" >
<view class="hot-div hot-checked " wx:for="{{item.data}}" data-kc="{{item}}" wx:key="{{index}}" >
<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;">課程規(guī)格：幾節(jié)課</view>
<view class="order-red" style="margin-top: 8rpx;">
￥
<text>9.9</text>
<image src='http://bd.eacase.com/budongimg/shanchu.png'></image>
</view>
<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>￥ 0</text>
</view>
<view class="shop-check-jie">結(jié)算(0)</view>
</view>
</view>
</view>
js
// pages/Shop_car/Shop_car.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
data: [
{
name: "藍調(diào)小生1",
index: 0,
state: 0,
checkeedAll: false,
data: [
{
url: "http://bd.eacase.com/budongimg/zuixin1.png",
classtitle: "鋼琴1",
index: 0,
state: 0,
checked: false
}, {
url: "http://bd.eacase.com/budongimg/zuixin1.png",
classtitle: "吉他1",
index: 1,
state: 0,
checked: false
},
{
url: "http://bd.eacase.com/budongimg/zuixin1.png",
classtitle: "吉他1",
index: 1,
state: 0,
checked: false
}
]
},
{
name: "藍調(diào)小生2",
index: 0,
state: 0,
checkeedAll: false,
data: [
{
url: "http://bd.eacase.com/budongimg/zuixin1.png",
classtitle: "鋼琴2",
index: 0,
state: 0,
checked: false
}, {
url: "http://bd.eacase.com/budongimg/zuixin1.png",
classtitle: "吉他2",
index: 1,
state: 0,
checked: false
}
]
},
],
checkedAll: false,
},
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的老師下的所有課程 數(shù)據(jù)
var dataStatus = 'data[' + index + '].checkeedAll';//當前老師元素下checkeedAll的屬性
this.setData({
[dataIndex]: list,
[dataStatus]: !status,
});
},
//點擊課程上的 checkbox
Checks1: function (e) {
var index = e.target.dataset.index; // 拿到老師的index
var list = this.data.data[index].data;//獲取到了 當前老師元素的 下的所有課程
var checkedList = e.detail.value; //只有選中的才會拿到這個值
var dataStatus = 'data[' + index + '].checkeedAll'; //老師index下的值
var status = list.length == checkedList.length ? true : false;
this.setData({
[dataStatus]: status,
});
},
//點擊全選
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;
}
}
this.setData({
checkedAll: (!checkedAll),
data: list1,
});
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
wxss
/* pages/Shop_car/Shop_car.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 span{
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;
}
