springboot vue 开源 会员收银系统 (6) 收银台的搭建

前言

完整版演示

前面我们对会员系统 分类和商品的开发 完成了收银所需的基础信息 下面我们开始完成收银台的开发

简单画了一个收银的流程图大家参考下
收银流程图

从这张图我们可以分析一下几点

  • 可以选择会员或散客收银
  • 选择会员使用相应的会员价结算
  • 使用会员卡则在价格基础根据卡折扣结算

根据上述分析我搭建了一个简单的收银台
收银台

  • 左边显示会员和已选择的商品信息
  • 右边显示商品的价格信息
  • 商品选择后可以修改数字
  • 总金额自动计算
  • 后续完成挂单功能便于保证收银连续性

开发中运用的组件

  1. Tabs 标签页 和 Card 完成右侧的商品选择
  2. el-autocomplete 完成会员的检索
  3. InputNumber Table 完成购物车开发

收银台运用过多组件会导致页面很乱 我们后续需要进行组件的封装

<template><div class="app-container"  style="border-box:box-sizing;"><!--    left--><el-row :gutter="30" style=""><el-col :span="10"><el-autocompletestyle="width: 100%"popper-class="my-autocomplete"v-model="querySearchStr":fetch-suggestions="querySearch"placeholder="会员检索"@select="handleSelect"><iclass="el-icon-search el-input__icon"slot="suffix"></i><template slot-scope="{ item }"><div v-if="item.errorMsg">{{item.errorMsg}}</div><template v-else><div class="name"><i class="el-icon-user"></i>{{ item.memberName }}</div><span class="addr"><i class="el-icon-phone"></i>{{ item.memberPhone }}</span></template></template></el-autocomplete><el-descriptions  border title="用户信息" v-if="member.memberId" style="margin-top: 20px;margin-bottom: 20px;"><el-descriptions-item label="用户名">{{member.memberName}}</el-descriptions-item><el-descriptions-item label="手机号">{{member.memberPhone}}</el-descriptions-item><el-descriptions-item label="备注">{{member.remark}}</el-descriptions-item></el-descriptions><el-descriptions  border title="用户信息" v-else style="margin-top: 20px;margin-bottom: 20px;"><el-descriptions-item label="用户名">散客</el-descriptions-item></el-descriptions><div class="grid-content bg-purple"><el-tableborderheight="400"max-height="400":data="shopCart"style="width: 100%;margin-bottom: 20px;"><el-table-columnalign="center"prop="categoryName"label="分类"width="100"></el-table-column><el-table-columnalign="center"prop="productName"label="商品名"></el-table-column><el-table-columnalign="center"prop="productAmount"label="价格"width="100"><template slot-scope="scope"><span v-if="app.isEmpty(member.memberId)" class="price">{{ scope.row.productAmount }}</span><span v-else="member.memberId" class="price">{{ scope.row.productMemberAmount }}</span></template></el-table-column><el-table-columnalign="center"prop="count"label="数量"width="200"><template slot-scope="scope"><el-input-number size="mini" :min="0" :max="100" v-model="scope.row.count" @change="handleChange($event,scope)" ></el-input-number></template></el-table-column><el-table-columnalign="center"prop="totalPrice"label="总金额"width="100"><template slot-scope="scope"><span class="price">{{ scope.row.totalPrice }}</span></template></el-table-column></el-table><el-divider></el-divider>总金额: <span class="price">{{app.getFloatStr(getTotalPrice)}}</span><el-divider></el-divider><el-row><el-button type="success">结算</el-button><el-button type="warning">挂单</el-button><el-button type="primary">取单</el-button></el-row></div></el-col>
<!--right--><el-col :span="14"><div class="grid-content bg-purple"><el-tabs  v-model="activeName" @tab-click="handleClick" type="border-card" style="height: calc(100vh - 180px);width: 100%;overflow: scroll;overflow:hidden;"><el-tab-panev-for="(item, index) in categoryList":key="item.categoryId":label="item.categoryName":name="item.categoryId"><div><el-row :gutter="20" style="" v-if="productList.length>0"><el-col @click.native="chooseProduct(item)" :span="6" v-for="item in productList" :key="item.productId" style="margin-top: 20px;cursor: pointer;"><el-card :body-style="{ padding: '0px' }" style="height: 230px;"><div style="height: 150px;display: flex;align-items: center;justify-content: center; 	box-sizing: border-box;padding-top: 10px;"><img style="width:85%;height: 140px;border-radius: 5px;border: 1px solid #eee;" :src="baseUrl  + item.productImageUrl" class="image"/></div><div style="padding:10px 0 0 10px;font-size: 16px;">{{item.productName}}</div><div style="padding:5px 0 0 10px;"><span style="font-size: 14px;"> 散客价 <span class="price">¥ {{item.productAmount}}</span></span><br/><span style="font-size: 14px;"> 会员价 <span class="price">¥ {{item.productMemberAmount}}</span></span></div></el-card></el-col></el-row><div v-else><el-empty description="该分类商品为空"></el-empty></div></div></el-tab-pane></el-tabs></div></el-col></el-row></div>
</template><script>import {accAdd, accMul,isEmpty} from "@/utils";import confirm from "@/utils/confirm";import {getCategoryList} from "@/api/business/category/category";import {getProductList} from "@/api/business/product/product";import {getMemberList} from "@/api/business/member/member";export default {name: "cashierDesk",data(){return{shopCart: [],categoryList: [],productList: [],activeName: "",member: {},querySearchStr: '',}},mounted() {this.getCategoryList()},computed:{getTotalPrice(){let totalPrice = 0;for(let product of this.shopCart){const noMember = isEmpty(this.member.memberId)let productTotalPriceif(noMember){productTotalPrice = accMul(product.productAmount,product.count)}else{productTotalPrice = accMul(product.productMemberAmount,product.count)}this.$set(product, 'totalPrice', productTotalPrice)totalPrice = accAdd(totalPrice,productTotalPrice);}return totalPrice;}},watch:{shopCart(newVal,oldVal){let showCardList = newValconsole.log('这是监听属性新的')}},methods:{querySearch(queryString, cb) {if(queryString){getMemberList({querySearch:queryString}).then(res=>{// 调用 callback 返回建议列表的数据cb(res.data);})}else{cb([{errorMsg:'暂无数据'}])}},getCategoryList(){getCategoryList().then(res=>{this.categoryList = res.dataif(this.categoryList.length>0){this.activeName = this.categoryList[0].categoryIdgetProductList({categoryId:this.activeName }).then(res=>{this.productList = res.data})}})},handleClick(e){//拿到分类idconst categoryId = e.namegetProductList({categoryId:categoryId}).then(res=>{this.productList = res.data})},handleChange(e,scope){console.log(e)console.log(scope.$index)if(e==0){confirm('要删除该条目吗?').then(res=>{if(res){this.shopCart.splice(scope.$index,1)}else{this.shopCart[scope.$index].count = 1}})}},chooseProduct(e){let product = e;let findProductIndex = this.shopCart.findIndex(p => p.productId ==  product.productId);console.log(findProductIndex)if(findProductIndex == -1){this.$set(product, 'count', 1)this.shopCart.push(product)}else{this.shopCart[findProductIndex].count += 1}console.log(this.shopCart)},handleSelect(e){console.log(e)this.member = e}}}
</script><style scoped>::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item{height: 50px;line-height: 50px;font-size: 14px;}.price{font-weight: bold;color: #ff5b57;}
</style>

代码地址
https://gitee.com/ddeatrr/memberShop
然后为了大家预览我把开发板也部署了 大家可以参考
http://store.gbadd.space/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/23589.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

node.js漏洞——

一.什么是node.js 简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。 Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境&#xff0c;基于 Google 的 V8 引擎&#xff0c;V8 引擎执行 Javascript 的速度非常…

神经网络搭建(1)----nn.Sequential

神经网络模型构建 采用CIFAR10中的数据&#xff0c;并对其进行简单的分类。以下图为例 输入&#xff1a;3通道&#xff0c;3232 ( 经过一个55的卷积) → 变成32通道&#xff0c;3232的图像 (经过22的最大池化) → 变成32通道&#xff0c;1616的图像 ( 经过一个55的卷积) → 变…

linux虚拟机免密登录配置

1、假设A服务器要免密登录B服务器 2、在A服务器上执行命令&#xff1a; cd /root/.ssh/ ssh-keygen -t rsa #这里会生成两个文件 一个是id_rsa私钥和公钥rsa.pub2、我们把公钥的内容复制粘贴到B服务器的/root/.ssh/authorized_keys文件下 #在A服务器上执行命令记录内容 cat …

ArkTs-TaskPool和Worker的使用

TaskPool和Worker的区别 实现TaskPoolWorker内存模型线程间隔离&#xff0c;内存不共享。线程间隔离&#xff0c;内存不共享。参数传递机制 采用标准的结构化克隆算法&#xff08;Structured Clone&#xff09;进行序列化、反序列化&#xff0c;完成参数传递。 支持ArrayBuffe…

python调用excel的demo

在本地安装Pycharm之后&#xff0c;新建工程&#xff0c;在main.py中键入如下代码,即可实现Python调用excel&#xff1a; import pandas as pd sheet pd.read_excel(test.xlsx) data sheet.loc[0].values print("读取指定行的数据:\n{0}".format(data)) 第一次编…

IT学习笔记--Flink

概况&#xff1a; Flink 是 Apache 基金会旗下的一个开源大数据处理框架。目前&#xff0c;Flink 已经成为各大公司大数据实时处理的发力重点&#xff0c;特别是国内以阿里为代表的一众互联网大厂都在全力投入&#xff0c;为 Flink 社区贡献了大量源码。 Apache Flink 是一个…

Vscode发生鼠标悬停正在加载、无法跳转和提示词的问题

Vscode发生鼠标悬停正在加载、无法跳转和提示词的问题 查看python语言服务器的日志&#xff0c;确定问题。 我的问题是加载的vscode 目录下存在一个很大的数据集目录&#xff0c;导致无法正常工作。 解决办法&#xff1a; 在vscode的pylance设置中&#xff0c;排除对应的目…

使用 PlayCanvas 创建带有后处理效果的 3D 场景

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 使用 PlayCanvas 创建带有后处理效果的 3D 场景 应用场景介绍 本代码演示了如何使用 PlayCanvas 创建一个带有后处理效果的 3D 场景。用户可以在场景中查看一个棋盘模型&#xff0c;并使用后处理效果为场景添…

达梦 执行查询语句时报[-544]:Out of sort buf space

达梦数据库有时执行SQL中有时报[-544]:Out of sort buf space, try to adjust SORT_BUF_GLOBAL_SIZE, SORT_BUF_SIZE, SORT_BLK_SIZE. 第一反应是这条语句占用排序区太大。但真实原因是前面执行的语句耗光了全局排序区&#xff0c;后面SQL任何小的排序操作都会报这个错误从而执…

天润融通助力浪鲸卫浴,智能化革新引领客户服务新高度

头部家装品牌如何用优质服务抓住客户&#xff1f; 每年初春&#xff0c;万物复苏的同时&#xff0c;家装市场也正式进入旺季。 因为春天气温回升&#xff0c;潮气逐渐散去&#xff0c;开始进入最适合施工的季节&#xff0c;木材不易变形、油漆不易起皮&#xff0c;再加上春季…

算法金 | 再见!!!KNN

大侠幸会&#xff0c;在下全网同名「算法金」 0 基础转 AI 上岸&#xff0c;多个算法赛 Top 「日更万日&#xff0c;让更多人享受智能乐趣」 KNN算法的工作原理简单直观&#xff0c;易于理解和实现&#xff0c;这使得它在各种应用场景中备受青睐。 我们将深入探讨KNN算法&…

Easy 同学:AI 时代将加速计算机专业和程序员职业的分化

一、原贴 2024 年 6 月 5 日 拥有 60多万粉丝的方糖气球&#xff08;ftqq.com&#xff09;博主 、独立开发者&#xff1a;Easy 发表了一篇 AI 对计算机专业和程序员行业影响的新浪博客&#xff0c;看后很有启发&#xff0c;故而将原文摘录于此&#xff1a; 单独开个贴说一下吧…

文心一言 VS 讯飞星火 VS chatgpt (275)-- 算法导论20.3 2题

二、修改 vEB 树以支持带有卫星数据的关键字。如果要写代码&#xff0c;请用go语言。 文心一言&#xff1a; vEB 树&#xff08;van Emde Boas 树&#xff09;是一种用于处理稀疏位集合的高效数据结构&#xff0c;它允许在常数时间内执行查找、插入、删除和前驱/后继操作。然…

6.更复杂的光照

一、Unity的渲染路径 渲染路径决定了光照是如何应用到Unity Shader中的。我们需要为每个Pass指定它使用的渲染路径 如何设置渲染路径&#xff1f; Edit>Project Settings>Player>Other Settinigs>Rendering 如何使用多个渲染路径&#xff1f;如&#xff1a;摄像…

Vuex 4与状态管理实战指南

title: Vuex 4与状态管理实战指南 date: 2024/6/6 updated: 2024/6/6 excerpt: 这篇文章介绍了使用Vuex进行Vue应用状态管理的最佳实践&#xff0c;包括为何需要状态管理&#xff0c;Vuex的核心概念如store、actions、mutations和getters&#xff0c;以及如何处理异步操作和模…

网工内推 | 网络运维工程师,H3CIE认证优先,13薪,享股票期权

01 畅读 &#x1f537;招聘岗位&#xff1a;高级网络运维工程师 &#x1f537;职责描述&#xff1a; 1.负责线上业务网络技术运维工作&#xff0c;保障并优化线上网络质量&#xff1b; 2.规划并构建公司线上业务网络架构&#xff1b; 3.规划线上业务网络质量评估与监控体系&…

USB (1)

再看USB 其实回过头看USB 是可以和无线 有线(internet) 可以和PCIe 甚至AXI类比的 它们共通处在于都是communication 有限通信 有7层网络协议 在USB也是分层的 不同的协议,依赖的介质不一样 这就要求相应的Physical层处理 USB的physical层是基于Serdes的,所以有串并/并串的…

找寻卓越的生成式人工智能应用案例?别浪费在无趣之处!

“ 生成式AI&#xff08;AI&#xff09;技术的强大众所周知。但不知道你们是否和我有一样感觉&#xff0c;目前市面上&#xff0c;企业对生成式AI的应用&#xff0c;场景大多较为单一。” Ingo Mierswa Altair产品开发高级副总裁 我说这些生成式AI的应用单一&#xff0c;是指…

让你工作效率飞起的五款软件

&#x1f31f; No.1&#xff1a;亿可达 作为一款自动化工具&#xff0c;亿可达被誉为国内版的免费Zaiper。它允许用户无需编程知识即可将不同软件连接起来&#xff0c;构建自动化的工作流程。其界面设计清新且直观&#xff0c;描述语言简洁易懂&#xff0c;使得用户可以轻松上…

【数据结构与算法 经典例题】反转链表(图文详解)

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《数据结构与算法 经典例题》C语言 期待您的关注 ​ 目录 一、问题描述 二、解题思路分析 三、代码实现 一、问题描述 二、解题…