本站源码全部测试通过,配有前台及后台演示图,绿色安全,希望能对大家有所帮助!
  • 首 页
  • VPS/云主机
  • VIP会员
  • vue仿pos机点餐系统收银管理代码
    时间:2019-12-04 20:06 来源:开源之家 作者:开源之家测试提供 下载:102 次
    • 源码说明:本站源码全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    • 源码类型:特效源码
    • 源码大小:259 KB
    • 运行环境:HTML
    • 下载次数:102 次
    • 推荐VPS:
    • 提取密码/源码编号:
    • 本地下载
    • 本地下载
    • 》网盘下载,每日更新

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

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

    代码结构

    1. 引入CSS

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

    2. 引入JS

    1
    2
    3
    <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>
         
    

    郑重声明:
    本站资源均由高价购买、会员分享,全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    若您需要商业运营或用于其它商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。如有侵犯您的版权,请提交软件证书/图片地址和源码链接 我们尽快处理。

    开源之家广告栏目A
    开源之家广告栏目B
    开源之家广告栏目C
    在线客服
    客服微信

    扫一扫......加客服微信