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

微信小程序（五）购物车_微信小程序购物车

作者：AllinToyou | 2024-05-01 04:59:53

赞

踩

微信小程序购物车

shoppingcart.wxml

  1. <!--pages/shoppingcart/shoppingcart.wxml-->
  2. <view class="content">
  3.     <view class="info">
  4.     <view class="line"></view>
  5.     <view class="receive">
  6.     购物
  7.     </view>
  8.     <view class="line"></view>
  9.     <view class="items">
  10.     <checkbox-group bindchange="checkboxChange">
  11.     <block wx:for="{{orders}}">
  12.     <view class="item">
  13.         <view class="icon">
  14.         <label for="{{item.id}}">
  15.         <checkbox id="{{item.id}}" value="{{item.id}}" checked=
  16.         "{{item.selected}}" hidden/>
  17.         <icon type="{{item.selected==true?'success':'circle'}}"
  18.         color="#E4393C" data-value="{{item.id}}" size="20" />
  19.         </label>
  20.         </view>
  21.         <view class="pic">
  22.         <image src="{{item.pic}}" style="width:80px;height:80px;">
  23.         </image>
  24.         </view>
  25.         <view class="order">
  26.         <view class="title">{{item.name}}</view>
  27.         <view class="desc">
  28.         <view>数量: {{item.quantity}}</view>
  29.         </view>
  30.         <view class="priceInfo">
  31.         <view class="price">￥{{item.nowPrice}}</view>
  32.         <view class="minus" id="{{item.id}}" bindtap="minusOrders">-</view>
  33.         <view class="count">{{item.quantity}}</view>
  34.         <view class="add" id="{{item.id}}" bindtap="addOrders">+
  35.         </view>
  36.         </view>
  37.         </view>
  38.         </view>
  39.         <view class="line"></view>
  40.         </block>
  41.         </checkbox-group>
  42.         <checkbox-group bindchange="checkAll">
  43.         <view class="totalInfo">
  44.         <view class="all">
  45.         <view>
  46.         <label for="boxAll">
  47.         <checkbox checked="{{selectedAll}}" id="boxAll" hidden/>
  48.         <icon type="{{selectedAll==true?'success':'circle'}}"
  49.         color="#E4393C" data-value="{{item.id}}" size="20" />
  50.         </label>
  51.     </view>
  52.     <view>
  53.     全选
  54.     </view>
  55.     </view>
  56.     <view class="amount">
  57.     <view class="total">
  58.     总计:￥{{totalPrice}}元
  59.     </view>
  60.     <view>
  61.     不含运费，已优惠￥0.00
  62.     </view>
  63.     </view>
  64.     <view class="opr">去结算</view>
  65.     </view>
  66.     </checkbox-group>
  67.     </view>
  68.     </view>
  69.     </view>

shoppingcart.js

  1. // pages/shoppingcart/shoppingcart.js
  2. Page({
  3.     data:{
  4.         orders: [], //加人到购物车里的商品集合
  5.         selectedAll:false, //全选按钮标志位，true 代表全选选中，false代表全选未选中
  6.         totalPrice:0 //总金额
  7.         
  8.     },
  9.     onLoad:function (options) {
  10.         this.loadOrders();
  11.         wx.setNavigationBarTitle({ //动态修改页面标题文字
  12.             title: '购物车'
  13.         })
  14.         wx.setNavigationBarColor({
  15.             frontColor: '#000000', //导航文字颜色
  16.             backgroundColor: '#ffffff', //导航背景色
  17.             animation: { //动画效果
  18.                 duration: 400,
  19.                 timingFunc: 'easeIn'
  20.             }
  21.         })
  22.     },
  23.     loadOrders:function () { //加载购物车里的商品
  24.         var orders = wx.getStorageSync('orders'); //从本地级存数据orders里获取数据
  25.         var newOrders = [];
  26.         var totalPrice = 0;
  27.         var selectedAll = true;
  28.         for (var i = 0; i < orders.length; i++) {
  29.             var order = orders[i];
  30.             if (order.selected) { //购物车里的每件商品都有一个selected属性，selected等于true时代表这件商品被选中，要计算金额
  31.                 totalPrice += order.nowPrice * order.quantity; //计算选中商品的金额
  32.             } else {
  33.                 selectedAll = false; //购物车里的商品，如果有一一件是未选中的，selectedAll全选标志位就等于false
  34.             }
  35.             newOrders.push(order);
  36.         }
  37.         wx.setStorageSync("orders", newOrders); //重新加入缓存
  38.         this.setData({totalPrice:totalPrice,orders:newOrders,selectedAll: selectedAll});//数据绑定到页面里
  39.     },
  40.     checkboxChange: function (e) { //每件商品前的复选框操作函数
  41.         var ids = e.detail.value; //会把选中的复选框的id值，以数组集合的形式传递过来
  42.         var orders = wx.getStorageSync('orders');
  43.         var totalPrice = 0;
  44.         var newOrders = [];
  45.         for (var i = 0; i < orders.length; i++) {
  46.             var order = orders[i];
  47.             var flag = true;
  48.             for (var j = 0; j < ids.length; j++) {
  49.                 if (order.id == ids[j]) { //传递过来的ids数组集合值，都是选中的 商品，需要计算总的金额
  50.                     totalPrice += order.nowPrice * order.quantity;
  51.                     order.selected = true; //代表该商 品是选中状态
  52.                     flag = false; //代表该商品是选中状态
  53.                 }
  54.             }
  55.             if (flag) { //代表该商品是未选中状态
  56.  
  57.                 order.selected = false;
  58.             }
  59.             newOrders.push(order);
  60.         }
  61.         wx.setStorageSync("orders", newOrders); //重新加人缓存数据
  62.         this.loadOrders();//重新加载页面
  63.     }, 
  64.     checkAll: function (e) { //全选复选框操作函数
  65.         var orders = wx.getStorageSync("orders");
  66.         console.log(e);
  67.         var newOrders = [];
  68.         var selectedAll = this.data.selectedAll;
  69.         for (var i = 0; i < orders.length; i++) {
  70.             var order = orders[i];
  71.             if (selectedAll) { //如果当前状态值是全选中， 那么再单击的时候，全选复选框应该为未选中状态
  72.                 order.selected = false;
  73.             } else {
  74.                 order.selected = true;
  75.             }
  76.             newOrders.push(order);
  77.         }
  78.         wx.setStorageSync("orders", newOrders) //重新加入缓存数据
  79.         this.loadOrders(); //重新加载页面
  80.     },
  81.     addOrders: function (e) { //添加商品数量 函数
  82.         var id = e.currentTarget.id;
  83.         var orders = wx.getStorageSync('orders');
  84.         var addOrders = new Array();
  85.         for (var i = 0; i < orders.length; i++) {
  86.             var order = orders[i];
  87.             if (order.id == id) {
  88.                 var quantity = order.quantity;
  89.                 order.quantity = quantity + 1; //将该件商品数量加1
  90.             }
  91.             addOrders[i] = order;
  92.         }
  93.         wx.setStorageSync('orders', addOrders); //重新加人缓存数据
  94.         this.loadOrders(); //重新加载页面
  95.     },
  96.  
  97.     minusOrders: function (e) { //减少商品数量函数
  98.         console.log(e);
  99.         var id = e.currentTarget.id;
  100.         var orders = wx.getStorageSync('orders');
  101.         var addOrders = new Array();
  102.         var add = true;
  103.         for (var i = 0; i < orders.length; i++) {
  104.             var order = orders[i];
  105.             if (order.id == id) {
  106.                 var count = order.quantity;
  107.                 if (count >= 2) {
  108.                     order.quantity = count - 1; //将该件商 品数量减1
  109.                 }
  110.             }
  111.             addOrders[i] = order;
  112.         }
  113.         wx.setStorageSync('orders', addOrders); //重新加人缓存数据
  114.         this.loadOrders(); //重新加载页面
  115.     }
  116.     
  117.  
  118. })

