175.Vue.js智能扫码点餐系统（九）【桌号关联购物车数据、 购物车数量加减、选择菜品加入购物车、更新购物车数量】2019.03.22

0、知识点

• 桌号关联购物车
• 草料二维码
• 购物车数量加减
• 选择菜品加入购物车
• 更新购物车数量

1、桌子号与购物车关联

• 一般的，我们在存储数据时，会把数据存放在本地的浏览器localstorage当中，但是在多人点餐的时候，这样做不能让购物车的数据做到实时同步，因此，我们一般是将桌子号与购物车进行关联，然后通过服务器把本地数据与服务端数据进行websocket无刷新的实时同步，以达到购物车当中的数据都是实时更新的效果。
• 扫码桌子上的二维码，通过二维码上面的链接地址的id，可以与桌子号进行绑定，当用户加入菜品到购物车后，会同步到购物车数据

2、 购物车数量加减

3、选择菜品加入购物车

• 在Pcontent.vue中

4、更新购物车数量

• 在Home.vue中

• 在basic.scss中

 p{
        position: relative;        
        top:-0.2rem
    }
    .num{ // 定义num样式
        position: absolute;

        display: inline-block;

        width: 2rem;
        height: 2rem;

        border-radius: 50%;
        line-height: 2rem;
        text-align: center;

        top:-.5rem;
        right: -.5rem;
        background: red;
        color: #fff;

    }
    

• 效果图