eCoWorksV3.git - Gitblit

xinyb_

2022-02-17 6e94d52d0ce0c92c2169cdb19bc675ae08391a35

提交 \| 用户 \| age
d3ae0a	1	<%@ page import="com.yc.sdk.shopping.util.SettingKey" %>
X	2	<%@ page import="com.yc.utils.SessionKey" %>
	3	<%@ page language="java" contentType="text/html; charset=UTF-8"
	4	pageEncoding="UTF-8" %>
	5	<%
6e94d5	6	String url = SettingKey.getHostUrl(request);
X	7	String dbId = (String) request.getSession().getAttribute(SessionKey.DATA_BASE_ID);
d3ae0a	8	%>
X	9	<!DOCTYPE html>
	10	<html lang="zh-cn">
	11	<head>
	12	<meta charset="UTF-8">
	13	<meta name="viewport"
	14	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	15	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	16	<title>维护费订单列表</title>
	17	<link href="<%=url%>/js/maintainPay/css/iconfont/iconfont.css" rel="stylesheet">
	18	<link href="<%=url%>/layui/css/layui.css" rel="stylesheet">
	19	<link href="<%=url%>/js/maintainPay/css/main.css" rel="stylesheet">
	20	<style>
	21	#paymentId {
	22	margin: 20px 50px;
	23	}
	24
	25	.centerss {
	26	max-height: 240px;
	27	overflow-y: auto;
e3bd0e	28	/margin-top: 20px;/
d3ae0a	29	}
X	30
	31	.layui-table th, .layui-table td {
	32	text-align: center;
	33	}
	34
	35	.info {
	36	margin: 10px 0px;
	37	text-align: center;
	38	/font-family: Serif;/
	39	}
	40
	41	.closeee, .closeee:hover {
	42	background-color: white;
	43	border: 1px solid #d3d7d3;
	44	color: #6e6d6d;
	45	}
	46
	47	.layui-btn-normal {
	48	margin-right: 50px;
	49	}
	50
	51	.hide {
	52	display: none;
	53	}
	54
	55	.callBackcc {
	56	max-height: 300px !important;
	57	min-height: 300px !important;
	58	width: 100%;
	59	margin-top: 20px;
	60	}
	61
	62	.callBackcc button {
	63	width: 150px;
	64	}
	65
	66	.orderstaus {
	67	margin: 10px;
	68	width: 100%;
	69	}
	70
	71	.orderstaus li {
	72	line-height: 50px;
	73	display: inline-block;
	74	padding: 0px 20px;
	75	}
	76
	77	.infotdl {
	78	text-align: right;
	79	line-height: 30px;
	80	padding: 5px;
	81	}
	82
	83	.infotdr {
	84	text-align: left;
	85	line-height: 30px;
	86	padding: 5px;
	87	}
	88
	89	.hide {
	90	display: none;
	91	}
6e94d5	92
X	93	.conterTop {
	94	padding-top: 50px;
	95	}
d3ae0a	96	</style>
X	97	</head>
	98	<body>
	99	<div id="paymentId">
	100	<div style="text-align: center;margin-top: 10px">
	101	<button @click="goBack(0)" type="button" class="layui-btn layui-btn-primary layui-btn-sm"
	102	style="position: absolute;left: 50px;">返回
	103	</button>
	104	<h2>{{cltName}}</h2>
	105	</div>
e3bd0e	106	<div style="text-align: center;margin: 20px 0px 0px 0px">
X	107	<span><font style="color: red">{{lastPayTime}}</font></span>
	108	</div>
d3ae0a	109	<div class="centerss">
X	110	<table class="layui-table" lay-skin="line" lay-size="sm">
	111	<thead>
	112	<tr>
	113	<th>费用单号</th>
6e94d5	114	<%-- <th>费用日期</th>--%>
d3ae0a	115	<th>金额</th>
X	116	<th>收费项目</th>
	117	<th>有效期</th>
	118	</tr>
	119	</thead>
	120	<tbody>
	121	<tr v-for="(item,index) in order" style="color:green;">
	122	<td>{{item.sodocCode}}</td>