shoppingcart.wxss

  1. /* pages/shoppingcart/shoppingcart.wxss */
  2. .content {
  3.     font-family: "Microsoft YaHei";
  4.     height: 600px;
  5.     background-color: #F9F9F8;
  6. }
  7.  
  8. .info {
  9.     background-color: #ffffff;
  10. }
  11.  
  12. .line {
  13.     border: 1px solid #CCCCCC;
  14.     opacity: 0.2;
  15. }
  16.  
  17. .receive {
  18.     display: flex;
  19.     flex-direction: row;
  20.     padding: 10px;
  21. }
  22.  
  23. .item {
  24.     display: flex;
  25.     flex-direction: row;
  26.     padding: 10px;
  27.     align-items: center;
  28. }
  29.  
  30. .order {
  31.     width: 100%;
  32.     height: 87px;
  33. }
  34.  
  35. .title {
  36.     font-size: 15px;
  37. }
  38.  
  39. .desc {
  40.     display: flex;
  41.     flex-direction: row;
  42.     font-size: 13px;
  43.     color: #cccccc;
  44. }
  45.  
  46. .desc view {
  47.     margin-right: 10px;
  48. }
  49.  
  50. .priceInfo {
  51.     display: flex;
  52.     flex-direction: row;
  53.     margin-top: 10px;
  54. }
  55.  
  56. .price {
  57.     width: 65%;
  58.     font-size: 15px;
  59.     color: #ff0000;
  60.     text-align: left;
  61. }
  62.  
  63. .minus,
  64. .add {
  65.     border: 1px solid #cccccC;
  66.     width: 25px;
  67.     text-align: center;
  68. }
  69.  
  70. .count {
  71.     border-top: 1px solid #cccccc;
  72.     border-bottom: 1px solid #cCCCCC;
  73.     width: 40px;
  74.     text-align: center;
  75. }
  76.  
  77. .totalInfo {
  78.     display: flex;
  79.     flex-direction: row;
  80.     height: 60px;
  81. }
  82.  
  83. .all {
  84.     align-items: center;
  85.     Padding-left: 10px;
  86.     width: 20%;
  87.     font-size: 12px;
  88.     margin-top: 10px;
  89. }
  90.  
  91. .amount {
  92.     width: 50%;
  93.     font-size: 13px;
  94.     text-align: right;
  95. }
  96.  
  97. .total {
  98.     font-size: 16px;
  99.     color: #ff0000;
  100.     font-weight: bold;
  101.     margin-bottom: 10px;
  102. }
  103.  
  104. .opr {
  105.     position: absolute;
  106.     right: 0px;
  107.     width: 92px;
  108.     font-size: 15px;
  109.     font-weight: bold;
  110.     background-color: #E4393C;
  111.     height: 60px;
  112.     text-align: center;
  113.     line-height: 60px;
  114.     color: #ffffff;
  115. }
  116.  
  117. .icon {
  118.     margin-right: 10px;
  119. }

效果图

 

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

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

  

闽ICP备14008679号