hotelWxPay.jsp 10.1 KB
<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
	<title>微信支付</title>
	<meta charset='utf8'>
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="max-age=0" />
	<meta name="apple-touch-fullscreen" content="yes" />
	<meta name="Description" content="思埠新微商" />
	<meta name="Keywords" content="思埠新微商" />
	<meta name="renderer" content="webkit">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  	<script type="text/javascript" src="<%=basePath%>resources/alipay/js/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="<%=basePath%>resources/wxPay/css/style.css"/>
	<script type="text/javascript">
	var signPackage = [];
	$(document).ready(function() {
		$.ajax({
			type : "POST",
			url : '<%=basePath%>jsapi/sign',
			data : {
				"share_url" : window.location.href
			},
			dataType : "json",
			success : function(data) {
				if (data.code == 0) {
					signPackage = data.data;
					callBack(data.data);
				}
			},
			error : function() {
			}
		});
		$("#confirm_tips").click(function(){
		    $(".user_vote_ensure").hide();
		  });
	});
	function callBack(signPackage) {
		wx.config({
			debug: false,
			appId : signPackage.appId,
			timestamp : signPackage.timestamp,
			nonceStr : signPackage.nonceStr,
			signature : signPackage.signature,
		    jsApiList: [
		      //所有要调用的 API 都要加到这个列表中
		      'checkJsApi',
	          'hideOptionMenu'
		    ]
		});
		wx.ready(function () {
			//分享到朋友圈
			wx.hideOptionMenu();
		});
	}
	wx.error(function(res){});
		(function(){
			// var width = 
				function setHtmlFontSize(){
					var body = document.documentElement || document.body;
					var width = body.clientWidth;
					width = width>640?640:width;
					document.documentElement.style.fontSize = (width/6.4) + 'px';
				};
				setHtmlFontSize();
				// window.addEventListener('resize',function(){
				// 	console.log("123456");
				// 	setHtmlFontSize();
				// },false);
		})();
	</script>
	<style type="text/css">
		.loading-pay {
				position: fixed;
				top: 50%;
				left: 50%;
				width: 200px;
				height: 60px;
				margin-top: -30px;
				margin-left: -100px;
			}
		/*确认投票样式*/
		.user_vote_ensure{
			opacity:1;
			filter:alpha(opacity=100);
			font-size:16px;
			display:none;
		}
		.user_vote_ensure ._mask{
			position: fixed;
		    z-index: 1000;
		    top: 0;
		    right: 0;
		    left: 0;
		    bottom: 0;
		    background: rgba(0, 0, 0, 0.6);
		}
		.user_vote_ensure .dialog_block{
			position: fixed;
		    z-index: 5000;
		    width: 80%;
		    max-width: 300px;
		    top: 50%;
		    left: 50%;
		    -webkit-transform: translate(-50%, -50%);
		    transform: translate(-50%, -50%);
		    background-color: #FFFFFF;
		    text-align: center;
		    border-radius: 3px;
		    overflow: hidden;
		}
		.dialog_block .title{
			padding: 1.3em 1.6em 0.5em;
		}
		.dialog_block .txt_tips{
			padding: 0 1.6em 0.8em;
		    min-height: 40px;
		    font-size: 15px;
		    line-height: 1.3;
		    word-wrap: break-word;
		    word-break: break-all;
		    color: #999999;
		}
		.dialog_block .title .txt{
			font-size:18px;
			font-weight:400;
		}
		.dialog_block .dialog_btn{
			position: relative;
		    line-height: 48px;
		    font-size: 18px;
		    display: -webkit-box;
		    display: -webkit-flex;
		    display: flex;
		}
		.dialog_block .dialog_btn:after{
			content: " ";
		    position: absolute;
		    left: 0;
		    top: 0;
		    right: 0;
		    height: 1px;
		    border-top: 1px solid #D5D5D6;
		    color: #D5D5D6;
		    -webkit-transform-origin: 0 0;
		    transform-origin: 0 0;
		    -webkit-transform: scaleY(0.5);
		    transform: scaleY(0.5);
		}
		.dialog_btn .d_btn{
			display: block;
		    -webkit-box-flex: 1;
		    -webkit-flex: 1;
		    flex: 1;
		    color: #3CC51F;
		    text-decoration: none;
		    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		    position: relative;
		}
		.d_btn.d_cancel{
			color:#353535;
		}
		.d_btn.d_sure:after{
			content: " ";
		    position: absolute;
		    left: 0;
		    top: 0;
		    width: 1px;
		    bottom: 0;
		    border-left: 1px solid #D5D5D6;
		    color: #D5D5D6;
		    -webkit-transform-origin: 0 0;
		    transform-origin: 0 0;
		    -webkit-transform: scaleX(0.5);
		    transform: scaleX(0.5);
		}
		#votedUser{
			color:#cda750;
		}
	</style>
</head>
<body>
<!--头部 start-->
<header class="sbkz_top_title a_b_b">
	<h1 class="tips text-ellipsis">订单详情</h1>
</header>
<!--头部 end-->
<div style="height:0.68rem;"></div>

