<%@ page import="com.yc.sdk.shopping.util.SettingKey" %>
|
<%@ page import="com.yc.utils.SessionKey" %>
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
pageEncoding="UTF-8" %>
|
<%
|
String url= SettingKey.getHostUrl(request);
|
String dbId=(String) request.getSession().getAttribute(SessionKey.DATA_BASE_ID);
|
%>
|
<!DOCTYPE html>
|
<html lang="zh-cn">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport"
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>维护费订单列表</title>
|
<link href="<%=url%>/js/maintainPay/css/iconfont/iconfont.css" rel="stylesheet">
|
<link href="<%=url%>/layui/css/layui.css" rel="stylesheet">
|
<link href="<%=url%>/js/maintainPay/css/main.css" rel="stylesheet">
|
<style>
|
#paymentId {
|
margin: 20px 50px;
|
}
|
|
.centerss {
|
max-height: 240px;
|
overflow-y: auto;
|
/*margin-top: 20px;*/
|
}
|
|
.layui-table th, .layui-table td {
|
text-align: center;
|
}
|
|
.info {
|
margin: 10px 0px;
|
text-align: center;
|
/*font-family: Serif;*/
|
}
|
|
.closeee, .closeee:hover {
|
background-color: white;
|
border: 1px solid #d3d7d3;
|
color: #6e6d6d;
|
}
|
|
.layui-btn-normal {
|
margin-right: 50px;
|
}
|
|
.hide {
|
display: none;
|
}
|
|
.callBackcc {
|
max-height: 300px !important;
|
min-height: 300px !important;
|
width: 100%;
|
margin-top: 20px;
|
}
|
|
.callBackcc button {
|
width: 150px;
|
}
|
|
.orderstaus {
|
margin: 10px;
|
width: 100%;
|
}
|
|
.orderstaus li {
|
line-height: 50px;
|
display: inline-block;
|
padding: 0px 20px;
|
}
|
|
.infotdl {
|
text-align: right;
|
line-height: 30px;
|
padding: 5px;
|
}
|
|
.infotdr {
|
text-align: left;
|
line-height: 30px;
|
padding: 5px;
|
}
|
|
.hide {
|
display: none;
|
}
|
</style>
|
</head>
|
<body>
|
<div id="paymentId">
|
<div style="text-align: center;margin-top: 10px">
|
<button @click="goBack(0)" type="button" class="layui-btn layui-btn-primary layui-btn-sm"
|
style="position: absolute;left: 50px;">返回
|
</button>
|
<h2>{{cltName}}</h2>
|
</div>
|
<div style="text-align: center;margin: 20px 0px 0px 0px">
|
<span><font style="color: red">{{lastPayTime}}</font></span>
|
</div>
|
<div class="centerss">
|
<table class="layui-table" lay-skin="line" lay-size="sm">
|
<thead>
|
<tr>
|
<th>费用单号</th>
|
<th>费用日期</th>
|
<th>金额</th>
|
<th>收费项目</th>
|
<th>有效期</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item,index) in order" style="color:green;">
|
<td>{{item.sodocCode}}</td>
|
<td v-html="getFilters(item.payItem,1)"></td>
|
<td>{{item.amount}}</td>
|
<td v-html="getFilters(item.payItem,2)"></td>
|
<td v-html="getFilters(item.payItem,3)"></td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
<div class="info">
|
<table width="100%">
|
<tr>
|
<td class="infotdl">
|
<span>支付订单：</span>
|
</td>
|
<td class="infotdr">
|
<span style="color: green">{{docCode}}</span>
|
</td>
|
<td class="infotdl">
|
<span>支付金额：</span>
|
</td>
|
<td class="infotdr">
|
<span style="color: green">{{amount}}</span>
|
</td>
|
<td class="infotdl">
|
<span>订单时间：</span>
|
</td>
|
<td class="infotdr">
|
<span style="color: green">{{enterDate}}</span>
|
</td>
|
<td class="infotdl">
|
<span>收款人：</span>
|
</td>
|
<td class="infotdr">
|
<span style="color: green">巴士软件有限公司</span>
|
</td>
|
</tr>
|
</table>
|
</div>
|
<div class="info payInfo" style="margin-top: 10px">
|
<div class="flex-row">
|
<div class="payment-nav" style="width: 90%">
|
<span style="float: left;">选择支付方式：</span>
|
<ul class="payment-nav-ul flex-row flex-jc-start" style="margin-top: 30px;margin-left: 100px;">
|
<li class="payment-nav-li flex-row flex-jc-around flex-ai-center selected"
|
data-value="wxpay" data-index="0">
|
<i class="iconfont icon-xuanzhong hide"></i>
|
<i class="iconfont icon-weixuanzhong "></i>
|
<i class="iconfont icon-weixin font-size-20"></i>
|
<span class="">微信支付</span>
|
</li>
|
<li class="payment-nav-li flex-row flex-jc-around flex-ai-center" data-value="alipay"
|
data-index="1">
|
<i class="iconfont icon-xuanzhong hide"></i>
|
<i class="iconfont icon-weixuanzhong"></i>
|
<i class="iconfont icon-zhifubao font-size-20"></i>
|
<span class="">支付宝支付</span>
|
</li>
|
</ul>
|
<div class="text-center" style="padding-top: 50px;">
|
<button class="layui-btn layui-btn-normal closeee hide" @click="goBack('close')">取消支付</button>
|
<button class="layui-btn layui-btn-normal hide" id="submit-btn">确认支付</button>
|
</div>
|
</div>
|
<div class="flex-col qrcode-container flex-jc-center hide text-center " style="width: 300px;margin: 20px">
|
<div style="text-align: center;margin-bottom: 15px">
|
<span><font style="color: red">{{lastPayTime}}</font></span>
|
</div>
|
<div class="payment-way">
|
<div class="text-center">
|
<div id="wxqrcode">
|
</div>
|
<p>
|
<i class="iconfont icon-weixin"></i>
|
<span class="">请使用微信扫码付款</span>
|
</p>
|
</div>
|
</div>
|
<div class="payment-way">
|
<div class="text-center">
|
<div id="aliqrcode"></div>
|
<p>
|
<i class="iconfont icon-zhifubao"></i>
|
<span class="">请使用支付宝付款</span>
|
</p>
|
</div>
|
</div>
|
</div>
|
<div class="text-center payment-status display-center callBackcc hide">
|
<div>
|
<img src="<%=url%>/js/maintainPay/img/payment-success.png" height="140" width="140"
|
alt="支付状态"/>
|
<p style="color: green;font-weight: 600;font-size: 20px">支付成功</p>
|
<div class="orderstaus">
|
<ul>
|
<!-- <li>支付订单：<font style="color: green">{{callBack.skCode}}</font></li>-->
|
<li v-if="callBack.payType == 'wxPay'">微信订单：<font style="color: green">{{callBack.transactionId}}</font>
|
</li>
|
<li v-else="callBack.payType == 'aliPay'">支付宝订单：<font style="color: green">{{callBack.transactionId}}</font>
|
</li>
|
</ul>
|
</div>
|
<button class="layui-btn layui-btn-normal payment-but" @click="goBack(2)">返回</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
<script src="<%=url%>/help/js/JQuery-3.6.0.js"></script>
|
<script src="<%=url%>/layui/layui.js"></script>
|
<script src="<%=url%>/js/maintainPay/js/qrcode/jquery-qrcode-0.18.0.min.js" charset="UTF-8"
|
type="text/javascript"></script>
|
<script src="<%=url%>/help/js/vue.js"></script>
|
|
<script>
|
var layer;
|
var isPayQR;
|
var vm = new Vue({
|
el: '#paymentId',
|
data: {
|
order: [],
|
docCode: "",
|
amount: 0,
|
cltName: "",
|
callBack: "",
|
enterDate: "",
|
lastPayTime: "",
|
payType: "",
|
time:""
|
},
|
mounted: function () {//渲染后加载
|
let skCode = this.getParem("skCode");
|
if (skCode == null) {
|
layer.alert("获取不到收款单信息！");
|
return;
|
}
|
$.post("/Maintain/skSelect.do", {
|
"skCode": skCode
|
}, function (data) {
|
if (data != null && data.code == 0) {
|
let res = data.data;
|
if (res != null) {
|
vm.docCode = res.docCode;
|
vm.amount = res.sumAmount;
|
vm.cltName = res.cltName;
|
vm.enterDate = res.enterDate;
|
let json = res.detailed;
|
for (let v in json) {
|
let item = json[v];
|
vm.order.push(item);
|
}
|
vm.computedLastPayTime();
|
} else {
|
layer.alert("未发现" + skCode + "的信息！");
|
}
|
} else {
|
alert(data.msg);
|
}
|
});
|
},
|
methods: {
|
goBack: function (Indexes) {//返回或取消支付
|
//取消支付
|
if (Indexes == 'close') {
|
layer.confirm('是要取消支付订单：'+vm.docCode+' 吗?', {icon: 3, title:'支付',btn: ['是', '否']
|
,btnAlign: 'c',closeBtn: false}, function(index){
|
vm.skClose(Indexes);
|
layer.close(index);
|
},function(index){
|
layer.close(index);
|
});
|
}else if(Indexes == 'overtime'){
|
vm.skClose(Indexes);
|
}else{
|
location.href = '<%=url%>/app/<%=dbId%>/0/cnzh/150371/5/index.jsp?index=' + Indexes;
|
}
|
}
|
,skClose:function(Indexes){
|
$.ajax({
|
url: '/payment/pay/PayCancel.do?skCode=' + vm.docCode+'&payType='+vm.payType,
|
type: "get",
|
async: false,
|
headers: {'Content-Type': 'application/json;charset=utf-8'}, //接口json格式
|
success: function (data) {
|
if (data.code == 0) {
|
if(Indexes=="close"){
|
location.href = '<%=url%>/app/<%=dbId%>/0/cnzh/150371/5/index.jsp?index=3';
|
}
|
} else {
|
layer.alert(data.msg);
|
}
|
}, error: function (data) {
|
layer.alert(data);
|
}
|
});
|
}
|
,getParem: function (name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
var r = window.location.search.substr(1).match(reg);
|
if (r != null) {
|
return (r[2]);
|
}
|
return "";
|
},
|
getFilters: function (t, v) {
|
let value = "";
|
if (v == 1) {
|
for (var i in t) {
|
value += t[i].docDate.split(" ")[0] + "<br>";
|
}
|
} else if (v == 2) {
|
for (var i in t) {
|
value += t[i].matName + " / " + t[i].totalMoney + " * " + t[i].digit + "<br>";
|
}
|
} else if (v == 3) {
|
for (var i in t) {
|
if (t[i].fybeginday != null && t[i].fyendday != null) {
|
value += t[i].fybeginday.split(" ")[0] + " ~ " + t[i].fyendday.split(" ")[0] + "<br>";
|
} else {
|
value += "未设置";
|
}
|
}
|
}
|
return value;
|
}
|
, computedLastPayTime() {//倒计时
|
$("#submit-btn").removeClass("hide");
|
$(".closeee").removeClass("hide");
|
let self = this;
|
vm.time = setInterval(function () {
|
let createTime = Date.parse(vm.enterDate) / 1000;
|
let endTime = createTime + 1800;//30分钟后失效
|
let clientTime = Date.parse(new Date()) / 1000;
|
let lastTime = endTime - clientTime;
|
let int_minute;
|
if (lastTime > 0) {
|
int_minute = Math.floor(lastTime / 60);
|
lastTime -= int_minute * 60;
|
self.lastPayTime = '剩余支付时间：' + int_minute + '分' + lastTime + '秒'
|
} else {
|
clearInterval(vm.time);
|
self.lastPayTime = '订单超时，支付已失效！请重新生成订单再支付。';//'剩余支付时间：0 秒';
|
$("#submit-btn").addClass("hide");
|
$(".closeee").addClass("hide");
|
$(".payment-nav").hide();
|
layer.close(isPayQR);
|
vm.goBack('overtime');//超时处理
|
}
|
}, 1000);
|
}
|
, isOk: function () {//
|
$.ajax({
|
url: '/payment/pay/PayQuery.do?skCode=' + vm.docCode + '&payType=' + vm.payType,
|
type: "get",
|
async: false,
|
headers: {'Content-Type': 'application/json;charset=utf-8'}, //接口json格式
|
success: function (data) {
|
if (data.code == 0) {
|
let j = data.data;
|
vm.updateMessage();
|
layer.alert(j.tradeStateDesc,{closeBtn: false}, function(index){
|
if (j.code == 0) {//支付成功！
|
vm.goBack(2);
|
}
|
layer.close(index);
|
});
|
} else {
|
layer.alert(data.msg,{closeBtn: false});
|
}
|
}, error: function (data) {
|
layer.alert(data,{closeBtn: false});
|
}
|
});
|
},
|
updateMessage:function(){//更新通知消息
|
$.ajax({
|
url: '/Maintain/updateMessage.do?skCode=' + vm.docCode,
|
type: "get",
|
async: false,
|
headers: {'Content-Type': 'application/json;charset=utf-8'}, //接口json格式
|
success: function (data) {
|
if(data!=null && data.code==0){
|
//更新维护费通知徽章
|
let count=data.data;
|
if(count!=null && count>0){
|
top.$(".tixings").html(count);
|
}else{
|
top.$(".tixings").html("");
|
}
|
}
|
}
|
});
|
}
|
},
|
filters: {}
|
})
|
|
layui.use('layer', function () {
|
layer = layui.layer;
|
})
|
$(function () {
|
var Dom = {
|
paymentWayNav: $('.payment-nav'), //支付方式菜单
|
paymentWayNavLi: $('.payment-nav-li'), //支付方式菜单项
|
submitBtn: $('#submit-btn'), //提交按钮
|
paymentWay: $('.payInfo .payment-way'), //支付方式内容
|
qrcodeContainer: $('.payInfo .qrcode-container'), //支付方式容器
|
paymentStatus: $('.payment-status'), //支付状态
|
};
|
|
// 切换支付方式
|
Dom.paymentWayNavLi.on('click', function () {
|
Dom.paymentWayNavLi.removeClass('selected');
|
$(this).addClass('selected');
|
});
|
|
//支付
|
Dom.submitBtn.on('click', function () {
|
var selected = Dom.paymentWayNavLi.filter('.selected');
|
// value为当前选中支付方式中的data-value绑定值
|
var value = selected.data("value");
|
var index = selected.data("index");
|
let bol = getQrCode(value, index);
|
if (bol) {
|
// Dom.paymentWayNav.hide();
|
// Dom.qrcodeContainer.show();
|
Dom.paymentWay.removeClass('show');
|
Dom.paymentWay.eq(index).addClass('show');
|
isPayQR= layer.open({
|
type: 1
|
, title: false //不显示标题栏
|
, area: ['350px', '350px']
|
, shade: 0.8
|
, id: 'LAY_layuipro' //设定一个id，防止重复弹出
|
, moveType: 1 //拖拽模式，0或者1
|
, content: $(".qrcode-container")
|
,cancel: function(index, layero){
|
layer.confirm('支付完成前不要关闭该窗口哦', {title:'支付',btn: ['已完成支付', '重新选择支付方式']
|
,btnAlign: 'c',closeBtn: false}, function(index){
|
vm.isOk();
|
layer.close(index);
|
},function(index){
|
layer.close(index);
|
});
|
}
|
});
|
}
|
})
|
|
function getQrCode(value, index) {
|
let bol = false;
|
let QRUrl = getAllQrCode(index);
|
//微信支付
|
if (index === 0 && QRUrl != null) {
|
$('#wxqrcode').empty();
|
//生成二维码图片
|
$('#wxqrcode').qrcode({
|
render: "canvas",
|
width: 200,
|
height: 200,
|
foreground: "#000000",
|
background: "#ffffff",
|
correctLevel: 2,
|
text: QRUrl
|
});
|
bol = true;
|
vm.payType = "wx";
|
//支付宝支付
|
} else if (index === 1 && QRUrl != null) {
|
$('#aliqrcode').empty();
|
//生成支付宝二维码
|
$('#aliqrcode').qrcode({
|
render: "canvas",
|
width: 200,
|
height: 200,
|
foreground: "#ff0000",
|
background: "#ffffff",
|
correctLevel: 2,
|
text: QRUrl
|
});
|
bol = true;
|
vm.payType = "ali";
|
}
|
return bol;
|
}
|
|
//获取二维码链接地址
|
function getAllQrCode(index) {
|
//二维码链接地址
|
var qrUrl = null;
|
//获取二维码
|
$.ajax({
|
url: '/payment/pay/PayQrCode.do?payType=' + (index == 0 ? "wx" : "ali") + '&skCode=' + vm.docCode,
|
type: "get",
|
async: false,
|
headers: {'Content-Type': 'application/json;charset=utf-8'}, //接口json格式
|
success: function (data) {
|
if (data.code === 0) {
|
qrUrl = data.data.codeURL;
|
websocketOpen();
|
} else {
|
layer.alert(data.msg+'');
|
}
|
}, error: function (data) {
|
alert(data.responseText);
|
layer.close(isPayQR);
|
}
|
});
|
return qrUrl;
|
}
|
|
//链接ws
|
function websocketOpen() {
|
let url = window.location.protocol + "//" + window.location.host + "/ws/maintain/" + vm.docCode;
|
url = url.replace("https", "wss").replace("http", "ws");
|
ws = new WebSocket(url);// 创建socket对象
|
// 打开
|
ws.onopen = function () {
|
console.log("ws连接成功");
|
};
|
// 收信
|
ws.onmessage = function (e) {
|
let v = JSON.parse(e.data);// 根据自己的需要对接收到的数据进行格式化
|
if (v != null && v.code == 0) {
|
if (v.msg = "SUCCESS") {
|
clearInterval(vm.time);
|
vm.lastPayTime="";
|
vm.callBack = v;
|
layer.close(isPayQR);
|
checkPaymentStatus();
|
vm.updateMessage();
|
ws.close();
|
}
|
} else {
|
layer.alert(v.msg);
|
}
|
};
|
// 关闭
|
ws.onclose = function (e) {
|
ws.close();
|
console.log("ws连接关闭");
|
};
|
}
|
|
// 显示支付状态 支付后调用此函数
|
function checkPaymentStatus() {
|
Dom.paymentWayNav.hide();
|
Dom.qrcodeContainer.hide();
|
Dom.paymentWay.hide();
|
Dom.paymentStatus.removeClass('hide');
|
}
|
})
|
//禁止右键
|
window.document.oncontextmenu = function () {
|
return false;
|
}
|
</script>
|
|
</body>
|
</html>
|
