178.Vue.js智能扫码点餐系统（十二）【购物车页面渲染用餐人数、计算总价】2019.03.24

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>

• 当用户点击购物车中的菜品，对数量进行加减操作时，相应的购物车里面的总价也要发生相应的改变
• 效果图