100字范文 > 微信小程序功能：全选和反选--修改商品数量删除商品--计算总价格和总数量--收货地址

微信小程序功能：全选和反选--修改商品数量删除商品--计算总价格和总数量--收货地址

时间：2024-04-11 08:14:26

微信小程序–购物车页面（核心）

包含功能点：
全选和反选计算：总价格和总数量修改商品数量、删除商品收货地址

结构：cart.wxml

<view class="receive_address_row"><view class="address_btn" wx:if="{{!address.userName}}"><button type="primary" plain="{{true}}" bindtap="handleChooseAddress">获取收货地址</button></view><view wx:else class="user_info_row"><view class="user_info"><view>{{address.userName}}</view><view>{{address.all}}</view></view><view class="user_phone">{{address.telNumber}}</view></view></view><view class="cart_content"><view class="cart_title">购物车</view><view class="cart_main"><block wx:if="{{cart.length!==0}}"><view class="cart_item" wx:for="{{cart}}" wx:key="goods_id"><view class="cart_chk_wrap"><checkbox-group bindchange="handleItemChange" data-id="{{item.goods_id}}"><checkbox checked="{{item.checked}}"></checkbox></checkbox-group></view><navigator class="cart_img_wrap"><image class="" src="{{item.goods_small_logo}}" mode="widthFix" /></navigator><view class="cart_info_wrap"><view class="goods_name">{{item.goods_name}}</view><view class="goods_price_wrap"><view class="goods_price">{{item.goods_price}}</view><view class="cart_num_tool"><view class="num_edit" bindtap="handleItemNumEdit" data-operation="{{-1}}" data-id="{{item.goods_id}}">-</view><view class="goods_num">{{item.num}}</view><view class="num_edit" bindtap="handleItemNumEdit" data-operation="{{1}}" data-id="{{item.goods_id}}">+</view></view></view></view></view></block><block wx:else><image src="/smartstatic/views/layout/img/empty_1bdbf37.png" mode="widthFix" style="width: 80%"/></block></view></view><view class="footer_tool"><view class="all_chk_wrap"><checkbox-group bindchange="handleItemAllChecked"><checkbox checked="{{allChecked}}">全选</checkbox></checkbox-group></view><view class="total_price_wrap"><view class="total_price">合计：<text class="total_price_text">￥{{totalPrice}}</text></view><view>包含运费</view></view><view class="order_pay_wrap" bindtap="handlePay">结算({{totalNum}})</view></view>

样式：cart.less

page {padding-bottom: 90rpx;}// 收货地址.receive_address_row {.address_btn {padding: 20rpx;button {margin: auto;width: 60%;}}// 收货地址.user_info_row {display: flex;padding: 20rpx;.user_info {flex: 5;}.user_phone {flex: 3;text-align: right;}}}// 购物车内容.cart_content {.cart_title {padding: 20rpx;font-size: 36rpx;color: var(--themeColor);border-top: 1rpx solid currentColor;border-bottom: 1rpx solid currentColor;}.cart_main {text-align: center;.cart_item {display: flex;padding: 10rpx;border-bottom: 1rpx solid #ccc;.cart_chk_wrap {flex: 1;display: flex;justify-content: center;align-items: center;checkbox-group {checkbox {}}}.cart_img_wrap {flex: 2;display: flex;justify-content: center;align-items: center;image {width: 80%;}}.cart_info_wrap {flex: 4;display: flex;flex-direction: column;justify-content: space-around;.goods_name {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;color: #666;}.goods_price_wrap {display: flex;justify-content: space-between;.goods_price {color: var(--themeColor);font-size: 34rpx;}.cart_num_tool {display: flex;.num_edit {width: 55rpx;height: 55rpx;display: flex;justify-content: center;align-items: center;border: 1rpx solid #ccc;}.goods_num {width: 55rpx;height: 55rpx;display: flex;justify-content: center;align-items: center;}}}}}}}// 底部工具栏.footer_tool {position: fixed;left: 0;bottom: 0;width: 100%;height: 90rpx;background-color: #fff;display: flex;border-top: 1rpx solid #ccc;.all_chk_wrap {flex: 2;display: flex;justify-content: center;align-items: center;}.total_price_wrap {flex: 5;padding-right: 15rpx;text-align: right;.total_price {text.total_price_text {color: var(--themeColor);font-size: 34rpx;font-weight: 600;}}}.order_pay_wrap {flex: 3;background-color: var(--themeColor);color: #fff;font-size: 32rpx;font-weight: 600;display: flex;justify-content: center;align-items: center;}}

逻辑：cart.js文件

