效果图:
wxml
<view class="tbg">
<text class="tbgt">共{{total}}件宝贝</text>
</view>
<view class="cartlist">
<view class="cacontent" wx:if="{{total == 0}}">
<navigator url="/pages/shop/index" open-type="switchTab" class="cason">您还没有商品,点击前往商城添加商品</navigator>
</view>
<view class="cacontent" wx:else>
<view class="cartit">
<image src="/images/d.png" class="ctimg"></image>
<text class="ctxt"></text>
</view>
<view class="cartone" wx:for="{{cartlist}}" wx:key="id">
<view class="cone1">
<image src="{{item.select?'/images/selected.png':'/images/normal.png'}}" class="coneimg" bindtap="selectone" data-index="{{index}}"/>
</view>
<image src="{{baseurl1}}{{item.productImg}}" class="pimg"></image>
<view class="ptext">
<view class='pt1'>{{item.productName}}</view>
<text class="pt2">{{item.specsName}}</text>
<view class="pt3">
<text class="ptpice">¥ {{item.total}}</text>
<view class="ptnum">
<button class="ptt" bindtap="pjian" data-index="{{index}}">-</button>
<text class="ptn">{{item.productNum}}</text>
<button class="ptt" bindtap="pjia" data-index="{{index}}">+</button>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="cartbot">
<image src="{{selectall?'/images/selected.png':'/images/normal.png'}}" class="botimg" bindtap="selectcount"/>
<view class="bottext">全选</view>
<view class="botprice">
<text class="bp1">共计:</text>
<text class="bp2"><text style="font-size:24rpx">¥</text> {{totalprice}}</text>
</view>
<view class="tobuy">结算</view>
</view>
wxss
/* pages/cart/cart.wxss */
page{background-color: #F6F6F6}
.tbg{width: 100%;height: 140rpx;background-color: #DA4A25}
.tbgt{font-size: 22rpx;color: #ffffff;margin-top: 10rpx;margin-left: 12rpx}
.cartlist{width: 100%;position: relative}
.cacontent{width: 728rpx;background-color: #ffffff;border-radius: 23rpx;min-height: 200rpx;left: 11rpx;top: -85rpx;position: absolute;padding-bottom: 20rpx}
.cason{font-size: 26rpx;color: #999999;margin-top: 90rpx;text-align: center}
.cartit{width: 700rpx;margin-top: 35rpx;margin-left: 25rpx;overflow: hidden}
.ctimg{width: 48rpx;height: 40rpx;float: left;display: block}
.ctxt{font-size: 34rpx;color: #333333;font-weight: 500;margin-left: 18rpx;line-height: 40rpx;display: block;float: left}
.cartone{width: 680rpx;margin: 40rpx auto 0 auto;height: 190rpx}
.cone1{width: 32rpx;height: 190rpx;float: left;line-height: 190rpx}
.coneimg{width: 32rpx;height: 32rpx}
.pimg{width: 184rpx;height: 190rpx;display: block;float: left;margin-left: 16rpx}
.ptext{width: 416rpx;height: 190rpx;float:left;margin-left: 16rpx}
.pt1{font-size: 26rpx;color: #333333;width: 100%;height: 62rpx;line-height: 32rpx;overflow: visible}
.pt2{width: 100%;height: 65rpx;background-color: #F2F2F2;margin-top: 14rpx;font-size:24rpx;color: #333333;padding: 5rpx}
.pt3{width: 100%;height: 48rpx;margin-top: 20rpx}
.ptpice{font-size: 34rpx;color: #FE1919}
.ptnum{width: 100rpx;float: right;overflow: hidden;margin-top: 8rpx}
.ptt{width: 32rpx;height: 32rpx;background-color: #F3C4C4;text-align: center;line-height: 32rpx;color: #ffffff;font-size: 28rpx;padding: 0;float: left}
.ptn{width: 32rpx;height: 32rpx;text-align: center;line-height: 32rpx;font-size: 24rpx;color: #333333;float: left}
.cartbot{width: 100%;height: 98rpx;background-color: #ffffff;position: fixed;bottom: 0;left: 0}
.botimg{display: block;float: left;width: 42rpx;height: 42rpx;margin-left: 12rpx;margin-top: 24rpx}
.bottext{float: left;margin-left: 10rpx;line-height: 98rpx;font-size: 24rpx;color: #333333}
.botprice{float: left;margin-left: 200rpx;line-height: 98rpx}
.bp1{font-size: 20rpx;color: #333333}
.bp2{font-size: 36rpx;color: #FE1919}
.tobuy{width: 235rpx;height: 98rpx;background-color: #DA4A25;text-align: center;line-height: 98rpx;float: right;font-size: 28rpx;color: #ffffff}
js:
// pages/cart/cart.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
total:0, /**数据总数 */
selectall:false, /**全选状态 */
cartlist:{},/**购物车数据 后台获取 */
baseurl1: "",
totalprice:0.00 /**总金额 */
},
/**单选 */
selectone:function(e){
var that = this;
var index = e.target.dataset.index;
this.data.cartlist[index].select = !this.data.cartlist[index].select
if(this.data.cartlist[index].select){
this.data.totalprice = this.data.totalprice + parseFloat(this.data.cartlist[index].total);
}else{
this.data.totalprice = this.data.totalprice - parseFloat(this.data.cartlist[index].total);
}
this.setData({
cartlist:this.data.cartlist,
totalprice:this.data.totalprice
})
this.selectallto();
},
/**判断是否全选 */
selectallto:function(){
var i = 0;
var status = true;
for (i = 0; i < this.data.total;i++){
if(!this.data.cartlist[i].select){
status = false;
}
}
this.setData({
selectall:status
})
},
/**全选 取消全选 */
selectcount:function(){
if(this.data.selectall){
this.data.selectall = false;
this.data.totalprice = 0;
var i = 0;
for (i = 0; i < this.data.total; i++){
this.data.cartlist[i].select = false;
}
this.setData({
cartlist:this.data.cartlist,
selectall:this.data.selectall,
totalprice:this.data.totalprice
})
}else{
this.data.selectall = true;
var price = 0.00;
var i = 0;
for (i = 0; i < this.data.total; i++) {
this.data.cartlist[i].select = true;
price = price + parseFloat(this.data.cartlist[i].total)
}
this.setData({
cartlist: this.data.cartlist,
selectall: this.data.selectall,
totalprice: price
})
}
},
/**商品数量减 */
pjian:function(e){
var index = e.target.dataset.index;
if(this.data.cartlist[index].productNum > 1){/**判断数量是否大于1 */
this.data.cartlist[index].productNum = this.data.cartlist[index].productNum - 1;
this.data.cartlist[index].total = parseFloat(this.data.cartlist[index].price) * this.data.cartlist[index].productNum;
if(this.data.cartlist[index].select){
this.data.totalprice = this.data.totalprice - parseFloat(this.data.cartlist[index].price);
}
this.setData({
cartlist:this.data.cartlist,
totalprice:this.data.totalprice
})
}
},
/**商品数量加 */
pjia:function(e){
var index = e.target.dataset.index;
this.data.cartlist[index].productNum = this.data.cartlist[index].productNum + 1;
this.data.cartlist[index].total = parseFloat(this.data.cartlist[index].price) * this.data.cartlist[index].productNum;
if (this.data.cartlist[index].select) {
this.data.totalprice = this.data.totalprice + parseFloat(this.data.cartlist[index].price);
}
this.setData({
cartlist: this.data.cartlist,
totalprice: this.data.totalprice
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getcart();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
getcart:function(){
var that = this;
wx.getStorage({
key: 'userId',
success: function (res) {
console.log(res)
wx.request({
url: app.globalData.baseUrl + "/api/getcart",
data: {
api: 'getcart',
uid: res.data
},
method: 'post',
header: {
'content-type': 'application/json'
},
success: function (res) {
var i = 0;
var cart = res.data.date;
var num = res.data.date.length;
for(i=0;i<num;i++){
cart[i].select = false;
}
console.log(cart);
that.setData({
cartlist:cart,
total:num
})
}
})
}, fail: function (res) {
wx.navigateTo({
url: '/pages/login/login'
})
}
})
}
})
后台是用PHP 写的 就不上传了 基本效果差不多