wxml的代码
<view class="container">
<view class="no-cart" wx:if="{{cartGoods.length<=0}}">
<view class="c">
<view class="title-box">
购物车空空如也～
</view>
<view bindtap="toIndexPage" class="to-index-btn">
去逛逛
</view>
</view>
</view>
<view class="cart-view" wx:if="{{cartGoods.length>0}}">
<view class="list">
<view class="group-item">
<view class="goods">
<view class="item {{isEditCart?'edit':''}}" wx:for="{{cartGoods}}" wx:key="{{item.id}}">
<view bindtap="checkedItem" class="checkbox {{item.checked?'checked':''}}" data-item-index="{{index}}"></view>
<view class="cart-goods">
<image class="img" src="{{item.list_pic_url}}"></image>
<view class="info">
<view class="t">
<text class="name">{{item.goods_name}}</text>
<text class="num">x{{item.number}}</text>
</view>
<view class="attr">{{isEditCart?'已选择:':''}}{{item.goods_specifition_name_value||''}}</view>
<view class="b">
<text class="price">￥{{item.retail_price}}</text>
<view wx:if="{{!isEditCart}}">
<view class="selnum">
<view bindtap="cutNumber" class="cut" data-item-index="{{index}}">-</view>
<input class="number" disabled="true" type="number" value="{{item.number}}"></input>
<view bindtap="addNumber" class="add" data-item-index="{{index}}">+</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="cart-bottom">
<view bindtap="checkedAll" class="checkbox {{checkedAllStatus?'checked':''}}">全选({{cartTotal.checkedGoodsCount}})</view>
<view class="total">{{!isEditCart?'￥'+cartTotal.checkedGoodsAmount:''}}</view>
<view bindtap="editCart" class="delete">{{!isEditCart?'编辑':'完成'}}</view>
<view bindtap="deleteCart" class="checkout" wx:if="{{isEditCart}}">删除所选</view>
<view bindtap="checkoutOrder" class="checkout" wx:if="{{!isEditCart}}">下单</view>
</view>
</view>
</view>
wxss的实现
page {
height: 100%;
min-height: 100%;
background: #f4f4f4;
}
.container {
background: #f4f4f4;
width: 100%;
height: auto;
min-height: 100%;
overflow: hidden;
}
.service-policy {
width: 750rpx;
height: 73rpx;
background: #f4f4f4;
padding: 0 31.25rpx;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
}
.service-policy .item {
background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png) 0 center no-repeat;
background-size: 10rpx;
padding-left: 15rpx;
display: flex;
align-items: center;
font-size: 25rpx;
color: #666;
}
.no-cart {
width: 100%;
height: auto;
margin: 0 auto;
}
.no-cart .c {
width: 100%;
height: auto;
margin-top: 200rpx;
}
.no-cart .c image {
margin: 0 auto;
display: block;
text-align: center;
width: 258rpx;
height: 258rpx;
}
.no-cart .c text {
margin: 0 auto;
display: block;
width: 258rpx;
height: 29rpx;
line-height: 29rpx;
text-align: center;
font-size: 29rpx;
color: #999;
}
.title-box {
width: 100%;
padding-top: 330rpx;
text-align: center;
font-size: 28rpx;
color: #999;
background: url(http://webcharpic.xfshequ.com/icon/gwc.png) no-repeat center 205rpx;
background-size: 100rpx auto;
margin-bottom: 50rpx;
}
.to-index-btn {
color: #fff;
background: #e64340;
border-radius: 6px;
width: 300rpx;
height: auto;
line-height: 70rpx;
text-align: center;
font-size: 28rpx;
margin: 0 auto;
display: block;
}
.cart-view {
width: 100%;
height: auto;
overflow: hidden;
}
.cart-view .list {
height: auto;
width: 100%;
overflow: hidden;
margin-bottom: 120rpx;
}
.cart-view .group-item {
height: auto;
width: 100%;
background: #fff;
margin-bottom: 18rpx;
}
.cart-view .item {
height: 164rpx;
width: 100%;
overflow: hidden;
}
.cart-view .item .checkbox {
float: left;
height: 34rpx;
width: 34rpx;
margin: 65rpx 18rpx 65rpx 26rpx;
background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/checkbox-0e09baa37e.png) no-repeat;
background-size: 34rpx;
}
.cart-view .item .checkbox.checked {
background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/checkbox-checked-822e54472a.png) no-repeat;
background-size: 34rpx;
}
.cart-view .item .cart-goods {
float: left;
height: 164rpx;
width: 672rpx;
border-bottom: 1px solid #f4f4f4;
}
.cart-view .item .img {
float: left;
height: 125rpx;
width: 125rpx;
background: #f4f4f4;
margin: 19.5rpx 18rpx 19.5rpx 0;
}
.cart-view .item .info {
float: left;
height: 125rpx;
width: 503rpx;
margin: 19.5rpx 26rpx 19.5rpx 0;
}
.cart-view .item .t {
margin: 8rpx 0;
height: 28rpx;
font-size: 25rpx;
color: #333;
overflow: hidden;
}
.cart-view .item .name {
height: 28rpx;
max-width: 310rpx;
line-height: 28rpx;
font-size: 25rpx;
color: #333;
overflow: hidden;
}
.cart-view .item .num {
height: 28rpx;
line-height: 28rpx;
float: right;
}
.cart-view .item .attr {
margin-bottom: 17rpx;
height: 24rpx;
line-height: 24rpx;
font-size: 22rpx;
color: #666;
overflow: hidden;
}
.cart-view .item .b {
height: 28rpx;
line-height: 28rpx;
font-size: 25rpx;
color: #333;
overflow: hidden;
}
.cart-view .item .price {
float: left;
}
.cart-view .item .open {
height: 28rpx;
width: 150rpx;
display: block;
float: right;
background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/arrowDown-d48093db25.png) right center no-repeat;
background-size: 25rpx;
font-size: 25rpx;
color: #333;
}
.cart-view .item.edit .t {
display: none;
}
.cart-view .item.edit .attr {
text-align: right;
background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/arrow-right1-e9828c5b35.png) right center no-repeat;
padding-right: 25rpx;
background-size: 12rpx 20rpx;
margin-bottom: 24rpx;
height: 39rpx;
line-height: 39rpx;
font-size: 24rpx;
color: #999;
overflow: hidden;
}
.cart-view .item .b {
display: flex;
height: 52rpx;
overflow: hidden;
}
.cart-view .item .price {
line-height: 52rpx;
height: 52rpx;
flex: 1;
}
.cart-view .item .selnum {
display: none;
}
.cart-view .item .selnum {
width: 235rpx;
height: 52rpx;
border: 1rpx solid #ccc;
display: flex;
}
.selnum .cut {
width: 70rpx;
height: 100%;
text-align: center;
line-height: 50rpx;
}
.selnum .number {
flex: 1;
height: 100%;
text-align: center;
line-height: 68.75rpx;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
float: left;
}
.selnum .add {
width: 80rpx;
height: 100%;
text-align: center;
line-height: 50rpx;
}
.cart-view .group-item .header {
width: 100%;
height: 94rpx;
line-height: 94rpx;
padding: 0 26rpx;
border-bottom: 1px solid #f4f4f4;
}
.cart-view .promotion .icon {
display: inline-block;
height: 24rpx;
width: 15rpx;
}
.cart-view .promotion {
margin-top: 25.5rpx;
float: left;
height: 43rpx;
width: 480rpx;
line-height: 43rpx;
font-size: 0;
}
.cart-view .promotion .tag {
border: 1px solid #f48f18;
height: 37rpx;
line-height: 31rpx;
padding: 0 9rpx;
margin-right: 10rpx;
color: #f48f18;
font-size: 24.5rpx;
}
.cart-view .promotion .txt {
height: 43rpx;
line-height: 43rpx;
padding-right: 10rpx;
color: #333;
font-size: 29rpx;
overflow: hidden;
}
.cart-view .get {
margin-top: 18rpx;
float: right;
height: 58rpx;
padding-left: 14rpx;
border-left: 1px solid #d9d9d9;
line-height: 58rpx;
font-size: 29rpx;
color: #333;
}
.cart-bottom {
position: fixed;
bottom: 0;
left: 0;
height: 100rpx;
width: 100%;
background: #fff;
display: flex;
}
.cart-bottom .checkbox {
height: 34rpx;
padding-left: 60rpx;
line-height: 34rpx;
margin: 33rpx 18rpx 33rpx 26rpx;
background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/checkbox-0e09baa37e.png) no-repeat;
background-size: 34rpx;
font-size: 29rpx;
}
.cart-bottom .checkbox.checked {
background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/checkbox-checked-822e54472a.png) no-repeat;
background-size: 34rpx;
}
.cart-bottom .total {
height: 34rpx;
flex: 1;
margin: 33rpx 10rpx;
font-size: 29rpx;
}
.cart-bottom .delete {
height: 34rpx;
width: auto;
margin: 33rpx 18rpx;
font-size: 29rpx;
}
.cart-bottom .checkout {
height: 100rpx;
width: 210rpx;
text-align: center;
line-height: 100rpx;
font-size: 29rpx;
background: #b4282d;
color: #fff;
}
js的实现
var t = require("../../utils/util.js"), a = require("../../config/api.js");
getApp();
Page({
data: {
cartGoods: [],
cartTotal: {
goodsCount: 0,
goodsAmount: 0,
checkedGoodsCount: 0,
checkedGoodsAmount: 0
},
isEditCart: !1,
checkedAllStatus: !0,
editCartList: []
},
onLoad: function(t) {},
onReady: function() {},
onShow: function() {
this.getCartList();
},
onHide: function() {},
onUnload: function() {},
getCartList: function() {
var e = this;
t.request(a.CartList).then(function(t) {
0 === t.errno && (console.log(t.data), e.setData({
cartGoods: t.data.cartList,
cartTotal: t.data.cartTotal
})), e.setData({
checkedAllStatus: e.isCheckedAll()
});
});
},
isCheckedAll: function() {
return this.data.cartGoods.every(function(t, a, e) {
return 1 == t.checked;
});
},
checkedItem: function(e) {
var o = e.target.dataset.itemIndex, c = this;
if (this.data.isEditCart) {
var d = this.data.cartGoods.map(function(t, a, e) {
return a == o && (t.checked = !t.checked), t;
});
c.setData({
cartGoods: d,
checkedAllStatus: c.isCheckedAll()
});
} else t.request(a.CartChecked, {
productIds: c.data.cartGoods[o].product_id,
isChecked: c.data.cartGoods[o].checked ? 0 : 1
}, "POST").then(function(t) {
0 === t.errno && (console.log(t.data), c.setData({
cartGoods: t.data.cartList,
cartTotal: t.data.cartTotal
})), c.setData({
checkedAllStatus: c.isCheckedAll()
});
});
},
getCheckedGoodsCount: function() {
var t = 0;
return this.data.cartGoods.forEach(function(a) {
!0 === a.checked && (t += a.number);
}), console.log(t), t;
},
checkedAll: function() {
var e = this;
if (this.data.isEditCart) {
var o = e.isCheckedAll(), c = this.data.cartGoods.map(function(t) {
return t.checked = !o, t;
});
e.setData({
cartGoods: c,
checkedAllStatus: e.isCheckedAll(),
"cartTotal.checkedGoodsCount": e.getCheckedGoodsCount()
});
} else {
var d = this.data.cartGoods.map(function(t) {
return t.product_id;
});
t.request(a.CartChecked, {
productIds: d.join(","),
isChecked: e.isCheckedAll() ? 0 : 1
}, "POST").then(function(t) {
0 === t.errno && (console.log(t.data), e.setData({
cartGoods: t.data.cartList,
cartTotal: t.data.cartTotal
})), e.setData({
checkedAllStatus: e.isCheckedAll()
});
});
}
},
editCart: function() {
var t = this;
if (this.data.isEditCart) this.getCartList(), this.setData({
isEditCart: !this.data.isEditCart
}); else {
var a = this.data.cartGoods.map(function(t) {
return t.checked = !1, t;
});
this.setData({
editCartList: this.data.cartGoods,
cartGoods: a,
isEditCart: !this.data.isEditCart,
checkedAllStatus: t.isCheckedAll(),
"cartTotal.checkedGoodsCount": t.getCheckedGoodsCount()
});
}
},
toIndexPage: function() {
wx.switchTab({
url: "/pages/index/index"
});
},
updateCart: function(e, o, c, d) {
var s = this;
t.request(a.CartUpdate, {
productId: e,
goodsId: o,
number: c,
id: d
}, "POST").then(function(t) {
0 === t.errno && (console.log(t.data), s.setData({
cartGoods: t.data.cartList,
cartTotal: t.data.cartTotal
})), s.setData({
checkedAllStatus: s.isCheckedAll()
});
});
},
cutNumber: function(t) {
var a = t.target.dataset.itemIndex, e = this.data.cartGoods[a], o = e.number - 1 > 1 ? e.number - 1 : 1;
e.number = o, this.setData({
cartGoods: this.data.cartGoods
}), this.updateCart(e.product_id, e.goods_id, o, e.id);
},
addNumber: function(t) {
var a = t.target.dataset.itemIndex, e = this.data.cartGoods[a], o = e.number + 1;
e.number = o, this.setData({
cartGoods: this.data.cartGoods
}), this.updateCart(e.product_id, e.goods_id, o, e.id);
},
checkoutOrder: function() {
if (this.data.cartGoods.filter(function(t, a, e) {
return 1 == t.checked;
}).length <= 0) return !1;
wx.navigateTo({
url: "../shopping/checkout/checkout"
});
},
deleteCart: function() {
var e = this, o = this.data.cartGoods.filter(function(t, a, e) {
return 1 == t.checked;
});
if (o.length <= 0) return wx.showToast({
title: "选择删除的商品"
}), !1;
o = o.map(function(t, a, e) {
if (1 == t.checked) return t.product_id;
}), wx.showModal({
title: "提示",
content: "您确定要删除所选的商品吗",
showCancel: !0,
confirmText: "确定",
success: function(c) {
c.cancel || t.request(a.CartDelete, {
productIds: o.join(",")
}, "POST").then(function(t) {
if (0 === t.errno) {
console.log(t.data);
var a = t.data.cartList.map(function(t) {
return console.log(t), t.checked = !1, t;
});
e.setData({
cartGoods: a,
cartTotal: t.data.cartTotal
});
}
e.setData({
checkedAllStatus: e.isCheckedAll()
});
});
}
});
}
});
6494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