// pages/cart/cart.jsimport {getSetting, chooseAddress, openSetting, showModal, showToast } from "../../utils/asyncWx.js"Page({/*** 页面的初始数据*/data: {// 收货地址address: {},// 购物车数组cart: [],// 全选状态allChecked: false,// 总价格totalPrice: 0,// 总数量totalNum: 0},// 点击收货地址handleChooseAddress() {try {// 1.获取权限状态getSetting().then(res1 => {const scopeAddress = res1.authSetting["scope.address"];// 2.判断权限状态if (scopeAddress === false) {// 3.用户以前拒绝过授予权限先诱导用户打开授权页面openSetting();}// 4.调用获取收货地址apichooseAddress().then(address => {// 完整收货地址address.all = address.provinceName + address.cityName + address.countyName + address.detailInfo;// 5.存入缓存中wx.setStorageSync("address", address);});});} catch (error) {console.log(error)}},/*** 商品的选中* 1. 绑定change事件* 2. 获取到被修改的商品对象* 3. 商品对象的选中状态取反* 4. 重新填充回data中和缓存中* 5. 重新计算全选、总价格、总数量...* @param {*} e */handleItemChange(e) {// 1.获取被修改的商品的idconst goods_id = e.currentTarget.dataset.id;// 2.获取购物车数组const {cart } = this.data;// 3.找到被修改的商品对象let index = cart.findIndex(v => v.goods_id === goods_id);// 4.选中状态取反cart[index].checked = !cart[index].checked;// 5 6 设置购物车状态同时：重新计算底部工具栏的数据全选总价格购买的数量this.setCart(cart)},/*** 计算全选：* 1. onShow 获取缓存中的购物车数组* 2. 根据购物车中的商品数据所有的商品都被选中 checked = true 全选就被选中** every 数组方法：会遍历会接收一个回调函数那么每一个回调函数都返回true 那么 every方法的返回值为true* 只要有一个回调函数返回了false 那么不再循环执行，直接返回false* 注意：空数组调用every方法，返回值就是true* const allChecked = cart.length ? cart.every(v => v.checked) : false;* * 计算：总价格总数量* 1. 需要商品被选中，我们才拿它计算* 2. 获取购物车数组* 3. 遍历* 4. 判断商品是否被选中* 5. 总价格 += 商品的单价 * 商品的数量* 6. 总数量 += 商品的数量* 7. 把计算后的价格和数量设置回data中即可。* 为提高性能：只需要一次for循环就可以了，将allChecked逻辑写进去！！！*/// 设置购物车状态同时：重新计算底部工具栏的数据全选总价格购买的数量setCart(cart) {// 1. 初始化全选状态let allChecked = true;// 2. 总价格和总数量let totalPrice = 0;let totalNum = 0;cart.forEach(v => {if (v.checked) {totalPrice += v.num * v.goods_price;totalNum += v.num;} else {allChecked = false;}})// 3. 判断数组是否为空allChecked = cart.length != 0 ? allChecked : false;// 4. 给data赋值this.setData({cart,allChecked,totalPrice,totalNum})// 5. 将cart存储在缓存中wx.setStorageSync("cart", cart);},/*** 商品全选功能* 1. 全选复选框绑定事件 change* 2. 获取 data中的全选变量 allChecked* 3. 直接取反 allChecked=!allChecked* 4. 遍历购物车数组让里面的商品选中状态跟随 allChecked 改变而改变* 5. 把购物车数组和 allChecked 重新设置回data 把购物车重新设置回缓存中*/handleItemAllChecked() {// 1.获取data中的数据let {cart, allChecked } = this.data;// 2.修改值allChecked = !allChecked;// 3.循环修改cart数组中的商品选中状态cart.forEach(v => {v.checked = allChecked });// 4.把修改后的值，设置购物车状态同时：重新计算底部工具栏的数据全选总价格购买的数量this.setCart(cart)},/*** 商品数量的编辑* 1. "+" "-" 按钮绑定同一个点击事件区分的关键自定义属性* 1 "+" "+1" 或者 2 "-" "-1"* 2. 传递被点击的商品id goods_id* 3. 获取data中的购物车数组来获取需要被修改的商品对象* 4. 当购物车的数量 =1 同时用户点击 "-"* 弹窗提示(showModal)：询问用户是否要删除* 1 确定直接执行删除* 2 取消什么都不做* 5. 直接修改商品对象的数量 num* 6. 把cart数组重新设置回缓存中和 data中 this.setCart(cart)*/handleItemNumEdit(e) {// 1.获取传递过来的参数const {operation, id } = e.currentTarget.dataset;console.log(operation, id);// 2.获取购物车数组let {cart } = this.data;// 3.找到需要修改的商品的索引const index = cart.findIndex(v => v.goods_id === id);// 判断是否要执行删除if (cart[index].num === 1 && operation === -1) {// 弹框提示showModal({content: "您是否要删除?" }).then(res => {if (res.confirm) {cart.splice(index, 1);// 设置购物车状态同时：重新计算底部工具栏的数据全选总价格购买的数量this.setCart(cart);}});} else {// 4.进行修改数量cart[index].num += operation;// 5.设置购物车状态同时：重新计算底部工具栏的数据全选总价格购买的数量this.setCart(cart)}},/*** 点击结算* 1. 判断有没有收货地址信息* 2. 判断用户有没有选购商品* 3. 经过以上的验证：跳转到支付页面！*/handlePay() {// 1.判断收货地址const {address, totalNum } = this.data;// 2. 判断有没有收货地址信息if (!address.userName) {showToast({title: "您还没有选择收货地址" });return;}// 3.判断用户有没有选购商品if (totalNum === 0) {showToast({title: "您还没有选购商品" });return;}// 4.跳转到支付页面wx.navigateTo({url: '/pages/pay/pay'});},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {// 1. 获取缓存中的收货地址信息const address = wx.getStorageSync("address");// 2. 获取缓存中的购物车数据const cart = wx.getStorageSync("cart") || [];// 3. 收货地址赋值给datathis.setData({address})// 4. 设置购物车状态同时：重新计算底部工具栏的数据全选总价格购买的数量// 作用：保存购物车的状态。如果用户修改了购物车商品状态，刷新页面，修改的内容不会丢失。this.setCart(cart);},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {}})