uniapp 购物车案例

wxml

<template>
    <view class="cart">
        <view class="content">
            <view class="list" v-for="item in list" :key='item.id'>
                <view class="left">
                    <checkbox-group @change="checkboxChange($event,item.id)">
                        <checkbox :value="item.id" :checked="item.isChecked" />
                    </checkbox-group>
                    <image :src="item.img" class="img"></image>
                </view>
                <view class="center">
                    <view class="name">
                        {{item.name}}
                    </view>
                    <view class="size">
                        尺寸：{{item.size}}
                    </view>
                    <view class="count">
                        数量：x{{item.count}}
                    </view>
                </view>
                <view class="right">
                    <view class="price">
                        单价￥{{item.price}}元
                    </view>
                    <view class="update-count">
                        <view class="reduce" @tap="editNum(item.id,-1)">
                            -
                        </view>
                        <view class="cart-count">
                            {{item.count}}
                        </view>
                        <view class="add" @tap="editNum(item.id,1)">
                            +
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 底部导航栏 -->
        <view class="tabbar">
            <view class="all">
                <checkbox-group @change="checkboxChangeAll">
                    <checkbox :checked="isAllChecked" />全选
                </checkbox-group>
            </view>
            <view class="totalPrice">
                总价:￥{{totalPrice}}元
            </view>
            <view class="submitOrder" @tap="submitOrder">
                付款
            </view>
        </view>
    </view>
</template>

js

<script>
    export default {
        data() {
            return {
                list: [], //列表数据
                isAllChecked: false, //是否全选
                totalPrice: 0, //总价
            }
        },
        methods: {
            setCart() { //计算总价
                let totalPrice = 0
                this.list.forEach(v => {
                    if (v.isChecked) {
                        totalPrice += v.count * v.price
                    }
                })
                this.totalPrice = totalPrice
            },

            editNum(id, type) { //编辑数量
                const index = this.list.findIndex(v => v.id == id)
                if (this.list[index].count == 1 && type == -1) {
                    uni.showToast({
                        title: '至少购买一件商品',
                        icon: 'none'
                    })
                } else {
                    this.list[index].count += type
                }
                this.setCart()
            },

            // 全选
            checkboxChangeAll(e) {
                this.isAllChecked = !this.isAllChecked
                this.list.forEach(v => v.isChecked = this.isAllChecked)
                this.setCart()
            },

            // 选择每一项
            checkboxChange: function(e, id) {
                var temp = []

                // 找到被修改的商品对象
                let index = this.list.findIndex(v => v.id === id)
                // 选中状态取反
                this.list[index].isChecked = !this.list[index].isChecked

                temp = this.list.every(v => v.isChecked)
                if (temp) {
                    this.isAllChecked = true
                } else {
                    this.isAllChecked = false
                }
                this.setCart()
            },

            submitOrder() { // 提交购物车订单
                // 判断是否选择购物车商品
                var bol = this.list.every(el => el.isChecked == false)
                if (bol) {
                    uni.showToast({
                        title: "这些你都不喜欢吗，你是不是只喜欢喝水，你倒是选一个啊商品啊",
                        icon: "none",
                        duration: 2000
                    })
                } else {
                    uni.showToast({
                        title: "你肯定没有钱,还是算了吧",
                        icon: "none",
                        duration: 2000
                    })
                }
            }
        },
        onShow() {
            // 模拟从后台拿到的数据
            var list = [{
                    id: '0',
                    name: '好吃的虾',
                    price: 10,
                    count: 1,
                    size: '大份',
                    img: 'http://47.92.83.204:8080/zhangying/img/cart/xia1.jpg'
                },
                {
                    id: '1',
                    name: '很好吃的虾',
                    price: 15,
                    count: 1,
                    size: '大份',
                    img: 'http://47.92.83.204:8080/zhangying/img/cart/xia2.jpg'
                },
                {
                    id: '2',
                    name: '可乐鸡翅',
                    price: 12,
                    count:1,
                    size: '大份',
                    img: 'http://47.92.83.204:8080/zhangying/img/cart/jichi.jpg'
                },{
                    id: '3',
                    name: '火锅',
                    price: 30,
                    count: 1,
                    size: '大份',
                    img: 'http://47.92.83.204:8080/zhangying/img/cart/huoguo.jpg'
                },
                {
                    id: '4',
                    name: '干锅鸡',
                    price: 25,
                    count: 1,
                    size: '大份',
                    img: 'http://47.92.83.204:8080/zhangying/img/cart/ganguoji.jpg'
                }
            ]
            // list数组中为每一项添加双向绑定的属性---这个属性要在页面显示(onShow)添加
            list.forEach(el => el.isChecked = false);
            this.list = list;
        },
    }
</script>

css

<style lang="scss" scoped>
    page {
        background: #f1e8e7;
    }
    .content {
         670rpx;
        margin: 0 auto 180rpx;
    }

    // 居中显示
    @mixin textCenter {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .list {
         672rpx;
        height: 208rpx;
        background: #f9f9f9;
        box-shadow: 0 8rpx 16rpx 0 rgba(83, 66, 49, 0.08);
        border-radius: 24rpx;
        margin-top: 32rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .left {
            display: flex;

            .img {
                 136rpx;
                height: 136rpx;
                margin-left: 10rpx;
                border-radius: 8%;
            }
        }

        .center {
             170rpx;

            .name {
                font-size: 26rpx;
                color: #3E3E3E;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .size,
            .count {
                font-size: 22rpx;
                color: #8D8D8D;
            }
        }

        .right {
            .price {
                margin-top: 40rpx;
                font-size: 26rpx;
                margin-left: 40rpx;
            }

            // 加减数量
            .update-count {
                margin-top: 40rpx;
                display: flex;

                .reduce,
                .add {
                     40rpx;
                    height: 40rpx;
                    background: #F1ECE7;
                    border-radius: 21.6rpx;
                    color: #979797;
                    @include textCenter;
                    font-size: 50rpx;
                }

                .cart-count {
                     72rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                    background: #F1ECE7;
                    border-radius: 21.6rpx;
                    margin-left: 18rpx;
                    margin-right: 18rpx;
                    text-align: center;
                }
            }
        }
    }

    // 底部导航
    .tabbar {
         100%;
        height: 176rpx;
        background-color: #f3f3f3;
        position: fixed;
        bottom: 0rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 8% 8%;

        .all {
            font-size: 32rpx;
            color: #3E3E3E;
            letter-spacing: 2.29rpx;
            display: flex;
        }

        .totalPrice {
            font-size: 32rpx;
            color: #3E3E3E;
            letter-spacing: 2.29rpx;
            color: red;
        }

        .submitOrder {
             208rpx;
            height: 80rpx;
            background: #354E44;
            border-radius: 14rpx;
            border-radius: 14rpx;
            font-size: 36rpx;
            color: #FFFFFF;
            letter-spacing: 2.57rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
</style>

效果图