快餐店收銀系統Pos學習筆記
#快餐店收銀系統Pos學習筆記
##第一節mockplus
這是一個產品經理使用的軟體，可以大概地做出網頁樣式。
##第二節安裝vue-cli環境
mpm install vue-cli -g
全域性下安裝vue-cli腳手架
vue init webpack
進入目錄下後輸入上面的命令，可以初始化當期資料夾，採用webpack模板
之後在component下新建一個pos.vue，之後配置相對的路由路徑router
##第三節圖示選擇
可以登入這個網站進行獲取，http://www.iconfont.cn
##第四節編寫獨立的側邊欄導航元件
即編寫懸浮在左邊的選單欄首先建立一個leftNav.vue的組鍵，寫好相應的html和css樣式，
記得要float:left;讓它左浮動。之後引入App.vue中， 這樣就可以直接引入。
##第五節Element的使用
Element是一套為開發者、設計師和產品經理準備的基於Vue2.0的元件庫，提供了配套設計資源，幫助你的網站快速成型
npm install element-ui --save
下載到當前工程下。
之後在專案中引入可以在main.js下進行操作
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
這樣便可以使用元件庫了。
用Element的el-row的布個局
安裝好，先做個簡單的佈局小試牛刀，這裡作兩欄佈局，Element支援用24欄的形式進行佈局。
<div> <el-row > <el-col :span='7'> 我是訂單欄 </el-col> <!--商品展示--> <el-col :span="17"> 我是產品欄 </el-col> </el-row> </div>
但是使用元件是無法設定高度100%的。
所以用javascript來實現，
mounted:function(){
var orderHeight=document.body.clientHeight;
document.getElementById("order-list").style.height=orderHeight+'px';
},
使用到了vue構造器裡的鉤子函式。
##第六節element佈局（一）
el-tabs標籤頁元件
用Element裡提供的el-tabs元件可以快速製作我們的tabs標籤頁效果，具體使用方法可以到Element的官網檢視API。
基本用法很簡單，可以直接在模板中引入標籤，標籤裡邊用來代表每個每個標籤頁。
<el-tabs>
<el-tab-pane label="點餐">
點餐
</el-tab-pane>
<el-tab-pane label="掛單">
掛單
</el-tab-pane>
<el-tab-pane label="外賣">
外賣
</el-tab-pane>
</el-tabs>
相當於一個多選項卡列表。
el-table元件製作表格
<el-table :data="tableData" border show-summary style="width: 100%" >
<el-table-column prop="goodsName" label="商品" ></el-table-column>
<el-table-column prop="count" label="量" width="50"></el-table-column>
<el-table-column prop="price" label="金額" width="70"></el-table-column>
<el-table-column label="操作" width="100" fixed="right">
<template slot-scope="scope">
<el-button type="text" size="small">刪除</el-button>
<el-button type="text" size="small">增加</el-button>
</template>
</el-table-column>
</el-table>
建立一個表資料為tableData，列項為goodsName，count，price.最後一項是添加了兩個按鈕。
再在下面放三個el-button 按鈕元件
<el-button type="warning" >掛單</el-button>
<el-button type="danger" >刪除</el-button>
<el-button type="success" >結賬</el-button>
type設定顏色。
##第七節Element快速佈局（二）
這次完成右邊的操作。
常用商品佈局
<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>
設定相應css樣式後，資料在ofenenGoods中，然後迴圈輸出。
商品分類佈局：
下半部分：
<el-tabs>
<el-tab-pane label="漢堡">
漢堡
</el-tab-pane>
<el-tab-pane label="小食">
小食
</el-tab-pane>
<el-tab-pane label="飲料">
飲料
</el-tab-pane>
<el-tab-pane label="套餐">
套餐
</el-tab-pane>
</el-tabs>
</div>
同樣加入這幾個選項卡。
<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>
<span class="foodName">{{goods.goodsName}}</span>
<span class="foodPrice">￥{{goods.price}}元</span>
</li>
</ul>
</el-tab-pane>
這樣就可以使用資料type0Goods上的資料遍歷輸出，小食，飲料也是相同的處理。
##第八節Axios遠端讀取資料
npm install axios --save
由於axios是需要打包到生產環境中的，所以我們使用–save來進行安裝。
引入Axios
我們在Pos.vue頁面引入Axios，由於使用了npm來進行安裝，所以這裡不需要填寫路徑。
import axios from 'axios'
寫到script下
created(){
axios.get('http://jspang.com/DemoApi/oftenGoods.php')
.then(response=>{
console.log(response);
this.oftenGoods=response.data;
})
.catch(error=>{
console.log(error);
alert('網路錯誤，不能訪問');
})
//讀取分類商品列表
axios.get('http://jspang.com/DemoApi/typeGoods.php')
.then(response=>{
console.log(response);
//this.oftenGoods=response.data;
this.type0Goods=response.data[0];
this.type1Goods=response.data[1];
this.type2Goods=response.data[2];
this.type3Goods=response.data[3];
})
.catch(error=>{
console.log(error);
alert('網路錯誤，不能訪問');
})
},
寫到鉤子函式下，獲取資訊資料。
##第九節核心功能
新增商品到訂單頁面
addOrderList(goods){
this.totalCount=0; //彙總數量清0
this.totalMoney=0;
let isHave=false;
//判斷是否這個商品已經存在於訂單列表
for (let i=0; i<this.tableData.length;i++){
console.log(this.tableData[i].goodsId);
if(this.tableData[i].goodsId==goods.goodsId){
isHave=true; //存在
}
}
//根據isHave的值判斷訂單列表中是否已經有此商品
if(isHave){
//存在就進行數量新增
let arr = this.tableData.filter(o =>o.goodsId == goods.goodsId);
arr[0].count++;
//console.log(arr);
}else{
//不存在就推入陣列
let newGoods={goodsId:goods.goodsId,goodsName:goods.goodsName,price:goods.price,count:1};
this.tableData.push(newGoods);
}
}
判斷tableData表中是否已有此商品，若有就通過let arr =this.tableData.filter(o =>o.goodsId == goods.goodsId);
篩選出tableData陣列中元素的goosId ==goods.goodsId，的全部元素然後再返回到一個新的tableData中，由於Javascript中，arr引用了tableData，但是指標是相同的，則改變arr，即tableData中的資料也改變了。
訂單列表中的增加按鈕
<el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
scope.row即當前行的物件。
刪除單個商品
delSingleGoods(goods){
console.log(goods);
this.tableData=this.tableData.filter(o => o.goodsId !=goods.goodsId);
},
this.tableData=this.tableData.filter(o => o.goodsId !=goods.goodsId);
篩選出不等的goosId，之後再返回給tableData
刪除全部訂單商品
//刪除所有商品
delAllGoods() {
this.tableData = [];
},
這樣就刪除全部了。
模擬結賬
checkout() {
if (this.tableData.length != 0) {
this.tableData = [];
this.$message({
message: '結賬成功，感謝你又為店裡出了一份力!',
type: 'success'
});
}else{
this.$message.error('不能空結。老闆瞭解你急切的心情！');
}
}
##第十節專案打包和上線
1、把絕對路徑改為相對路徑
我們開啟config/index.js 會看到一個build屬性，這裡就我們打包的基本配置了。你在這裡可以修改打包的目錄，打包的檔名。最重要的是一定要把絕對目錄改為相對目錄。
assetsPublicPath:'./'
之後再
npm run build