Html 收银页面设计
一、效果图
二、前端页面
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("付款失败");
}
});
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016年01月09日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读