购物车底部工具栏全选、总价、总数量实现，购物车商品复选框中业务处理

最新推荐文章于 2023-09-29 16:53:17 发布
最新推荐文章于 2023-09-29 16:53:17 发布
阅读量80 收藏 1
点赞数
文章标签： chrome javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68935893/article/details/133417610
版权 
<!-- 收货地址开始  -->
<view class="receive_address_row">
    <view class="address_btn" wx:if="{{!address}}">
        <button type="warn" plain bindtap="handleChooseAddress">获取收货地址</button>
    </view>

    <view wx:else  class="user_info_row"> 
        <view class="user_info">
         <view>收货人：{{address.userName}},{{address.telNumber}}</view>
         <view>{{address.provinceName+address.cityName+address.countyName+address.detailInfo}}</view>
        </view>

        <view class="change_address_btn">
            <button size="mini" plain>更换地址</button>
        </view>
    </view>
</view>
<!-- 收货地址结束  -->

<!-- 购物车清单 开始 -->
<view class="cart_content">
    <view class="cart_main">
        <view class="cart_item" wx:for="{{cart}}" wx:key="id">
            <!-- 复选框 开始 -->
            <view class="cart_chk_wrap">
                <checkbox-group data-id="{{item.id}}" bindchange="handleItemChange">
                    <checkbox checked="{{item.checked}}"></checkbox>
                </checkbox-group>
            </view>
            <!-- 复选框 结束 -->

            <!-- 商品图片 开始 -->
            <navigator class="cart_img_wrap"  url="/pages/product_detail/index?id={{item.id}}">
                <image src="{{baseUrl+'/image/product/'+item.proPic}}" mode="widthFix"></image>
            </navigator>
            <!-- 商品图片 结束 -->

            <!-- 商品信息 开始 -->
            <view class="cart_info_wrap">
                <navigator url="/pages/product_detail/index?id={{item.id}}">
                    <view class="goods_name">{{item.name}}</view>
                </navigator>
                <view class="goods_price_wrap">
                    <view class="goods_price">
                    ￥{{item.price}}
                    </view>
                    <view class="cart_num_tool">
                        <view class="num_edit">-</view>
                        <view class="goods_num">{{item.num}}</view>
                        <view class="num_edit">+</view>
                    </view>
                </view>
            </view>
            <!-- 商品信息 结束 -->
        </view>
    </view>
</view>
<!-- 购物车清单 结束 -->

<!-- 底部工具栏 开始 -->
<view class="footer_tool">
    <!-- 全选 开始 -->
    <view class="all_chk_wrap">
        <checkbox-group>
            <checkbox checked="{{allChecked}}"><text decode="true">&nbsp;&nbsp;全选</text></checkbox>
        </checkbox-group>
    </view>
    <!-- 全选 结束 -->

    <!-- 合计 开始 -->
            <view class="total_price_wrap">
                <view class="total_price">
                    合计: <text class="total_price_text">￥ {{totalPrice}}</text>
                </view>
            </view>
    <!-- 合计 结束 -->

    <!-- 结算 开始 --> 
    <view class="order_pay_wrap">
        结算({{totalNum}})
    </view>
    <!-- 结算 结束 -->

</view>
<!-- 底部工具栏 结束 -->


