好久没更新小程序电商实战的文章了，是因为最近一直做整体架构调整，一些准备工作也是比较耗费时间的。在这几天将会有新版的小程序电商教程推出，先透露一下新版将会以 https 的方式请求动态获取数据来展现，不再是目前的静态页面了新版也更贴近于实战。这篇购物车因为内容比较多特别是中间有用到 template 模板的只是点，所以会分文上下两部分。大家耐心看完哦~~~

购物车效果

cart.wxml

购物车商品列表布局

<view class="scroll" hidden="{{hidden}}"><scroll-view class="scroll" scroll-y="true">
 <view class="separate"></view>
 <view wx:for="{{carts}}">
 <view class="cart_container"> 
 <view wx:if="{{!item.isSelect}}">
 <icon class="item-select" bindtap="switchSelect" data-index="{{index}}" data-id="{{index}}" type="circle" size="20"></icon>
 </view>
 <view wx:elif="{{item.isSelect}}">
 <icon class="item-select" bindtap="switchSelect" data-index="{{index}}" data-id="{{index}}" type="success" color="#f0145a" size="20"></icon>
 </view>

 <image class="item-image" src="{{item.pic}}"></image>
 <import src="../template/template.wxml" />
 <view class="column">
 <text class="title">{{item.name}}</text>
 <view class="row">
 <text class="sku-price">￥{{item.price * item.count}}</text>
 <view class="sku">
 <template is="quantity" data="{{ ...item,index:index}}" /> 
 </view>
 </view>

 </view>
 </view>
 <view class="separate"></view>
 </view></scroll-view></view>

购物车下方合计结算布局

<view class="bottom_total" hidden="{{hidden}}">
 <view class="bottom_line"></view>

 <view class="row">

 <view wx:if="{{!isAllSelect}}">
 <icon class="item-allselect" bindtap="allSelect" type="circle" size="20"></icon>
 </view>
 <view wx:elif="{{isAllSelect}}">
 <icon class="item-allselect" bindtap="allSelect" type="success" color="#f0145a" size="20"></icon>
 </view>
 <text class="small_text">全选</text>
 <text>合计:￥ </text>
 <text class="price">{{totalMoney}}</text>
 <button class="button-red" bindtap="toBuy" formType="submit">去结算 </button>
 </view></view>

备注：引用的 template 模板部分先不用管可以注释掉，可以继续往下面看

cart.wxss

@import "../template/template.wxss";
page{ 
 background: #f5f5f5; 
} .cart_container { 
 display: flex; 
 flex-direction: row; 
 background-color: #FFFFFF; 
 margin-bottom: 10rpx;
}
.scroll { 
 margin-bottom: 120rpx; 
}
.column { 
 display: flex; 
 flex-direction: column;
}
.row { 
 display: flex; 
 flex-direction: row; 
 align-items: center; 
 /* margin-top: 40rpx; */
 /* border: 1rpx solid #000000; */}
.sku { 
 margin-left: 100rpx; 
 position: absolute; 
 right: 30rpx; 
 margin-top: 30rpx; 
}
.sku-price { 
 color: red; 
 position: relative; 
 margin-top: 30rpx; 
}
.price { 
 color: red; 
 position: relative;
}
.title { 
 font-size: 38rpx; 
 margin-top: 40rpx;
}
.small_text { 
 font-size: 28rpx; 
 margin-right: 40rpx; 
 /* margin-left: 10rpx; */
 margin-left: 25rpx;
}
.item-select { 
 width: 40rpx; 
 height: 40rpx; 
 margin-top: 90rpx; 
 margin-left: 20rpx;
}
.item-allselect { 
 width: 40rpx; 
 height: 40rpx; 
 margin-left: 20rpx; 
 margin-top:25rpx; 
}
.item-image { 
 width: 180rpx; 
 height: 180rpx; 
 margin: 20rpx;
} 
.bottom_line { 
 width: 100%; 
 height: 2rpx; 
 background: lightgray;
} 
.bottom_total { 
 position: fixed; 
 display: flex; 
 flex-direction: column; 
 bottom: 0; 
 width: 100%; 
 height: 120rpx; 
 line-height: 120rpx; 
 background: white; /* margin-top: 300rpx; */
 border-top: 1rpx solid #ccc;
}
.button-red { 
 background-color: #f0145a; 
 position: fixed; 
 right: 0; 
 color: white; 
 text-align: center; 
 display: inline-block; 
 font-size: 30rpx; 
 border-radius: 0rpx; 
 width: 30%; 
 height: 120rpx; 
 line-height: 120rpx; 
 /* border: 1rpx solid #ccc; */
 
}

备注 @import "../template/template.wxss"; 先不用管可以注释掉，后面会有代码

cart.js

#初始化数据data: { hidden:null,
 hiddenEmpty:true,
 isAllSelect: false,
 totalMoney: 0,
 // 商品详情介绍
 carts: [
 {
 id: 1,
 pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148058328876.jpg",
 name: "日本资生堂洗颜",
 price: 200,
 isSelect: false,
 // 数据设定
 count: 2
 },
 { id: 2,
 pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058301941.jpg',
 name: "倩碧焕妍活力精华露",
 price: 340,
 isSelect: false,
 // 数据设定
 count: 1
 },
 { id: 3,
 pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
 name: "特效润肤露",
 price: 390,
 isSelect: false,
 // 数据设定
 count: 1
 },
 { id: 4,
 pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058228431.jpg',
 name: "倩碧水嫩保湿精华面霜",
 price: 490,
 isSelect: false,
 // 数据设定
 count: 1
 },
 { id: 5,
 pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',
 name: "兰蔻清莹柔肤爽肤水",
 price: 289,
 isSelect: false,
 // 数据设定
 count: 1
 },
 { id: 6,
 pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148057921620_middle.jpg",
 name: "LANCOME兰蔻小黑瓶精华",
 price: 230,
 isSelect: false,
 // 数据设定
 count: 1
 },
 ],
 },

未完待续......

明天将会把购物车用到的 template 模板、选择计算和数量加减的部分实现！

关注我们

如果需要源码可以关注“IT实战联盟”并留言（源码名称+邮箱），小萌看到后会联系作者发送到邮箱，也可以加入交流群和作者互撩哦~~~

四时宝库

程序员的知识宝库

小程序电商实战-购物车(上)（小程序购物平台怎么做）