devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序实战篇-购物车_购物车小程序模板

作者：知新_RL | 2024-05-01 05:06:16

赞

踩

购物车小程序模板

先上效果图

        

cart.wxml 

  1. <import src="/template/quantity/index.wxml" />
  2. <scroll-view class="scroll" scroll-y="true">
  3.   <view class="separate"></view>
  4.   <view wx:for="{{carts}}">
  5.     <view class="cart_container">
  6.       <image class="item-select" bindtap="switchSelect" data-index="{{index}}" data-id="{{index}}" src="{{item.isSelect?'../../images/cart/comment_select.png':'../../images/cart/comment_normal.png'}}" />
  7.  
  8.       <image class="item-image" src="{{item.pic}}"></image>
  9.  
  10.       <view class="column">
  11.         <text class="title">{{item.name}}</text>
  12.         <view class="row">
  13.           <text class="sku-price">￥</text>
  14.           <text class="sku-price">{{item.price}}</text>
  15.           <view class="sku">
  16.             <template is="quantity" data="{{ ...item.count, componentId: index }}" />
  17.           </view>
  18.         </view>
  19.  
  20.       </view>
  21.     </view>
  22.     <view class="separate"></view>
  23.   </view>
  24. </scroll-view>
  25. <view class="bottom_total">
  26.   <view class="bottom_line"></view>
  27.  
  28.   <view class="row">
  29.     <image class="item-allselect" bindtap="allSelect" src="{{isAllSelect?'../../images/cart/comment_select.png':'../../images/cart/comment_normal.png'}}" />
  30.     <text class="small_text">全选</text>
  31.     <text>合计:￥ </text>
  32.     <text class="price">{{totalMoney}}</text>
  33.     <button class="button-red" bindtap="toBuy" formType="submit">去结算</button>
  34.   </view>
  35. </view>

 布局不是很复杂，一个循环列表，循环出购物车商品，外加一个结算的底部控件，还需要提醒的是，循环列表外面要加一层scroll-view，这样当数据很多是时候，可以滚动，不熟悉scroll-view的，请自行翻看前面几篇文章，里面有讲解

