vue实现收银系统

Vue 实现收银系统的核心步骤

技术选型 Vue 3 + Composition API 提供响应式数据管理
Element UI 或 Ant Design Vue 提供现成的UI组件
Vuex 或 Pinia 管理全局状态（如购物车、订单数据）
WebSocket 可选用于实时通信（如后厨订单推送）

核心功能模块实现

商品列表模块

<template>
  <div class="goods-list">
    <el-card v-for="item in goods" :key="item.id" @click="addToCart(item)">
      <span>{{ item.name }}</span>
      <span class="price">¥{{ item.price }}</span>
    </el-card>
  </div>
</template>

购物车模块

// Pinia store示例
export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [],
    total: 0
  }),
  actions: {
    addItem(item) {
      const existing = this.items.find(i => i.id === item.id)
      existing ? existing.qty++ : this.items.push({...item, qty: 1})
      this.calculateTotal()
    }
  }
})

订单处理逻辑

价格计算

computed: {
  discountTotal() {
    return this.total * (1 - this.discountRate)
  },
  finalTotal() {
    return this.discountTotal + this.serviceFee
  }
}

支付对接

async handlePayment() {
  const order = {
    items: this.cartItems,
    total: this.finalTotal,
    paymentMethod: this.selectedPayment
  }
  await axios.post('/api/orders', order)
  this.clearCart()
}

打印小票功能

HTML模板

<div id="receipt-template" class="hidden">
  <h3>{{ storeName }}</h3>
  <p v-for="item in items">{{ item.name }} x{{ item.qty }} ¥{{ item.price * item.qty }}</p>
  <p>总计: ¥{{ total }}</p>
</div>

打印触发

printReceipt() {
  const printWindow = window.open('', '_blank')
  printWindow.document.write(document.getElementById('receipt-template').innerHTML)
  printWindow.print()
}

优化建议

本地缓存 使用localStorage保存常用商品和订单记录
实现离线模式下的基础收银功能

快捷键支持

mounted() {
  window.addEventListener('keydown', (e) => {
    if (e.key === 'F1') this.openCashDrawer()
  })
}

硬件集成 通过node-serialport连接钱箱
调用POS打印机SDK实现直接打印

以上实现方案可根据实际需求进行扩展，建议先实现核心收银流程，再逐步添加会员管理、库存联动等进阶功能。