wxPay.jsp 8.5 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">
	<link rel="stylesheet" href="<%=basePath%>resources/wxPay/css/index.css">
	<script src="<%=basePath%>resources/wxPay/js/flexible.js"></script>
	<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>
	<script>
	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){});
	</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>
	<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>
	<div class="main-container">
		<header class="header ng-scope">
			<h1 class="title">订单支付</h1>
		</header>
	</div>
	<div class="container order-container">
		<div class="address address-border-image">
			<div class="detail">
				<p>姓名: ${orderBean.contact}</p>
				<p>手机: ${orderBean.phone}</p>
				<p>地址: ${orderBean.address}</p>
			</div>
		</div>

		<div class="shop-list">
			<div class="shop-title-name ng-scope" style="margin-top: 0">
				<i class="icon-money left"></i> <span style="padding: 3px 0 0 3px;">待支付产品</span>
			</div>
			<c:forEach items="${orderBean.order1s}" var="one_order1">
				<div class="shop-item clearfix">
				<div class="image left">
					<img src="${one_order1.thumbImg}">
				</div>
				<div class="details detail-titles">
					<p class="name ng-binding">${one_order1.name}</p>
					<p class="integ">
						<i class="icon-money left"></i> <span class="ng-binding">${one_order1.price}</span>
					</p>
					<p class="old ng-binding">
						市场参考价:${one_order1.marketPrice} <span class="right ng-binding"> x${one_order1.purchaseQuantity} </span>
					</p>
				</div>
			</div>
			</c:forEach>
			<div class="order-state clearfix">
				<span class="right status big">总计: <span class="ng-binding">${orderBean.totalMoney}</span>
				</span>
			</div>
		</div>

		<div class="order-details">
			<p class="text">
				<span>订单单号:</span>${orderBean.orderCode}
			</p>
			<p class="text">
				<span>下单时间:</span><fmt:formatDate value="${orderBean.createDt}" pattern="yyyy-MM-dd HH:mm:ss"/>
			</p>
			<p class="text">
				<span>&nbsp;&nbsp;&nbsp;&nbsp;费:</span>¥${orderBean.freight}元
			</p>
			<p class="text">
				<span>货运方式:</span>${orderBean.expressName}
			</p>
			<p class="text">
				<span>买家备注:</span>${orderBean.buyerRemark}
			</p>
		</div>
	</div>
	<div class="detail-bottom"
		style="border-top: .02rem solid rgb(233, 233, 233);">
		<div class="right" style="font-size: 12px;">
			<div class="shop-btn btn right" onclick="callpay()">立即支付</div>
		</div>
	</div>
	<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#/list/${openId}/3';
						} 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>