6e94d5	123	<%-- <td v-html="getFilters(item.payItem,1)"></td>--%>
d3ae0a	124	<td>{{item.amount}}</td>
X	125	<td v-html="getFilters(item.payItem,2)"></td>
	126	<td v-html="getFilters(item.payItem,3)"></td>
	127	</tr>
	128	</tbody>
	129	</table>
	130	</div>
	131	<div class="info">
	132	<table width="100%">
	133	<tr>
	134	<td class="infotdl">
	135	<span>支付订单：</span>
	136	</td>
	137	<td class="infotdr">
	138	<span style="color: green">{{docCode}}</span>
	139	</td>
	140	<td class="infotdl">
	141	<span>支付金额：</span>
	142	</td>
	143	<td class="infotdr">
	144	<span style="color: green">{{amount}}</span>
	145	</td>
	146	<td class="infotdl">
	147	<span>订单时间：</span>
	148	</td>
	149	<td class="infotdr">
	150	<span style="color: green">{{enterDate}}</span>
	151	</td>
	152	<td class="infotdl">
	153	<span>收款人：</span>
	154	</td>
	155	<td class="infotdr">
4257cf	156	<span style="color: green">{{payee}}</span>
d3ae0a	157	</td>
X	158	</tr>
	159	</table>
	160	</div>
	161	<div class="info payInfo" style="margin-top: 10px">
6e94d5	162	<div id="skCodeRet" class="text-center" style="padding-top: 50px;display: none">
X	163	<button class="layui-btn layui-btn-normal" @click="goBack('skAgain')">重新生成收款单</button>
	164	</div>
d3ae0a	165	<div class="flex-row">
X	166	<div class="payment-nav" style="width: 90%">
	167	<span style="float: left;">选择支付方式：</span>
	168	<ul class="payment-nav-ul flex-row flex-jc-start" style="margin-top: 30px;margin-left: 100px;">
	169	<li class="payment-nav-li flex-row flex-jc-around flex-ai-center selected"
	170	data-value="wxpay" data-index="0">
	171	<i class="iconfont icon-xuanzhong hide"></i>
	172	<i class="iconfont icon-weixuanzhong "></i>
	173	<i class="iconfont icon-weixin font-size-20"></i>
	174	<span class="">微信支付</span>
	175	</li>
	176	<li class="payment-nav-li flex-row flex-jc-around flex-ai-center" data-value="alipay"
	177	data-index="1">
	178	<i class="iconfont icon-xuanzhong hide"></i>
	179	<i class="iconfont icon-weixuanzhong"></i>
	180	<i class="iconfont icon-zhifubao font-size-20"></i>
	181	<span class="">支付宝支付</span>
	182	</li>
	183	</ul>
	184	<div class="text-center" style="padding-top: 50px;">
	185	<button class="layui-btn layui-btn-normal closeee hide" @click="goBack('close')">取消支付</button>
	186	<button class="layui-btn layui-btn-normal hide" id="submit-btn">确认支付</button>
	187	</div>
	188	</div>
	189	<div class="flex-col qrcode-container flex-jc-center hide text-center " style="width: 300px;margin: 20px">
	190	<div style="text-align: center;margin-bottom: 15px">
	191	<span><font style="color: red">{{lastPayTime}}</font></span>
	192	</div>
	193	<div class="payment-way">
	194	<div class="text-center">
	195	<div id="wxqrcode">
	196	</div>
	197	<p>
	198	<i class="iconfont icon-weixin"></i>
	199	<span class="">请使用微信扫码付款</span>
	200	</p>
	201	</div>
	202	</div>
	203	<div class="payment-way">
	204	<div class="text-center">
	205	<div id="aliqrcode"></div>
	206	<p>
	207	<i class="iconfont icon-zhifubao"></i>
	208	<span class="">请使用支付宝付款</span>
	209	</p>
	210	</div>
	211	</div>
	212	</div>
	213	<div class="text-center payment-status display-center callBackcc hide">
	214	<div>
	215	<img src="<%=url%>/js/maintainPay/img/payment-success.png" height="140" width="140"
	216	alt="支付状态"/>
	217	<p style="color: green;font-weight: 600;font-size: 20px">支付成功</p>
	218	<div class="orderstaus">
	219	<ul>
