龙空技术网

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

程序员前沿 141

前言:

如今小伙伴们对“js购物车效果”都比较关怀,咱们都想要剖析一些“js购物车效果”的相关资讯。那么小编在网上收集了一些关于“js购物车效果””的相关内容,希望各位老铁们能喜欢,兄弟们一起来学习一下吧!

上一篇:小程序电商实战-商品详情(上)

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

实现效果

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

detail.js

//预览图片 previewImage: (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=""></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绘制移动报表

小程序实战-幸运大转盘

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

关注我们

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

标签: #js购物车效果 #showdialogjs #购物车数量加减按钮