[每天进步一点点~] 购物车页面基本实现，单选、多选、全选商品，计算所勾选商品价格（保留小数点后2位）...

最新推荐文章于 2024-04-28 10:36:10 发布
最新推荐文章于 2024-04-28 10:36:10 发布
阅读量522 收藏
点赞数
分类专栏： uni-app开发学习和总结 文章标签： js html flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DarlingYL/article/details/114525466
版权

购物车页面

image.png

用uni-app来写的

代码实现

html部分代码

<template>
    <view class="">
        <view class="list">
            <view class="cart" v-for="(item,index) in list" :key="index">
                <view class="seletc" @click="select(item)">
                    <image v-if="!item.flag" src="../../static/cart/select.png" mode=""></image>
                    <image v-if="item.flag" src="../../static/cart/select-fill.png" mode=""></image>
                </view>
                <view class="left">
                    <image :src="item.image" mode=""></image>
                </view>
                <view class="right">
                    <view class="top">
                        <view class="title">{{item.title}}</view>
                        <view class="price">￥ {{item.price}}</view>
                    </view>
                    <view class="bottom">
                        <view class="sub" @click="sub(item)">-</view>
                        <view class="num">{{item.count}}</view>
                        <view class="add" @click="add(item)">+</view>
                    </view>
                </view>
            </view>
        </view>

        <view class="menu">
            <view class="seletc" @click="seletAll">
                <image v-if="!is_selectAll" src="../../static/cart/select.png" mode=""></image>
                <image v-if="is_selectAll" src="../../static/cart/select-fill.png" mode=""></image>
            </view>
            <view class="right">
                <view class="num">商品数量：{{totalNum}}</view>
                <view class="">合计：￥ {{totalPrice}}</view>
                <view class="btn">去结算</view>
            </view>
        </view>
    </view>

</template>

js部分代码

<script>
    export default {
        data() {
            return {
                is_select: false,
                is_selectAll: false,
                list: [
                    {
                        title: '标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1',
                        image: '/static/logo.png',
                        price: '9.99',
                        count: 1,
                        flag: false,
                    }, {
                        title: '标题2标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1',
                        image: '/static/logo.png',
                        price: '19.99',
                        count: 1,
                        flag: false,
                    }, {
                        title: '标题3标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1',
                        image: '/static/logo.png',
                        price: '29.99',
                        count: 1,
                        flag: false,
                    }, {
                        title: '标题4标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1',
                        image: '/static/logo.png',
                        price: '39.99',
                        count: 1,
                        flag: false,
                    }, {
                        title: '标题5标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1',
                        image: '/static/logo.png',
                        price: '49.99',
                        count: 1,
                        flag: false,
                    }
                ],
            }
        },
        computed: {
            // 计算选中商品数量
            totalNum() {
                let totalNum = 0;
                this.list.map(item => {
                    item.flag ? totalNum += item.count : totalNum += 0
                })
                return totalNum
            },
            //计算选中商品的总价
            totalPrice() {
                let totalPrice = 0;
                this.list.map(item => {
                    item.flag ? totalPrice += item.count * item.price : totalPrice += 0
                })
                return totalPrice
                // return parseFloat(totalPrice.toFixed(2)) // 保留小数点后2位
            }
        },
        methods: {
            // 减号
            sub(item) {
                console.log('sub', item);
                if (item.count > 1) {
                    item.count--;
                } else {
                    item.count = 1
                    uni.showToast({
                        title: '不能再少了',
                        icon: 'none'
                    })
                }
            },
            // 加号
            add(item) {
                console.log('add', item);
                item.count++;
            },
            // 单选 
            select(item) {
                item.flag = !item.flag
                if (!item.flag) {
                    // 设置为全不选
                    this.is_selectAll = false
                } else {
                    const test = this.list.every(item => {
                        return item.flag === true
                    })
                    if (test) {
                        this.is_selectAll = true
                    } else {
                        this.is_selectAll = false
                    }
                }
            },
            // 全选
            seletAll() {
                // 方法一
                /*if (this.isSelectAll) { // 如果全部选中
                    // 设置为全不选
                    this.is_selectAll = false
                    this.list.forEach(item => item.flag = false)
                } else { // 如果全部不选中或某些不选中
                    // 设置为全选
                    this.is_selectAll = true
                    this.list.forEach(item => item.flag = true)
                }*/
                
                // 方法二
                this.is_selectAll = !this.is_selectAll
                if (this.is_selectAll) {
                    this.list.map(item => {
                        item.flag = true
                    })
                } else {
                    this.list.map(item => {
                        item.flag = false
                    })
                }
            },
        }
    }
</script>

css 部分代码