cat.wxss 

  1. /* pages/cart/cart.wxss */
  2. .cart_container {
  3.   display: flex;
  4.   flex-direction: row;
  5. }
  6. .scroll {
  7.   margin-bottom: 120rpx;
  8. }
  9. .column {
  10.   display: flex;
  11.   flex-direction: column;
  12. }
  13. .row {
  14.   display: flex;
  15.   flex-direction: row;
  16.   align-items: center;
  17. }
  18. .sku {
  19.   margin-top: 60rpx;
  20.   margin-left: 100rpx;
  21. }
  22. .sku-price {
  23.   color: red;
  24.   position: relative;
  25.   margin-top: 70rpx;
  26. }
  27. .price {
  28.   color: red;
  29.   position: relative;
  30. }
  31. .title {
  32.   font-size: 38rpx;
  33.   margin-top: 40rpx;
  34. }
  35. .small_text {
  36.   font-size: 28rpx;
  37.   margin-right: 40rpx;
  38.   margin-left: 10rpx;
  39. }
  40. .item-select {
  41.   width: 40rpx;
  42.   height: 40rpx;
  43.   margin-top: 90rpx;
  44.   margin-left: 20rpx;
  45. }
  46. .item-allselect {
  47.   width: 40rpx;
  48.   height: 40rpx;
  49.   margin-left: 20rpx;
  50. }
  51. .item-image {
  52.   width: 180rpx;
  53.   height: 180rpx;
  54.   margin: 20rpx;
  55. }
  56. .bottom_line {
  57.   width: 100%;
  58.   height: 2rpx;
  59.   background: lightgray;
  60. }
  61. .bottom_total {
  62.   position: fixed;
  63.   display: flex;
  64.   flex-direction: column;
  65.   bottom: 0;
  66.   width: 100%;
  67.   height: 120rpx;
  68.   line-height: 120rpx;
  69.   background: white;
  70. }
  71. .button-red {
  72.   background-color: #f44336; /* 红色 */
  73. }
  74. button {
  75.   position: fixed;
  76.   right: 0;
  77.   color: white;
  78.   text-align: center;
  79.   display: inline-block;
  80.   font-size: 30rpx;
  81.   border-radius: 0rpx;
  82.   width: 30%;
  83.   height: 120rpx;
  84.   line-height: 120rpx;
  85. }

 wxss样式没什么可说的，了解其属性，调用class就好，重点说一下cart.js,全篇的逻辑都在这里面

 cart.js 

  1. // pages/cart/cart.js
  2. var Temp = require('../../template/contract.js');
  3. Page(Object.assign({}, Temp.Quantity, {
  4.   data: {
  5.     isAllSelect:false,
  6.     totalMoney:0,
  7.     // 商品详情介绍
  8.     carts: [
  9.       {
  10.         pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148058328876.jpg",
  11.         name:"日本资生堂洗颜",
  12.         price:200,
  13.         isSelect:false,
  14.         // 数据设定
  15.         count: {
  16.           quantity: 2,
  17.           min: 1,
  18.           max: 20
  19.         },
  20.       },
  21.       {
  22.         pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058301941.jpg',
  23.         name: "倩碧焕妍活力精华露",
  24.         price: 340,
  25.         isSelect: false,
  26.         // 数据设定
  27.         count: {
  28.           quantity: 1,
  29.           min: 1,
  30.           max: 20
  31.         },
  32.       },
  33.       {
  34.         pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
  35.         name: "特效润肤露",
  36.         price: 390,
  37.         isSelect: false,
  38.         // 数据设定
  39.         count: {
  40.           quantity: 3,
  41.           min: 1,
  42.           max: 20
  43.         },
  44.       },
  45.       {
  46.         pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058228431.jpg',
  47.         name: "倩碧水嫩保湿精华面霜",
  48.         price: 490,
  49.         isSelect: false,
  50.         // 数据设定
  51.         count: {
  52.           quantity: 1,
  53.           min: 1,
  54.           max: 20
  55.         },
  56.       },
  57.       {
  58.         pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',
  59.         name: "兰蔻清莹柔肤爽肤水",
  60.         price: 289,
  61.         isSelect: false,
  62.         // 数据设定
  63.         count: {
  64.           quantity: 10,
  65.           min: 1,
  66.           max: 20
  67.         },
  68.       },
  69.       {
  70.         pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148057921620_middle.jpg",
  71.         name: "LANCOME兰蔻小黑瓶精华",
  72.         price: 230,
  73.         isSelect: false,
  74.         // 数据设定
  75.         count: {
  76.           quantity: 1,
  77.           min: 1,
  78.           max: 20
  79.         },
  80.       },
  81.     ],
  82.   },
  83.  
  84.   //勾选事件处理函数  
  85.   switchSelect: function (e) {
  86.     // 获取item项的id，和数组的下标值  
  87.     var Allprice = 0,i=0;
  88.     let id = e.target.dataset.id,
  89.   
  90.     index = parseInt(e.target.dataset.index);
  91.     this.data.carts[index].isSelect = !this.data.carts[index].isSelect;
  92.     //价钱统计
  93.     if (this.data.carts[index].isSelect) {
  94.       this.data.totalMoney = this.data.totalMoney + this.data.carts[index].price;
  95.     }
  96.     else {
  97.       this.data.totalMoney = this.data.totalMoney - this.data.carts[index].price;
  98.     }
  99.    //是否全选判断
  100.     for (i = 0; i < this.data.carts.length; i++) {
  101.       Allprice = Allprice + this.data.carts[i].price;
  102.     }
  103.     if (Allprice == this.data.totalMoney)
  104.     {
  105.       this.data.isAllSelect=true;
  106.     }
  107.     else 
  108.     {
  109.       this.data.isAllSelect = false;
  110.     }
  111.     this.setData({
  112.       carts: this.data.carts,
  113.       totalMoney: this.data.totalMoney,
  114.       isAllSelect: this.data.isAllSelect,
  115.     })
  116.   },
  117.   //全选
  118.   allSelect: function (e) {
  119.     //处理全选逻辑
  120.     let i = 0;
  121.     if (!this.data.isAllSelect)
  122.     {
  123.       for (i = 0; i < this.data.carts.length; i++) {
  124.         this.data.carts[i].isSelect = true;
  125.         this.data.totalMoney = this.data.totalMoney + this.data.carts[i].price;
  126.       }
  127.     }
  128.     else
  129.     {
  130.       for (i = 0; i < this.data.carts.length; i++) {
  131.         this.data.carts[i].isSelect = false;
  132.       }
  133.       this.data.totalMoney=0;
  134.     }
  135.     this.setData({
  136.       carts: this.data.carts,
  137.       isAllSelect: !this.data.isAllSelect,
  138.       totalMoney: this.data.totalMoney,
  139.     })
  140.   },
  141.   // 去结算
  142.   toBuy() {
  143.     wx.showToast({
  144.       title: '去结算',
  145.       icon: 'success',
  146.       duration: 3000
  147.     });
  148.     this.setData({
  149.       showDialog: !this.data.showDialog
  150.     });
  151.   },
  152.   //数量变化处理
  153.   handleQuantityChange(e) {
  154.     var componentId = e.componentId;
  155.     var quantity = e.quantity;
  156.     this.data.carts[componentId].count.quantity = quantity;
  157.     this.setData({
  158.       carts: this.data.carts,
  159.     });
  160.   }
  161. }));