//导入request请求工具类
import {getBaseUrl,requestUtil} from '../../utils/requestUtil';
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    address:{},
    baseUrl:'',
    cart:[],
    allChecked:false,
    totalPrice:0,
    totalNum:0
  },

  handleChooseAddress(){
    wx.chooseAddress({
        success:(result)=>{
            console.log(result)
            wx.setStorageSync('address', result)
        },
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const baseUrl = getBaseUrl();
    this.setData({
        // swiperList:result.message,
        baseUrl
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    console.log("show");
    const address=wx.getStorageSync('address');
    const cart=wx.getStorageSync('cart')||[];
    
    this.setData({
        address
    })

    this.setCart(cart);
  },

  //商品选中事件处理
  handleItemChange(e){
        const {id}=e.currentTarget.dataset;
        let {cart}=this.data;
        let index=cart.findIndex(v=>v.id===id); 
        console.log(index)
        cart[index].checked=!cart[index].checked;

        this.setCart(cart);
  },

  //设置购物车状态 重新计算 底部工具栏 全选 总价  总数量 重新设置缓存
  setCart(cart){
    let allChecked=true;
    let totalPrice=0;
    let totalNum=0;
    cart.forEach(v=>{
        if(v.checked){
            totalPrice+=v.price*v.num;
            totalNum+=v.num;
        }else{
            allChecked=false;
        }
    })
    allChecked=cart.length!=0?allChecked:false;
    this.setData({
        cart,
        allChecked,
        totalNum,
        totalPrice
    })

    //cart设置到缓存中
    wx.setStorageSync('cart', cart);
  }
})

page{
    padding-bottom: 70rpx;
}

.receive_address_row{
    .address_btn{
        padding: 20rpx;
        button{
            width: 60%;
        }
    }

    .user_info_row{
        display: flex;
        padding: 20rpx  ;
        .user_info{
            flex: 5;
        }
        .change_address_btn{
            flex: 3;
            text-align: right;
            button{
                border: 1px solid gray;
                font-weight: normal; 
            }
        }
    }
}


.cart_content{
    background-color: #f5f5f5;
    .cart_main{
        padding: 2rpx 10rpx 10rpx 10rpx;
        .cart_item{
            display: flex;
            background-color: white;
            border-radius: 10px;
            margin: 20rpx;
            padding-right: 20rpx;
            .cart_chk_wrap{
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 20rpx;
            }
            .cart_img_wrap{
                flex: 2;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #f5f5f5;
                margin: 20rpx;
                border-radius: 10px;
                image{
                    width: 80%;
                }
            }

            .cart_info_wrap{
                flex: 4 ;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .goods_name{
                    font-weight: bolder;
                    display: -webkit-box;
                    overflow: hidden;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
                .goods_price_wrap{
                    display: flex;
                    justify-content: space-between;
                     .goods_price{
                        color: var(--themeColor);
                        font-size: 34rpx;
                     }
                     .cart_num_tool{
                         display: flex;
                         .num_edit{
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 55rpx;
                            height: 55rpx;
                            font-weight: bolder;
                         }
                         .goods_num{
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 85rpx;
                            height: 55rpx;
                            background-color: #f5f5f5;
                         }
                     }
                }
            }
        }
    }
}

.footer_tool{
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90rpx;
    background-color: #fff;
    border-top: 1px solid #ccc;
    .all_chk_wrap{
        flex: 2;
         display: flex;
         justify-content: center;
         align-items: center;
         padding-left: 25rpx;
    }
    .total_price_wrap{
        flex: 5;
        display: flex;
        justify-content: center;
        align-items: center;
        .total_price{
            .total_price_text{
                color: var(--themeColor);
                font-weight: bolder;
                font-size: 34rpx;
            }
        }
    }

    .order_pay_wrap{
        flex: 3;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(90deg,#ff7408,#fe6227);
        color: #fff;
        font-size: 32rpx;
        font-weight: 600;
        border-radius: 20px;
        margin: 10rpx   ;
    }
}
九品印相
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
购物车复选框2
weixin_44513400的博客
03-06 332
package com.example.xiangmu.fragment; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import an...
jQuery购物车模块复选框模块小计模块实现思路
weixin_51445507的博客
07-14 349
jQuery品优购购物车模块 全选复选框、小计模块实现思路
jquery添加购物车复选框
04-28
jquery添加购物车复选框,全选,反选,取消,商品数量统计价格演示地址：http://www.jq22.com/jquery-info411
复选框的全选反选实现（即购物车的复选框实现）
weixin_30500105的博客
01-17 257
html页面 <!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>测试页面</title> <scriptsrc="jquery.js"...
jQuery添加购物车复选框.zip
07-04
jQuery添加购物车复选框是一款基于jquery制作的复选框全选反选取消，购物车，统计价格，统计，类似淘宝的购物车，非常不错的。
购物车全选复选框选中业务处理
m0_68935893的博客
09-29 39
【代码】购物车全选复选框选中业务处理。
vue+vant-UI框架实现购物车的复选框全选和反选功能
10-16
主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
12-30
实现的效果就是： 1.点击全选选中所有商品，再点击全选，取消勾选 2.在选中的同时获取需要的商品id，获取后是以字符串拼接的形式 拼成一个字符串 3.点击删除按钮时删除选中的商品 点击全选 再次点击全选框 wxml...
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
10-19
主要给大家介绍了关于利用bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果的相关资料，文中给出了完整的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友下面来一起看看吧。
我的购物车 多选框操作
qq_18703803的博客
03-30 758
&lt;!DOCTYPE html&gt;&lt;html ng-app="myApp"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/ang
jquery实现购物车复选框总金额的变化以及全选和反选
Debug_zhang的博客
06-09 7352
script> $(document).ready(function () { $("#checkAll").click(function () { if(this.checked == true){ $('[type=checkbox]').prop('checked', true);
jq-品优购-购物车复选框联动完美解决方法
weixin_43410197的博客
04-19 360
只需要将pink老师最后的计算函数改成如下即可： function getSum() { var count = 0; // 计算总件数 var money = 0; // 计算总价钱 //遍历所有带有checked的选择框 并为他计算总件数 $('.j-checkbox:checked').each(function(index, ele) { count += parseInt($(ele).parents('
使用python写购物车程序
qq_54518614的博客
02-19 387
系列文章目录 用Python来编写一段小小的购物车添加功能 文章目录系列文章目录一、详细代码总结 一、详细代码 代码如下（示例）： #打印输出商品列表 products = [["iphone",6888],["Macpro",14800],["小米6",2499],["Coffee",31],["Book",60],["Nike",688]] print("-"*6,"商品列表","-"*6) n = 0 for list in products: print(n,end="\t")
python知识点（4）——基本的购物车功能实现
userez的博客
12-17 1022
兄弟连学python（4）——基本的购物车功能实现
复选框，购物车功能，单选，全选
sunluyi的博客
07-13 160
<template> <view class="index"> <u-navbar title="购物车" :is-back="false" :border-bottom="false" title-color="#333" :background="{background:'#fff'}"> <view class="page_navbar_warp"> <image src="../../static/icon/0.png"
使用React class component(类组件）实现购物车复选框全选/全不选功能
weixin_71669449的博客
07-26 1184
在使用React的过程中，复选框当全选按钮处于选择状态，所有子项按钮也是处于选择状态，反之，当全选按钮处于未选中状态，所有子项也都处于未选中状态。当子项所有按钮全部选中时，全选按钮也会随之自动选中，如果子项有一个没有被选中，全选按钮就不会被选中...
初学者 模拟购物车（包含添加商品和删除商品功能）
热门推荐
chenmixuexi_的博客
07-13 1万+
购物车界面与功能实现分析图： 购物车对象： package cn.itsource._01_buycart.domain; import java.util.ArrayList; import java.util.Iterator; import java.util.List; /** * 购物车对象 * */ public class ShoppingCar
简单的购物车实现 +多选框
qq_40152180的博客
09-21 1418
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="angular1.4.6.min.js">script> script src="angular-route.js">script> style> *{ mar
购物车选择复选框 1
weixin_44513400的博客
03-06 512
package com.example.xiangmu.adapter; import android.content.Context; import android.support.annotation.NonNull; import android.support.v7.widget.RecyclerView; import android.view.View; import android....
js html购物车复选框全选单选完整代码
最新发布
07-04
在JavaScript和HTML中，创建一个购物车的复选框全选/单选功能可以通过以下几个步骤完成。这里是一个基本的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>购物车复选框</title> <style> .cart-checks { display: flex; gap: 10px; /* 控制复选框之间的间距 */ } .check-all { margin-right: 10px; } </style> </head> <body> <h2>购物车商品选择</h2> <div class="cart-checks"> <!-- 商品项，这里的数量可以动态添加 --> <label class="checkbox" for="item1"> <input type="checkbox" id="item1" value="商品1"> 商品1 </label> <label class="checkbox" for="item2"> <input type="checkbox" id="item2" value="商品2"> 商品2 </label> <!-- 更多商品... --> <button id="checkAll">全选</button> <button id="uncheckAll">全不选</button> </div> <script> // 获取所有复选框和全选按钮 const checkboxes = document.querySelectorAll('input[type="checkbox"]'); const checkAllBtn = document.getElementById('checkAll'); const uncheckAllBtn = document.getElementById('uncheckAll'); // 全选按钮事件处理 checkAllBtn.addEventListener('click', function() { checkboxes.forEach(function(checkbox) { checkbox.checked = true; }); }); // 全不选按钮事件处理 uncheckAllBtn.addEventListener('click', function() { checkboxes.forEach(function(checkbox) { checkbox.checked = false; }); }); // 当复选框状态改变时，检查是否有被选中的 checkboxes.forEach(function(checkbox) { checkbox.addEventListener('change', function() { if (checkboxes.filter(checkbox => checkbox.checked).length === checkboxes.length) { checkAllBtn.textContent = '全选'; } else { checkAllBtn.textContent = '全不选'; } }); }); </script> </body> </html> ``` 这个示例展示了如何使用JavaScript控制复选框的全选和全不选操作，并且当任何一个复选框的状态变化时，会自动更新全选按钮的状态。你可以根据实际需求对商品列表和样式进行扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值