微信截图_20180510152347.png

（借鉴胖大神的代码）

里面引用了Element基于Vue2.0的组件库与Axios从远程读取数据

npm install element-ui --save

在main.js中写入以下内容:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

npm install axios --save

哪个页面需要哪个页面引入
import axios from 'axios'

要实现的功能

增加与删除单个商品、删除全部、结账

点击1和2的商品会添加在左侧3里如果商品已存在则数量增加

点击增加单个数量增加，点击删除这个商品删除

点击增加与删除商品时数量与总价发生变化

goods.vue

<template>
    <div class="pos">
        <el-row>
            <el-col :span='7' class="pos-order" id="orderlist">
                <el-tabs>
                    <el-tab-pane label="点餐">
                        <el-table :data="tabledata" border style="width: 100%;">
                            <el-table-column prop="goodsName" label="商品名称"></el-table-column>
                            <el-table-column prop="count" label="数量" width="60"></el-table-column>
                            <el-table-column prop="price" label="金额" width="60"></el-table-column>
                            <el-table-column label="操作" width="100" fixed="right">
                                <!-- scope模板作用域 -->
                                <template scope="scope">
                                    <el-button type="text" size="small" @click="orderdelete(scope.row)">删除</el-button>
                                    <!-- scope.row把这行数据传进去（addorderlist） -->
                                    <el-button type="text" size="small" @click="addorderlist(scope.row)">增加</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="tatolmoney">
                            <span>数量：<em>{{tatolcount}}</em></span><span>总价：<em>{{tatolmoney}}</em></span>
                        </div>
                        <div class="orderbtn">
                            <el-button type="warning">挂单</el-button>
                            <el-button type="danger" @click="alldelete">删除</el-button>
                            <el-button type="success" @click="checkout">结账</el-button>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="挂单"></el-tab-pane>
                    <el-tab-pane label="外卖"></el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span='17'>
                <div class="goodsdiv1">
                    <h1 class="title">常用商品</h1>
                    <div class="goodslist">
                        <ul>
                            <li v-for="goods in oftenGoods" @click="addorderlist(goods)"><span>{{goods.goodsName}}</span><span class="o-price">￥{{goods.price}}元</span></li>
                        </ul>
                    </div>
                </div>
                <div class="goodsdiv2">
                    <el-tabs>
                        <el-tab-pane label="汉堡">
                            <div class="good1">
                                <ul class='cookList' >
                                    <li v-for="type1 in type0Goods" @click="addorderlist(type1)">
                                        <span class="foodImg"><img :src="type1.goodsImg" width="100%"></span>
                                        <span class="foodName">{{type1.goodsName}}</span>
                                        <span class="foodPrice">￥{{type1.price}}元</span>
                                    </li>
                                </ul>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="小食">
                            <ul class='cookList'>
                                <li  v-for="type1 in type1Goods" @click="addorderlist(type1)">
                                    <span class="foodImg"><img :src="type1.goodsImg" width="100%"></span>
                                    <span class="foodName">{{type1.goodsName}}</span>
                                    <span class="foodPrice">￥{{type1.price}}元</span>
                                </li>
                            </ul>
                        </el-tab-pane>
                        <el-tab-pane label="饮料">
                            <ul class='cookList' >
                                <li v-for="type1 in type2Goods" @click="addorderlist(type1)">
                                    <span class="foodImg"><img :src="type1.goodsImg" width="100%"></span>
                                    <span class="foodName">{{type1.goodsName}}</span>
                                    <span class="foodPrice">￥{{type1.price}}元</span>
                                </li>
                            </ul>
                        </el-tab-pane>
                        <el-tab-pane label="套餐">
                            <ul class='cookList'>
                                <li  v-for="type1 in type3Goods" @click="addorderlist(type1)">
                                    <span class="foodImg"><img :src="type1.goodsImg" width="100%"></span>
                                    <span class="foodName">{{type1.goodsName}}</span>
                                    <span class="foodPrice">￥{{type1.price}}元</span>
                                </li>
                            </ul>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
        </el-row>
    </div>
 </template>

