0、知识点
- 购物车页面渲染用餐人数
- 计算总价
1、EditPeopleInfo.vue
<script>
//引入NavFooter组件
import NavFooter from './public/NavFooter.vue';
//引入配置文件
import Config from '../model/config.js';
export default{
data () {
return {
api:Config.api,
list:[],
peopleList:[], // 定义一个用户列表数组
allPrice:0, // 定义总价为0
totalNum:0 // 定义总数量为0
}
},methods:{
getCartData(){ // 定义
//桌子id 桌子号:是扫描二维码从url获取的
var api=this.api+'api/cartlist?uid=a001';
this.$http.get(api).then((response)=>{
// console.log(response);
this.list=response.body.result;
this.getTotalResult();
},(error)=>{
console.log(error);
})
},
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)=>{
this.getTotalResult();
},(error)=>{
console.log(error);
})
if(item.num==1){
//删除当前购物车的这条数据
this.list.splice(key,1);
}else{
--item.num;
}
},
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);
this.getTotalResult();
},(error)=>{
console.log(error);
})
++item.num;
}
,
/*获取总数量 以及总价格*/
getTotalResult(){
var allPrice=0;
var totalNum=0;
for(var i=0;i<this.list.length;i++){
allPrice+=parseFloat(this.list[i].price*this.list[i].num);
totalNum+=this.list[i].num;
}
this.allPrice=allPrice;
this.totalNum=totalNum;
},
// 获取用餐人的信息
getPeopleInfoList(){
var api=this.api+'api/peopleInfoList?uid=a002';
this.$http.get(api).then(response => {
console.log(response);
this.peopleList=response.body.result[0];
}, response => {
// error callback
});
}
},
mounted(){
this.getCartData();
this.getPeopleInfoList();
},
components:{
'v-navfooter':NavFooter
}
}
</script>
- 当用户点击购物车中的菜品,对数量进行加减操作时,相应的购物车里面的总价也要发生相应的改变
- 效果图