176.Vue.js智能扫码点餐系统（十）【购物车列表制作、购物车列表数量增加减少】2019.03.22

0、知识点

• 购物车列表制作
• 购物车列表数量增加减少

1、购物车跳转

• 从Home.vue跳转到Cart.vue

<div id="footer_cart" class="footer_cart">
            <router-link to="/cart">  // 由home.vue跳转到cart页面当中
            
                    <img src="../assets/images/cart.png"/>
                    <p>购物车</p>
                    
            </router-link>	
            
            <span class="num" v-if="cartNum">{{cartNum}}</span>
</div>

• 效果图
• 点击右下角购物车按钮，跳转到购物车cart页面
  
  2、cart.vue

<template>

	<div class="cart_list">
						
				<ul>
						
					<li class="item" v-for="(item,key) in list"> // 循环遍历list
							 	<div class="left_food">
	       						    <img :src="api+item.img_url" />    // 拼接img的api    						
		       						<div class="food_info">
		       							<p>{{item.title}}</p>
		       							<p class="price">¥{{item.price}}</p>
		       						</div>
	       							
	       						</div>
	       						
	       						<div id="right_cart">
	       							<div class="cart_num">

										 // 绑定监听购物车数量减少时的变化
								         <div class="input_left" @click="decNum(item,key)">-</div>
								          <div class="input_center">
								              <input type="text"  readonly="readonly" v-model="item.num" name="num" id="num" /> // 双向数据绑定，使用v-model
								          </div>
								          
								          // 绑定监听购物车数量增加时的变化
								          <div class="input_right" @click="incNum(item)">+</div>				      
								        </div>	
	       						</div>						
						
					</li>
				</ul>
	</div>
</template>


<script>

//引入配置文件
import Config from '../model/config.js';

    export default{
        data () {
            return {
                  api:Config.api,
                  list:[]
            }
        },methods:{

                getCartData(){
                    
                    //桌子id  桌子号：是扫描二维码从url获取的
                    var api=this.api+'api/cartlist?uid=a001'; // 这里的uid是写死的，回头需要重新修改

                    this.$http.get(api).then((response)=>{	// 成功的回调
                        console.log(response);

                        this.list=response.body.result;
                    },(error)=>{	// 失败的回调
                        console.log(error);
                    })
                },

           		// 定义decNum方法
                decNum(item,key){

                    //请求远程服务器执行更新操作
                    //桌子id  桌子号：是扫描二维码从url获取的
                    var product_id=item.product_id;
                    var num=item.num;
                    var api=this.api+'api/decCart?uid=a001&product_id='+product_id+'&num='+num;

                    this.$http.get(api).then((response)=>{
                        console.log(response);
                    },(error)=>{
                        console.log(error);
                    })


                    if(item.num==1){ // 当num 完全等于1时，删除购物车的数据
                        //删除当前购物车的这条数据
                        this.list.splice(key,1);

                    }else{
                        --item.num;
                    }

                   
                },

   				// 定义incNum方法
                incNum(item){

                        // incCart?uid=a001&product_id=1241241255436246&num=2
                        //请求远程服务器执行更新操作

                        //桌子id  桌子号：是扫描二维码从url获取的
                        var product_id=item.product_id;
                        var num=item.num;
                        var api=this.api+'api/incCart?uid=a001&product_id='+product_id+'&num='+num;

                        this.$http.get(api).then((response)=>{
                            console.log(response);
                        },(error)=>{
                            console.log(error);
                        })

                        ++item.num;
                }
        },
        mounted(){

            this.getCartData();
        },
}
</script>

• 当购物车的菜品数量增加或者减少时，服务器当中的数据也同步变化
• 示意图