js代码

 <script>
    import axios from 'axios'
    export default({
        name:'pos',
        data(){
            return{
                tabledata: [],
                oftenGoods:[],
                type0Goods:[],
                type1Goods:[],
                type2Goods:[],
                type3Goods:[],
                tatolmoney:0,
                tatolcount:0
            }
        },
        created:function(){
            // then成功catch出错
            axios.get('http://jspang.com/DemoApi/oftenGoods.php')
            .then(response=>{
                console.log(response);
                this.oftenGoods=response.data;
            })
            .catch(error=>{
                 alert('网络错误，不能访问');
            })


            axios.get('http://jspang.com/DemoApi/typeGoods.php')
            .then(response=>{
                console.log(response);
                // this.oftenGoods=response.data;
                this.type0Goods=response.data[0];
                this.type1Goods=response.data[1];
                this.type2Goods=response.data[2];
                this.type3Goods=response.data[3];
     
            })
            .catch(error=>{
                console.log(error);
                alert('网络错误，不能访问');
            })
        },
        mounted:function(){
            var orderheight=document.body.clientHeight;
            document.getElementById('orderlist').style.height=orderheight+'px';
        },
        methods:{
            addorderlist:function(goods){
                
                //判断是否这个商品已经存在于订单列表
                var ishave=false;
                for(let i=0;i<this.tabledata.length;i++){
                    if(this.tabledata[i].goodsId == goods.goodsId){
                        ishave=true;
                    }
                }
                //根据isHave的值判断订单列表中是否已经有此商品
                if(ishave){
                    // 数组进行过滤
                    let arr = this.tabledata.filter(o=>o.goodsId == goods.goodsId);
                    arr[0].count++;
                }else{
                    let newarr = {goodsId:goods.goodsId,goodsName:goods.goodsName,price:goods.price,count:1}
                    this.tabledata.push(newarr);
                }

                this.totalcount();
            },
            orderdelete:function(goods){
                this.tabledata=this.tabledata.filter(o=>o.goodsId != goods.goodsId);
                this.totalcount();
            },
            alldelete(){
                this.tabledata=[];
                this.tatolcount=0;
                this.tatolmoney=0;
            },

            // 模拟结账功能  结账需要往服务器后台传post数据
            checkout(){
                if(this.tatolcount !=0){
                    this.tabledata=[];
                    this.tatolcount=0;
                    this.tatolmoney=0;
                    this.$message({
                        message:'结账成功',
                        type:'success'
                    })
                }else{
                    this.$message.error('亲，你还没点商品哦！')
                }
            },
            // 汇总数量与金额
            totalcount:function(){
                this.tatolmoney=0;
                this.tatolcount=0;
                if(this.tabledata){
                    this.tabledata.forEach(element=>{
                        this.tatolcount+=element.count;
                        this.tatolmoney+=element.price*element.count;
                    })
                }
                
            }
        }
    })
</script>

css代码

 <style scoped>
   *{list-style: none;}
   .pos-order{background-color: #fff; }
    .el-table .cell{text-align: center;}
    .orderbtn{margin-top:30px;}
    .title{text-align: center;height:40px;line-height: 40px;background-color: #fff;font-size: 14px;font-weight: normal;}
    .goodsdiv1{overflow: hidden;background-color:#F9FAFC ;}
    .goodsdiv1 ul li{cursor: pointer;}
    .goodsdiv2 ul li{margin:10px;cursor: pointer !important;}
    .goodslist{margin-top:30px;overflow: hidden;padding:10px;}
    .goodslist ul li{
        float: left;
        border:1px solid #E5E9F2;
        padding:10px;
        background-color: #fff;
        margin:10px;
    }
    .o-price{color:#58b7ff; padding-left: 10px;}
    .cookList li{
       list-style: none;
       width:190px;
       border:1px solid #E5E9F2;
       height: auto;
       overflow: hidden;
       background-color:#fff;
       padding: 2px;
       float:left;
       margin: 2px;
   }
   .cookList li span{ display: block;float:left; }
   .foodImg{ width: 40%;}
   .foodName{
       font-size: 16px;
       padding-left: 10px;
       color:brown;
       height:24px;
       font-family: "Microsoft YaHei", "Arial Narrow", sans-serif;
        text-align: left;
   }
   .foodPrice{
       font-size: 16px;
       padding-left: 10px;
       padding-top:10px;
   }
   .tatolmoney{margin:10px auto;overflow: hidden;}
   .tatolmoney span{
        display: block;
        width: 150px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        float: left;
   }
   .tatolmoney span em{color:red;}
</style>