收银
来源：互联网 发布：php app path 编辑：程序博客网 时间：2024/05/01 19:42
一、效果图
二、前端页面
1、商品列表： reserveCommodityOnShelfList.jsp
<%@ page contentType="text/html;charset=UTF-8" %><%@ include file="/WEB-INF/views/include/taglib.jsp" %><html><head> <title>商品管理</title> <meta name="decorator" content="main"/></head><body><jsp:include page="/WEB-INF/views/include/sidebar.jsp"> <jsp:param name="action" value="commoditySell"></jsp:param></jsp:include><div class="container-fluid"> <div class="row"> <div class="block-flat"> <div class="header"> <h3>商品列表</h3> </div> <form:form id="searchForm" modelAttribute="reserveCommodity" action="${ctx}/reserve/commodity/list" method="post" class="breadcrumb form-search"> <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/> <input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/> <div class="row"> <div class="col-sm-6 col-md-6 col-lg-6"> <table class="no-border"> <tbody class="no-border-y"> <tr> <td>名称：</td> <td><form:input path="name" htmlEscape="false" maxlength="30" class="form-control"/></td> <td><input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/></td> </tr> </tbody> </table> </div> </div> </form:form> <div class="row"> <%-- left start--%> <div class="col-sm-6 col-md-6 col-lg-6"> <table id="contentTable"> <thead> <tr> <th>编号</th> <th>名称</th> <th>价格</th> <th>库存量</th> <th>类别</th> <th>操作</th> </tr> </thead> <tbody> <c:forEach items="${page.list}" var="commodity"> <tr> <td><a href="${ctx}/reserve/commodity/form?id=${commodity.id}"> ${commodity.commodityId} </a></td> <td> ${commodity.name} </td> <td> ${commodity.price} 元 </td> <td> ${commodity.repertoryNum} </td> <td> ${commodity.commodityType.name} </td> <td> <button id="${commodity.id}" class="btn btn-primary btn-xs" onclick="outStorage('${commodity.id}','${commodity.name}',${commodity.price},${commodity.repertoryNum})"> 售卖 </button> </td> </tr> </c:forEach> </tbody> </table> <div class="row"> <div class="col-sm-12"> <div class="pull-right"> <div class="dataTables_paginate paging_bs_normal"> <sys:javascript_page p="${page}"></sys:javascript_page> </div> </div> <div class="clearfix"></div> </div> </div> </div> <%--end of left--%> <%-- right start--%> <div class="col-sm-6 col-md-6 col-lg-6"> <form id="paySell"> 商品销售表 <table id="sellList" class="table table-striped table-bordered table-condensed"> <thead> <tr> <th align="center">商品名称</th> <th align="center">数量</th> </tr> </thead> </table> 合计：<span id="sum">0</span>元 <a class="btn btn-success" onclick="settlement()">结算</a> </form> </div> <%--end of right--%> </div> </div> </div> <%-- end of row-fluid--%></div><button class="btn btn-primary btn-flat md-trigger" id="settlementDialogBtn" style="display: none" data-modal="settlementDialog"> 结算</button><div class="md-modal colored-header custom-width md-effect-12 warning" id="settlementDialog"> <div class="md-content"> <div class="modal-header"> <h5>结算</h5> <button type="button" class="close md-close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body form-horizontal " id="settlementForm"> <!--结算--> <!--end 结算--> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-flat md-close" data-dismiss="modal"> 取消 </button> <button type="button" id="settlementSaveBtn" class="btn btn-primary btn-flat" onclick="paySubmit()">结算 </button> </div> </div></div><%--end of container-fluid--%><script src="${ctxStatic}/modules/reserve/js/reserve_commodity_sell.js" type="text/javascript"></script></body></html>2、结算弹出框：reserveCommodityPayForm.jsp<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ include file="/WEB-INF/views/include/taglib.jsp" %><div class="row"> <div class="content"> <div class="table-responsive"> <form id="paySubmitForm"> <table> <thead> <tr> <th>商品名称</th> <th>数量</th> <th>单价</th> </tr> </thead> <tbody> <input type="hidden" name="token" value="${token}"/> <c:forEach items="${sellDetailList}" var="reserveCommoditySellDetail" varStatus="status"> <tr> <input name="reserveCommoditySellDetailList[${status.index}].reserveCommodity.id" value="${reserveCommoditySellDetail.reserveCommodity.id}" type="hidden"> <td><input class="form-control" type="text" name="reserveCommoditySellDetailList[${status.index}].reserveCommodity.name" value="${reserveCommoditySellDetail.reserveCommodity.name}" placeholder="${reserveCommoditySellDetail.reserveCommodity.name}" readonly></td> <td><input class="form-control" type="text" name="reserveCommoditySellDetailList[${status.index}].num" value="${reserveCommoditySellDetail.num}" placeholder="${reserveCommoditySellDetail.num}" readonly></td> <td><input class="form-control" type="text" name="reserveCommoditySellDetailList[${status.index}].price" value="${reserveCommoditySellDetail.price}" placeholder="${reserveCommoditySellDetail.price}" readonly></td> </tr> </c:forEach> <tr> <td> 支付方式: </td> <td colspan="3"> <div class="btn-group" id="payType"> <label class="radio-inline"> <input type="radio" class="icheck" id="cash" value="2" checked="checked" name="payType"/>现金 </label> <label class="radio-inline"> <input type="radio" class="icheck" id="isMember" value="1" name="payType"/>会员卡 </label> <label class="radio-inline"> <input type="radio" class="icheck" id="card" value="3" name="payType"/>银行卡 </label> <label class="radio-inline"> <input type="radio" class="icheck" id="weixin" value="4" name="payType"/>微信 </label> <label class="radio-inline"> <input type="radio" class="icheck" id="alipay" value="5" name="payType"/>支付宝 </label> <label class="radio-inline"> <input type="radio" class="icheck" id="other" value="6" name="payType"/>其它 </label> </div> </td> </tr> <div id="memberList" style="display:none"> <tr> <td>姓名:</td> <td> <select style="width: 80px;" id="reserveMemberSelect" class="select2" name="reserveStoredCardMember.id" disabled> <option value="">--请选择会员--</option> <c:forEach items="${reserveMemberList}" var="m"> <option value="${m.id}">${m.mobile}-${m.name}</option> </c:forEach> </select> </td> </tr> </div> </tbody> </table> </form> </div> </div></div><script type="text/javascript"> $(document).ready(function () { $("#isMember").on('ifChecked', function () { $("#reserveMemberSelect").removeAttr("disabled"); }); $("#cash").on('ifChecked', function () { $("#reserveMemberSelect").attr("disabled","disabled"); }); $("#card").on('ifChecked', function () { $("#reserveMemberSelect").attr("disabled","disabled"); }); $("#weixin").on('ifChecked', function () { $("#reserveMemberSelect").attr("disabled","disabled"); }); $("#alipay").on('ifChecked', function () { $("#reserveMemberSelect").attr("disabled","disabled"); }); $("#other").on('ifChecked', function () { $("#reserveMemberSelect").attr("disabled","disabled"); }); })</script>3、支付成功界面：reserveCommoditySellReport.jsp
<%@ page contentType="text/html;charset=UTF-8" %><%@ include file="/WEB-INF/views/include/taglib.jsp" %><html><head> <title>支付成功</title> <meta name="decorator" content="main"/></head><body><jsp:include page="/WEB-INF/views/include/sidebar.jsp"> <jsp:param name="action" value="commoditySell"></jsp:param></jsp:include><div class="cl-mcont" id="pcont"> <div class="row"> <div class="col-md-12"> <div class="block-flat"> <div class="header"> <h3>支付成功</h3> </div> <div class="content"> <div class="tab-container"> <div class="form-horizontal group-border-dashed"> <form:form id="inputForm" modelAttribute="reserveVenueBill" action="${ctx}/reserve/commodity/onShelfList" method="post" class="form-horizontal"> <table id="contentTable" class="table table-bordered"> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>合计</th> </tr> </thead> <tbody> <c:forEach items="${sellReport.sellDetailList}" var="sellDetail"> <tr> <td> ${sellDetail.reserveCommodity.name} </td> <td> ${sellDetail.reserveCommodity.price} </td> <td> ${sellDetail.num} </td> <td> ${sellDetail.detailSum} </td> </tr> </c:forEach> <tr> <td>总计</td> <td colspan="3">${sellReport.totalSum}元</td> </tr> <tr> <td>购买人</td> <td colspan="3">${sellReport.sellDetailList[0].reserveMember.name}</td> </tr> <tr> <td>操作人</td> <td colspan="3">${sellReport.sellDetailList[0].updateBy.name}</td> </tr> <tr> <td>时间</td> <td colspan="3"><fmt:formatDate value="${sellReport.sellDetailList[0].updateDate}" type="both"/></td> </tr> </tbody> </table> </div> <div> <div> <input id="btnSubmit" class="btn btn-primary" type="submit" value="确认"/> </div> </div> </form:form> </div> </div> </div> </div> </div></div></body></html>三、JS:reserve_commodity_sell.js
/** * Created by lenovo on 2016/1/11. */$(document).ready(function () { $("#contentTable tbody tr button").each(function () { $(this).removeAttr("disabled");//页面刷新将所有的button重置 });})function outStorage(id, name, price,repertoryNum) { var index = $("#sellList tbody tr").length; var s = '<tr data-price="'+price+'" data-num="1" commodityName="'+name+'" repertoryNum="'+repertoryNum+'" id="'+id+'tr"><td>'+name+'</td><td>\ <a onclick="add(\''+id+'\')" class="glyphicon glyphicon-plus"></a>\ <input name="reserveCommoditySellDetailList['+index+'].reserveCommodity.id" value=\''+id+'\' type="hidden">\ <input name="reserveCommoditySellDetailList['+index+'].reserveCommodity.name" value=\''+name+'\' type="hidden" >\ <input name="reserveCommoditySellDetailList['+index+'].num" id="'+id+'num" style="width:20px" value="1" onkeyup="changeNumber(\''+id+'\')">\ <input name="reserveCommoditySellDetailList['+index+'].price" value=\''+price+'\' type="hidden">\ <a onclick="dele(\''+id+'\')" class="glyphicon glyphicon-minus"></a></td></tr>'; $("#" + id).attr("disabled", "true"); /*求和*/ var sum = Number($("#sum").text()); sum += price; $("#sum").text(sum); $('#sellList').append(s);}function add(id) { var num = Number($("#" + id + "num").val()); num++; var repertoryNum=$("#" + id+"tr").attr("repertoryNum");//库存 var commodityName = $("#" + id+"tr").attr("commodityName"); if(repertoryNum<num){ errorLoding("抱歉，"+commodityName+"库存量不足"); return; } $("#" + id + "num").val(num); $("#" + id+"tr").attr("data-num",num); sum();}function dele(id) { var num = Number($("#" + id + "num").val()); num--; if(num<0){ errorLoding("抱歉，数量不能为负"); return; } $("#" + id + "num").val(num); $("#" + id+"tr").attr("data-num",num); sum();}function changeNumber(id){ var num = Number($("#" + id + "num").val()); $("#" + id+"tr").attr("data-num",num); var repertoryNum=$("#" + id+"tr").attr("repertoryNum");//库存 sum(); var commodityName = $("#" + id+"tr").attr("commodityName"); if(repertoryNum<num){ errorLoding("抱歉，"+commodityName+"库存量不足"); return; }}function sum() { var sum = 0; $("#sellList tbody tr").each(function () { var num = $(this).attr("data-num"); var price = $(this).attr("data-price"); var t = price*1 * num*1; sum += t; }); $("#sum").text(sum); return sum;}function settlement() { var flag=1; $("#sellList tbody tr").each(function () { var num = $(this).attr("data-num"); var commodityName = $(this).attr("commodityName"); var repertoryNum=$(this).attr("repertoryNum");//库存 if(Number(num)>Number(repertoryNum)){ errorLoding("抱歉，"+commodityName+"库存不足"); flag=0; return false; } }); if(flag==0){ return; } var sellDetailList = $("#paySell").serializeArray(); jQuery.postItems({ url: ctx+'/reserve/reserveCommoditySellDetail/settlement', data: sellDetailList, success: function (result) { $("#settlementForm").html(result); $("#settlementDialogBtn").click(); $("#settlementForm .select2").select2({ width: '100%' }); $('#settlementForm .icheck').iCheck({ checkboxClass: 'icheckbox_square-blue checkbox', radioClass: 'iradio_square-blue' }); } });}function paySubmit() { var data = $("#paySubmitForm").serializeArray(); var payType = $('#payType input:radio:checked').val(); if(payType=='1'){ var memberId=jQuery("#reserveMemberSelect").val(); if(memberId=="" || memberId==null || memberId== undefined){ errorLoding("请选择会员"); return; } } jQuery.postItems({ url: ctx+'/reserve/reserveCommoditySellDetail/paySubmit', data: data, success: function (result) { successLoding(result); location.reload(true); }, error: function () { errorLoding("付款失败"); } });} 1 0
- 收银
- 收银程序
- 店员收银操作部分
- 收银小帮手
- 一店通服装店收银系统
- 一店通服装店收银系统
- 火锅店收银系统
- 支付宝收银功能
- HOJ1941 超市收银问题
- 仿真超市收银系统
- ODOO POS 收银
- 收银柜台收款程序
- 专柜收银方案Android
- 超市收银系统
- DIY水果店收银软件
- JS：收银找零程序
- c++收银系统
- PUBWIN2008收银伴侣 QQ：909657061
- Windows开发常用的获取错误码对应文本的例子
- eclipse使用git遇到的单词
- poj 1038 状态压缩
- Android Tip : Android GestureDetector 手势识别 抬起 操作
- 分布式Ehcache缓存配置-RMI
- 收银
- Java模式之单例模式
- Linux-CentOS7学习3_目录结构
- java模式之装饰者模式
- java并发编程学习笔记1
- java并发编程学习笔记2
- java模式之观察者模式
- java并发编程学习笔记之线程池等源码小析
- 笔试题小解
