vue仿pos機點餐系統收銀管理代碼



444 1774 592



特效描述: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

加群請備注:從官網了解到

老夫子电子