vue商品分类，实现购物车功能

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39019768/article/details/83094875

new Vue({
    el: "#app",
    data: {
        cIndex: 0,
        lists: [
            {
                title: "推荐商品",
                goods: [
                    {
                        id: 0,
                        img: './images/goods.png',
                        name: '散称樱桃1',
                        price: '10.00',
                        num: 0
                    },
                    {
                        id: 1,
                        img: './images/goods.png',
                        name: '散称樱桃1',
                        price: '10.00',
                        num: 0
                    }

                ]
            },
            {
                title: "推荐商品",
                goods: [
                    {
                        id: 2,
                        img: './images/goods.png',
                        name: '散称樱桃2',
                        price: '20.00',
                        num: 0
                    },
                    {
                        id: 3,
                        img: './images/goods.png',
                        name: '散称樱桃2',
                        price: '20.00',
                        num: 0
                    },
                ]
            },
        ],
        carArr: [],
        appearCar: false,
    },
    computed:{
        alltotal:function () {
           var alltotal = 0;
           var allNum = 0;
           for(var i = 0,len = this.lists.length;i<len;i++){
               for(var j = 0,goodsLen = this.lists[i].goods.length;j<goodsLen;j++){
                   alltotal += parseInt(this.lists[i].goods[j].num)*parseFloat(this.lists[i].goods[j].price);
                   allNum += parseInt(this.lists[i].goods[j].num);
               }
           }
            return [alltotal,allNum]
        },
    },
    methods: {
        leftTap: function (index) {
            this.cIndex = index
        },
        showCar: function () {
            if (this.carArr.length == 0) {
                this.appearCar = false
            } else {
                this.appearCar = !this.appearCar
            }

        },
        //商品数量加
        addNum: function (data) {
            data.num++;
            var carArr = this.carArr;
            var isCar = false;
            if (carArr == 0) {
                carArr.push(data)
            }
            for (var i = 0, len = carArr.length; i < len; i++) {
                if (data.id == carArr[i].id) {
                    isCar = true
                }
            }
            if (!isCar) {
                carArr.push(data)
            }
        },
        reduceNum: function (data) {
            if (data.num <= 0) return;
            var carArr = this.carArr;
            data.num--;
            var isCar = false;
            for (var i = 0, len = carArr.length; i < len; i++) {
                if (carArr[i].num <= 0) {
                    carArr.splice(i, 1)
                }
            }
        },
        carAddNum: function (index) {
            this.carArr[index].num++
        },
        carReduceNum: function (index) {
            this.carArr[index].num--;
            if (this.carArr[index].num <= 0) {
                this.carArr.splice(index, 1)
            }
            if (this.carArr.length == 0) {
                this.appearCar = !this.appearCar
            }
        },
        // 清空
        delCar: function () {
            confirm('确定清空购物车吗?');
            var cur = this.cIndex;
            var goods = this.lists[cur].goods
            if (true) {
                this.carArr = [];
                this.appearCar = !this.appearCar;
                for(var i = 0,len = this.lists.length;i<len;i++){
                    for(var j = 0,goodsLen = this.lists[i].goods.length;j<goodsLen;j++){
                       this.lists[i].goods[j].num=0;
                    }
                }
            }
        },
        Settlement:function () {
            if(this.alltotal[0]<=0){
               console.log('我不动')
            }else{
                window.location.href = 'cashierPay.html'
            }
        }
    }
})

html页面

<div id="app" v-cloak>
    <div class='box'>
        <div class='boxleft'>
            <div class='boxla'>
                <img src='./images/sm.png'/>
                <span>扫码</span>
            </div>
            <ul class='boxlbox'>
                <template v-for="(item,index) in lists">
                    <li @click='leftTap(index)' :class="{boxlb_cheak:cIndex==index}" class='boxlb'>
                        <span class='boxlb_inner' :class="{boxlb_inner_cheak:cIndex==index}">{{item.title}}</span>
                    </li>
                </template>
            </ul>
        </div>
        <ul class='boxright'>
            <li class='boxri' v-for="(item,index) in lists[cIndex].goods">
                <img class='boxri_img' :src='item.img'/>
                <div class='boxri_text'>
                    <div class='boxrit_left'>
                        <p class='boxritl_name'>{{item.name}}</p>
                        <p class='boxritl_price'>￥{{item.price}}</p>
                    </div>
                    <div class='boxrit_right'>
                        <img @click='reduceNum(item)' v-show="item.num>0"  class='boxrit_right_img' src='./images/minus.png'/>
                        <span  class='boxrit_right_num' v-show="item.num>0">{{item.num}}</span>
                        <img @click='addNum(item)' class='boxrit_right_img' src='./images/add.png'/>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <footer class='footer'>
        <div class='cartImgBox'>
            <img class='cartImg' src='./images/car.png' @click='showCar'/>
            共{{alltotal[1]}}件商品
        </div>
        <div class='footerb'>￥{{alltotal[0]}}</div>
        <div @click='Settlement' class='footerc'>结算</div>
    </footer>
    <!-- 购物车 -->

    <div class='shop-car-mask' v-show="appearCar">
        <div class='shop-com'>
            <div class='shop-title'>
                <span>已选商品</span>
                <span @click="delCar">清空</span>
            </div>
            <ul class="car-shopList">
                <template v-for='(item,index) in carArr'>
                    <li class='car-list'>
                        <div class='car-img'>
                            <img :src='item.img'/>
                        </div>
                        <div class='car-name'>{{item.name}}</div>
                        <div class='car-num'>￥{{item.price}}</div>
                        <div class='boxrit_right2'>
                            <img @click='carReduceNum(index)' class='boxrit_right_img2' src='./images/minus.png'/>
                            <span class='boxrit_right_num2'>{{item.num}}</span>
                            <img @click='carAddNum(index)' class='boxrit_right_img2' src='./images/add.png'/>
                        </div>
                    </li>
                </template>
            </ul>
        </div>
    </div>
</div>