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

Java大拿 2018-04-09 13:55:45 ⋅ 137 阅读

上一篇:微信小程序电商实战-商品详情(上)
今天会接着上一篇开始写商品详情页加入购物车的部分,先看效果:


实现效果

1. 商品轮播图片预览
2. 商品收藏效果
3. 加入购物车
4. 商品数量加减
5. 商品数量加减模板(template)编写

商品轮播图片预览效果

detail.js
//预览图片
  previewImage: function (e) {    
   var current = e.target.dataset.src;    wx.previewImage({      
       current: current, // 当前显示图片的http链接          urls: this.data.imgUrls // 需要预览的图片http链接列表      })  }

加入购物车

页面布局分为两部分,第一部分为底部悬浮栏(购物车、收藏、加入购物车、立即购买),第二部分为加入购物车的隐藏布局主要用来选择商品属性和修改商品数量。

detail.wxml
 <!-- 底部悬浮栏 -->
<view class="detail-nav">  <image bindtap="toCar" src="../../images/bottomNav/cart.png" />    <view class="line_nav"></view>   <image bindtap="addLike" src="{{isLike?'../../images/bottomNav/enshrine_select.png':'../../images/bottomNav/enshrine.png'}}" />  <button data-goodid="1"  class="button-green" bindtap="toggleDialog" >加入购物车</button>  <button class="button-red" bindtap="immeBuy" formType="submit">立即购买</button>
</view>
<!--加入购物车-->
<import src="../template/template.wxml" />
<view class="dialog {{ showDialog ? 'dialog--show' : '' }}">
     <view class="dialog__mask" bindtap="toggleDialog" />      <view class="dialog__container">        <view class="row">          <icon bindtap="closeDialog" class="image-close" type="cancel" size="25"/>          <image class="image-sku" src="https://m.360buyimg.com/n12/jfs/t11317/108/1080677336/325163/f4c2a03a/59fd8b17Nbe2fcca3.jpg!q70.jpg"></image>          <view class="column">            <text class="sku-price">¥7935.84</text>            <text class="sku-title">库存20件</text>            <text class="sku-title">商品编码:1456778788</text>          </view>        </view>        <text class="border-line"></text>        <view class="row">          <text >购买数量</text>          <view class="quantity-position">              <template is="quantity" data="{{ ...quantity1}}" />            </view>        </view>        <text class="border-line"></text>        <button data-goodid="1" class="button-addCar" bindtap="addCar" formType="submit">确定</button>      </view>    </view>
detail.js
// 立即购买
  immeBuy() {
    wx.showToast({      
       title: '购买成功',      
       icon: 'success',      
       duration: 2000    });  },  
   /**     * sku 弹出     */  toggleDialog: function () {    
       this.setData({      
           showDialog: !this.data.showDialog        });  },  
 /**   * sku 关闭   */  closeDialog: function () {    
       console.info("关闭");    
       this.setData({      
           showDialog: false        });  },  
/* 减数 */  delCount: function (e) {    
   console.log("刚刚您点击了减一");    
   var count = this.data.quantity1.quantity;    
   // 商品总数量-1    if (count > 1) {      count -= 1;    }    
   // 只有大于一件的时候,才能normal状态,否则disable状态      var delStatus = count <= 1 ? 'disabled' : 'normal';    
   // 只有大于10件的时候,才能normal状态,否则disable状态      var addStatus = count >= 10 ? 'disabled' : 'normal';    
   // 将数值与状态写回      this.setData({      
       quantity1: {        
       quantity: count,        
       delStatus: delStatus,        
       addStatus: addStatus      }    });  },  
/* 加数 */  addCount: function (e) {    
   console.log("刚刚您点击了加一");    
   var count = this.data.quantity1.quantity;    
   // 商品总数量-1      if (count < 10) {      count += 1;    }    
   // 只有大于一件的时候,才能normal状态,否则disable状态      var delStatus = count <= 1 ? 'disabled' : 'normal';    
   // 只有大于10件的时候,才能normal状态,否则disable状态      var addStatus = count >= 10 ? 'disabled' : 'normal';    
   // 将数值与状态写回      this.setData({      
       quantity1: {        
           quantity: count,        
           delStatus: delStatus,        
           addStatus: addStatus      }    });  },  
 /* 输入框事件 */  bindManual: function (e) {    
   var count = this.data.quantity1.quantity;    
   // 将数值与状态写回      this.setData({      
       count: count    });  },  
