vue+elementui实现一个点餐收银系统页面代码
代码语言：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">
<el-tabs>
<el-tab-pane label="蛋糕">
<ul class='cookList'>
<li v-for="goods in type0Goods" @click="addOrderList(goods)">
<span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
<div class="food-content">
<span class="foodName">{{goods.goodsName}}</span>
<span class="foodPrice">￥{{goods.price}}元</span>
</div>
</li>
</ul>
</el-tab-pane>
<el-tab-pane label="小食">
<ul class='cookList'>
<li v-for="goods in type1Goods" @click="addOrderList(goods)">
<span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
<div class="food-content">
<span class="foodName">{{goods.goodsName}}</span>
<span class="foodPrice">￥{{goods.price}}元</span>
</div>
</li>
</ul>
</el-tab-pane>
<el-tab-pane label="饮料">
<ul class='cookList'>
<li v-for="goods in type2Goods" @click="addOrderList(goods)">
<span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
<div class="food-content">
<span class="foodName">{{goods.goodsName}}</span>
<span class="foodPrice">￥{{goods.price}}元</span>
</div>
</li>
</ul>
</el-tab-pane>
<el-tab-pane label="套餐">
<ul class='cookList'>
<li v-for="goods in type3Goods" @click="addOrderList(goods)">
<span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
<div class="food-content">
<span class="foodName">{{goods.goodsName}}</span>
<span class="foodPrice">￥{{goods.price}}元</span>
</div>
</li>
</ul>
</el-tab-pane>
</el-tabs>
</div>
</el-col>
</el-row>
</div>
</div>
</body>
<!-- 先引入 Vue -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
<!-- 引入组件库 -->
<script type="text/javascript" src="//repo..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0