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

迈不过友情╰ 2022-05-24 02:11 336阅读 0赞

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

![20180518112251208][]

我们继续接着昨天的购物车写，主要把剩下的数量加减 **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模板的时候一定要注意路径不要错了，如下图所示我放置的地方：

![20180518112312419][]

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;    // 商品总数量-1
        if (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][http_blog.100boot.cn]

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

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

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

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

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

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

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

[小程序实战-幸运大转盘][- 6]

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

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

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

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

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

关注我们

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

[http_blog.100boot.cn]: http://blog.100boot.cn/
[20180518112251208]: /images/20220524/5913ceb97ceb414eb10c52883a7063fa.png
[20180518112312419]: /images/20220524/675a57b3ae384e59b62ae6f8c9072f6e.png
[-]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247483670&idx=1&sn=b9d5aba9a9fbc554c73e75fb96baa9c7&chksm=fc4df357cb3a7a41c1dad9b3958559b94ede901977f75bd190c1a31f80521e63762f1c9a0c29&mpshare=1&scene=21&srcid=0328MjVPuaFzLYNUztIrcguF&key=e2f055305b351fc9ec2e28f5b88e7fa86659825200c89a0f765bab65bfc1b99b6608508ca4167aa552d84c30f8f7b5d5874d293059e263a1c5d648019d3032d0047fe8ee8ff5ac9695166e3ff6fdd544&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[- 1]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247483739&idx=1&sn=513983eb9498045fc9596718a346ca89&chksm=fc4df31acb3a7a0ce587d2a1efb5843141db9c0a3cef517cadadeb8ddc7ee87965c68a3f92bb&mpshare=1&scene=21&srcid=0328zMOVse9XdMVg5bIcVC7I&key=e2f055305b351fc97b608d5c03843c1805b3ec5a4e7a2c52dcb8c09c4b25728a6c90eeb5b2f3a76f274c4ffe56a31dcbec0b88ee48a301dee3c28ba47308909905cc4ce2ed141fd1fd1c7aaec6674c19&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[- 2]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247483758&idx=1&sn=dff49ea53dbd16a7f4e4b6ae6d6e0632&chksm=fc4df32fcb3a7a39194f81a9b02a75ce4085027aaf0c4cb928bd51356cb9f573d21626e288de&mpshare=1&scene=21&srcid=03286fHG8MV00HQsP1HjM7LA&key=505f8e205eea7c2154a32806e67b807ac24b0cfb6521db9cb828a4ebcc5a5a0d19beed72d12a3ed2d1ee1fb3b840e8d347cccb3cf93aedcac94185ccc0c525c2f5e6faa1f0140cdd8ef4114f3f3c567b&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[- 3]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247483874&idx=1&sn=dba01d63f4a262c07e110d4e40abdde5&chksm=fc4df3a3cb3a7ab57c85f171095d737a2db974f56aaec6d639b84b5d767cef94248787b7b6d6&mpshare=1&scene=21&srcid=0328p7C4mIHTp22VumVmpUzQ&key=505f8e205eea7c21ade5b4fae43d72fd7a1f64d0ffd73c9080bb5265c25d606f36f3b23a85715fe0f5406780fea08718819d0d98e75f496b26deefb258d64bf0d76007f690261d93949eeb650865c4be&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[- 4]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484276&idx=1&sn=1d5c3e166a2fefd5fb596d24093958d8&chksm=fc4df135cb3a782353a65dde4072c5de4303837577b2827f49bbed8132137894bcc232e37676&mpshare=1&scene=21&srcid=0413r4WFE7Ga0QI33lNxAaBi&key=a26753775bc5a4cc558446a192cedd125fd028a45003c73653de57832e94af26dab25d0c1806fb8ed6151ebd112955de29d204c64f99aba90d5e454cad5bc962ffb0f7ff3aedba819ccf27f03e9b0281&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=OCUECpDe3wAhOPu6kW2De6oWGQgsS1QZ6xXWbN1sKPRcagqnfallu65Uq1v2MsNC#wechat_redirect
[- 5]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484027&idx=1&sn=54a372e6d890b2aadb74a7f6be8e31c0&chksm=fc4df03acb3a792c80423d9b5fc9a39d35927e79f017b05567ba42c75b993d008afa4d8eea78&mpshare=1&scene=21&srcid=0328djLj7vwBSxj8WUuatQaC&key=505f8e205eea7c2128284fd633112e66febce70ade0fb9efc4f602257d413b81a908a95d1a6b529b54918902eb6e0aeda4a5f5e1deb13daf0e172cbaf6beea575e9d93369835b10ebf8f3e397dcd062c&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[wxcharts.js]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484175&idx=1&sn=7afedd9892b5e29b824aaf82a4986309&chksm=fc4df14ecb3a7858707302bc5c764757d85a5e10bd6ab84cd14e55f85410fa677ccd5cbf11b2&mpshare=1&scene=21&srcid=0328fFYTH687PfpQT9Fx5Fzk&key=50484b766617eb01ead846871bd8e696bea4f61708f1f3b9c2fa723c6db2e95fc9e7034d01d2295bdae5beef06b11d561abb39bb3e2f418bb94818b355eba5e886fa5d06ef0f03bbcd357db4d6f5603f&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[- 6]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247483907&idx=1&sn=15750f0ad2c43e1f39d278ccb574e69c&chksm=fc4df042cb3a79549912c1acf1946f27e6e2df4e1565209e1f5bd001b2ef4f43ab56a3332a0e&mpshare=1&scene=21&srcid=0409F13sZCHWhMxxsVNadA0p&key=505f8e205eea7c2106f70fb32919a74a1a81257aed4fe1be8ca8d8e0c571687b8239ff82e3d8e809a487c2cf2a5cd0db57b4ea11a418e69fd0bb357c2349951cd6fca03cf100fe1614139e1103e6395c&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=xATsQx4T2CygyoAw3rXIOQfLMbuSjLl2m235IRGEzZmoXSjKXv6ZYiRkmp2qYN%20o#wechat_redirect
[-Image_widthFix_rpm]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484050&idx=1&sn=cb47932cb4e5c7e76ecb0a06bf980a41&chksm=fc4df0d3cb3a79c544d4b5de4158f172a8ed40a4d88ccd7cd3051f4ed8b2998c60a6dd983491&mpshare=1&scene=21&srcid=0328rKhgcKBHBzwZSQXgdCyO&key=c9369063c8731b82cc93062840543ae058ea2760d12f0cd19e26accf017f3017d9fce9313a3cbd08aa3bef766ad57d45d840f4e23e25550e418fe8b73c30683200045a3597c1c164168e7aa2f0013693&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[Link 1]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484297&idx=1&sn=f4058b62cd422eddb986960c51d98dca&chksm=fc4df1c8cb3a78deaac6d58d0434e9a70fae027647793802f5a78d2238843351fc5ea955d02a&mpshare=1&scene=21&srcid=0503y4ZkeSJaTiSj77WnZg1M&key=b67b626bde1fc6dee989bd97dda04724b4ac5e4cfd4a5916465ff5950fe4bea3d1ad6f00eea5bdd8f859a37c1c0dff78b751d6845a56a15de72168bae1384e40933c99d6e5a5b922470fa6d53e63ac70&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BBwAoQ210abmQls8Q0LgORJO9tAuXmpSkXF5uTnOdLhGkHmTND2c0AwSQEg5ZwDg#wechat_redirect
[Link 2]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484389&idx=1&sn=a752172ac1296b0ce8da697378fc7a62&chksm=fc4df1a4cb3a78b2bdd06253e7d90194d4afe87c7038a2daeffaa3998d78f73dca84e0f526d5&mpshare=1&scene=21&srcid=0517Qb5aka0d8eOWyDH1wA4J&key=d8d14ad212b4b61012f481dd842cfc22cc10c6cd52c343e596f25bead9550a4008000381528693db0c6eb4ef7f07748ca1888694e15a21ef629c9d06897a57496ecdfcbcb08bf8549d7eddf66f0e00e7&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=YXwItrGJPOvR%20JPMEFARZqY7Fa0VL1I04zJLMZjGORmd2V5iHKnixxYiG/NG4A5X#wechat_redirect
[- 7]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484453&idx=1&sn=0748aecfb01bb78334cb96e6035536ae&chksm=fc4df664cb3a7f726e67e423ef3627d8a0a210f09995979166eb8036fda4092acba944d95657&scene=21&key=5db3fb3886cb3943f77da0cb4fbb7c759e23da8cd63fe2930b0fa9bf3af1d7c52417bc040ef3d32cea07b9535ea7ed19be60ca2f0e3be8b30fde2cd062e80abe8f81b36f3ae977389ae1b27180fa6ce6&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=sLamrfmySwf16Fp4jsVEusYm4V/%20M29JHNT%20/RdeNOG8QRKXhQa2tPFxvlQtkM9m#wechat_redirect