POS

• • 前言
  • 1、構建項目目錄
  • 2、創建POS組件
  • 3、圖標庫
  • • • 注意：引用彩色圖標
  • 4、側邊欄leftNav
  • 5、Element組件庫
  • 6、Axios遠程讀取數據
  • • • 安裝axios
      • 導入
      • 獲取數據
  • 7、訂單模塊（以數據驅動來改變DOM結構）
  • 8、項目打包和上線

—技術胖的Pos教學網址—

前言

進行一個基于vue的收銀界面

1、構建項目目錄

使用vue-cli快速構建

2、創建POS組件

新建Pos組件

Pos.vue

<template><div class="pos">Hello</div> </template><script> export default {name: 'pos'} </script><style scoped></style>

修改路由：

import Vue from 'vue' import Router from 'vue-router' import Pos from '@/components/Pos'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Pos',component: Pos}] })

給index.html樣式

然后目前結果就是：

3、圖標庫

阿里圖標庫

進入iconfont，將需要的圖標加入購物車，然后加入項目

然后

使用在線鏈接法（不推薦）

• 1、點擊在線連接，并生成代碼
  
• 2、復制鏈接，并在前面加 http: 然后在項目的index.html中引用
  
  3、然后就可以在組件中使用了

復制需要圖標的代碼

在App.vue中


結果：

下載到本地使用（推薦）（生成css文字圖標樣式）
第一種是很簡單，可是如果我們的客戶不能鏈接外網或者突然間沒有網速等情況怎么辦？所以，我們要使用第二種，下載到本地。
接著上面的步驟，我們先把之前在index.js文件下link進去的樣式給取消（一定要取消），然后點擊下載到本地

解壓我們下載好的文件，在vue項目中創建iconfont文件夾，把我們下載好的文件除了demo都放進去，然后就可以全局引入，在main.js中引入iconfont.css樣式

import ‘./assets/iconfont/iconfont.css’（如果在不同的項目下需要注意）
import ‘xxx/xxx/xxx/iconfont.css’

在組件中使用方法就和方法1一樣了。

注意：引用彩色圖標

在main.js中

import '../static/iconfont/iconfont.css' require('../static/iconfont/iconfont.js')

iconfont 中的東西 就是你下載的文件 解壓出來的

在組件中使用的話

紅色下劃線這里是復制的

<svg class="icon iconfont"> <use xlink:href="#icon-shouye"></use></svg>

在iconfont.css中加

.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden; }

然后就可以了

4、側邊欄leftNav

新建common、page文件夾，然后將Pos.vue放進去，同時修改路由


然后在common文件夾創建組件leftNav.vue

5、Element組件庫

Element

安裝：

npm install element-ui -S

注意：版本兼容問題，使用最新的會和vue 2.6.0 產生不兼容，因此使用2.13.2版本

然后在main.js中引入，使用Vue.use讓它全局可用


使用：按照文檔使用就可以了

代碼：在第七點的Pos.vue中

6、Axios遠程讀取數據

提交post，get請求、涉及到和服務器交互的時候都使用Axios
Axios使用文檔
Axios和服務器交互 參考一
Axios和服務器交互 參考二

安裝axios

npm i axios -S

導入

不需要全局導入，在哪里需要使用就在那里導入

獲取數據

在鉤子函數中：

7、訂單模塊（以數據驅動來改變DOM結構）

實現：點擊商品加入訂單列表，計算總商品金額，刪除與增加，結賬模擬

Pos.vue

