vue+elementui实现一个点餐收银系统页面代码-html代码-BFW代码库

代码语言：html
代码描述：vue+elementui实现一个点餐收银系统页面代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">


    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-ui.2.15.1.css">
    <style>
        body { font-family:"微软雅黑", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
    div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0; }
    li{list-style-type:none;}
    img{vertical-align:top;}
    h1,h2,h3,h4,h5,h6 { margin:0; padding:0;font-size:12px; font-weight:normal;}
    
    a:link {color: #1f3a87; text-decoration:none;}
    a:visited {color: #83006f;text-decoration:none;}
    a:hover {color: #bc2931; text-decoration:underline;}
    a:active {color: #bc2931;}
    
    body,html,#app{
        width: 100%;
        height: 100%;
    }
    .left-nav{
        color: #FFF;
        font-size: 12px;
        height: 100%;
        background: #1d8ce0;
        float: left;
        width: 60px;
    }
    .left-nav li {
        padding: 10px 0;
        text-align: center;
        border-bottom: 1px solid #e7e7e7;
        transition: all .5s;
    }
    .left-nav li:hover{
        background: #F90
    }
    .left-nav li.active{
        background: #F90
    }
    .icon {
        font-size: 36px;
        display: block
    }
    
    .pos{
        position: absolute;
        top: 0;
        right: 0;
        left: 60px;
        bottom: 0;
    }
    .pos .el-row,
    .pos .el-col{
        height: 100%;
    }
    .pos-order{
        padding: 10px;
        background: #fbfcff;
        border-right: 1px solid #e7e7e7
    }
    .goods-type{
        padding: 10px
    }
    .foot-statistical{
        padding: 10px;
        text-align: center;
        background: #fff;
        border: 1px solid #e7e7e7;
        border-top: none;
    }
    .foot-statistical span{
        margin: 0 10px;
        font-size: 16px
    }
    .foot-statistical span small{
        font-size: 12px
    }
    .foot-btn{
        padding: 10px;
        text-align: center
    }
    .title{
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        border-bottom:1px solid #D3DCE6;
        background-color: #F9FAFC;
        padding:10px;
    }
    .often-goods-list{ 
        padding: 10px;
        overflow: hidden
    }
    .often-goods-list ul li{
       list-style: none;
       float:left;
       border:1px solid #E5E9F2;
       padding:10px;
       margin:5px;
       background-color:#fff;
       cursor: pointer
    }
    .o-price{
       color:#58B7FF; 
    }
    .cookList li{
        list-style: none;
        width:23%;
        border:1px solid #E5E9F2;
        height: auot;
        overflow: hidden;
        background-color:#fff;
        padding: 2px;
        float:left;
        margin: 2px;
        cursor: pointer
    }
    .cookList li span{ 
         display: block;
         float:left;
    }
    .foodImg{
        width: 40%;
    }
    .food-content{
        float: left
    }
    .food-content span{
        display: block;
        width:100%
    }
    .foodName{
        font-size: 16px;
        padding-left: 10px;
        color:brown;
    }
    .foodPrice{
        font-size: 16px;
        padding-left: 10px;
        padding-top:10px;
    }
    .qr-code{
        text-align: center
    }
    </style>

</head>

<body>

    <div id="app">
        <!-- 左侧菜单 -->
        <ul class="left-nav">
            <li class="active">
                <i class="icon fa fa-cny"></i>
                <span>收银</span>
            </li>
            <li>
                <i class="icon fa  fa-paper-plane"></i>
                <span>店铺</span>
            </li>
            <li>
                <i class="icon fa fa-shopping-bag"></i>
                <span>商品</span>
            </li>
            <li>
                <i class="icon fa fa-user-circle-o"></i>
                <span>会员</span>
            </li>
            <li>
                <i class="icon fa  fa-cog"></i>
                <span>设置</span>
            </li>
        </ul>
        <!-- 收银台 -->
        <div class="pos">
            <el-row>
                <el-col :span="6" class="pos-order">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="点餐" name="orderIng">
                            <el-table :data="tableData" border>
                                <el-table-column prop="goodsName" label="商品名称"></el-table-column>
                                <el-table-column prop="count" label="数量" width="70"></el-table-column>
                                <el-table-column prop="price" label="金额" width="70"></el-table-column>
                                <el-table-column label="操作" width="100" fixed="right">
                                    <!-- scope 是模板的作用域，通过scope.row把这一行数据传递到addOrderList()中去 -->
                                    <template slot-scope="scope">
                    <el-button type="text" size="small" @click="delSingleGoods(scope.row)">删除</el-button>
                    <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                  </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="挂单" name="entryOrders">挂单</el-tab-pane>
                        <el-tab-pane label="外卖" name="takeOut">外卖</el-tab-pane>
                    </el-tabs>
                    <div class="foot-statistical">
                        <span><small>数量：</small>{{totalCount}}</span>
                        <span><small>金额：</small>{{totalMoney}}元</span>
                    </div>
                    <div class="foot-btn">
                        <el-button type="warning">挂单</el-button>
                        <el-button type="danger" @click="delAllGoods">删除</el-button>
                        <el-button type="success" @click="checkout">结账</el-button>
                    </div>
                </el-col>
                <el-col :span="18">
                    <div class="often-goods">
                        <div class="title">常用商品</div>
                        <div class="often-goods-list">
                            <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="goods-type">
                   .........完整代码请登录后点击上方下载按钮下载查看