vue实现购物车

<template>
    <div class="body-color">
        <div class="cart-top">
            <div class="cart-top-l">共<text>{{goods}}</text>件商品</div>
            <div class="cart-top-r" @click="editGoods" v-html="!editType?'编辑':'完成'">编辑</div>
        </div>
        <div class="cart-list" :index='index' v-for="(item,index) in cartArr">
            <div :class="item.selected?'cart-list-icon active':'cart-list-icon'" @click="selectCart(index)"></div>
            <image :src='item.img' mode="widthFix"></image>
            <div class="cart-list-info">
                <div class="cart-list-info-title">{{item.name}}</div>
                <div class="cart-list-info-number">
                    <div class="info-number-l">¥<text>{{item.price}}</text></div>
                    <div class="info-number-r">
                        <button @click="add(index)">+</button>
                        <input class="number" :value='item.number' />
                        <button class="jiajian" @click="reduce(index)">-</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="cart-footer">
            <div class="cart-footer-all">
                <div :class="isSelectall?'cart-footer-icon active':'cart-footer-icon'" @click="selectCartAll"></div>
                全选
            </div>
            <div class="footer-btn" v-if="!editType">
                <button class="cart-footer-btn">结算</button>
                <div class="cart-footer-total">
                    合计：
                    <text>¥{{totalPrice}}</text>
                </div>
            </div>
            <div class="footer-btn" v-else>
                <button class="cart-footer-del" @click="deleteGoods">删除</button>
                <button class="cart-footer-col">移入收藏夹</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                cartArr: [{
                        img:'../../static/icon4.png',
                        name: '1金玫瑰金如意锁吊坠 钻石项链拼色 轻奢个性潮锁骨链18K',
                        price: '1231',
                        selected: false,
                        number: 1
                    },
                    {
                        img:'../../static/icon4.png',
                        name: '2金玫瑰金如意锁吊坠 钻石项链拼色 轻奢个性潮锁骨链18K',
                        price: '1232',
                        selected: false,
                        number: 1
                    },
                    {
                        img:'../../static/icon4.png',
                        name: '3金玫瑰金如意锁吊坠 钻石项链拼色 轻奢个性潮锁骨链18K',
                        price: '1233',
                        selected: false,
                        number: 1
                    },
                ],
                isSelectall: false,
                val: 0,
                totalPrice: 0,
                goods: 0,
                editType: false
            }
        },
        methods: {
            selectCart(index) {
                this.cartArr[index].selected = !this.cartArr[index].selected
                this.calculation();
                let selrctLength = 0
                for (let i = 0; i < this.cartArr.length; i++) {
                    if (this.cartArr[i].selected) {
                        selrctLength += 1
                    } else {
                        this.isSelectall = false
                        return false
                    }
                }
                console.log(selrctLength, this.cartArr.length)
                if (selrctLength == this.cartArr.length) {
                    this.isSelectall = true
                }
            },
            add(index) {
                this.cartArr[index].number += 1
                this.calculation();
            },
            reduce(index) {
                if (this.cartArr[index].number > 1) {
                    this.cartArr[index].number = this.cartArr[index].number - 1
                    this.calculation();
                }
            },
            selectCartAll() {
                this.isSelectall = !this.isSelectall

                if (this.isSelectall) {
                    for (let i = 0; i < this.cartArr.length; i++) {
                        this.cartArr[i].selected = true
                    }
                } else {
                    for (let i = 0; i < this.cartArr.length; i++) {
                        this.cartArr[i].selected = false
                    }
                }
                this.calculation();
            },
            calculation() {
                this.totalPrice = 0
                this.goods = 0
                for (let i = 0; i < this.cartArr.length; i++) {
                    if (this.cartArr[i].selected) {
                        this.goods += 1*this.cartArr[i].number
                        this.totalPrice += this.cartArr[i].number * this.cartArr[i].price
                    }
                }
            },
            editGoods() {
                this.editType = !this.editType
            },
            deleteGoods(){
                for (let i = 0; i < _this.cartArr.length; i++) {
                    if (this.cartArr[i].selected) {
                        this.cartArr.splice(i,this.goods)
                    }
                }
                this.calculation()
            }
        }
    }