介绍一下用到的参数

  • isAllSelect：是否全选
  • totalMoney：总金额
  • carts ：购物车商品数据

switchSelect 勾选按钮需要做的逻辑处理

  • 判断是否达到全部勾选，如果全部勾选，底部的全选按钮要点亮，判断依据是，价钱是否等于总价，当然这只是一种判断方式，读者也可以通过勾选的数量判断，
  • 对勾选或取消的按钮，进行总价的加减法计算
  • this.setData，更新数据，这个是重点，每次处理完数据，都要记得更新数据

allSelect 全选按钮的逻辑处理

  • 全选就把每个item勾选图标点亮，然后统计总价钱，不全选就置为灰色，总价钱为0
  • this.setData更新数据

    微信小程序数据处理

一、修改数据方式 

1. this.data.name 

2. this.setData 

这两种方式都可以改变数据，this.setData的好处是可以有刷新的效果，即实时更新数据 

二、修改对象数组 

1. 修改全部对象 

2. 修改部分数据 

三、添加删除数据 

1. 添加数据concat 

  1. //假设这一段是我们要新增的数组
  2. var newarray = [{
  3.         name:'增加的数据--'+new Date().getTime() ,
  4. }];
  5. //向前--用newarray与this.data.list合拼
  6. this.data.list = newarray.concat(this.data.list);
  7. //向后--用this.data.list与newarray合拼
  8. this.data.list = this.data.list.concat(newarray);

 2. 删除数据**splice()**删除数据，然后返回被删除的数据

  1. //删除
  2.   remove:function (e){
  3.     var dataset = e.target.dataset;
  4.     var Index = dataset.index;
  5.     //通过index识别要删除第几条数据，第二个数据为要删除的项目数量，通常为1
  6.     this.data.list.splice(Index,1);
  7.     //渲染数据
  8.     this.setData({
  9.         list:this.data.list
  10.     });
  11.   }

 3. 清空数据

  1. //清空
  2.   clear:function (){
  3.     //其实就是让数组变成一个空数组即可
  4.       this.setData({
  5.           list:{}
  6.       });
  7.   }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/517155
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号