6e94d5	220	<!-- <li>支付订单：<font style="color: green">{{callBack.skCode}}</font></li>-->
d3ae0a	221	<li v-if="callBack.payType == 'wxPay'">微信订单：<font style="color: green">{{callBack.transactionId}}</font>
X	222	</li>
	223	<li v-else="callBack.payType == 'aliPay'">支付宝订单：<font style="color: green">{{callBack.transactionId}}</font>
	224	</li>
	225	</ul>
	226	</div>
	227	<button class="layui-btn layui-btn-normal payment-but" @click="goBack(2)">返回</button>
	228	</div>
	229	</div>
	230	</div>
	231	</div>
	232	</div>
	233	</body>
	234	<script src="<%=url%>/help/js/JQuery-3.6.0.js"></script>
	235	<script src="<%=url%>/layui/layui.js"></script>
	236	<script src="<%=url%>/js/maintainPay/js/qrcode/jquery-qrcode-0.18.0.min.js" charset="UTF-8"
	237	type="text/javascript"></script>
	238	<script src="<%=url%>/help/js/vue.js"></script>
	239
	240	<script>
	241	var layer;
	242	var isPayQR;
	243	var vm = new Vue({
	244	el: '#paymentId',
	245	data: {
	246	order: [],
	247	docCode: "",
	248	amount: 0,
	249	cltName: "",
	250	callBack: "",
	251	enterDate: "",
	252	lastPayTime: "",
	253	payType: "",
6e94d5	254	time: "",
X	255	payee: "",
	256	cltCode: "",
	257	sodocCode: []
d3ae0a	258	},
X	259	mounted: function () {//渲染后加载
	260	let skCode = this.getParem("skCode");
	261	if (skCode == null) {
	262	layer.alert("获取不到收款单信息！");
	263	return;
	264	}
	265	$.post("/Maintain/skSelect.do", {
	266	"skCode": skCode
	267	}, function (data) {
	268	if (data != null && data.code == 0) {
	269	let res = data.data;
	270	if (res != null) {
	271	vm.docCode = res.docCode;
6e94d5	272	vm.cltCode = res.cltCode;
d3ae0a	273	vm.amount = res.sumAmount;
X	274	vm.cltName = res.cltName;
	275	vm.enterDate = res.enterDate;
6e94d5	276	vm.payee = res.payee;
d3ae0a	277	let json = res.detailed;
X	278	for (let v in json) {
	279	let item = json[v];
	280	vm.order.push(item);
6e94d5	281	vm.sodocCode.push(item.sodocCode);
d3ae0a	282	}
6e94d5	283	if (res.isPaid == 1 \|\| res.docStatus == -200 \|\| res.docStatus != 0) {
X	284	$(".payInfo").html("<div style='text-align: center;color: red'>" + data.msg + "</div>");
	285	} else {
	286	vm.computedLastPayTime();
	287	}
d3ae0a	288	} else {
X	289	layer.alert("未发现" + skCode + "的信息！");
	290	}
	291	} else {
6e94d5	292	$(".payInfo").html("<div style='text-align: center;color: red'>" + data.msg + "</div>");
X	293	$(".centerss").addClass("conterTop");
d3ae0a	294	}
X	295	});
	296	},
	297	methods: {
	298	goBack: function (Indexes) {//返回或取消支付
	299	//取消支付
	300	if (Indexes == 'close') {
6e94d5	301	layer.confirm('是要取消支付订单：' + vm.docCode + ' 吗?', {
X	302	icon: 3, title: '支付', btn: ['是', '否']
	303	, btnAlign: 'c', closeBtn: false
	304	}, function (index) {
d3ae0a	305	vm.skClose(Indexes);
X	306	layer.close(index);
6e94d5	307	}, function (index) {
d3ae0a	308	layer.close(index);
X	309	});
6e94d5	310	} else if (Indexes == 'overtime') {
d3ae0a	311	vm.skClose(Indexes);
6e94d5	312	} else if (Indexes == 'skAgain') {
X	313	$.post("/Maintain/skCreate.do", {
	314	"whCode": vm.sodocCode.join(","),
	315	"cltCode": vm.cltCode
	316	}, function (data) {
	317	if (data != null && data.code == 0) {
	318	let skCode = data.data;
	319	location.href = '<%=url%>/app/<%=dbId%>/0/cnzh/150371/5/payment.jsp?skCode=' + skCode;
	320	} else {
	321	layer.alert(data.msg, {closeBtn: false});
	322	}
	323	});
	324	} else {
d3ae0a	325	location.href = '<%=url%>/app/<%=dbId%>/0/cnzh/150371/5/index.jsp?index=' + Indexes;
X	326	}
	327	}
6e94d5	328	, skClose: function (Indexes) {
d3ae0a	329	$.ajax({
6e94d5	330	url: '/payment/pay/PayCancel.do?skCode=' + vm.docCode + '&payType=' + vm.payType,
d3ae0a	331	type: "get",
X	332	async: false,
	333	headers: {'Content-Type': 'application/json;charset=utf-8'}, //接口json格式
	334	success: function (data) {
	335	if (data.code == 0) {
6e94d5	336	if (Indexes == "close") {
d3ae0a	337	location.href = '<%=url%>/app/<%=dbId%>/0/cnzh/150371/5/index.jsp?index=3';
X	338	}
	339	} else {
6e94d5	340	// layer.alert(data.msg);
X	341	layer.alert(data.msg + '' ,{closeBtn: false}, function (index) {
	342	location.reload();
	343	});
d3ae0a	344	}
X	345	}, error: function (data) {
	346	layer.alert(data);
	347	}
	348	});
	349	}
6e94d5	350	, getParem: function (name) {
d3ae0a	351	var reg = new RegExp("(^\|&)" + name + "=([^&]*)(&\|$)", "i");
X	352	var r = window.location.search.substr(1).match(reg);
	353	if (r != null) {
	354	return (r[2]);
	355	}
	356	return "";
	357	},
	358	getFilters: function (t, v) {
	359	let value = "";
	360	if (v == 1) {
	361	for (var i in t) {
	362	value += t[i].docDate.split(" ")[0] + "<br>";
	363	}
	364	} else if (v == 2) {
	365	for (var i in t) {
	366	value += t[i].matName + " / " + t[i].totalMoney + " * " + t[i].digit + "<br>";
	367	}
	368	} else if (v == 3) {
	369	for (var i in t) {
	370	if (t[i].fybeginday != null && t[i].fyendday != null) {
	371	value += t[i].fybeginday.split(" ")[0] + " ~ " + t[i].fyendday.split(" ")[0] + "<br>";
	372	} else {
	373	value += "未设置";
	374	}
	375	}
	376	}
	377	return value;
	378	}
	379	, computedLastPayTime() {//倒计时
	380	$("#submit-btn").removeClass("hide");
	381	$(".closeee").removeClass("hide");
	382	let self = this;
	383	vm.time = setInterval(function () {
	384	let createTime = Date.parse(vm.enterDate) / 1000;
	385	let endTime = createTime + 1800;//30分钟后失效
	386	let clientTime = Date.parse(new Date()) / 1000;
	387	let lastTime = endTime - clientTime;
	388	let int_minute;
	389	if (lastTime > 0) {
	390	int_minute = Math.floor(lastTime / 60);
	391	lastTime -= int_minute * 60;
	392	self.lastPayTime = '剩余支付时间：' + int_minute + '分' + lastTime + '秒'
	393	} else {
	394	clearInterval(vm.time);
6e94d5	395	self.lastPayTime = '订单超时，支付已失效！请重新生成收款单。';//'剩余支付时间：0 秒';
d3ae0a	396	$("#submit-btn").addClass("hide");
X	397	$(".closeee").addClass("hide");
6e94d5	398	$(".payment-nav").html("");
X	399	$("#skCodeRet").show();
d3ae0a	400	layer.close(isPayQR);
X	401	vm.goBack('overtime');//超时处理
	402	}
	403	}, 1000);
	404	}
	405	, isOk: function () {//
	406	$.ajax({
	407	url: '/payment/pay/PayQuery.do?skCode=' + vm.docCode + '&payType=' + vm.payType,
	408	type: "get",
	409	async: false,
	410	headers: {'Content-Type': 'application/json;charset=utf-8'}, //接口json格式
	411	success: function (data) {
	412	if (data.code == 0) {
	413	let j = data.data;
dff633	414	vm.updateMessage();
6e94d5	415	layer.alert(j.tradeStateDesc, {closeBtn: false}, function (index) {
d3ae0a	416	if (j.code == 0) {//支付成功！
X	417	vm.goBack(2);
	418	}
	419	layer.close(index);
	420	});
	421	} else {
6e94d5	422	layer.alert(data.msg, {closeBtn: false});
d3ae0a	423	}
X	424	}, error: function (data) {
6e94d5	425	layer.alert(data, {closeBtn: false});
dff633	426	}
X	427	});
	428	},
6e94d5	429	updateMessage: function () {//更新通知消息
dff633	430	$.ajax({
X	431	url: '/Maintain/updateMessage.do?skCode=' + vm.docCode,
	432	type: "get",
	433	async: false,
	434	headers: {'Content-Type': 'application/json;charset=utf-8'}, //接口json格式
	435	success: function (data) {
6e94d5	436	if (data != null && data.code == 0) {
dff633	437	//更新维护费通知徽章
6e94d5	438	let count = data.data;
X	439	if (count != null && count > 0) {
dff633	440	top.$(".tixings").html(count);
6e94d5	441	} else {
dff633	442	top.$(".tixings").html("");
X	443	}
	444	}
d3ae0a	445	}
X	446	});
	447	}
	448	},
	449	filters: {}
	450	})
	451
	452	layui.use('layer', function () {
	453	layer = layui.layer;
	454	})
	455	$(function () {
	456	var Dom = {
	457	paymentWayNav: $('.payment-nav'), //支付方式菜单
	458	paymentWayNavLi: $('.payment-nav-li'), //支付方式菜单项
	459	submitBtn: $('#submit-btn'), //提交按钮
	460	paymentWay: $('.payInfo .payment-way'), //支付方式内容
	461	qrcodeContainer: $('.payInfo .qrcode-container'), //支付方式容器
	462	paymentStatus: $('.payment-status'), //支付状态
	463	};
	464
	465	// 切换支付方式
	466	Dom.paymentWayNavLi.on('click', function () {
	467	Dom.paymentWayNavLi.removeClass('selected');
	468	$(this).addClass('selected');
	469	});
	470
	471	//支付
	472	Dom.submitBtn.on('click', function () {
	473	var selected = Dom.paymentWayNavLi.filter('.selected');
	474	// value为当前选中支付方式中的data-value绑定值
	475	var value = selected.data("value");
	476	var index = selected.data("index");
	477	let bol = getQrCode(value, index);
	478	if (bol) {
	479	// Dom.paymentWayNav.hide();
	480	// Dom.qrcodeContainer.show();
	481	Dom.paymentWay.removeClass('show');
	482	Dom.paymentWay.eq(index).addClass('show');
6e94d5	483	isPayQR = layer.open({
d3ae0a	484	type: 1
X	485	, title: false //不显示标题栏
	486	, area: ['350px', '350px']
	487	, shade: 0.8
	488	, id: 'LAY_layuipro' //设定一个id，防止重复弹出
	489	, moveType: 1 //拖拽模式，0或者1
	490	, content: $(".qrcode-container")
6e94d5	491	, cancel: function (index, layero) {
X	492	layer.confirm('支付完成前不要关闭该窗口哦', {
	493	title: '支付', btn: ['已完成支付', '重新选择支付方式']
	494	, btnAlign: 'c', closeBtn: false
	495	}, function (index) {
d3ae0a	496	vm.isOk();
X	497	layer.close(index);
6e94d5	498	}, function (index) {
d3ae0a	499	layer.close(index);
X	500	});
	501	}
6e94d5	502	});
d3ae0a	503	}
X	504	})
	505
	506	function getQrCode(value, index) {
	507	let bol = false;
	508	let QRUrl = getAllQrCode(index);
	509	//微信支付
	510	if (index === 0 && QRUrl != null) {
	511	$('#wxqrcode').empty();
	512	//生成二维码图片
	513	$('#wxqrcode').qrcode({
	514	render: "canvas",
	515	width: 200,
	516	height: 200,
	517	foreground: "#000000",
	518	background: "#ffffff",
	519	correctLevel: 2,
	520	text: QRUrl
	521	});
	522	bol = true;
	523	vm.payType = "wx";
	524	//支付宝支付
	525	} else if (index === 1 && QRUrl != null) {
	526	$('#aliqrcode').empty();
	527	//生成支付宝二维码
	528	$('#aliqrcode').qrcode({
	529	render: "canvas",
	530	width: 200,
	531	height: 200,
	532	foreground: "#ff0000",
	533	background: "#ffffff",
	534	correctLevel: 2,
	535	text: QRUrl
	536	});
	537	bol = true;
	538	vm.payType = "ali";
	539	}
	540	return bol;
	541	}
	542
	543	//获取二维码链接地址
	544	function getAllQrCode(index) {
	545	//二维码链接地址
	546	var qrUrl = null;
	547	//获取二维码
	548	$.ajax({
e3bd0e	549	url: '/payment/pay/PayQrCode.do?payType=' + (index == 0 ? "wx" : "ali") + '&skCode=' + vm.docCode,
d3ae0a	550	type: "get",
X	551	async: false,
	552	headers: {'Content-Type': 'application/json;charset=utf-8'}, //接口json格式
	553	success: function (data) {
	554	if (data.code === 0) {
	555	qrUrl = data.data.codeURL;
	556	websocketOpen();
	557	} else {
6e94d5	558	// layer.alert(data.msg + '');
X	559	layer.alert(data.msg + '' ,{closeBtn: false}, function (index) {
	560	location.reload();
	561	});
d3ae0a	562	}
X	563	}, error: function (data) {
e3bd0e	564	alert(data.responseText);
X	565	layer.close(isPayQR);
d3ae0a	566	}
X	567	});
	568	return qrUrl;
	569	}
	570
	571	//链接ws
	572	function websocketOpen() {
	573	let url = window.location.protocol + "//" + window.location.host + "/ws/maintain/" + vm.docCode;
	574	url = url.replace("https", "wss").replace("http", "ws");
	575	ws = new WebSocket(url);// 创建socket对象
	576	// 打开
	577	ws.onopen = function () {
	578	console.log("ws连接成功");
	579	};
	580	// 收信
	581	ws.onmessage = function (e) {
	582	let v = JSON.parse(e.data);// 根据自己的需要对接收到的数据进行格式化
	583	if (v != null && v.code == 0) {
	584	if (v.msg = "SUCCESS") {
	585	clearInterval(vm.time);
6e94d5	586	vm.lastPayTime = "";
d3ae0a	587	vm.callBack = v;
X	588	layer.close(isPayQR);
	589	checkPaymentStatus();
dff633	590	vm.updateMessage();
d3ae0a	591	ws.close();
X	592	}
6e94d5	593	} else if (v != null && v.code == -1) {
X	594	ws.close();
	595	layer.close(isPayQR);
	596	layer.open({
	597	type: 1
	598	, title: false //不显示标题栏
	599	, closeBtn: false
	600	, area: ['300px', '300px']
	601	, shade: 0.8
	602	, id: 'LAY_layuipro1' //设定一个id，防止重复弹出
	603	, btn: ['关闭']
	604	, btnAlign: 'c'
	605	, moveType: 1 //拖拽模式，0或者1
	606	, content: '<div style="text-align: center;margin: 10px">v.msg</div>'
	607	, yes: function (index, layero) {
	608	location.reload();
	609	}
	610	});
d3ae0a	611	} else {
X	612	layer.alert(v.msg);
	613	}
	614	};
	615	// 关闭
	616	ws.onclose = function (e) {
	617	ws.close();
	618	console.log("ws连接关闭");
	619	};
	620	}
	621
	622	// 显示支付状态支付后调用此函数
	623	function checkPaymentStatus() {
	624	Dom.paymentWayNav.hide();
	625	Dom.qrcodeContainer.hide();
	626	Dom.paymentWay.hide();
	627	Dom.paymentStatus.removeClass('hide');
	628	}
	629	})
	630	//禁止右键
	631	window.document.oncontextmenu = function () {
c0e5a1	632	// return false;
d3ae0a	633	}
X	634	</script>
	635
	636	</body>
	637	</html>