微信小程序电商实战-购物车（上）

Love The Way You Lie 2022-05-24 00:57 305阅读 0赞

IT实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn]

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

购物车效果

![fc3541aa9fd57d7621e1704aa6f47534.gif][]

购物车效果图.gif

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实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn]

[微信小程序电商实战-入门篇][-]  
[微信小程序电商实战-首页（上）][- 1]  
[微信小程序电商实战-首页（下）][- 2]  
[微信小程序电商实战-商品详情（上）][- 3]  
[微信小程序电商实战-商品列表流式布局][- 4]  
[微信小程序实战篇：基于wxcharts.js绘制移动报表][wxcharts.js]  
[微信小程序实战篇：商品属性联动选择（案例）][Link 1]

关注我们

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

IT实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn]

[http_blog.100boot.cn]: http://blog.100boot.cn/
[fc3541aa9fd57d7621e1704aa6f47534.gif]: /images/20220524/f2b792ffabaf4c7fa3832c79a3f44c4b.png
[-]: https://www.jianshu.com/p/6e214401ffdd
[- 1]: https://www.jianshu.com/p/f490c62643d3
[- 2]: https://www.jianshu.com/p/7100a1268453
[- 3]: https://www.jianshu.com/p/6cee51acd018
[- 4]: https://www.jianshu.com/p/72d57252b4ef
[wxcharts.js]: https://www.jianshu.com/p/04ddbabda874
[Link 1]: https://www.jianshu.com/p/f7f5f593b8e3