小程序购物车多商家 数量的加减
2019-03-05 本文已影响0人
面朝南的落地窗
wxml部分
<view class='cartallview'>
<view class="cart-box" wx:for="{{cartsdata}}" wx:key="{{index}}" wx:for-index="idx">
<!-- wx:for 购物车信息列表 头部商家名称 -->
<view class='storehed'>
<icon type="{{item.selected ? 'success':'circle'}}" bindtap="storeselected" data-index="{{idx}}" />
<text>{{item.storename}}</text>
</view>
<!-- goodslist -->
<view>
<!-- 商品组键 -->
<view class='shopgoodlist' wx:for="{{item.goodsinfo}}" wx:key="{{index}}">
<!-- wx:if 是否选择显示不同图标 -->
<icon type="{{item.selected ? 'success':'circle'}}" bindtap="goodsselected" data-index="{{index}}" data-select-index="{{idx}}"/>
<!-- 点击商品图片可跳转到商品详情 -->
<image class="cart-thumb" src="https://yin.xiaweicun.com/uploads/admin/article_thumb/20180927/c3f8e6f2b0db8a1bbf33d91dd99b976b.png" />
<view class='goodsdata'>
<text class='goodsname'>{{item.goodsname}}</text>
<text class='specification'>{{item.specification}}</text>
<text class='price'>价格￥{{item.price}}</text>
<!-- 增加减少数量按钮 -->
<view class='goodsnum'>
<text bindtap="minusCount" data-index="{{index}}" data-select-index="{{idx}}" bindtap='minusCount'>-</text>
<text>{{item.num}}</text>
<text bindtap="addCount" data-index="{{index}}" data-select-index="{{idx}}" bindtap='addCount'>+</text>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 合计 提交订单 -->
<view class='allselected'>
<view>
<icon type="{{allselected ? 'success':'circle'}}" bindtap="tapallallprices" />
<text>已选（{{allnum}}）</text>
</view>
<view>
<text class='allprices'>￥{{allprices}}</text>
<text class='placeanorder'>下单</text>
</view>
</view>
js部分
// pages/shopping/shopping.js
Page({
/** * 页面的初始数据 */
data: {
allselected: false,
allnum: 0,
allprices: 0,
cartsdata: [{
storename: '测试商家1',
selected: false,
goodsinfo: [{
goodsname: '商铺1的产品1',
specification: '规格',
price: '100.22',
num: '1',
selected: false
},
{
goodsname: '商铺1的产品2',
specification: '规格',
price: '100',
num: '1',
selected: false
}
]
},
{
storename: '测试商家2',
selected: false,
goodsinfo: [{
goodsname: '商铺2的产品1',
specification: '规格',
price: '100',
num: '1',
selected: false
},
{
goodsname: '商铺2的产品2',
specification: '规格',
price: '100',
num: '1',
selected: false
}
]
}
]
},
/** * 生命周期函数--监听页面加载 */
onLoad: function(options) {
//获取购物车信息
},
/** * 生命周期函数--监听页面初次渲染完成 */
onReady: function() {
},
/** * 生命周期函数--监听页面显示 */
onShow: function() {
},
/** * 生命周期函数--监听页面隐藏 */
onHide: function() {
},
/** * 生命周期函数--监听页面卸载 */
onUnload: function() {
},
/** * 页面相关事件处理函数--监听用户下拉动作 */
onPullDownRefresh: function() {
},
/** * 页面上拉触底事件的处理函数 */
onReachBottom: function() {
},
/** * 用户点击右上角分享 */
onShareAppMessage: function() {
},
//计算总价格 所有选中商品的 （价格*数量）相加
getallprices: function() {
var cartsdata = this.data.cartsdata
//购物车数据
var allprices = 0
let allnum = 0
for (var i = 0; i < cartsdata.length; i++) {
// console.log()
var goodsinfo = cartsdata[i].goodsinfo
for (var a = 0; a < goodsinfo.length; a++) {
if (goodsinfo[a].selected) { //当前商品价格*数量 +
let price = Number(goodsinfo[a].price)
let num = parseInt(goodsinfo[a].num) //防止num为字符 *1或parseInt Number
allprices += price * num
allnum += num
}
}
}
//跟新已选数量
this.setData({
allnum: allnum,
allprices: allprices.toFixed(2)
})
},
//全选条件 条件->商铺全选择全选 反之 all
allprices: function() {
let cartsdata = this.data.cartsdata
let storenum = cartsdata.length;
let allselected = this.data.allselected
let allselectednum = 0;
for (var i = 0; i < cartsdata.length; i++) {
if (cartsdata[i].selected == true) {
allselectednum++
}
}
if (storenum == allselectednum) {
allselected = true
} else {
allselected = false
}
this.setData({ allselected: allselected })
this.getallprices();
},
//全选按钮点击
tapallallprices: function() {
let allselected = this.data.allselected
var cartsdata = this.data.cartsdata //购物车数据
if (allselected) {
allselected = false
} else {
allselected = true
}
//选择
for (var i = 0; i < cartsdata.length; i++) {
cartsdata[i].selected = allselected
var goodsinfo = cartsdata[i].goodsinfo
for (var a = 0; a < goodsinfo.length; a++) {
goodsinfo[a].selected = allselected
}
}
this.setData({
cartsdata: cartsdata, //店铺下商品的数量
allselected: allselected
})
this.getallprices();
},
// 店铺的选中
storeselected: function(e) {
var cartsdata = this.data.cartsdata //购物车数据
let index = e.currentTarget.dataset.index //当前店铺下标
var thisstoredata = cartsdata[index].goodsinfo //当前店铺商品数据
//改变当前店铺状态
if (cartsdata[index].selected) {
cartsdata[index].selected = false //改变当前店铺所有商品状态
for (var i in thisstoredata) { cartsdata[index].goodsinfo[i].selected = false }
} else {
cartsdata[index].selected = true
//改变当前店铺所有商品状态
for (var i in thisstoredata) {
cartsdata[index].goodsinfo[i].selected = true
}
}
this.setData({
cartsdata: cartsdata //店铺下商品的数量
})
this.getallprices();
this.allallprices();
},
// 商品的选中
goodsselected: function(e) {
var cartsdata = this.data.cartsdata //购物车数据
let index = e.currentTarget.dataset.index //当前商品所在店铺中的下标
let idx = e.currentTarget.dataset.selectIndex //当前店铺下标
let cai = cartsdata[idx].goodsinfo; //当前商品的店铺data.goodsinfo
let curt = cai[index]; //当前商品数组
if (curt.selected) {
cartsdata[idx].goodsinfo[index].selected = false //点击后当前店铺下当前商品的状态
cartsdata[idx].selected = false
} else {
cartsdata[idx].goodsinfo[index].selected = true //点击后当前店铺下当前商品的状态
//当店铺选中商品数量与店铺总数量相等时 改变店铺状态
var storegoodsleg = cartsdata[idx].goodsinfo.length
var goodsinfo = cartsdata[idx].goodsinfo
var selectedleg = 0
for (var i in goodsinfo) {
if (goodsinfo[i].selected == true) {
selectedleg++
}
}
if (storegoodsleg == selectedleg) {
cartsdata[idx].selected = true
}
} // 更新
this.setData({
cartsdata: cartsdata //店铺下商品的数量
})
this.getallprices();
this.allallprices();
},
// 点击+号，num加1，点击-号，如果num > 1，则减1
addCount: function(e) {
var cartsdata = this.data.cartsdata //购物车数据
let index = e.currentTarget.dataset.index //当前商品所在店铺中的下标
let idx = e.currentTarget.dataset.selectIndex //当前店铺下标
let cai = cartsdata[idx].goodsinfo; //当前商品的店铺data.goodsinfo
let curt = cai[index]; //当前商品数组 var num = curt.num; //当前商品的数量
num++;
cartsdata[idx].goodsinfo[index].num = num //点击后当前店铺下当前商品的数量
this.setData({
cartsdata: cartsdata //店铺下商品的数量
})
//计算总价格
this.getallprices();
},
minusCount: function(e) {
var cartsdata = this.data.cartsdata //购物车数据
let index = e.currentTarget.dataset.index //当前商品所在店铺中的下标
let idx = e.currentTarget.dataset.selectIndex //当前店铺下标
let cai = cartsdata[idx].goodsinfo; //当前商品的店铺data.goodsinfo
let curt = cai[index]; //当前商品数组
var num = curt.num; //当前商品的数量
if (num <= 1) {
return false;
}
num--;
cartsdata[idx].goodsinfo[index].num = num //点击后当前店铺下当前商品的数量
this.setData({
cartsdata: cartsdata //店铺下商品的数量
})
this.getallprices();
}
})
css部分
.cartallview {
padding-bottom: 166rpx;
}
.storehed {
display: flex;
align-items: center;
height: 80rpx;
font-size: 30rpx;
border-top: 1rpx solid #f5f5f5;
border-bottom: 1rpx solid #f5f5f5;
}
/* 单页全局 */
icon {
margin-left: 20rpx;
}
text {
margin-left: 20rpx;
}
.shopgoodlist {
display: flex;
justify-content: flex-start;
font-size: 28rpx;
height: 230rpx;
padding-top: 20rpx;
border-top: 1rpx solid #f5f5f5;
border-bottom: 1rpx solid #f5f5f5;
position: relative;
}
.shopgoodlist image {
margin: 0 20rpx;
height: 120rpx;
width: 120rpx;
}
.shopgoodlist .goodsdata text {
display: block;
}
.shopgoodlist .goodsdata .goodsname {
height: 70rpx;
}
.shopgoodlist .goodsdata .specification {
font-size: 25rpx;
color: #b2b2b2;
}
.shopgoodlist .goodsdata .price {
margin-top: 5rpx;
font-size: 29rpx;
color: #f10000;
}
.shopgoodlist .goodsdata .goodsnum {
position: absolute;
right: 30rpx;
bottom: 20rpx;
}
.shopgoodlist .goodsdata .goodsnum text {
margin-left: 0;
display: inline-block;
border: 1rpx solid #f5f5f5;
width: 90rpx;
height: 53rpx;
line-height: 53rpx;
text-align: center;
}
/* 合计 */
.allselected {
margin-left: 0;
width: 100%;
background: #fafafa;
height: 100rpx;
display: flex;
position: fixed;
align-items: center;
justify-content: space-between;
bottom: 0;
}
.allselected view {
display: flex;
flex: 1;
align-items: center;
font-size: 30rpx;
}
.allselected view .allprices {
flex: 1;
margin: 0;
color: #ec5151;
}
.allselected view .placeanorder {
margin: 0;
flex: 1;
background-color: #ec5151;
text-align: center;
height: 100rpx;
line-height: 100rpx;
color: #ffffff;
}
ps：学习大神的文章 这里只是在自己下面想做个笔记，方便以后学习。
