vue仿pos机点餐系统收银管理代码



406 1620 541



特效描述:vue仿pos机 点餐系统收银管理,vue制作pos机点餐系统收银功能,仿点餐系统管理界面代码。

代码结构

1. 引入CSS

<link rel="stylesheet" href="fonts/iconfont.css">
<link rel="stylesheet" href="css/element-ui.css">
<link rel="stylesheet" href="css/pos.css">

2. 引入JS

<script src="js/vue.js"></script>
<script src="js/index.js"></script>
<script src="js/axios.min.js"></script>

3. HTML代码

  <div id="app">
    <!-- 左侧菜单 -->
    <ul class="left-nav">
      <li class="active">
        <i class="icon iconfont">&#xe8a4;</i>
        <span>收银</span>
      </li>
      <li>
        <i class="icon iconfont">&#xe895;</i>
        <span>店铺</span>
      </li>
      <li>
        <i class="icon iconfont">&#xe8a6;</i>
        <span>商品</span>
      </li>
      <li>
        <i class="icon iconfont">&#xe8a0;</i>
        <span>会员</span>
      </li>
      <li>
        <i class="icon iconfont">&#xe892;</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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 选项卡自动切换 按钮控制 购物车 添加删除

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到