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

0、知识点

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

1、桌子号与购物车关联

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

2、 购物车数量加减

3、选择菜品加入购物车

• 在Pcontent.vue中

<template>	
<div class="cart">				
				<strong>数量:</strong>
				<div class="cart_num">
		          <div class="input_left" @click="decNum()">-</div> // 实现购物车数量减少
		          <div class="input_center">
		              <input type="text"  readonly="readonly" v-model='num' name="num" id="num" /> // 双向数据绑定，操作num的变化
		          </div>
		          <div class="input_right"  @click="incNum()">+</div>	// 实现购物车数量增加
		        </div>								
			
			</div>




			<button class="addcart" @click="addCart()">加入购物车</button>	// 绑定一个click事件

</template>		

<script>
  data () {
            return {
                  api:Config.api,
                  list:[],
                  num:1  //初始化num等于1
            }
        },


//  购物车数量加减
 methods:{
		 decNum(){  // 定义num减少方法
                if(this.num>1){
                    --this.num;
                }
            },
            incNum(){  // 定义num增加方法
                ++this.num;                
            } ,
}



// 选择菜品加入购物车
addCart(){   // 定义addCart方法

                //获取数据加入购物车

                //桌子id  桌子号：是扫描二维码从url获取的

                var api=this.api+'api/addcart'

                this.$http.post(api,{
                    uid:'a001', // 桌子号是写死的，后面代码会优化，使用扫描二维码的方式动态获取
                    title:this.list.title,
                    price:this.list.price,
                    num:this.num,
                    product_id:this.list._id,
                    img_url:this.list.img_url
               
                }).then((response)=>{
                    console.log(response);

                    if(response.body.success){

                        this.$router.push({ path: 'home' })  // 当成功获取到数据后，从购物车跳转到home主页上
                    }
                                        
                },(err)=>{

                    console.log(err);
                })
          }
</script>

4、更新购物车数量

• 在Home.vue中

<template>

<div id="footer_cart" class="footer_cart">
			<img src="../assets/images/cart.png"/>
		 
		    <p>购物车</p>
		   
            <span class="num" v-if="cartNum">{{cartNum}}</span> // 绑定cartNum数量，先判断cartNum是否存在
		</div>

</template>




<script>

 data () {  /*数据*/
            return {
				  list:[],
				  api:Config.api,
                  cartNum:0  // 默认设置cartNum等于0
            }
        }, 



		 getCartCount(){/*获取购物车的数量*/

               //桌子id  桌子号：是扫描二维码从url获取的

               
                var api=this.api+'api/cartCount?uid=a001'; // 桌号uid现在是写死的，回头需要动态获取

                this.$http.get(api).then((response)=>{

                    console.log(response.body.result);

                    this.cartNum=response.body.result; // 改变数量

                },(err)=>{

                    console.log(err);
                })


            }


mounted(){   /*生命周期函数*/

			this.asideDomInit();
			this.requestData();
            this.getCartCount(); // 调用getCartCount()方法

		},

</script>

• 在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;

    }
    

• 效果图