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

购物车页面

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中实现单选、多全选的方式有很多种,下面是其中一种可行的方法: 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、付费专栏及课程。

余额充值