<!--内容区域 start-->
<section class="kz_HT_order_wrapper">
	<div class="user_vote_ensure" id="vote_ensure">
	    <div class="_mask"></div>
	    <div class="dialog_block">
	      <div class="title"> <strong class="txt">消息提示</strong></div>
	
	      <div class="txt_tips" id="txt_info"></div>
	      <div class="dialog_btn">
	      	<!--这个取消按钮不要隐藏或者删除就好-->
	        <a class="d_btn d_cancel" style="display:none;" href="javascript:void(0);" title="#">取消</a>
	        <a class="d_btn d_sure" href="javascript:void(0);" title="#" id="confirm_tips">确认</a>
	      </div>
	    </div>
	  </div>
	<!--top title-->
	<section class="HT_top_title">
		<h2 class="title text-ellipsis" ng-bind="orderData.status">${orderBean.status }</h2>
		<!-- <p>小主请尽快完成付款,若取消订单请在30分钟以后。</p> -->
	</section> 
	<!--user connection start-->
	<section class="HT_U_connection">
		<!--1-->
		<a class="C-msg" href="javascript:void(0);" title="#">
			<section class="msg">
				<h3 class="m-tips text-ellipsis" ng-bind="orderData.hotelName">${orderBean.hotelName }</h3>
				<div class="m-txt" ng-bind="orderData.hotelAddress">${orderBean.hotelAddress }</div>
			</section>
			<div class="btn-box">
				<b class="icon"></b>
			</div>
		</a>
		<!--2-->
		<section class="C-connection">
			<!-- <a class="P-btn" href="javascript:void(0);" title="#">
				<b class="picon map"></b><stong class="t">查看地图</stong>
			</a> -->
			<a class="P-btn" href="tel:${orderBean.hotelPhone }">
				<b class="picon phone"></b><stong class="t">联系酒店</stong>
			</a>
		</section>
	</section>
	<!--user msg start-->
	<section class="HT_U_r_msg">
		<h1 class="title text-ellipsis"><span>${orderBean.roomName }</span><span>${orderBean.roomNumber }</span>间   共<span>${orderBean.checkinDays }</span></h1>
		<section class="line-wraper">
			<div class="line">
				<strong class="f-b l">入住时间:</strong>
				<div class="f-b"><span>${orderBean.checkInDate }</span><span>${orderBean.checkOutDate }</span></div>
			</div>
			<div class="line">
				<strong class="f-b l">入住人:</strong>
				<div class="f-b">${orderBean.renterInfo }</div>
			</div>
			<div class="line">
				<strong class="f-b l">联系电话:</strong>
				<div class="f-b">${orderBean.renterPhone }</div>
			</div>
		</section>
	</section>
	<!--user msg start-->
	<section class="HT_U_r_msg _2">
		<section class="line-wraper">
			<div class="line">
				<strong class="f-b l">订单总价:</strong>
				<div class="f-b"><span>${orderBean.orderMoney }</span></div>
			</div>
			<div class="line">
				<strong class="f-b l">实付金额:</strong>
				<div class="f-b"><span>${orderBean.orderMoney }</span></div>
			</div>
			<div class="line">
				<strong class="f-b l">支付方式:</strong>
				<div class="f-b">在线支付</div>
			</div>
			<div class="line">
				<strong class="f-b l">订单编号:</strong>
				<div class="f-b">${orderBean.orderCode }</div>
			</div>
			<div class="line">
				<strong class="f-b l">下单时间:</strong>
				<div class="f-b"><fmt:formatDate value="${orderBean.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/></div>
			</div>
		</section>
	</section>
	<!--friendly tips-->
	<section class="f-tips">
		<p>温馨提示:酒店于住店当天13:00办理入住,离店当天13:00办理退房,如您13:00前到达,可能需要等待方能入住,具体以酒店安排为准</p>
	</section>
</section>
<!--内容区域 end-->
<!--底部float栏 start-->
<div style="height:0.75rem;"></div>
<section class="kz_bottom_float_wrapper">
	<a class="kz_zf_btn DP" href="javascript:void(0);" onclick="callpay()" >
		<span>立即支付</span>
	</a>
</section>
<div class="loading-model" id='loading'>
		<img class="loading-pay" src="<%=basePath%>resources/wxPay/images/wxpay_waiting.gif">
	</div>
	<script>
		$(function() {
			setTimeout(callpay, 1000);
		});
		function jsApiCall() {
			WeixinJSBridge.invoke('getBrandWCPayRequest',{
						"appId" : "${payParam.appId}",
						"timeStamp" : "${payParam.timeStamp}",
						"nonceStr" : "${payParam.nonceStr}",
						"package" : "${payParam.prepayId}",
						"signType" : "${payParam.signType}",
						"paySign" : "${payParam.paySign}"
					},function(res) {
						$("#loading").hide();
						if (res.err_msg == 'get_brand_wcpay_request:cancel') {
							$("#txt_info").text("您已经成功取消微信支付");
							$(".user_vote_ensure").show();
						} else if (res.err_msg == 'get_brand_wcpay_request:ok') {
							window.location.href = '<%=basePath%>resources/client/index.html#/kz_yd_success/${orderBean.orderId}/${openId}/1';
						} else {
							$("#txt_info").text("支付异常,提示:" + JSON.stringify(res));
							$(".user_vote_ensure").show();
						}
					}
			);
		}
		
		function callpay() {
			if (typeof WeixinJSBridge == "undefined") {
				if (document.addEventListener) {
					document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
				} else if (document.attachEvent) {
					document.attachEvent('WeixinJSBridgeReady', jsApiCall);
					document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
				}
			} else {
				jsApiCall();
			}
		}
	</script>
</body>
</html>