</script>

<style scoped lang="scss">
    uni-page-body,
    uni-page-refresh {
        background-color: #f8f8f8 !important;
        height: 100%;
    }

    .footer-btn {
        float: right;
    }

  .body-color{
         background-color: #f4f4f4;
         
  }

/* #ifdef MP-WEIXIN */
    .body-color{
           background-color: #f4f4f4;
           height: 100vh;
    }
    /* #endif */
    .cart-top {
        height: 80rpx;
        line-height: 80rpx;
        padding: 0 24rpx;
        box-sizing: border-box;
        font-size: 26rpx;
        color: #333333;

        .cart-top-l {
            float: left;
        }

        .cart-top-r {
            float: right;
        }
    }

    .cart-list {
        overflow: hidden;
        background: #ffffff;
        padding: 35rpx 24rpx;
        box-sizing: border-box;
        display: flex;
        margin-bottom: 20rpx;

        .cart-list-icon {
            float: left;
            width: 24rpx;
            height: 24rpx;
            background: url(../../static/s2.png);
            background-size: 100% 100%;
            margin-top: 83rpx;
            margin-right: 24rpx;

            &.active {
                background: url(../../static/s1.png);
                background-size: 100% 100%;
            }
        }

        image {
            float: left;
            width: 190rpx;
            height: 190rpx;
            margin-right: 20rpx;
        }

        .cart-list-info {
            position: relative;
            height: 190rpx;
            float: left;
            flex: 1;

            .cart-list-info-title {
                font-size: 26rpx;
                color: #333333;
            }

            .cart-list-info-number {
                position: absolute;
                bottom: 0;
                width: 100%;

                .info-number-l {
                    float: left;
                    font-size: 34rpx;
                    color: #333333;
                }

                .info-number-r {
                    float: right;
                    text-align: center;
                    font-size: 26rpx;
                    color: #333333;

                    button {
                        float: right;
                        width: 50rpx;
                        height: 50rpx;
                        line-height: 50rpx;
                        background: #ffffff;
                        border-radius: 0;
                        padding: 0;
                        border: 1rpx solid #eeeeee;
                    }

                    .jiajian {
                        margin-right: 8rpx;
                    }

                    .number {
                        float: right;
                        width: 100rpx;
                        height: 50rpx;
                        line-height: 50rpx;
                        border: 1rpx solid #eeeeee;
                        margin-right: 8rpx;
                        font-size: 26rpx;
                    }

                    uni-button:after {
                        border-radius: 0 !important;
                        border: none !important;
                    }
                }
            }
        }
    }

    .cart-footer {
        position: fixed;
        bottom: 120rpx;
        left: 0;
        right: 0;
        height: 96rpx;
        line-height: 96rpx;
        border-top: 1rpx solid #eeeeee;
        padding: 0 24rpx;
        box-sizing: border-box;
        background: #ffffff;

        .cart-footer-all {
            float: left;
            color: #333333;
            font-size: 30rpx;

            .cart-footer-icon {
                float: left;
                width: 24rpx;
                height: 24rpx;
                background: url(../../static/s2.png);
                background-size: 100% 100%;
                margin-top: 36rpx;
                margin-right: 24rpx;

                &.active {
                    background: url(../../static/s1.png);
                    background-size: 100% 100%;
                }
            }
        }

        .cart-footer-total {
            float: right;
            margin-right: 35rpx;
            color: #333333;
            font-size: 28rpx;

            text {
                color: #ff6666;
                font-size: 34rpx;
            }
        }

        .cart-footer-btn {
            float: right;
            width: 168rpx;
            height: 68rpx;
            line-height: 68rpx;
            border: none;
            color: #ffffff;
            background: #deb696;
            font-size: 30rpx;
            border-radius: 40rpx;
            margin-top: 14rpx;
        }

        .cart-footer-del {
            float: right;
            background: #333333;
            width: 194rpx;
            height: 68rpx;
            line-height: 68rpx;
            color: #ffffff;
            font-size: 30rpx;
            margin-top: 14rpx;
            border-radius: 0;
            border-top-right-radius: 40rpx;
            border-bottom-right-radius: 40rpx;
            
        }

        .cart-footer-col {
            float: right;
            background: #deb696;
            width: 194rpx;
            height: 68rpx;
            line-height: 68rpx;
            color: #ffffff;
            font-size: 30rpx;
            margin-top: 14rpx;
            border-radius: 0;
            border-top-left-radius: 40rpx;
            border-bottom-left-radius: 40rpx;
            
        }
    }

