微信小程序 类似 淘宝的购物车 门店下的商品 以及全
2019-01-10 本文已影响17人
郭的妻
微信截图_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;">课程规格：几节课</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">结算(0)</view>
</view>
</view>
</view>
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
}, {
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: "蓝调小生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的老师下的所有课程 数据
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,
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
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;
}