<style lang="scss" scoped>
    page {
        background-color: #e5e5e5;
    }

    .list {
        display: flex;
        flex-direction: column;

        .cart {
            display: flex;
            // align-items: center;
            margin: 15px;
            background-color: #fff;
            border-radius: 3px;
            box-shadow: 1px 1px 4px 1px #ccc;

            .seletc {
                width: 40px;
                height: 20px;
                margin: 40px 5px;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .left {
                width: 150px;
                height: 80px;
                margin: 5px;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 3px;
                }
            }

            .right {
                .top {
                    display: flex;
                    flex-direction: column;
                    font-size: 14px;
                    margin: 5px 10px;
                    .title {
                        -webkit-line-clamp: 2;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .price {
                        margin: 5px 0;
                    }
                }

                .bottom {
                    display: flex;
                    width: 100px;
                    height: 30px;
                    border: 1px solid #ccc;
                    border-radius: 3px;
                    margin: 5px 10px;

                    .sub {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 30px;
                        border-right: 1px solid #ccc;
                    }

                    .num {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 40px;
                        border-right: 1px solid #ccc;
                        font-size: 14px;
                    }

                    .add {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 30px;
                    }
                }
            }
        }

        .cart:last-child {
            margin-bottom: 50px;
        }

    }

    .menu {
        display: flex;
        justify-content: space-between;
        align-items: center;

        position: fixed;
        bottom: 50px;
        left: 0;
        width: 100%;
        height: 40px;
        background-color: #F0AD4E;

        .seletc {
            width: 20px;
            height: 20px;
            margin-left: 20px;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .right {
            display: flex;
            align-items: center;
            font-size: 14px;
            .num {
                margin-right: 10px; 
            }
            .btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 80px;
                height: 30px;
                border-radius: 3px;
                background-color: #fff;
                margin: 0 10px;
            }
        }
    }
</style>
拾一九
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp购物车多商家商品实现（删除-添加-结算-总价计算-总数合计-单选全选-快速清理-）
weixin_69658614的博客
08-16 2216
多余数据自己删除，数据自己更改。
H-Builder 品优购-购物车的实现
m0_56654086的博客
05-25 2009
实现购物车的全选功能，数量的加减，商品价格的计算，删除商品和清空购物车的一系列功能。
Vue实现购物车的全选、单选、显示商品价格代码实例
10-17
主要介绍了Vue实现购物车的全选、单选、显示商品价格实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uni小程序实现购物车功能,包括全选,反选,单选和计算总价格,快递费和总件数
weixin_43090018的博客
05-26 2006
效果图 1、html <view class="content"> <checkbox-group @change="checkboxChange" class="wrapper"> <view class="cart-item" v-for="(item,index) in shopcartList" :key="index"> <label class="label"> <checkbox :value="item.
html计算选中框的总价格
最新发布
qq_61585709的博客
04-28 84
【代码】html计算选中框的总价格。
uni-app微信小程序——商城（5）——购物车
徐小硕—心之所向，素履以往
08-12 3494
基于Vue语法，使用uni-app框架来实现微信小程序中的购物车功能。 实现购物车的全选，多选，计算总价，删除商品等功能。 结合使用VantWeapp微信小程序前端框架来搭建购物车页面。 效果图如下： 效果视频如下： 微信小程序购物车录屏 百度云视频，链接：https://pan.baidu.com/s/1QQHIIT58woini-ggPmrzIA 提取码：xzs8 其中单个的商品可以使用左滑进行删除，视频没有体现出来，但是功能还是齐全的。 下面是代码部门： <temp..
微信小程序 购物车 计算出现比如0.1的二进制0.000110011....无限下去 解决方法
MW
05-08 471
1. 需要把价格用parseFloat转成浮点数 totalPrice +=parseFloat(v.productPrice) *v.num 2.利用toFixed 保留两位小数 totalPrice:totalPrice.toFixed(2)
uview.2的SwipeAction 滑动单元格 点击删除或收藏，不关闭，点击删除后。
m0_74132533的博客
04-24 2420
uview.2的SwipeAction 滑动单元格 点击删除或收藏，不关闭，点击删除后。
Android Recyclerview实现多选,单选,全选,反选,批量删除的功能
08-30
"Android Recyclerview实现多选、单选、全选、反选、批量删除的功能" Android Recyclerview是一个功能强大且灵活的控件，广泛应用于移动应用程序中。本文将详细介绍如何使用Android Recyclerview实现多选、单选、...
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
12-30
2.在选中的同时获取需要的商品id，获取后是以字符串拼接的形式 拼成一个字符串 3.点击删除按钮时删除选中的商品 点击全选 再次点击全选框 wxml关键代码 重要代码 value={{item.goods_id}} -->checkbox被选中的...
支持单选多选全选的jQuery房屋楼层选择代码.zip
07-11
js代码 [removed] ... function choiceTitle(obj){ ... $(obj).parent().parent().find("tr:nth-child(" (index i) ")")....这是一款功能强大支持单选多选全选的jQuery房屋楼层选择代码，具体看演示效果就明白了。
Android listview ExpandableListView实现多选，单选，全选，edittext实现批量输入的实例代码
08-31
主要介绍了Android listview ExpandableListView实现多选，单选，全选，edittext实现批量输入的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
京东购物车网页(静态)搭建
时间静止
03-22 7832
按照报告的形式写一个项目 一、项目名称 完成京东购物车网页搭建 二、项目环境 1、软件环境：Win10+HBuilder+Chrome浏览器 2、项目思路 ： 根据需要实现的效果，自上而下，依次实现导航栏、搜索框、标题栏、商品详情展示框、结算窗口的编写。 三、项目源码 购物车搭建的HTML代码（京东购物车5.html） <!DOCTYPE html> <html> &...
UNIAPP实战项目笔记36 购物车的编辑商品数量完成的功能和数量价格计算
Ggome的博客
11-06 1275
common 公共文件：全局css文件 || 全局js文件。pages.json 配置文件： 导航、 tabbar、 路由。manifest.json 配置文件： appid、logo…App.vue 全局配置：样式、全局监视。static 静态资源：图片、字体图标。main.js vue初始化入口文件。store vuex状态机文件。page 页面。components 组件。
8 | 小程序实战之购物车（收货地址授权 + 商品全选反选 + 总价格和总数量的计算 + 结算按钮功能）
NSX-Truth
08-20 1946
8.1 效果 8.2 收货地址 8.2.1 收获地址按钮样式 注意在cart文件夹下 <!-- 收货地址 --> <view class="revice_address_row"> <view class="address_btn"> <button bindtap="handleChooseAddress" type="primary" plain >获取收货地址 </button>
购物车二级列表联动以及价格计算
weixin_51029424的博客
10-07 1971
先展示一波效果图（如下） 功能效果：当点击店铺的CheckBox时候，选中此店铺中的所有商品。当点击底部全选框，选中所有店铺和其中的商品，底部价格和数量随着选中商品的数量改变而改变。 第一步：初始化布局页面、数据 布局使用的是两个RecyclerView嵌套，一个是店铺,一个是商品，底部全选框，价格和数量的文本框，在activity中分别初始化 1、在购物车bean类（商品数据下）中加入标识，并设置Getter和Setter方法 //解决checkBox位置错乱
利用computed计算属性写购物车商品计算价格 （会用到数组的方法reduce做聚合操作）
lzfengquan的博客
08-18 1318
<div id="app"> <h1>购物车</h1> <input type="checkbox" v-model="checkedAll" />全选 <ul> <li v-for="product in products"> <input type="checkbox" v-model="product.checked" />{{prod...
使用toFixed()函数时，出现“toFixed() is not a function”的解决办法
热门推荐
welcome to daijiguo's blog
09-06 4万+
toFixed只能针对数字类型才能使用，所以对于字符类型的要用parseFloat或者parseInt函数先转一下再调用
toFixed
ddwddw4的博客
11-12 2248
 toFixed在金额运算的时候是非常方便的，但是今天写的时候遇到一点小坑，所以记录一下，免得日后又忘了。 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。 语法 NumberObject.toFixed(num) 参数 描述 num 必需。规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了...
uniapp单选多选全选
05-24
在uniapp中实现单选、多选和全选的方式有很多种，下面是其中一种可行的方法： 1. 单选 首先，在数据源中添加一个选中属性（例如isSelected），表示该项是否被选中。然后，在模板中使用v-model绑定isSelected属性即可实现单选。 ```html <template> <div> <div v-for="(item, index) in dataList" :key="item.id"> <input type="radio" :value="index" v-model="selectedIndex"> {{ item.name }} </div> </div> </template> <script> export default { data() { return { selectedIndex: -1, dataList: [ { id: 1, name: '选项1', isSelected: false }, { id: 2, name: '选项2', isSelected: false }, { id: 3, name: '选项3', isSelected: false } ] } } } </script> ``` 2. 多选 同样，在数据源中添加一个选中属性（例如isSelected），表示该项是否被选中。然后，在模板中使用v-model绑定一个数组，选中的项会被添加到该数组中。 ```html <template> <div> <div v-for="(item, index) in dataList" :key="item.id"> <input type="checkbox" :value="index" v-model="selectedList"> {{ item.name }} </div> </div> </template> <script> export default { data() { return { selectedList: [], dataList: [ { id: 1, name: '选项1', isSelected: false }, { id: 2, name: '选项2', isSelected: false }, { id: 3, name: '选项3', isSelected: false } ] } } } </script> ``` 3. 全选 首先，在数据源中添加一个选中属性（例如isSelected），表示该项是否被选中。然后，添加一个全选按钮，当点击全选按钮时，将所有项的isSelected属性设置为true或false即可实现全选。 ```html <template> <div> <button @click="selectAll">全选</button> <div v-for="(item, index) in dataList" :key="item.id"> <input type="checkbox" :value="index" v-model="selectedList"> {{ item.name }} </div> </div> </template> <script> export default { data() { return { selectedList: [], dataList: [ { id: 1, name: '选项1', isSelected: false }, { id: 2, name: '选项2', isSelected: false }, { id: 3, name: '选项3', isSelected: false } ] } }, methods: { selectAll() { this.dataList.forEach(item => { item.isSelected = true }) this.selectedList = this.dataList.map((item, index) => index) } } } </script> ``` 以上是实现单选、多选和全选的简单示例，具体的实现方式可以根据实际需要进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值