[每天进步一点点~] 购物车页面基本实现，单选、多选、全选商品，计算所勾选商品价格（保留小数点后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>