<template><div class="pos"><el-row><el-col :span="7" class="pos-order" id="orderlist"><el-tabs stretch v-model="activeName"><el-tab-pane label="點餐" name="first"><el-table border style="width: 100%" :data="tableData"><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"><!-- 這個scope是可以獲取點擊的行的數據 --><template slot-scope="scope"><el-buttontype="text"size="small"@click="delSingleGoods(scope.row)">刪除</el-button><el-buttontype="text"size="small"@click="addOrderList(scope.row)">增加</el-button></template></el-table-column></el-table><div class="btn"><el-button type="warning" size="default">掛單</el-button><el-button type="danger" size="default" @click="delAllGoods">刪除</el-button><el-button type="success" size="default" @click="checkout">結賬</el-button></div><div>總金額: {{ sumPrice }}</div></el-tab-pane><el-tab-pane label="掛單" name="second"> 掛單 </el-tab-pane><el-tab-pane label="外賣" name="third"> 外賣 </el-tab-pane></el-tabs></el-col><el-col :span="17"><div class="goods"><div class="title">常用商品</div><div class="goods-list"><ul><liv-for="goods in oftenGoods":key="goods.goodsId"@click="addOrderList(goods)"><span>{{ goods.goodsName }}</span><span class="o-price">￥{{ goods.price }}元</span></li></ul></div></div><div class="goods-type"><el-tabs stretch><el-tab-pane label="漢堡"><ul class="cookList"><liv-for="goods in type0Goods":key="goods.goodsId"@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><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-col></el-row></div> </template><script> import axios from "axios"; export default {name: "pos",data() {return {activeName: "first",tableData: [// {// goodsName: "可口可樂",// price: 8,// count: 1,// },// {// goodsName: "漢堡",// price: 15,// count: 1,// },// {// goodsName: "薯條",// price: 8,// count: 1,// },// {// goodsName: "甜筒",// price: 8,// count: 1,// },// {// goodsName: "可口可樂",// price: 8,// count: 1,// },// {// goodsName: "漢堡",// price: 15,// count: 1,// },// {// goodsName: "薯條",// price: 8,// count: 1,// },// {// goodsName: "甜筒",// price: 8,// count: 1,// },],oftenGoods: [{goodsId: 1,goodsName: "香辣雞腿堡",price: 18,},{goodsId: 2,goodsName: "田園雞腿堡",price: 15,},{goodsId: 3,goodsName: "和風漢堡",price: 15,},{goodsId: 4,goodsName: "快樂全家桶",price: 80,},{goodsId: 5,goodsName: "脆皮炸雞腿",price: 10,},{goodsId: 6,goodsName: "魔法雞塊",price: 20,},{goodsId: 7,goodsName: "可樂大杯",price: 10,},{goodsId: 8,goodsName: "雪頂咖啡",price: 18,},{goodsId: 9,goodsName: "大塊雞米花",price: 15,},{goodsId: 20,goodsName: "香脆雞柳",price: 17,},],type0Goods: [{goodsId: 1,goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos001.jpg",goodsName: "香辣雞腿堡",price: 18,},{goodsId: 2,goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos002.jpg",goodsName: "田園雞腿堡",price: 15,},{goodsId: 3,goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos004.jpg",goodsName: "和風漢堡",price: 15,},{goodsId: 4,goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg",goodsName: "快樂全家桶",price: 80,},{goodsId: 5,goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg",goodsName: "脆皮炸雞腿",price: 10,},{goodsId: 6,goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos004.jpg",goodsName: "魔法雞塊",price: 20,},{goodsId: 7,goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos001.jpg",goodsName: "可樂大杯",price: 10,},{goodsId: 8,goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg",goodsName: "雪頂咖啡",price: 18,},{goodsId: 9,goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos002.jpg",goodsName: "大塊雞米花",price: 15,},{goodsId: 20,goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos002.jpg",goodsName: "香脆雞柳",price: 17,},],type1Goods: [],type2Goods: [],type3Goods: [],sumPrice: 0,};},// created:function(){// axios.get('https://www.easy-mock.com/mock/5b8b30dbf032f03c5e71de7f/kuaican/oftenGoods')// .then(reponse=>{// console.log(reponse);// //這個data是后臺提供的data數組// this.oftenGoods = reponse.data;// })// .catch(error=>{// console.log(error);// })// axios.get('http://jspang.com/DemoApi/typeGoods.php')// .then(reponse=>{// console.log(reponse);// //這個data是后臺提供的data數組// this.type0Goods = reponse.data[0];// this.type1Goods = reponse.data[1];// this.type2Goods = reponse.data[2];// this.type3Goods = reponse.data[3];// })// .catch(error=>{// console.log(error);// })// },mounted: function () {var orderHeight = document.body.clientHeight;document.getElementById("orderlist").style.height = orderHeight + "px";},methods: {addOrderList(goods) {//商品是否已經存在與訂單列表let isHave = false;for (let i = 0; i < this.tableData.length; i++) {if (this.tableData[i].goodsId == goods.goodsId) {isHave = true;}}//根據判斷的值編寫業務邏輯if (isHave) {//改變列表中商品數量let arr = this.tableData.filter((o) => o.goodsId == goods.goodsId);arr[0].count++;} else {let newGoods = {goodsId: goods.goodsId,goodsName: goods.goodsName,price: goods.price,count: 1,};this.tableData.push(newGoods);}this.sumGoodsPrice();},//刪除單個商品delSingleGoods(goods) {this.tableData = this.tableData.filter((o) => o.goodsId != goods.goodsId);this.sumGoodsPrice();},//計算總金額sumGoodsPrice(){this.sumPrice = 0;//element指的是每次循環時tableData中的每個元素this.tableData.forEach((element) => {this.sumPrice = this.sumPrice + element.price * element.count;});},// 刪除全部商品delAllGoods(){this.sumPrice = 0;this.tableData = [];},//模擬結賬checkout(){if(this.sumPrice != 0){this.tableData = [];this.sumPrice = 0;//element提供的屬性this.$message({message: '結賬成功',type: 'success'})}else{this.$message.error('沒有商品');}}}, }; </script><style scoped> .pos-order {background-color: #f9fafc;border-right: 1px solid #c0ccda;height: 100%; } .btn {margin-top: 20px; } .title {height: 20px;border-bottom: 1px solid #d3dce6;background-color: #f9fafc;padding: 10px;text-align: center; }.goods-list ul {display: flex;flex-wrap: wrap;justify-content: flex-start; } .goods-list ul li {width: 160px;list-style: none;border: 1px solid #e5e9f2;padding: 10px;margin: 8px;background-color: #fff;cursor: pointer; } .o-price {color: #58b7ff; } .cookList li {list-style: none;width: 23%;border: 1px solid #e5e9f2;height: auot;overflow: hidden;background-color: #fff;padding: 2px;float: left;margin: 2px;cursor: pointer; } .cookList li span {display: block;float: left; } .foodImg {width: 40%; } .foodName {font-size: 18px;padding-left: 10px;color: brown; } .foodPrice {font-size: 16px;padding-left: 10px;padding-top: 10px; } </style>

8、項目打包和上線

首先，找到config下的index.js中的build部分,這里設置了打包后到哪個文件以及路徑信息，在這里可以修改打包的目錄，打包的文件名。最重要的是一定要把絕對目錄改為相對目錄。

把本來的 / 改為 ./ ，這是把絕對路徑（目錄）改為相對路徑（目錄）

然后輸入 打包命令

npm run build

然后就看到了打包后的文件

然后找到對應文件就可以上傳到服務器之類的了

總結

以上是生活随笔為你收集整理的Vue实战 POS系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。