/**   * 加入购物车   */  addCar: function (e) {    
   console.log(e.target.dataset.goodid);    wx.showToast({      
       title: '加入购物车成功',      
       icon: 'success',      
       duration: 2000    });    
    console.info("关闭");        
   this.setData({        
       showDialog: false    });  },  
 // 收藏  addLike() {    
   this.setData({      
       isLike: !this.data.isLike    });  },  
 // 跳到购物车  toCar() {    wx.switchTab({      
       url: '/pages/cart/cart'    })  },  
// 立即购买  immeBuy() {    wx.showToast({      
       title: '购买成功',      
       icon: 'success',      
       duration: 2000    });  },

商品数量加减模板(template)

由于后面购物车模块也需要商品数量加减的功能,在这里把这个功能做成了一个template模板,看下方流程:

1、创建template模板

在page目录下创建template文件,并生成template.js、template.json、template.wxml和template.wxss配套文件

2、template.wxml
<template name="quantity">
  <!-- 主容器 -->  
  <view class="stepper">  
      <!-- 减号 -->  
      <text class="{{delStatus}}" bindtap="delCount">-</text>  
      <!-- 数值 -->  
      <input type="number" bindchange="bindManual" value="{{quantity}}"  disabled="disabled"/>  
      <!-- 加号 -->  
      <text class="{{addStatus}}" bindtap="addCount">+</text>  
  </view>  
</template>
3、template.wxss
/*主容器*/  
.stepper {      width:110px;      height: 26px;      /*给主容器设一个边框*/      border: 1rpx solid #000000;      border-radius: 3px;      margin:0 auto;   }    /*加号和减号*/  
.stepper text {      width: 24px;      line-height: 15px;      text-align: center;      float: left;   }    /*数值*/  
.stepper input {      width: 40px;      height: 26px;      float: left;      margin: 0 auto;      text-align: center;      font-size: 12px;      color: #000000;    /*给中间的input设置左右边框即可*/      border-left: 1rpx solid #000000;      border-right: 1rpx solid #000000;   }    /*普通样式*/  
.stepper .normal{      color: black;   }    /*禁用样式*/  
.stepper .disabled{      color: #ccc;   }  
4、detail.wxml样式引用
<import src="../template/template.wxml" />

备注:template是在page目录下

5、detail.js初始化
quantity1: {      
     quantity: 1,      min: 1,      max: 20,      delStatus: 'disabled',      addStatus: 'normal'    },    
isLike: true,    
showDialog: false,

好了,复制上述代码就可以实现效果哦,赶紧试试吧!

更多精彩内容


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

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

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

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

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

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

小程序实战-幸运大转盘

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


关注我们

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




全部评论: 0

    我有话说:

    程序实战-购物

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

    程序实战-商品详情(上)

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

    程序实战-购物(上)

    好久没更新程序实战的文章了,是因为最近一直做整体架构调整,一些准备工作也是比较耗费时间的。在这几天将会有新版的 程序教程推出.......

    程序实战-首页(

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

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

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

    程序实现商品数量加减

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

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

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

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

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

    程序实战-首页(上)

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

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

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

    程序实战-入门篇

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

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

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

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

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

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

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

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

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

    程序-Image的widthFix属性和rpm尺寸的使用

    在做程序商品详情页,商品详情是图片集合,渲染完成后发现图片加载的很不自然

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

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

    程序商城(六):动态API实现新品特卖商品流式布局

    实现新品特卖商品列表布局、调用动态API获取数据并加载和点击商品跳转商品详情

    程序抖音实战-首页(

    抖音程序首页动态数据获取