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

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

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

template模板

如果拿购物车（上）来做应该会报错的因为引用不到 template模板，接下来我们来实现！

template.wxml

<template name="quantity"><!-- 主容器 -->  <view class="stepper">  <!-- 减号 -->  <text class="{{count <= 1 ? 'disabled' : 'normal'}}" bindtap="delCount" data-index="{{index}}">-</text>  <!-- 数值 -->  <input type="number" bindchange="bindManual" value="{{count}}"  disabled="disabled"/>  <!-- 加号 -->  <text class="{{count >= 10 ? 'disabled' : 'normal'}}" bindtap="addCount" data-index="{{index}}">+</text>  </view>  </template>

template.wxss

/*主容器*/  .stepper {  width:90px;  height: 26px;  /*给主容器设一个边框*/  border: 1rpx solid #000000;  border-radius: 3px;  margin:0 auto;
}  /*加号和减号*/  .stepper text {  width: 24px;  line-height: 26px;  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;
}

备注

在这里要特别强调一下在引用template模板的时候一定要注意路径不要错了，如下图所示我放置的地方：

cart.js

勾选事件

  //勾选事件处理函数  switchSelect: function (e) {    // 获取item项的id，和数组的下标值  var Allprice = 0, i = 0;    let id = e.target.dataset.id,index = parseInt(e.target.dataset.index);    this.data.carts[index].isSelect = !this.data.carts[index].isSelect;    //价钱统计if (this.data.carts[index].isSelect) {      this.data.totalMoney = this.data.totalMoney + (this.data.carts[index].price * this.data.carts[index].count);}    else {      this.data.totalMoney = this.data.totalMoney - (this.data.carts[index].price * this.data.carts[index].count);}    //是否全选判断for (i = 0; i < this.data.carts.length; i++) {Allprice = Allprice + (this.data.carts[index].price * this.data.carts[index].count);}    if (Allprice == this.data.totalMoney) {      this.data.isAllSelect = true;}    else {      this.data.isAllSelect = false;}    this.setData({      carts: this.data.carts,      totalMoney: this.data.totalMoney,      isAllSelect: this.data.isAllSelect,})},

全选时间

//全选allSelect: function (e) {    //处理全选逻辑let i = 0;    if (!this.data.isAllSelect) {      this.data.totalMoney = 0;      for (i = 0; i < this.data.carts.length; i++) {        this.data.carts[i].isSelect = true;        this.data.totalMoney = this.data.totalMoney + (this.data.carts[i].price * this.data.carts[i].count);}}    else {      for (i = 0; i < this.data.carts.length; i++) {        this.data.carts[i].isSelect = false;}      this.data.totalMoney = 0;}    this.setData({      carts: this.data.carts,      isAllSelect: !this.data.isAllSelect,      totalMoney: this.data.totalMoney,})},

结算

toBuy() {wx.showToast({title: '去结算',icon: 'success',duration: 3000});    this.setData({showDialog: !this.data.showDialog});},

减数量

/* 减数 */delCount: function (e) {    var index = e.target.dataset.index;    console.log("刚刚您点击了加一");    var count = this.data.carts[index].count;    // 商品总数量-1if (count > 1) {      this.data.carts[index].count--;}    // 将数值与状态写回  this.setData({      carts: this.data.carts});    console.log("carts:" + this.data.carts);    this.priceCount();},

加数

/* 加数 */addCount: function (e) {    var index = e.target.dataset.index;    console.log("刚刚您点击了加+");    var count = this.data.carts[index].count;    // 商品总数量+1  if (count < 10) {      this.data.carts[index].count++;}    // 将数值与状态写回  this.setData({      carts: this.data.carts});    console.log("carts:" + this.data.carts);    this.priceCount();},

价格计算

priceCount: function (e) {    this.data.totalMoney = 0;    for (var i = 0; i < this.data.carts.length; i++) {      if (this.data.carts[i].isSelect == true) {        this.data.totalMoney = this.data.totalMoney + (this.data.carts[i].price * this.data.carts[i].count);}}    this.setData({      totalMoney: this.data.totalMoney,})}

更多精彩内容

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

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

微信小程序电商实战-首页（上）

微信小程序电商实战-首页（下）

微信小程序电商实战-商品详情（上）

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

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

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

小程序实战-幸运大转盘

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

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

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

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

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

关注我们

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

微信小程序电商实战-购物车（下）相关推荐

微信小程序电商实战-入门篇
IT实战联盟博客:http://blog.100boot.cn 小程序开发工具有新版本更新啦!开发体验更好了,详情可以查看微信公众平台-小程序https://mp.weixin.qq.com/debu ...
微信小程序电商实战-首页（上）
IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序电商实战-入门篇嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯 ...
微信小程序电商实战—环境搭建篇
本篇文章已同步发布于个人博客 https://qiucode.cn/article/90 可体验秋码淘好货微信小程序哦! 1.开发工具下载可到微信公众号-小程序下载 https://mp.we ...
视频教程-微信小程序电商实战-PHP
微信小程序电商实战多年一线互联网开发实战以及培训经验,对php开发,linux运维架构有丰富的经验,善于分析问题,解决问题. lampol ¥117.00 立即订阅扫码下载「CSDN程序员学院AP ...
微信小程序电商实战-商品列表流式布局
微信小程序电商实战-商品列表流式布局流式布局概念流式布局也叫百分比布局把元素的宽,高,margin,padding不再用固定数值,改用百分比, 这样元素的宽,高,margin,padding会根 ...
微信小程序电商实战项目
项目地址:https://github.com/sirfuao/wx-shop 如果觉得对您有用,不忘记了给个 star 顺便附上 vue电商实战项目的地址:https://blog.csdn.net ...
微信原生小程序电商实战项目----附源码和分析
项目地址:https://github.com/li1164267803/wechat-test-shopping 如果觉得对您有用,不忘记了给个 star 最近公司准备做小程序的项目,技术选型定为使 ...
微信小程序电商项目开发实战漫谈
原创文章,若转载请于明显处标明出处和相关链接:https://www.toutiao.com/i6567868839856439822/,否则追究其法律责任! 2018年小程序内容电商风口已成,如果我 ...
微信小程序电商项目商品详情页开发实战之数据绑定与事件应用
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
微信小程序电商项目实战-前言
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...

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

微信小程序电商实战-购物车（下）相关推荐

最新文章

热门文章