/* #ifdef MP-WEIXIN */
    .cart-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 96rpx;
        line-height: 96rpx;
        border-top: 1rpx solid #eeeeee;
        padding: 0 24rpx;
        box-sizing: border-box;
        background: #ffffff;
    
        .cart-footer-all {
            float: left;
            color: #333333;
            font-size: 30rpx;
    
            .cart-footer-icon {
                float: left;
                width: 24rpx;
                height: 24rpx;
                background: url(../../static/s2.png);
                background-size: 100% 100%;
                margin-top: 36rpx;
                margin-right: 24rpx;
    
                &.active {
                    background: url(../../static/s1.png);
                    background-size: 100% 100%;
                }
            }
        }
    
        .cart-footer-total {
            float: right;
            margin-right: 35rpx;
            color: #333333;
            font-size: 28rpx;
    
            text {
                color: #ff6666;
                font-size: 34rpx;
            }
        }
    
        .cart-footer-btn {
            float: right;
            width: 168rpx;
            height: 68rpx;
            line-height: 68rpx;
            border: none;
            color: #ffffff;
            background: #deb696;
            font-size: 30rpx;
            border-radius: 40rpx;
            margin-top: 14rpx;
        }
    
        .cart-footer-del {
            float: right;
            background: #333333;
            width: 194rpx;
            height: 68rpx;
            line-height: 68rpx;
            color: #ffffff;
            font-size: 30rpx;
            margin-top: 14rpx;
            border-radius: 0;
            border-top-right-radius: 40rpx;
            border-bottom-right-radius: 40rpx;
            
        }
    
        .cart-footer-col {
            float: right;
            background: #deb696;
            width: 194rpx;
            height: 68rpx;
            line-height: 68rpx;
            color: #ffffff;
            font-size: 30rpx;
            margin-top: 14rpx;
            border-radius: 0;
            border-top-left-radius: 40rpx;
            border-bottom-left-radius: 40rpx;
            
        }
    }
    /* #endif */



    .cart-footer2 {
        position: fixed;
        bottom: 100rpx;
        left: 0;
        right: 0;
        height: 96rpx;
        line-height: 96rpx;
        border-top: 1rpx solid #eeeeee;
        padding: 0 24rpx;
        box-sizing: border-box;
        background: #ffffff;
        // display: none;

        .cart-footer-all2 {
            float: left;
            color: #333333;
            font-size: 30rpx;

            .cart-footer-icon {
                float: left;
                width: 24rpx;
                height: 24rpx;
                background: url(../../static/s2.png);
                background-size: 100% 100%;
                margin-top: 36rpx;
                margin-right: 24rpx;

                &.active {
                    background: url(../../static/s1.png);
                    background-size: 100% 100%;
                }
            }
        }

        button {
            float: right;
            width: 194rpx;
            height: 68rpx;
            line-height: 68rpx;
            color: #ffffff;
            font-size: 30rpx;
            margin-top: 14rpx;
            border-radius: 0;
        }

        .cart-footer-del {
            background: #333333;
            border-top-right-radius: 40rpx;
            border-bottom-right-radius: 40rpx;
        }

        .cart-footer-col {
            background: #deb696;
            border-top-left-radius: 40rpx;
            border-bottom-left-radius: 40rpx;
        }
    }
    uni-modal .uni-modal__btn_primary{
        color: #deb696 !important;
    }
</style>