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>
- 当购物车的菜品数量增加或者减少时，服务器当中的数据也同步变化
- 示意图
