POS

• • 前言
  • 1、構(gòu)建項(xiàng)目目錄
  • 2、創(chuàng)建POS組件
  • 3、圖標(biāo)庫
  • • • 注意：引用彩色圖標(biāo)
  • 4、側(cè)邊欄leftNav
  • 5、Element組件庫
  • 6、Axios遠(yuǎn)程讀取數(shù)據(jù)
  • • • 安裝axios
      • 導(dǎo)入
      • 獲取數(shù)據(jù)
  • 7、訂單模塊（以數(shù)據(jù)驅(qū)動(dòng)來改變DOM結(jié)構(gòu)）
  • 8、項(xiàng)目打包和上線

—技術(shù)胖的Pos教學(xué)網(wǎng)址—

前言

進(jìn)行一個(gè)基于vue的收銀界面

1、構(gòu)建項(xiàng)目目錄

使用vue-cli快速構(gòu)建

2、創(chuàng)建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樣式

然后目前結(jié)果就是：

3、圖標(biāo)庫

阿里圖標(biāo)庫

進(jìn)入iconfont，將需要的圖標(biāo)加入購物車，然后加入項(xiàng)目

然后

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

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

復(fù)制需要圖標(biāo)的代碼

在App.vue中


結(jié)果：

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

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

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

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

注意：引用彩色圖標(biāo)

在main.js中

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

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

在組件中使用的話

紅色下劃線這里是復(fù)制的

<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、側(cè)邊欄leftNav

新建common、page文件夾，然后將Pos.vue放進(jìn)去，同時(shí)修改路由


然后在common文件夾創(chuàng)建組件leftNav.vue

5、Element組件庫

Element

安裝：

npm install element-ui -S

注意：版本兼容問題，使用最新的會(huì)和vue 2.6.0 產(chǎn)生不兼容，因此使用2.13.2版本

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


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

代碼：在第七點(diǎn)的Pos.vue中

6、Axios遠(yuǎn)程讀取數(shù)據(jù)

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

安裝axios

npm i axios -S

導(dǎo)入

不需要全局導(dǎo)入，在哪里需要使用就在那里導(dǎo)入

獲取數(shù)據(jù)

在鉤子函數(shù)中：

7、訂單模塊（以數(shù)據(jù)驅(qū)動(dòng)來改變DOM結(jié)構(gòu)）

實(shí)現(xiàn)：點(diǎn)擊商品加入訂單列表，計(jì)算總商品金額，刪除與增加，結(jié)賬模擬

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="點(diǎn)餐" 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="數(shù)量" width="50"></el-table-column><el-table-column prop="price" label="金額" width="70"></el-table-column><el-table-column label="操作" width="100" fixed="right"><!-- 這個(gè)scope是可以獲取點(diǎn)擊的行的數(shù)據(jù) --><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">結(jié)賬</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: "薯?xiàng)l",// price: 8,// count: 1,// },// {// goodsName: "甜筒",// price: 8,// count: 1,// },// {// goodsName: "可口可樂",// price: 8,// count: 1,// },// {// goodsName: "漢堡",// price: 15,// count: 1,// },// {// goodsName: "薯?xiàng)l",// price: 8,// count: 1,// },// {// goodsName: "甜筒",// price: 8,// count: 1,// },],oftenGoods: [{goodsId: 1,goodsName: "香辣雞腿堡",price: 18,},{goodsId: 2,goodsName: "田園雞腿堡",price: 15,},{goodsId: 3,goodsName: "和風(fēng)漢堡",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: "和風(fēng)漢堡",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);// //這個(gè)data是后臺提供的data數(shù)組// this.oftenGoods = reponse.data;// })// .catch(error=>{// console.log(error);// })// axios.get('http://jspang.com/DemoApi/typeGoods.php')// .then(reponse=>{// console.log(reponse);// //這個(gè)data是后臺提供的data數(shù)組// 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) {//商品是否已經(jīng)存在與訂單列表let isHave = false;for (let i = 0; i < this.tableData.length; i++) {if (this.tableData[i].goodsId == goods.goodsId) {isHave = true;}}//根據(jù)判斷的值編寫業(yè)務(wù)邏輯if (isHave) {//改變列表中商品數(shù)量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();},//刪除單個(gè)商品delSingleGoods(goods) {this.tableData = this.tableData.filter((o) => o.goodsId != goods.goodsId);this.sumGoodsPrice();},//計(jì)算總金額sumGoodsPrice(){this.sumPrice = 0;//element指的是每次循環(huán)時(shí)tableData中的每個(gè)元素this.tableData.forEach((element) => {this.sumPrice = this.sumPrice + element.price * element.count;});},// 刪除全部商品delAllGoods(){this.sumPrice = 0;this.tableData = [];},//模擬結(jié)賬checkout(){if(this.sumPrice != 0){this.tableData = [];this.sumPrice = 0;//element提供的屬性this.$message({message: '結(jié)賬成功',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、項(xiàng)目打包和上線

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

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

然后輸入 打包命令

npm run build

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

然后找到對應(yīng)文件就可以上傳到服務(wù)器之類的了

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。