餐飲門票自印應(yīng)用

#程序員干貨所#餐飲小票是餐廳消費的主要憑證之一，與消費發(fā)票一起構(gòu)成了很多單位財務(wù)報銷的依據(jù)。

對于部分小餐飲企業(yè)由于各種原因未能為用戶提供餐飲小票，給消費者帶來麻煩。本例以此需求為背景結(jié)合JavaScript、HTML、CSS等設(shè)計開發(fā)基于Web的餐飲小票BIY軟件，可以低成本幫助商家解決小票打印問題。

---

實現(xiàn)效果

本例實現(xiàn)餐飲小票DIY應(yīng)用，主要包括兩方面功能，其一為基本信息的填寫（基本信息、消費信息兩部分），即小票內(nèi)容的填寫。所填寫基本信息主要包括商家名稱、座號、人數(shù)、收銀、日期、金額。消費信信息主要是指實際消費的信息，包括品類、數(shù)量及價格。基本信息設(shè)置部分運行頁面如下圖：

程序基本參數(shù)設(shè)置部分

基本信息設(shè)置頁面如上圖所示，在菜單詳情部分支持動態(tài)表格的自動添加，用戶點擊添加將自動生成表格，在表格中填寫菜單之后，會自動計算總金額并填寫的總金額字段部分。填寫菜單詳細信息部分運行截圖如下：

菜單詳情填寫部分界面

在完成基本信息設(shè)置之后，商家用戶可直接點擊一鍵生成小票按鈕實現(xiàn)小票的自動生成，并在窗口右側(cè)展示小票預(yù)覽效果。以上數(shù)據(jù)對應(yīng)小票預(yù)覽功能實現(xiàn)截圖如下：

自動小票生成樣式示例

小票預(yù)覽沒有問題則可以繼續(xù)點擊打印按鈕實現(xiàn)小票的打印操作。調(diào)用系統(tǒng)的打印功能彈出打印設(shè)置窗口并進一步完成打印操作。打印操作頁面如下圖：

打印預(yù)覽窗口可設(shè)置紙張大?。ū纠鼳4）

以上給出該應(yīng)用主要功能及相關(guān)操作頁面展示，商家可以使用該程序?qū)崿F(xiàn)餐飲小票的打印輸出，其操作方便簡潔。

---

技術(shù)與實現(xiàn)說明

本例使用Sublime工具開發(fā)，主要使用技術(shù)包括HTML、CSS、原生JavaScript、前端框架PURE等進行的設(shè)計與開發(fā)。其中PURE及HTML、CSS主要用于實現(xiàn)前端頁面的架構(gòu)與布局。JavaScript主要用于實現(xiàn)業(yè)務(wù)操作。PURE使用主要鏈接其CSS樣式文件，實現(xiàn)代碼如下：

外部框架使用

Javascript編程部分主要對添加、重置餐單、一鍵生成、打印四個按鈕進行了JS編程實現(xiàn)。其中一鍵生成主要是獲取左側(cè)所填寫的小票基本信息，并在右側(cè)顯示出設(shè)計的小票樣式。

按鈕設(shè)計

本例為方便編程，將設(shè)置部分頂部基本信息單獨設(shè)計類進行描述，詳細菜單部分單獨設(shè)置類進行描述。小票按照信息也劃分為兩部分，頭部的基本信息與下方的菜品詳細信息，其中菜品詳細信息為表格布局。添加數(shù)據(jù)實現(xiàn)部分代碼截圖如下：

菜品詳細信息寫入

打印功能較為簡單，只需要使用JS中window的print功能即可實現(xiàn)網(wǎng)頁頁面的打印操作。默認情況下將完成整個網(wǎng)頁的打印，本例只打印小票部分，因此在打印之前將其他部分內(nèi)容隱藏，待打印完成再恢復(fù)顯示。打印功能封裝到myPrint方法，該方法代碼如下：

自定義打印函數(shù)

由于篇幅限制，其他技術(shù)部分問題、解決措施及代碼不再一一說明。如有問題可留言探討。

---

操作演示

使用預(yù)覽

---

本頭條號長期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓(xùn)。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯(lián)系作者，共同探討。期待大家關(guān)注！相關(guān)文章鏈接如下：

前端開發(fā)-JavaScript DOM動態(tài)生成文本框

前端設(shè)計-響應(yīng)式頁面開發(fā)基礎(chǔ)

前端設(shè)計-Ajax技術(shù)及實例展示