Vue 简单利用对象实现购物车

简单的实现购物车
1：简单实现购物车加入了better-scroll 利用全局的对象来传值
使用了better-scroll的scrollToElement方法实现楼层监听
商品数据分成了子组件，子组件的数量通过一个全局的Cart对象传递给父组件。类似于（vuex）

//父组件
<template>
    <div class="wrap">
        <header>
            饿了吗
        </header>
        <main>
            <ul class="left">
                <li @click="scrollTo(x.categoryName)" v-for="(x,y) in list" :key="y">{{x.categoryName}}</li>
            </ul>
            <ul class="right" ref="right">
                <div class="content">
                    <div class="item" v-for="(x,y) in list" :key="y">
                        <h6>{{x.categoryName}}</h6>
                        <dl :class="x.categoryName" v-for="(m) in x.spuList" :key="m.spuId">
                            <dt>
                                <img :src="m.littleImageUrl" alt="">
                            </dt>
                            <dd>
                               <p>{{m.spuName}}</p>
                               <p>{{m.originPrice}}</p>
                               <mins :mins="m" @comput='comput'></mins>
                            </dd>
                        </dl>
                    </div>
                </div>
            </ul>
        </main>
        <footer>
            <span>总价：{{cost}}</span>    
            <span>数量：{{total}}</span>
        </footer>
    </div>
</template>

<script>
import Mins from './minus.vue'
import axios from 'axios'
import BScroll from 'better-scroll'
export default {
    name:'home',
    data(){
        return {
            list:[],
            cost:0,
            total:0
        }
    },
    components:{
        Mins
    },
    created(){
    //请求数据
        axios.get('/getData').then(res=>{
            this.list=res.data.data.categoryList
            this.bscroll.refresh()  //better-scroll自行刷新
        })
    },
    mounted(){
    //实例化 better-scroll
       this.bscroll = new BScroll(this.$refs.right,{
            click:true   //better-scroll会让单击事件失效  加上这个属性
        })
    },
    methods:{
        scrollTo(el){
            this.bscroll.scrollToElement('.'+el)    //滚动到制定元素  DOM上定义了clss类 
        },
        comput(cardata){
        // 算数量和总价
            let cost = 0, total=0;
            Object.entries(cardata).forEach(item=>{   //通过对象的方法循环数据
                cost+=item[1].originPrice*item[1].count
                total+=item[1].count
            })
            this.cost=cost
            this.total=total
        }
    }
}
</script>

<style>
footer{
    width: 100%;
    height: 44px;
    background: #000;
    color: red;
}
</style>

//子组件
<template>
    <p>
        <button v-show="count !==0" @click="remnum" class="rem">-</button>
        <span v-show="count !==0">{{count}}</span>
        <button @click="addnum" class="add"></button>
    </p>
</template>

<script>
let cart={}
export default {
    data(){
        return {
            count:0
        }
    },
    props:['mins'],
    methods:{
    //点击实现数量的减少
        remnum(){
            this.count--
            cart[this.mins.spuId] = {...this.mins,count:this.count}  //全局对象添加属性，key值为数据的ID值 value为点击的当前项
            this.$emit('comput',cart)
        },
        addnum(){
        //点击实现数量的增加
            this.count++
            cart[this.mins.spuId] = {...this.mins,count:this.count}   //全局对象添加属性，key值为数据的ID值 value为点击的
            this.$emit('comput',cart)
        }
    }
};
</script>

<style>
button{
    font-size: 18px;
    font-weight: bold;
}
</style>