项目地址：https://gitee.com/yanhsama/mimi-shop

图示

步骤1：获取商品信息

    mounted(){
        //  获取购物车商品信息，保存到data中
        let cart=JSON.parse(sessionStorage.getItem('cart'))
        console.log(cart)
        this.cart=cart
        // 
    }

步骤2：将产品渲染到页面

        <!-- cart -->
        <div class="productArea" >
            <div class="everyCart clearFix" v-for="(item,index) in cart" :key="index">
                <div class="checkBox">
                    <input type="checkbox" :checked="item.checked" @click="changCheck($event,index)"/>
                </div>
                <div class="productPic">
                    <img :src="item.goods_small_logo" alt="">
                </div>
                <div class="productName">
                    <p class="nameText">{{item.goods_name}}</p>
                    <p class="priceText">￥ {{item.goods_price}}</p>
                    <p class="numCompute">
                        <button class="dec" @click="computeNum($event,index)" data-comType='-1'>-</button>
                        <span >{{item.num}}</span>
                        <button class="add" @click="computeNum($event,index)" data-comType='+1'>+</button>
                    </p>
                </div>
            </div>
        </div>

底部导航

        <!-- 底部导航 -->
        <div class="footNav">
            <div class="allcheck">
                <input type="checkbox" v-model="allChecked" @click="changeAll" />全选
            </div>
            <div class="compute">
                合计￥
                <span>{{totalPrice}}</span>
            </div>
            <div class="goPlay">
                支付({{totalNum}})
            </div>
        </div>

步骤3：商品数量修改

        computeNum(e,index){
            // console.log(e)
            let i=index
            // console.log(index)
            let typeC=e.target.dataset.comtype
            let cart =this.cart
            // console.log(typeC)
            if(typeC =='-1'){
                // console.log('-1')
                if(cart[i].num>1){
                    cart[i].num-=1
                }
            }
            if(typeC =='+1'){
                // console.log('+')
                cart[i].num+=1
            }
        }

步骤4：计算总金额与总数量

        // 计算金额/总数量方法
        computePN(){
            let cart=this.cart
            let totalPrice=0
            let totalNum=0
            if(cart.length>0){
                cart.forEach((v)=>{
                    // console.log(typeof v.goods_price)
                    if(v.checked==true){
                        totalPrice+=v.goods_price*v.num
                        totalNum+=v.num
                    }  
                })
            }else{
                return false
            }
            // console.log(totalPrice,totalNum)
            this.totalPrice=totalPrice
            this.totalNum=totalNum
        }

更新

updated(){
        // console.log('uodate')
        this.computePN()
}

步骤4：全选取反

        changeAll(){
            // 全选
            this.allChecked=!this.allChecked
            // console.log(this.allChecked)
            let cart=this.cart
            if(cart.length>0){
                cart.forEach((v)=>{
                    if(this.allChecked==true){
                        v.checked=true
                    }else{
                        v.checked=false
                    }
                })
            }else{
                return false
            }    
            // console.log(cart)
        }

步骤5：商品选中

        changCheck(e,index){
            // console.log(e.target.checked)
            let checked=e.target.checked//点击后改变的状态
            // console.log(checked,index)
            let cart=this.cart
            cart[index].checked=checked
            // console.log(cart)
            this.allChecked=cart.length?cart.every(v=>v.checked):false
            // console.log(this.allChecked)
        }