微信小程序电商实战-购物车(上)

禅あ思 2018-05-17 14:10:09 ⋅ 242 阅读

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

购物车效果

购物车效果图.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 模板、选择计算和数量加减的部分实现!

更多精彩内容

微信小程序电商实战-入门篇

微信小程序电商实战-首页(上)

微信小程序电商实战-首页(下)

微信小程序电商实战-商品详情(上)

微信小程序电商实战-商品详情加入购物车(下)

微信小程序电商实战-商品列表流式布局

微信小程序实战篇:基于wxcharts.js绘制移动报表

小程序实战-幸运大转盘

微信小程序-ImagewidthFix属性和rpm尺寸的使用

微信小程序实战篇:小程序之页面数据传递

微信小程序实战篇:实现抖音评论效果


关注我们

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


全部评论: 0

    我有话说:

    程序实战-购物(下)

    我们继续接着昨天的购物写,主要把剩下的数量加减 template 模板、选中计算功能实现掉!

    程序实战-首页(

    一篇:程序实战-入门篇 嗨,大家好!经过近两周的精心准备终于开始程序实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!   首页效果图

    程序实战-商品详情加入购物(下)

    今天会接着一篇开始写商品详情页加入购物的部分,直接看效果......

    程序实战-首页(下)

    一篇:程序实战-首页()好了,一期我们把首页搜索、导航栏和广告轮播给做完了,那么接下来会继续

    程序实战-商品详情(

    先看一下今天要实现程序商品详情页吧!

    程序实战-入门篇

    程序开发工具有新版本更新啦!开发体验更好了,接下来一起为程序做一下准备前期准备工作~~

    程序-template使用:实现购物商品数量加减功能

    一篇我们实现购物功能,里面有用到template模板功能来实现购物商品数量加减和价格计算功能......

    程序商城(八):缓存实现商品购物功能

    商品详情页将商品信息放入缓存,购物页面读取缓存获取商品信息,购物商品计算和删除缓存商品

    程序实现商品数量加减

    这是一个用程序原生代码实现的数量加减demo,主要是用于商品购物或者商品详情修改数量使用

    程序实战-商品列表流式布局

    今天给大家分享一下程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~

    程序抖音实战-首页(

    你也可以用程序编写一个抖音

    程序实战篇:商品属性联动选择(案例)

    本期的程序实战篇来做一个网站经常用到的-商品属性联动选择的效果,素材参考了一点点

    程序商城(三):首页福利专场无限下拉刷新动态API数据实现

    首页第5个模块-福利专场,通过https调用API数据模型来实现无限下拉刷新......

    程序商城(四):动态API实现商品详情页(

    1、实现商品详情页面布局(这篇实现3个模块,头部商品图片轮播、商品价格和商品描述、商品详情展示) 2、根据用户点击不同的商品请求API动态加载数据

    程序商城(七):动态API实现商品分类

    程序商品分类页面布局并且调用动态API获取数据并加载

    程序实战篇:基于wxcharts.js绘制移动报表

    程序图表插件(wx-charts)是基于canvas绘制,体积巧,支持图表类型饼图、线图、柱状图 ......

    程序商城(五):动态API实现商品详情页(下)

    加入购物悬浮框、商品数量、价格计算、收藏和加入购物功能开发

    程序商城(九):授权并实现个人中心页面页面

    实现商城的授权并获取用户信息和个人中心页面布局