dongfeng-pay/jhboss/views/road.html

603 lines
20 KiB
HTML
Raw Normal View History

2019-12-19 14:47:58 +08:00
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>管理后台</title>
<link rel="stylesheet" type="text/css" href="../static/css/basic.css">
<script src="../static/js/filter.js"></script>
<style type="text/css" media="screen">
.search div {
display: inline-block;
margin-top: 10px;
}
.add-edit-road {
margin-top: 10px;
margin-right: 10px;
}
.add-edit-road div {
margin-bottom: 20px;
margin-left: 10px;
}
.add-edit-road textarea {
width: 90%;
height: 150px;
}
select {
height: 25px;
min-width: 150px;
}
.road-footer {
width: 83%;
position: fixed;
float: left;
bottom: 10px;
left: 14%;
height: 30px;
border: 1px solid #e7e7e7;
background-color: white;
box-sizing: border-box;
}
fieldset:last-child {
margin-bottom: 30px;
}
.road-cannel-button, .road-save-button {
display: inline-block;
border: 1px solid #e7e7e7;
border-radius: 5px;
font-size: 12px;
text-align: center;
width: 100px;
line-height: 26px;
font-weight: 700;
}
.road-cannel-button:hover, .road-save-button:hover {
cursor: pointer;
background-color: #e7e7e7;
}
#product-name {
margin-right: 80px;
}
.add-road-button {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="road-record">
<div class="search">
<div>
<span>通道名称</span>
<input type="text" class="road-name-search" value="" placeholder="模糊匹配">
</div>
<div>
<span>产品名称</span>
<input type="text" class="product-name-search" value="" placeholder="模糊匹配">
</div>
<div>
<button type="button" class="btn btn-default road-search">搜索</button>
</div>
</div>
<button type="button" class="btn btn-default btn-xs glyphicon glyphicon-plus add-road-button">添加通道</button>
<div class="menu-table">
<table>
<thead class="thead-dark">
<tr>
<th>序列号</th>
<th>通道名称</th>
<th>产品名称</th>
<th>支付类型</th>
<th>成本汇率</th>
<th>状态</th>
<th>通道总额度</th>
<th>每天限额</th>
<th>单笔区间</th>
<th>开放时间段</th>
<th>总流水</th>
<th>今日流水</th>
<th>总利润</th>
<th>今日利润</th>
<th>成功数/请求数</th>
<th>操作</th>
</tr>
</thead>
<tbody id="road-table-body">
</tbody>
</table>
</div>
<!-- 分页插件 -->
<div class="cut_page">
<li>
每页显示
<select id="display_count">
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</li>
<li class="current_total_page"><span class="current_page">0</span>/<span class="total_page">0</span></li>
<li class="pre_page">上一页</li>
<li class="next_page">下一页</li>
<li class="jump_page">跳转 <input type="text" name="jump_page" value=""> <button type="button" class="btn btn-default">Go</button></li>
</div>
</div>
<div class="add-edit-road">
<input type="hidden" value="" class="road-uid">
<fieldset>
<legend style="width: 75px;">通道基本信息</legend>
<div>
<span>通道名称: </span>
<input type="text" class="road-name" value="">
<span class="star">*</span>
<span>备注:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<input type="text" value="" class="road-remark">
</div>
<div>
<span>产品名称: </span>
<select id="product-name">
{{/*<option value="WEIXIN">官方微信</option>*/}}
{{/*<option value="ALIPAY">官方支付宝</option>*/}}
</select>
<span>支付类型: </span>
<select id="pay-type">
<option value="WEIXIN_SCAN">微信扫码</option>
<option value="WEIXIN_H5">微信H5</option>
<option value="WEIXIN_SYT">微信收银台</option>
<option value="ALI_SCAN">支付宝扫码</option>
<option value="ALI_H5">支付宝H5</option>
<option value="ALI_SYT">支付宝收银台</option>
<option value="QQ_SCAN">QQ扫码</option>
<option value="QQ_H5">QQ-H5</option>
<option value="QQ_SYT">QQ收银台</option>
<option value="UNION_SCAN">银联扫码</option>
<option value="UNION_H5">银联H5</option>
<option value="UNION_PC_WAP">银联pc-web</option>
<option value="UNION_SYT">银联收银台</option>
<option value="UNION_FAST">银联快捷</option>
<option value="BAIDU_SCAN">百度钱包扫码</option>
<option value="BAIDU_H5">百度钱包H5</option>
<option value="BAIDU_SYT">百度钱包收银台</option>
<option value="JD_SCAN">京东扫码</option>
<option value="JD_H5">京东H5</option>
<option value="JD_SYT">京东收银台</option>
</select>
</div>
</fieldset>
<fieldset>
<legend style="width: 50px;">费用配置</legend>
<div>
<span>成本费率:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<input type="text" value="" class="basic-rate" placeholder="样例1.2">
<span class="star">*</span>
<span>代付手续费:&nbsp;&nbsp;&nbsp;&nbsp;</span>
<input type="text" value="" class="settle-fee" placeholder="单位:元">
<span class="star">*</span>
</div>
</fieldset>
<fieldset>
<legend style="width: 50px;">额度设置</legend>
<div>
<span>通道总额度:&nbsp;&nbsp;&nbsp;&nbsp;</span>
<input type="text" value="" class="road-total-limit">
<span class="star">*</span>
<span>每天额度:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<input type="text" value="" class="road-everyday-limit">
<span class="star">*</span>
</div>
<div>
<span>单笔金额最小:</span>
<input type="text" value="" class="single-min-limit">
<span class="star">*</span>
<span>单笔金额最大:</span>
<input type="text" value="" class="single-max-limit">
<span class="star">*</span>
</div>
</fieldset>
<fieldset>
<legend style="width: 50px;">时间规则</legend>
<div>
<span>开始时间:</span>
<select id="road-start-hour">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
<span class="star"></span>
<span>结束时间:</span>
<select id="road-end-hour">
<option value="23">23</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
</select>
</div>
</fieldset>
<fieldset>
<legend style="width: 110px;">参数配置JSON格式</legend>
<div>
<code>
<textarea class="road-param-json"></textarea>
</code>
</div>
</fieldset>
<div class="road-footer">
<span class="road-cannel-button">取消</span>
<span class="road-save-button">保存</span>
</div>
</div>
<script>
$(function() {
let dataJSON = getRoadCutPagevalues();
showRoadRecord(dataJSON);
$(".add-edit-road").hide();
});
function showProduct() {
$.ajax({
url: "/get/product",
success: function (res) {
if (res.Code == 404) {
window.parent.location = "/login.html"
} else if (res.Code == -1) {
} else {
let str = "";
for (let key in res.ProductMap) {
let v = res.ProductMap[key];
str = str + '<option value="' + key + '">' + v + '</option>'
}
$("#product-name").html(str);
}
},
error: function () {
alert("系统异常,请稍后再试");
}
});
}
//点击添加通道按钮,隐藏通道列表页面,展示通道编辑添加页面
$(".add-road-button").click(function() {
clearRoadValues();
showProduct();
$(".add-edit-road").show();
$(".road-record").hide();
});
function showRoadRecord(dataJSON) {
$.ajax({
url: "/get/road",
data: dataJSON,
success: function(res) {
if (res.Code == 404) {
window.parent.location = "/login.html";
} else {
$(".current_page").html(res.CurrentPage);
$(".total_page").html(res.TotalPage);
$("#display_count option").each(function() {
if ($(this).text() == res.DisplayCount) {
$(this).attr('selected', true);
}
});
$(".jump_page input").val("");
let str = "";
for (let i = 0; i < res.RoadInfoList.length; i ++) {
let v = res.RoadInfoList[i];
let tmp = "<tr>" + "<th>" + (res.StartIndex+i+1) + "</th>" +
"<th>" + v.RoadName + "</th>" + "<th>" + v.ProductName + "</th>" + "<th>" + v.PayType + "</th>" +
"<th>" + v.BasicFee + "</th>" + "<th>" + v.Status + "</th>" + "<th>" + v.TotalLimit + "</th>" +
"<th>" + v.TodayLimit + "</th>" + "<th>" + v.SingleMinLimit + "-" + v.SingleMaxLimit + "</th>" +
"<th>" + v.StarHour + "-" + v.EndHour + "</th>" + "<th>" + v.TotalIncome + "</th>" + "<th>" + v.TodayIncome + "</th>" +
"<th>" + v.TotalProfit + "</th>" + "<th>" + v.TodayProfit + "</th>" + "<th>" + v.RequestSuccess + "/" + v.RequestAll + '</th>';
tmp = tmp.replace("unactive", "冻结").replace("active", "激活");
tmp = tmp + "<th>" + '<div class="btn-group" role="group" aria-label="...">' +
'<button type="button" value="' + v.RoadUid +'" class="btn btn-default" onclick="editRoad(this.value);"><span class="glyphicon glyphicon-pencil"></span></button>' +
'<button type="button" value="' + v.RoadUid +'" class="btn btn-default" onclick="updateRoadStatus(this.value);">'+ "激活|冻结" +'</button>' +
'<button type="button" value="' + v.RoadUid +'" class="btn btn-default" onclick="deleteRoad(this.value);"><span class="glyphicon glyphicon-trash"></span></button>' +
'</div>' + "</th>" + "</tr>";
str = str + tmp;
}
$("#road-table-body").html(str);
}
},
error: function() {
alert("系统异常,请稍后再试");
}
});
}
$(".road-save-button").click(function() {
let dataJSON = getRoadvalues();
$.ajax({
url:"/add/road",
data: dataJSON,
success: function(res) {
if (res.Code == 404) {
window.parent.location = "/login.html";
} else {
if (res.Code != 200) {
alert(res.Msg);
} else {
alert("添加成功");
$(".add-edit-road").hide();
showRoadRecord(getRoadCutPagevalues());
$(".road-record").show();
}
}
},
});
});
$(".road-cannel-button").click(function() {
$(".road-record").show();
$(".add-edit-road").hide();
});
$(function() {
$(".road-record").show();
$(".add-edit-road").hide();
});
//当每页显示数更改后,执行的操作
$("#display_count").change(function() {
let dataJSON = getRoadCutPagevalues();
showRoadRecord(dataJSON);
});
//点击上一页的按钮
$(".pre_page").click(function() {
let dataJSON = getRoadCutPagevalues();
if (dataJSON["currentPage"] == 1) {
return;
}
dataJSON["currentPage"] = parseInt(dataJSON["currentPage"]) - 1;
showRoadRecord(dataJSON);
});
//点击下一页的按钮时
$(".next_page").click(function() {
let dataJSON = getRoadCutPagevalues();
if (dataJSON["currentPage"] == dataJSON["totalPage"]) {
return;
}
dataJSON["currentPage"] = parseInt(dataJSON["currentPage"]) + 1;
showRoadRecord(dataJSON);
});
//点击跳转那一页的按钮
$(".jump_page button").click(function() {
let dataJSON = getRoadCutPagevalues();
if (dataJSON["jumpPage"].length <= 0) {
return;
}
showRoadRecord(dataJSON);
});
$(".road-search").click(function() {
let dataJSON = getRoadCutPagevalues();
showRoadRecord(dataJSON);
});
function editRoad(roadUid) {
$(".road-record").hide();
showProduct();
$.ajax({
url: "/get/oneRoad",
data: {
"roadUid":roadUid
},
success: function(res) {
if (res.Code == 404) {
window.parent.location = "/login.html";
} else if (res.Code != 200) {
alert("获取单通道信息失败");
} else {
let v = res.RoadInfoList[0];
$(".road-uid").val(v.RoadUid);
$(".road-name").val(v.RoadName);
$(".road-name").prop("readonly", "readonly");
$(".road-remark").val(v.Remark);
$("#product-name").val(v.ProductUid);
$("#product-name").attr("disabled", "disabled");
$("#pay-type").val(v.PayType);
$("#pay-type").attr("disabled", "disabled");
$(".basic-rate").val(v.BasicFee);
$(".settle-fee").val(v.SettleFee);
$(".road-total-limit").val(v.TotalLimit);
$(".road-everyday-limit").val(v.TodayLimit);
$(".single-min-limit").val(v.SingleMinLimit);
$(".single-max-limit").val(v.SingleMaxLimit);
$("#road-star-hour").val(v.StarHour);
$("#road-end-hour").val(v.EndHour);
$(".road-param-json").val(v.Params);
$(".road-record").hide();
$(".add-edit-road").show();
}
}
});
}
function updateRoadStatus(roadUid) {
$.ajax({
url: "/update/roadStatus",
data: {"roadUid":roadUid},
success: function(res) {
if (res.Code == 404) {
window.parent.location = "/login.html";
} else if (res.Code != 200) {
alert("状态更新失败");
} else {
alert("更新状态成功")
showRoadRecord(getRoadCutPagevalues());
}
},
error: function(res) {
alert("系统异常,请稍后再试");
}
});
}
function deleteRoad(roadUid) {
if (!window.confirm("是否删除该项")) {
return false;
}
let dataJSON = getRoadCutPagevalues();
dataJSON["roadUid"] = roadUid;
$.ajax({
url: "/delete/road",
data:dataJSON,
success: function(res) {
if (res.Code == 404) {
window.parent.location = "/login.html";
} else if (res.Code != 200) {
alert("删除失败")
} else {
alert("删除成功");
showRoadRecord(getRoadCutPagevalues());
}
},
error: function(res) {
alert("系统异常,请稍后再试");
}
});
}
function getRoadCutPagevalues() {
let displayCount = $("#display_count").val();
let currentPage = $(".current_page").html();
let totalPage = $(".total_page").html();
let jumpPage = $(".jump_page input").val();
let roadName = $(".road-name-search").val();
let roadUid = $(".road-number-search").val();
let productName = $(".product-name-search").val();
let productUid = $(".product-number-search").val();
return dataJSON = {
"roadName":roadName,
"roadUid":roadUid,
"productName":productName,
"productUid":productUid,
"displayCount":displayCount,
"currentPage":currentPage,
"totalPage":totalPage,
"jumpPage":jumpPage
};
}
function clearRoadValues() {
$(".road-uid").val("");
$(".road-name").val("");
$(".road-remark").val("");
$("#product-name").val("");
$("#pay-type").val("");
$(".basic-rate").val("");
$(".settle-fee").val("");
$(".road-total-limit").val("");
$(".road-everyday-limit").val("");
$(".single-min-limit").val("");
$(".single-max-limit").val("");
$(".road-star-hour").val("");
$(".road-end-hour").val("");
$(".road-param-json").val("");
}
//判断字符串是不是json串的函数
function isJSON(str) {
try {
// statements
var obj = JSON.parse(str);
if (typeof obj == 'object' && obj) {
return true;
} else {
return false;
}
} catch(e) {
// statements
return false;
}
}
function getRoadvalues() {
let roadUid = $(".road-uid").val();
let roadName = $(".road-name").val();
let roadRemark = $(".road-remark").val();
let productName = $("#product-name").val();
let payType = $("#pay-type").val();
let basicRate = $(".basic-rate").val();
let settleFee = $(".settle-fee").val();
let roadTotalLimit = $(".road-total-limit").val();
let roadEverydayLimit = $(".road-everyday-limit").val();
let singleMinLimit = $(".single-min-limit").val();
let singleMaxLimit = $(".single-max-limit").val();
let startHour = $("#road-start-hour").val();
let endHour = $("#road-end-hour").val();
let params = $(".road-param-json").val();
if (params.length > 0 ) {
if (!isJSON(params)) {
alert("参数配置不是json格式");
return
}
}
return {
"roadUid":roadUid,
"roadName":roadName,
"roadRemark":roadRemark,
"productName":productName,
"payType":payType,
"basicRate":basicRate,
"settleFee":settleFee,
"roadTotalLimit":roadTotalLimit,
"roadEverydayLimit":roadEverydayLimit,
"singleMinLimit":singleMinLimit,
"singleMaxLimit":singleMaxLimit,
"startHour":startHour,
"endHour":endHour,
"params":params
};
}
</script>
</body>
</html>