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("付款失败");
        }
    });
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏安恒信息

Memcached反射放大DDoS攻击威胁分析

2018年2月27日,多国CERT和多家网络和云运营商报告称,恶意攻击者正在使用不安全配置的Memcached服务器来借力放大DDoS攻击。 根据报告,Memc...

41250
来自专栏互联网开发者交流社区

HTML+CSS-淘宝网页

26440
来自专栏FreeBuf

ShadowBroker是这样放大招的:Windows零日利用工具更多数据呈现

北京时间2017年4月14日,Shadow Brokers再次泄露出一份震惊世界的机密文档,其中包含了多个 Windows 远程漏洞利用工具,可以覆盖全球 70...

26670
来自专栏信安之路

打造属于自己的 Wi-Fi “DOS” 攻击工具——Wi-Fi_deauther

一块不起眼的板子,可能在一些人眼中他就没有利用价值,而另一些人却看到了不一样的板子,当我们赋予了他新的生命力,他就会焕然一新,工具的价值取决于人,当你赋予了他什...

27920
来自专栏FreeBuf

流氓会武功 | 这款勒索软件不仅能勒索,还能DDoS

一款名为 FireCrypt 的勒索软件正悄然来袭。它不仅具备一般勒索软件的特性,会将受感染的系统文件恶意加密。还会试图利用受感染者机器,向其源码中硬编码的 U...

27850
来自专栏云上大文件传输

腾讯云海外数据中心到腾讯云广州-文件传输对比评测集合

近日,我们针对腾讯云海外各数据中心到腾讯云广州,做了一系列大文件传输对比评测。

37960
来自专栏FreeBuf

WanaCrypt0r“想哭”勒索蠕虫数据恢复可行性分析报告

目录 第一章 前言… 第二章 加密文件核心流程分析… 第三章 数据恢复可行性分析… 第四章 总结… 第一章 前言 近日,360互联网安全中心发现全球多个国家和地...

22760
来自专栏SAP最佳业务实践

SAP最佳业务实践:外委生产(249)-6委外采购发票校验

MIRO转包 PO 的发票收据 在该活动中完成发票校验。 后勤®物料管理®采购®采购订单®后继功能®后勤发票校验 1. 如果弹出输入公司代码 对话框,输入 公司...

31990
来自专栏北京马哥教育

记录一次被服务器电源模块坑成狗的案例

事由 今天开始,逐步把硬件运维过程中遇到的坑整理成公众号文章,以便踩到坑的人共勉,也给还没踩到坑的人一个提醒。至于这款电源模块,反正我已经被这款电源模块(这里...

39050
来自专栏CIT极客

奇巧淫技丨校园“天翼校园宽带”破解,配置无线路由器上网!

4.3K70

扫码关注云+社区

领取腾讯云代金券