收银台的逻辑:
输入金额,选择会员卡,或者优惠卡券,最后扫收款码完成支付
主线1: 进入页面,输入金额(#inputNum)自动聚焦,点击键盘按钮进行输入金额,鼠标点击会员卡,手动或者扫码枪扫描输入会员卡号,优惠卡券同理。当优惠券与卡券不共用的时候,加入data-isuse判断,卡券分为折扣券与满减券data-type判断,data-value是会员卡的discount,data-value1是优惠券的discount或者reduce,根据是否存在值限制重复添加会员卡或者优惠券
主线2:键盘事件,页面上的键盘,只对(#inputNum)的生效,通过is.(:focus),判断
主线3:其他的按钮ascall码的10进制设置点击事件
js代码:
$(function () {
var n = 2;
var _input = document.getElementById("inputNum");
var inputNum = document.getElementById("inputNum");
var inputCode = document.getElementById("inputCode");
var inputCard = document.getElementById("inputCard");
var actVal = $("#inputNum").val();
//输入框判断是否聚焦
$('input').on('click', function () {
if ($("#inputNum").is(":focus")) {
_input = inputNum;
} else if ($("#inputCode").is(":focus")) {
_input = "";
} else if ($("#inputCard").is(":focus")) {
_input = "";
}
})
$("#inputNum").on('keyup', function () {
if ($(this).val()) {
$('#shouldPay').text("¥" + ($(this).val()));
$('#actPay').text("¥" + ($(this).val()));
}
})
//键盘事件
$(document).keydown(function (event) {
console.log(event.keyCode);
//tab键盘事件
if (event.keyCode == 9) {
if ($("#inputNum").is(":focus")) {
_input = "";
} else if ($("#inputCode").is(":focus")) {
_input = "";
var actVal = $("#inputNum").val();
$("#shouldPay,#actPay").text(actVal);
} else if ($("#inputCard").is(":focus")) {
_input = "";
}
} else if (event.keyCode == 112) {
$("#inputNum").blur();
} else if (event.keyCode == 112) {
$("#ztapF1").click();
} else if (event.keyCode == 113) {
$("#ztapF2").click();
} else if (event.keyCode == 114) {
$("#ztapF3").click();
} else if (event.keyCode == 115) {
$("#ztapF4").click();
} else if (event.keyCode == 116) {
$("#ztapF5").click();
} else if (event.keyCode == 117) {
$("#ztapF6").click();
} else if (event.keyCode == 118) {
$("#ztapF7").click();
} else if (event.keyCode == 8) {
if ($("#inputNum").is(":focus")) {
$("#zbtnDel").click();
}
//判断卡券输入为空的时候
$("#inputCode").on("keyup", function () {
var actVal = $("#inputNum").val();
if ($(this).val() == "") {
$("#actPay").attr("data-value1", "");
$("#codeMoney").text("");
$("#discountPay").text("¥00.00");
$("#inputCode").attr("data-isuse", "");
if (actVal) {
$("#shouldPay").text("¥" + actVal);
$("#actPay").text("¥" + actVal);
} else {
$("#shouldPay").text("¥00.00");
$("#actPay").text("¥00.00");
}
}
})
//判断会员卡输入为空的时候
$("#inputCard").on("keyup", function () {
var actVal = $("#inputNum").val();
if ($(this).val() == "") {
$("#actPay").attr("data-value", "");
$("#cardMoney").text("点击输入框,回车确认使用");
$("#discountPay").text("¥00.00");
if (actVal) {
$("#shouldPay").text("¥" + actVal);
$("#actPay").text("¥" + actVal);
} else {
$("#shouldPay").text("¥00.00");
$("#actPay").text("¥00.00");
}
if ($("#inputCode").val()) {
$("#codeMoney").text("点击输入框,回车确认使用");
}
}
})
} else if (event.keyCode <= 105 && event.keyCode >= 96 || event.keyCode == 110 || event
.keyCode == 190) {
if (event.keyCode == 110 || event.keyCode == 190) {
var value = '.'
} else {
var value = event.keyCode - 96;
}
if (_input) {
if (value === ".") {
if (n <= 0) {
_input.value = _input.value;
} else {
_input.value += value;
clearNoNum(_input);
}
} else {
_input.value += value;
clearNoNum(_input);
}
}
} else if (event.keyCode <= 57 && event.keyCode >= 48 || event.keyCode == 110 || event
.keyCode == 190) {
if (event.keyCode == 110 || event.keyCode == 190) {
var value = '.'
} else {
var value = event.keyCode - 48;
}
if (_input) {
if (value === ".") {
if (n <= 0) {
_input.value = _input.value;
} else {
_input.value += value;
clearNoNum(_input);
}
} else {
_input.value += value;
clearNoNum(_input);
}
}
//回车确认事件
} else if (event.keyCode == 13) {
if ($("#inputNum").is(":focus")) {
// $("#confirmBtn").click();
} else if ($("#inputCode").is(":focus")) { //优惠券折扣位置
var codeVal = $("#inputCode").val();
var actVal = $("#inputNum").val();
if ($("#inputNum").val()) {
if ($("#inputCode").val()) {
$.ajax({
url: '{php echo $this->createWebUrl("test_pay",array("op"=>"coupon"))}',
data: {
delcode: codeVal
},
success: function (res) {
console.log(res);
//判断是否有该卡券
if (res != 'null') {
var code = JSON.parse(res);
var least = code.least / 100;
var reduce = code.reduce / 100;
var actVal = $("#inputNum").val();
var discount = code.discount;
//判断是否和会员卡共用
if (code.is_use == 1) {
$("#inputCode").attr("data-isuse", "1");
//判断卡券的类型
if (code.type == 2) {
$("#actPay").attr("data-type", "2");
if (least <= actVal) {
$("#codeMoney").text("抵扣¥" + reduce);
if ($("#actPay").attr('data-value1')) {
alert("已经使用该优惠券");
} else {
if ($("#actPay").attr('data-value')) {
var tmp = $("#actPay").attr(
'data-value');
$("#actPay").text("¥" + (actVal *
tmp - reduce));
var original = $("#discountPay").text();
$("#discountPay").text(original +
"后 -¥" + reduce);
$("#actPay").attr('data-value1',
reduce);
} else {
$("#actPay").text("¥" + (actVal -
reduce));
$("#actPay").attr('data-value1',
reduce);
$("#discountPay").text("-¥" +
reduce);
}
}
} else {
$("#codeMoney").text("该卡券不符合使用条件");
} //优惠券是打折卡
} else if (code.type == 1) {
$("#actPay").attr("data-type", "1");
if ($("#actPay").attr('data-value1')) {
alert("已经使用该优惠券");
} else {
if ($("#actPay").attr('data-value')) {
var tmp = $("#actPay").attr(
'data-value');
var original = $("#discountPay").text();
$("#actPay").text("¥" + (actVal * tmp *
discount));
$("#discountPay").text(original + "后 打" +
discount + "折");
$("#actPay").attr('data-value1', reduce);
} else {
$("#codeMoney").text("优惠" + discount +
"折");
$("#discountPay").text("打" + discount +
"折");
$("#actPay").text("¥" + actVal *
discount * 0.1);
$("#actPay").attr('data-value1',
discount * 0.1);
}
}
}
} else {
$("#inputCode").attr("data-isuse", "0");
//$("#codeMoney").text("该优惠券不能和会员卡同时使用");
if ($("#actPay").attr("data-value")) {
$("#codeMoney").text("不使用会员卡才可以使用该优惠券");
} else {
if (code.type == 2) {
$("#actPay").attr("data-type", "2");
if (least <= actVal) {
$("#codeMoney").text("抵扣¥" + reduce);
if ($("#actPay").attr('data-value1')) {
alert("已经使用该优惠券");
} else {
$("#shouldPay").text($("#inputNum")
.val());
$("#actPay").text("¥" + (actVal -
reduce));
$("#actPay").attr('data-value1',
reduce);
$("#discountPay").text("-¥" +
reduce);
}
} else {
$("#codeMoney").text("该卡券不符合使用条件");
} //优惠券是打折卡
} else if (code.type == 1) {
$("#actPa