Cheney/fullstack.web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
dd6405ff4d
fullstack.web/swa/cpe/index.html

407 lines
13 KiB
HTML
Raw Normal View History

ic 卡
2022-12-22 06:57:51 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无线支付密码器 js 接口示例</title>
<style>
body {
更新
2023-01-11 07:32:36 +00:00
width: 100%;
ic 卡
2022-12-22 06:57:51 +00:00
overflow-x: hidden;
color: sienna;
}
更新
2023-01-11 07:32:36 +00:00
.wrap{
display:flex;
display: -webkit-flex;
justify-content: center;
}
ic 卡
2022-12-22 06:57:51 +00:00
.step {
margin: 1rem;
border: silver dashed 1px;
padding: 0 1rem 1rem 1rem;
border-radius: 1rem;
}
.loading{
width: 80px;
height: 40px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 8px;
height: 100%;
border-radius: 4px;
background: lightgreen;
-webkit-animation: load 1s ease infinite;
}
@-webkit-keyframes load{
0%,100%{
height: 40px;
background: lightgreen;
}
50%{
height: 70px;
margin: -15px 0;
background: lightblue;
}
}
.loading span:nth-child(2){
-webkit-animation-delay:0.2s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.4s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.6s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.8s;
}
</style>
<link href="layx.min.css" rel="stylesheet" type="text/css" />
</head>
更新
2023-01-11 07:32:36 +00:00
<body class="wrap">
<div style="width: 430px">
ic 卡
2022-12-22 06:57:51 +00:00
<div id="title-warning" style="width: 100%; color:#f3b223; font-size: 2rem ;text-align: center"><span>您的浏览器不支持！ </span></div>
更新
2023-01-11 07:32:36 +00:00
<div style="text-align: center"><h2>功能测试<small>(<a target="_blank" href="./active_cpe_setup.exe">active 驱动下载</a>)</small></h2></div>
ic 卡
2022-12-22 06:57:51 +00:00
<div class="step">
<h3>基本功能</h3>
<div style="margin-bottom: 1rem">
<div style="margin-bottom: 1rem">
<div style="margin-bottom: 1rem; display: inline-block; margin-right: 1rem">当前状态: <span id="status">....</span>&emsp;&emsp;&emsp; <button id="logout">退&emsp;&emsp;出</button></div>
<div style="margin-bottom: 1rem">
<input id="uid" type="text" maxlength="2" placeholder="用户编号，1~2 个数字">
<select id="utype" style="height: 1.2rem">
<option value ="0">法人/授权人</option>
<option value ="1">主管/主管</option>
<option value ="2">会计/审核人</option>
<option value ="3">出纳/签发人</option>
</select>
</div>
<div style="margin-bottom: 1rem">
<input id="pwd1" type="password" maxlength="6" placeholder="口令，6 个数字">
<button id="login" style="margin-right: 1rem">登&emsp;&emsp;录</button></div>
</div>
</div>
<div><input id="pwd2" type="password" maxlength="6" placeholder="6 个数字"> <button id="modifyPassword">修改口令</button> </div>
</div>
<div class="step">
<h3>获取设备编号</h3>
<div>设备编号： <input id="sn" readonly type="text"></div>
<button id="getSn" style="margin-top:1rem; margin-left: 0rem;">获取</button>
</div>
<div class="step">
<h3>设置自动休眠时间</h3>
<div>分钟： <input id="minutes" type="text" maxlength="2"></div>
<button id="setAutoSleepTime" style="margin-top:1rem; margin-left: 0rem;">设置</button>
</div>
<div class="step">
<h3>支付密码计算</h3>
<div>收方账户： <input type="text" id="accr" maxlength="30" placeholder="30 个数字，汇兑凭证/其他必填"></div>
<div>付方账户： <input type="text" id="accu" maxlength="32" placeholder="8 ~ 32 个数字"></div>
<div>票据类型： <select id="ticketType" style="height: 1.2rem">
<option value ="1">支票</option>
<option value ="2">银行汇票</option>
<option value ="3">银行本票</option>
<option value ="4">汇兑凭证</option>
<option value ="5">其他</option>
</select>
</div>
<div>票据编号： <input id="ticketNo" type="text" maxlength="8" placeholder="最大 8 个数字"></div>
<div>时&emsp;&emsp;间： <input id="date" type="text" maxlength="8" placeholder="yyyyMMdd"></div>
<div>金&emsp;&emsp;额： <input id="banlance" type="text" maxlength="16" placeholder="最大 16 个数字，单位是“分”"></div>
<div>支付密码： <input id="paycode" readonly type="text"></div>
<button id="calcPaycode" style="margin-top:1rem; margin-left: 0rem;">计算支付密码</button>
</div>
<div class="step">
<h3>获取账户列表</h3>
<button id="getAccountList">获取所有账户</button> <span style="color: silver; font-size: 0.8rem">账户比较多时较慢，最长 30 秒。</span>
<div id="loadding-account-list" class="loading" style="margin-bottom: 2rem">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="account-list" style="margin-top: 1rem">
</div>
</div>
更新
2023-01-11 07:32:36 +00:00
</div>
ic 卡
2022-12-22 06:57:51 +00:00
<!-- 仅此示例程序需要依赖 jquery -->
<script src="jquery.min.js"></script>
<script src="layx.min.js" type="text/javascript"></script>
<script src="active.epc.min.js"></script>
<script type="application/javascript">
function getyyyyMMdd(){
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1;
var curr_year = d.getFullYear();
String(curr_month).length < 2 ? (curr_month = "0" + curr_month): curr_month;
String(curr_date).length < 2 ? (curr_date = "0" + curr_date): curr_date;
var yyyyMMdd = curr_year + "" + curr_month +""+ curr_date;
return yyyyMMdd;
}
// 覆盖默认行为
function success(msg){
layx.notice({
title: '成功',
type: 'success',
message: msg
});
}
// 覆盖默认行为
function warning(msg){
layx.notice({
title: '警告',
type: 'warning',
message: msg
});
}
// 覆盖默认行为
function alert(msg){
layx.notice({
title: '错误',
type: 'error',
message: msg
});
}
// init
$("#title-warning").hide();
$("#loadding-account-list").hide();
$("#date").val( getyyyyMMdd() );
$(function () {
if ( ! ActiveEpc.checkSupport() ) {
$("#title-warning").show();
} else {
$("#title-warning").hide();
}
// 建立连接
var api = new ActiveEpc();
api.connect()
$("#login").click(function (){
$(this).attr("disabled",true);
// 用户登录
var uid = $("#uid").val();
var utype = $("#utype").val();
var pwd1 = $("#pwd1").val();
api.login(uid, utype, pwd1)
.then(function ( ret ){
if ( ret.code === "00" ) {
success("登录成功")
} else {
warning("重复登录")
}
$("#status").text("已登录").css({ color : "green"});
})
.catch(function (e) {
alert("[" + e.code + "]" + "登录失败，" + (e.data ? "剩余尝试次数" + e.data : e.msg) )
$("#status").text("...").css({ color : "sliver"})
}).finally(() => {
$(this).attr("disabled",false);
})
})
$("#logout").click(function (){
$(this).attr("disabled",true);
api.logout()
.then(function (ret){
if ( ret.code === "00" ) {
success("已退出")
} else {
warning("重复退出")
}
$("#status").text("已退出").css({ color : "orange"})
})
.catch(function (e) {
alert("[" + e.code + "]" + "退出失败，" + e.msg)
$("#status").text("...").css({ color : "orange"})
}).finally(() => {
$(this).attr("disabled",false);
})
})
$("#getSn").click(function (){
api.getSn()
.then(function ( ret ){
success("获取芯片编号成功!")
$("#sn").val( ret.data )
})
.catch(function (e) {
alert("[" + e.code + "]" + "获取芯片编号失败，" + e.msg)
if ( "2E" === e.code ) {
$("#status").text("未登录").css({ color : "sliver"})
}
}).finally(() => {
$(this).attr("disabled",false);
})
})
$("#setAutoSleepTime").click(function (){
var minutes = $("#minutes").val();
api.setAutoSleepTime( minutes )
.then(function ( ret ){
success("设置自动休眠时间成功!")
$("#minutes").val("")
})
.catch(function (e) {
alert("[" + e.code + "]" + "设置自动休眠时间失败，" + e.msg)
if ( "2E" === e.code ) {
$("#status").text("未登录").css({ color : "sliver"})
}
}).finally(() => {
$(this).attr("disabled",false);
})
})
$("#modifyPassword").click(function (){
var uid = $("#uid").val();
var utype = $("#utype").val();
var pwd2 = $("#pwd2").val();
$(this).attr("disabled",true);
api.modifyPassword(uid, utype, pwd2)
.then(function (){
success("密码修改成功，请牢记!")
})
.catch(function (e) {
alert("[" + e.code + "]" + "修改密码失败，" + e.msg)
if ( "2E" === e.code ) {
$("#status").text("未登录").css({ color : "sliver"})
}
}).finally(() => {
$(this).attr("disabled",false);
})
})
$("#calcPaycode").click(function (){
$(this).attr("disabled",true);
var accr = $("#accr").val();
var accu = $("#accu").val();
var ticketType = $("#ticketType").val();
var ticketNo = $("#ticketNo").val();
var date = $("#date").val();
var banlance = $("#banlance").val();
api.calcPaycode(accr, accu, ticketType, ticketNo, date, banlance)
.then(function (ret){
var v = ret.data;
if ( v.startsWith("FFFF") ) {
v = v.substr(4);
}
$("#paycode").val(v);
success("计算结束")
})
.catch(function (e) {
$("#paycode").val("");
alert("[" + e.code + "]" + "计算支付密码失败，" + e.msg)
if ( "2E" === e.code ) {
$("#status").text("未登录").css({ color : "sliver"})
}
}).finally(() => {
$(this).attr("disabled",false);
})
})
$("#getAccountList").click(function (){
$(this).attr("disabled",true);
$("#account-list").hide();
$("#loadding-account-list").show();
api.getAccountList()
.then(function ( ret ){
var data = ret.data;
var table = " <table border=\"1\">\n" +
" <tr>\n" +
" <th>ID</th>\n" +
" <th>账户</th>\n" +
" <th>有效位</th>\n" +
" </tr>\n" +
"\n"
for ( var i = 0; i < data.length; i++) {
table += "<tr>\n" +
" <td>"+ data[i].id +"</td>\n" +
" <td>"+ data[i].acc +"</td>\n" +
" <td>"+ data[i].len +"</td>\n" +
" </tr>"
}
+ " </table>"
$("#account-list").html( table ).show();
})
.catch(function (e) {
alert("[" + e.code + "]" + "获取账号列表失败，" + e.msg)
if ( "2E" === e.code ) {
$("#status").text("未登录").css({ color : "sliver"})
}
}).finally(() => {
$("#loadding-account-list").hide();
$(this).attr("disabled",false);
})
})
})
</script>
</body>
</html>
Reference in New Issue Copy Permalink