收银台前端页面的逻辑实现
程序员文章站
2022-04-22 16:08:16
...
收银台的逻辑：
输入金额，选择会员卡，或者优惠卡券，最后扫收款码完成支付
主线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) {
$("#actPay").attr("data-type", "1");
if ($("#actPay").attr('data-value1')) {
alert("已经使用该优惠券");
} else {
alert("haha");
$("#shouldPay").text($("#inputNum").val());
$("#codeMoney").text("优惠" + discount +
"折");
$("#discountPay").text("打" + discount +
"折");
$("#actPay").text("￥" + actVal *
discount * 0.1);
$("#actPay").attr('data-value1',
discount * 0.1);
}
}
}
}
} else {
$("#codeMoney").text("无此优惠券");
}
}
})
} else {
alert('请输入卡券核销码');
$("#actPay").attr("data-value1", "");
$("#codeMoney").text("");
}
} else {
alert('请先输入金额');
}
} else if ($("#inputCard").is(":focus")) { //会员卡折扣位置
if ($("#inputNum").val()) {
if ($("#inputCard").val()) {
var cardVal = $("#inputCard").val();
var actVal = $("#inputNum").val();
$.ajax({
url: '{php echo $this->createWebUrl("test_pay",array("op"=>"card"))}',
data: {
memcard: cardVal
},
success: function (res) {
if (res != 'null') {
var card = JSON.parse(res);
var discount = card.discount * 0.1;
console.log(actVal);
if ($("#inputCode").attr("data-isuse")) {
if ($("#inputCode").attr("data-isuse") == "0") {
$("#codeMoney").text("不使用会员卡才可以使用该优惠券");
$("#cardMoney").text("选择一种卡券，清空另一种");
} else if ($("#inputCode").attr("data-isuse") ==
"1") {
//会员卡折扣金额
if (actVal) {
$("#cardMoney").text("会员卡折扣" + discount *
10 + '折');
if ($("#actPay").attr('data-value1')) {
var temp = $("#actPay").attr(
'data-value1');
if ($("#actPay").attr("data-type") ==
"1") {
$("#actPay").text("￥" + (actVal *
discount * temp));
$("#actPay").attr('data-value',
discount);
$("#discountPay").text("打" +
discount * 10 + "折" + "后 打" +
$("#actPay").attr(
'data-value1') + "折");
} else if ($("#actPay").attr(
"data-type") == "2") {
$("#actPay").text("￥" + (actVal *
discount - temp));
$("#actPay").attr('data-value',
discount);
$("#discountPay").text("打" +
discount * 10 + "折" +
"后 -￥" + $("#actPay").attr(
'data-value1'));
}
$("#inputCode").attr("data-isuse", "0");
if ($("#inputCode").attr("data-isuse") ==
"0") {
} else if ($("#inputCode").attr(
"data-isuse") == "1") {
}
} else {
$("#actPay").text("￥" + actVal *
discount);
$("#actPay").attr('data-value',
discount);
$("#discountPay").text("打" + discount *
10 + "折");
}
}
}
} else {
//会员卡折扣金额
if (actVal) {
$("#cardMoney").text("会员卡折扣" + discount * 10 +
'折');
if ($("#actPay").attr('data-value1')) {
var temp = $("#actPay").attr('data-value1');
if ($("#actPay").attr("data-type") == "1") {
$("#actPay").text("￥" + (actVal *
discount * temp));
$("#actPay").attr('data-value',
discount);
$("#discountPay").text("打" + discount *
10 + "折" + "后 打" + $("#actPay")
.attr('data-value1') + "折");
} else if ($("#actPay").attr("data-type") ==
"2") {
$("#actPay").text("￥" + (actVal *
discount - temp));
$("#actPay").attr('data-value',
discount);
$("#discountPay").text("打" + discount *
10 + "折" + "后 -￥" + $("#actPay")
.attr('data-value1'));
}
$("#inputCode").attr("data-isuse", "0");
if ($("#inputCode").attr("data-isuse") ==
"0") {
} else if ($("#inputCode").attr(
"data-isuse") == "1") {
}
} else {
$("#actPay").text("￥" + actVal * discount);
$("#actPay").attr('data-value', discount);
$("#discountPay").text("打" + discount * 10 +
"折");
}
}
}
} else {
$("#cardMoney").text("无此会员卡号");
}
}
})
} else {
alert('请输入会员卡号');
}
} else {
alert('请先输入金额');
}
}
}
});
$("#aplySuccess").on('click', function () {
var actVal = $("#inputNum").val();
if (actVal) {
$("#scanLoading").show();
$(document).keydown(function (event) {
if (event.keyCode == 13) {
var codeVal = $("inputCode").val();
var cardVal = $("inputCard").val();
$.ajax({
url: '{php echo $this->createWebUrl("test_pay",array("op"=>"wechat"))}',
data: {
actVal,
codeVal,
cardVal
},
success: function (res) {
console.log(res);
alert(JSON.stringify(res));
alert("交易成功");
$("#scanLoading").hide();
}
})
}
})
} else {
alert('请输入金额');
}
})
//选择支付平台
$("#home-1").attr("data-paytype")
//删除按钮事件
$('#zbtnDel').click(function () {
$("#inputNum").val("");
$("#shouldPay").text("￥00.00");
$("#actPay").attr('data-value', '');
$("#actPay").attr('data-value1', '');
$("#inputCode").attr('data-isuse', '');
$("#actPay").text("￥00.00");
$("#discountPay").text("￥00.00");
$("#inputCard").val("");
$("#inputCode").val("");
$("#codeMoney").text("");
$("#cardMoney").text("");
})
//点击关闭模态框，恢复初始
$("#scanLoading").on('click', function () {
$(this).hide();
})
//对于输入的值验证.
function clearNoNum(obj) {
obj.value = obj.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字而不是.
obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的.
obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
if (obj.value.indexOf(".") < 0 && obj.value != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
obj.value = parseFloat(obj.value);
}
if (obj.value.indexOf(".") >= 0) { //判断是否有小数点
if (obj.value.split(".")[1].length > n) { //控制只能输入小数点后2位
obj.value = obj.value.substr(0, obj.value.length - 1);
}
}
}
})js键盘输入代码：
void function () {
// 不同支付方式
$("#ztapF1").on('click', function () {
$("#home-1,#inputNum").attr('data-paytype', 'alipay');
$("#inputNum").val("");
$("#shouldPay").text("￥00.00");
})
$("#ztapF2").on('click', function () {
$("#home-1,#inputNum").attr('data-paytype', 'wepay');
$("#inputNum").val("");
$("#shouldPay").text("￥00.00");
})
$("#ztapF3").on('click', function () {
$("#home-1,#inputNum").attr('data-paytype', 'mempay');
$("#inputNum").val("");
$("#shouldPay").text("￥00.00");
})
// 键盘输入事件
var n = 2;
$('.form_edit .num').click(function () {
var _input = document.getElementById("inputNum");
var value = $(this).text();
console.log(value);
if (_input) {
if ($(this).prop('tagName').toLocaleLowerCase() === 'li' && value === ".") {
if (n <= 0) {
_input.value = _input.value;
document.getElementById("shouldPay").innerHTML = _input.value;
document.getElementById("actPay").innerHTML = _input.value;
} else {
_input.value += value;
clearNoNum(_input);
document.getElementById("shouldPay").innerHTML = _input.value;
document.getElementById("actPay").innerHTML = _input.value;
}
} else {
_input.value += value;
clearNoNum(_input);
document.getElementById("shouldPay").innerHTML = _input.value;
document.getElementById("actPay").innerHTML = _input.value;
}
}
})
//对于输入的值验证.
function clearNoNum(obj) {
obj.value = obj.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字而不是.
obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的.
obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
if (obj.value.indexOf(".") < 0 && obj.value != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
obj.value = parseFloat(obj.value);
}
if (obj.value.indexOf(".") >= 0) { //判断是否有小数点
if (obj.value.split(".")[1].length > n) { //控制只能输入小数点后2位
obj.value = obj.value.substr(0, obj.value.length - 1);
}
}
}
}()静态页面代码:
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<!-- 选择交易方式开始 -->
<div class="col-md-12 col-lg-12 col-xl-12">
<div class="card m-b-30">
<div class="card-body">
<ul class="nav nav-pills nav-justified" role="tablist" id="ztabList">
<li class="nav-item waves-effect waves-light">
<a class="nav-link active show" data-toggle="tab" href="#home-1" role="tab"
aria-selected="true" id="ztapF1">
<p>支付宝</p>
<p>（F1）</p>
</a>
</li>
<li class="nav-item waves-effect waves-light">
<a class="nav-link" data-toggle="tab" href="#home-1" role="tab" aria-selected="true"
id="ztapF2">
<p>微信</p>
<p>（F2）</p>
</a>
</li>
<li class="nav-item waves-effect waves-light">
<a class="nav-link" data-toggle="tab" href="#home-1" role="tab" aria-selected="true"
id="ztapF3">
<p>会员卡支付</p>
<p>（F3）</p>
</a>
</li>
<li class="nav-item waves-effect waves-light">
<a class="nav-link" data-toggle="tab" href="#home-4" role="tab" aria-selected="true"
id="ztapF4">
<p>会员卡充值</p>
<p>（F4）</p>
</a>
</li>
<li class="nav-item waves-effect waves-light">
<a class="nav-link" data-toggle="tab" href="#home-5" role="tab" aria-selected="true"
id="ztapF5">
<p>会员开卡</p>
<p>（F5）</p>
</a>
</li>
<li class="nav-item waves-effect waves-light">
<a class="nav-link" data-toggle="tab" href="#home-6" role="tab" aria-selected="true"
id="ztapF6">
<p>流水</p>
<p>（F6）</p>
</a>
</li>
<li class="nav-item waves-effect waves-light">
<a class="nav-link" data-toggle="tab" href="#home-7" role="tab" aria-selected="true"
id="ztapF7">
<p>积分查询</p>
<p>（F7）</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 选择交易方式结束 -->
</div>
<div class="tab-content">
<div class="tab-pane p-3 active show" id="home-1" role="tabpanel" data-paytype="alipay">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="card-body alipay-box">
<div class="alipay-left col-md-4 col-sm-12">
<div class="top">
<div class="cal-text">
<p>应付：</p>
<p id="shouldPay">￥00.00</p>
</div>
<div class="cal-text">
<p>折扣：</p>
<p id="discountPay">-￥00.00</p>
</div>
<div class="cal-text">
<p>实付：</p>
<p style="color: red;" id="actPay">￥00.00</p>
</div>
<div class="form-box">
<input type="text" οnkeyup="value=value.replace(/[^\d.]/g,'')"
class="form-control control-input screen" id="inputNum"
placeholder="请输入付款金额" autofocus="autofocus" readonly>
<input type="hidden" id="payCode">
<button type="type" class="btn btn-primary waves-effect waves-light btn-del"
id="zbtnDel">DEL</button>
</div>
</div>
<div class="square">
<ul class="square-inner flex form_edit">
<li class="num">1</li>
<li class="num">2</li>
<li class="num">3</li>
<li class="num">4</li>
<li class="num">5</li>
<li class="num">6</li>
<li class="num">7</li>
<li class="num">8</li>
<li class="num">9</li>
<li class="num">0</li>
<li class="num">.</li>
<li id="confirmBtn">确认</li>
</ul>
</div>
</div>
<div class="aliplay-right col-md-5 col-sm-12">
<div class="form-group row">
<label for="example-text-input"
class="col-sm-12 col-md-4 col-form-label">会员卡：</label>
<div class="col-md-8 col-sm-12">
<input class="form-control" type="number" placeholder="会员卡号或手机号码"
οnkeyup="this.value=this.value.replace(/\D/g,'')" id="inputCard">
<div class="form-control-feedback" id="cardMoney">点击输入框，回车确认使用</div>
</div>
</div>
<div class="form-group row">
<label for="example-text-input"
class="col-sm-12 col-md-4 col-form-label">卡券核销码：</label>
<div class="col-md-8 col-sm-12">
<input class="form-control" type="number" placeholder="请输入核销码"
id="inputCode" οnkeyup="this.value=this.value.replace(/\D/g,'')">
<div class="form-control-feedback" id="codeMoney">扫描一次条形码即可</div>
</div>
</div>
<!-- <div class="form-group row">
<label for="example-text-input" class="col-sm-12 col-md-4 col-form-label">会员支付密码：</label>
<div class="col-md-8 col-sm-12">
<input class="form-control" type="password" placeholder="请会员输入支付密码"
maxlength="6" οnkeyup="this.value=this.value.replace(/\D/g,'')">
</div>
</div> -->
<button type="button" class="btn btn-warning waves-effect waves-light confirm-btn"
id="aplySuccess">提交交易</button>
<button type="button" class="btn btn-warning waves-effect waves-light confirm-btn"
id="aplySuccess">现金支付</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane p-3" id="home-4" role="tabpanel">
<div class="row">
<div class="col-md-12 col-lg-12 col-xl-12">
<div class="card-body">
<div class="col-6 member-show" style="margin: 0 auto;">
<div class="form-group row input-act">
<label for="example-text-input" class="col-sm-3 col-form-label">会员搜索：</label>
<div class="col-sm-7" style="display: flex">
<input type="email" class="form-control control-input"
id="exampleInputEmail2" placeholder="会员卡号或手机号">
<button type="submit"
class="btn btn-primary waves-effect waves-light">搜索</button>
</div>
</div>
<div class="block-none" style="">
<div class="form-group row">
<label for="example-text-input"
class="col-sm-3 col-form-label">会员卡号：</label>
<p class="block-text">13213245646</p>
</div>
<div class="form-group row">
<label for="example-text-input"
class="col-sm-3 col-form-label">当前积分：</label>
<p class="block-text" style="color:red;">9836</p>
</div>
</div>
<div class="form-group row input-act">
<label for="example-text-input" class="col-sm-3 col-form-label">调整积分：</label>
<div class="col-sm-7">
<input class="form-control" type="number" placeholder="会员卡号或手机号码"
οninput="if(value.length>11)value=value.slice(0,11)"
οnkeyup="this.value=this.value.replace(/\D/g,'')">
</div>
</div>
<div class="form-group row input-act">
<label for="example-text-input" class="col-sm-3 col-form-label">备注：</label>
<div class="col-sm-7">
<textarea name="" id="" cols="30" rows="5"></textarea>
</div>
</div>
<button type="button" class="btn btn-warning waves-effect waves-light confirm-btn"
style="margin: 20px 0 0 250px; width:150px;">确认</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane p-3" id="home-8" role="tabpanel">
<div class="row">
<div class="col-md-12 col-lg-12 col-xl-12">
<div class="card-body">
</div>
</div>
</div>
</div>
<div class="tab-pane p-3" id="home-6" role="tabpanel">
<div class="row">
<div class="col-md-12 col-lg-12 col-xl-12">
<div class="card-body">
<div id="datatable-buttons_wrapper"
class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
<div class="row" style="padding: 0 15px; margin-bottom: 15px;">
<div class="col-sm-12 col-md-12">
<div class="stream-top">
<div class="form-inline row">
<label for="example-text-input" class="col-form-label">支付账户：</label>
<input class="form-control search-input" type="text"
placeholder="请输入账户名称" id="example-text-input">
</div>
<div class="form-inline row" style="margin-left: 40px;">
<label for="example-text-input" class="col-form-label">交易流水：</label>
<input class="form-control search-input" type="text"
placeholder="请输入流水号" id="example-text-input">
</div>
<button type="button"
class="btn btn-primary waves-effect waves-light">搜索</button>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<table id="datatable-buttons"
class="table table-striped table-bordered dataTable no-footer"
cellspacing="0" width="100%" role="grid"
aria-describedby="datatable-buttons_info" style="width: 100%;">
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0"
aria-controls="datatable-buttons" rowspan="1" colspan="1"
aria-label="Position: activate to sort column descending"
style="width: 516px;" aria-sort="ascending">交易流水号</th>
<th class="sorting" tabindex="0"
aria-controls="datatable-buttons" rowspan="1" colspan="1"
aria-label="Office: activate to sort column ascending"
style="width: 271px;">应收金额</th>
<th class="sorting" tabindex="0"
aria-controls="datatable-buttons" rowspan="1" colspan="1"
aria-label="Age: activate to sort column ascending"
style="width: 141px;">优惠金额</th>
<th class="sorting" tabindex="0"
aria-controls="datatable-buttons" rowspan="1" colspan="1"
aria-label="Start date: activate to sort column ascending"
style="width: 256px;">卡券类型</th>
<th class="sorting" tabindex="0"
aria-controls="datatable-buttons" rowspan="1" colspan="1"
aria-label="Salary: activate to sort column ascending"
style="width: 222px;">实付金额</th>
<th class="sorting" tabindex="0"
aria-controls="datatable-buttons" rowspan="1" colspan="1"
aria-label="Salary: activate to sort column ascending"
style="width: 222px;">支付方式</th>
<th class="sorting" tabindex="0"
aria-controls="datatable-buttons" rowspan="1" colspan="1"
aria-label="Salary: activate to sort column ascending"
style="width: 222px;">实付金额</th>
<th class="sorting" tabindex="0"
aria-controls="datatable-buttons" rowspan="1" colspan="1"
aria-label="Salary: activate to sort column ascending"
style="width: 222px;">实付金额</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-5">
<div class="dataTables_info" id="datatable-buttons_info" role="status"
aria-live="polite">Showing 1 to 10 of 57 entries</div>
</div>
<div class="col-sm-12 col-md-7">
<div class="dataTables_paginate paging_simple_numbers"
id="datatable-buttons_paginate">
<ul class="pagination">
<li class="paginate_button page-item previous disabled"
id="datatable-buttons_previous"><a href="#"
aria-controls="datatable-buttons" data-dt-idx="0"
tabindex="0" class="page-link">Previous</a></li>
<li class="paginate_button page-item active"><a href="#"
aria-controls="datatable-buttons" data-dt-idx="1"
tabindex="0" class="page-link">1</a></li>
<li class="paginate_button page-item "><a href="#"
aria-controls="datatable-buttons" data-dt-idx="2"
tabindex="0" class="page-link">2</a></li>
<li class="paginate_button page-item "><a href="#"
aria-controls="datatable-buttons" data-dt-idx="3"
tabindex="0" class="page-link">3</a></li>
<li class="paginate_button page-item "><a href="#"
aria-controls="datatable-buttons" data-dt-idx="4"
tabindex="0" class="page-link">4</a></li>
<li class="paginate_button page-item "><a href="#"
aria-controls="datatable-buttons" data-dt-idx="5"
tabindex="0" class="page-link">5</a></li>
<li class="paginate_button page-item "><a href="#"
aria-controls="datatable-buttons" data-dt-idx="6"
tabindex="0" class="page-link">6</a></li>
<li class="paginate_button page-item next"
id="datatable-buttons_next"><a href="#"
aria-controls="datatable-buttons" data-dt-idx="7"
tabindex="0" class="page-link">Next</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane p-3" id="home-7" role="tabpanel">
<div class="row">
<div class="col-md-12 col-lg-12 col-xl-12">
<div class="card-body">
<div class="col-6 member-show" style="margin: 0 auto;">
<div class="form-group row input-act">
<label for="example-text-input" class="col-sm-3 col-form-label">会员搜索：</label>
<div class="col-sm-7" style="display: flex">
<input type="email" class="form-control control-input"
id="exampleInputEmail2" placeholder="会员卡号或手机号">
<button type="submit"
class="btn btn-primary waves-effect waves-light">搜索</button>
</div>
</div>
<div class="block-none" style="">
<div class="form-group row">
<label for="example-text-input"
class="col-sm-3 col-form-label">会员卡号：</label>
<p class="block-text">13213245646</p>
</div>
<div class="form-group row">
<label for="example-text-input"
class="col-sm-3 col-form-label">当前积分：</label>
<p class="block-text" style="color:red;">9836</p>
</div>
</div>
<div class="form-group row input-act">
<label for="example-text-input" class="col-sm-3 col-form-label">调整积分：</label>
<div class="col-sm-7">
<input class="form-control" type="number" placeholder="会员卡号或手机号码"
οninput="if(value.length>11)value=value.slice(0,11)"
οnkeyup="this.value=this.value.replace(/\D/g,'')">
</div>
</div>
<div class="form-group row input-act">
<label for="example-text-input" class="col-sm-3 col-form-label">备注：</label>
<div class="col-sm-7">
<textarea name="" id="" cols="30" rows="5"></textarea>
</div>
</div>
<button type="button" class="btn btn-warning waves-effect waves-light confirm-btn"
style="margin: 20px 0 0 250px; width:150px;">确认</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- end container -->
</div>
<!-- end wrapper -->
<div class="modal fade bs-example-modal-center show" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
style="display: none; padding-right: 17px; background: rgba(83,83,83,0.5);" id="scanLoading">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- <div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div> -->
<div class="modal-body">
<p style="text-align: center;margin-top: 1rem;">等待扫码中 <span class="dotting"></span> </p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>css样式
body{
min-width:768px;
width: auto !important;
width:768px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
input[type="number"]{-moz-appearance:textfield;}
.nav-item {
border: 1px solid #3a99ed;
color: #3a99ed;
border-radius: 5px;
margin-right: 6%!important;
cursor: pointer;
}
.nav-item a {
padding: 15px 0 !important;
}
.nav-item:last-child {
margin-right: 0!important;
}
.nav-link {
cursor: pointer;
}
.nav-link p {
color: #3a99ed !important;
margin-bottom: 0;
color: #3a99ed;
}
.nav-link.active p {
color: #fff!important;
}
.tab-pane {
background: #fff;
border-radius: 5px;
}
.alipay-box {
margin: 0 5%;
display: flex;
justify-content: space-around;
}
.top {
border: 1px solid #dedede;
padding: 15px 0;
}
.top .cal-text {
display: flex;
justify-content: space-between;
margin: 0 50px;
}
.form-box {
display: flex;
justify-content: space-between;
margin: 0 30px;
}
.form-box input {
width: 67%;
height: 50px;
line-height: 50px;
font-size: 25px;
}
input::-webkit-input-placeholder{
font-size: 18px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
height: 100%;
}
.btn-del {
margin-right: 17px;
width: 90px;
height: 50px;
font-size: 18px;
}
.aliplay-right > div {
margin-bottom: 30px;
}
.form-control-feedback {
color: red;
margin-top: 10px;
}
.confirm-btn {
margin: 20% 0 0 42%;
width: 125px;
}
.input-act {
margin-bottom: 3rem;
}
.block-text{
padding: 0 15px;
display: flex;
align-items: center;
margin-bottom: 0;
}
.stream-top {
display: flex;
}
.search-input {
margin-left: 5px;
}
.square{
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
margin: 30px 0;
}
.square-inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-left: 0;
}
.square-inner>li{
width: calc(85%/ 3);
height: calc(70%/ 3);
margin-right: 3%;
overflow: hidden;
border: 1px solid #dedede;
margin-bottom: 0;
cursor: pointer;
}
.flex{
display: flex;
flex-wrap: wrap;
}
.flex>li{
flex-grow: 1;
text-align: center;
color: #000;
font-size: 1rem;
line-height: 2;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.flex>li:nth-of-type(3n){
margin-right: 0;
}
.flex>li:nth-of-type(n+7){
margin-bottom: 0;
}
.dotting {
display: inline-block; width: 10px; min-height: 2px;
padding-right: 2px;
border-left: 2px solid currentColor; border-right: 2px solid currentColor;
background-color: currentColor; background-clip: content-box;
box-sizing: border-box;
animation: dot 3s infinite step-start both;
*zoom: expression(this.innerHTML = '...'); /* IE7 */
}
.dotting:before { content: '...'; } /* IE8 */
.dotting::before { content: ''; }
:root .dotting { margin-left: 2px; padding-left: 2px; } /* IE9+ */
@keyframes dot {
25% { border-color: transparent; background-color: transparent; } /* 0个点 */
50% { border-right-color: transparent; background-color: transparent; } /* 1个点 */
75% { border-right-color: transparent; } /* 2个点 */
}