488 lines
27 KiB
HTML
488 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
|
|
<meta content="yes" name="apple-mobile-web-app-capable">
|
|
<meta content="black" name="apple-mobile-web-app-status-bar-style">
|
|
<meta content="telephone=no" name="format-detection">
|
|
<meta content="email=no" name="format-detection">
|
|
<!-- <link rel="stylesheet" href="https://act.weixin.qq.com/static/cdn/css/wepayui/0.1.1/wepayui.min.css">-->
|
|
<script src="https://www.shouyinbei.net/resources/js/alipayjsapi.min3.1.1.js"></script>
|
|
<title>向商户付款</title>
|
|
<style>
|
|
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
html,body{
|
|
width:100%;
|
|
height:100%;
|
|
margin:0 auto;
|
|
padding:0px;
|
|
background-color:#EFEFF4;
|
|
}
|
|
.payinfo{
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0;
|
|
height: 13rem;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
transition: .4s;
|
|
}
|
|
table{
|
|
width:100%;
|
|
height: 91%;
|
|
bottom: 0;
|
|
background-color:white;
|
|
}
|
|
table tr{
|
|
height: 25%;
|
|
}
|
|
table tr td{
|
|
text-align:center;
|
|
width:24.9999999%;
|
|
border-right:1px solid #D9D9D9;
|
|
border-bottom:1px solid #D9D9D9;
|
|
}
|
|
table tr td:active{
|
|
background-color:#ECECEC;
|
|
}
|
|
.keybord-return,.keybord-stop{
|
|
width:30px;
|
|
height:30px;
|
|
margin:0px auto;
|
|
color:white;
|
|
}
|
|
.keybord-return{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAALpQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAqyRq8wAAAD10Uk5TAAM/gJ+efz5Q2ddPAouKAZZ8nP0vrfcLN03+GcxYu9gSGkCBndobPbe8+QonMuCH7xOIW0fNtCwra4NgHN+ehK8AAAABYktHRACIBR1IAAAACXBIWXMAAABIAAAASABGyWs+AAAB4UlEQVR42u3c51LCQBiF4Y2IgDQVRcWCvffe9v5vS2FGhSH5kTLzney8zxWcd3ZD+BXnAAAAAAAAAAAAgFSiucp8daEWWe/Iq97wY4tN6yW5tNr+T6drvSa77pKfsGw9J7PWymSH761aDyqmw/s160XZTN+rkf669aYsZs7jx4b1qII6/Kb1qvRm79VIzXpWarHn4Qdb1ruK6fDb1rvSir9X3u9YD0sp4Tz8bst6WTEdwz3rZekk3avGvvUyOuiwR4cWOrTQoYUOLXRooUMLHVro0EKHFjq00KGFDi10aKFDCx1a6NBChxY6tNChhQ4tdIhpx3cMy9ZRD6QjaoTR4Q7CeD6cOwzjPJyrhnEezh3FhByfWK/KoBLK1TqNfdhLeCbRMJCfX9cM5IXoXCeUkqQ/jeV7TijRQ4keSvRQoocSPZTooUQPJXoo0UOJHkr0UKKHEj2U6KFEDyV6KNFDiR5K9FCihxI9lOgJpySUD04ml5yV7jPlSberfN8tTjiTc+tdRZVcXFrvSi/+dl1Zz8og9kyurVcVVVK6b2KPzd6uG+tJGc2cya31ooJK7u6tB2U2dbt65Xsf/ms9DH47+o/WY/J5eh5nDF5erZfk9vb+Ufn8sl4BAAAAAAAAAAAAY9/5YLt8mhkMlgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wNy0wNFQxNTowMjo0OSswODowMMIgQKAAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDctMDRUMTU6MDI6NDkrMDg6MDCzffgcAAAAR3RFWHRzdmc6YmFzZS11cmkAZmlsZTovLy9ob21lL2FkbWluL2ljb24tZm9udC90bXAvaWNvbl91ZmVhaXVpd2lrZy9iYWNrLnN2Z4Ft+LMAAAAASUVORK5CYII=); background-size:100% 90%; }
|
|
.keybord-stop{background-image:url(data:image/png;base64,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); background-size:100% 100%;}
|
|
.pay{
|
|
color:#ffffff;
|
|
font-size:120%;
|
|
background-color:#2F87FD;
|
|
}
|
|
.pay:active{
|
|
/*background-color: #df6051;*/
|
|
background-color: #2267c3;
|
|
}
|
|
.shouyin{
|
|
text-align: center;
|
|
color: #9b9b9b;
|
|
font-size: 13px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.logo{
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAD70lEQVRoQ9VaTYgURxT+Xm8w7PQs6CFgXDCXEAKeFHKLRKMo6HoSc0qmqlfxICSn/KCXmIMuiZ4UBEG3q+aokItKiGSTDZ5CIHtK9LAXhRVJDoZs9ywR7CfVuzPMzM5sV/X0MNt92Z7q9773vu2qej/VhIKuSIgDBO8AgEkCTybApLlfg1/ygCUGLSH9m8xVtZ4rwjQNAhLXgikQjgE8BWCHI9ZTgO6Cccevh3cddVvizgT4zJnqSqMRMFMA8O68hjv1aIGIw/FKJaRr1yIXTGsCkZTbx5iChJNpEL3tYsRalnnRI2/2JXFYVeqZjZ4VgVjK95hRJ+BdG9BBZRh4RISar9TvWViZBFZq0/sTSn7OAhrGc4+9D8frs79shL0hgUiIgECzw3DOFpPB01Wtw37yfQlEQnxJoG9tDQ1TjsFfVbX+rpeNngRiIU4CdGOYTrlj8ylf65vdeusIxEIcTffnTXnxlK/1vXbXOgiYrZKYHwBD2iYH/qfwIhPtbd9iOwisiOBsAr44sJ0hAnigc+M6nGmaaBEwEbYRxQtDC1JFkWJerFT93c2I3SLQkPJTZlwpys4wcYjwWUWpq8ZGi0Asgj9cchsC5l8yfi3C0THCBwzss8eiBV+He1oEIiEOEehHewAgYXwzUVfnXXT6yS7X5HmP8LULFoMPV7W+n76BhhCXGPS5C8Bo34CZOny5ovUXKYFYyMcAdroScJHPknWbQinaE1+rt6jxyfT77CUPsgx0BY/5ilb7XXSyZGMh/wewJUuuw4/E20uxCC4CfNZJkXC8otT3LjpZsrGUF8A4lyXX+ZxmDAENcM1F0dcqMw13wUun8cen38TYi6duelSnhpA/MWCKcdvrpq/VKVthF7lYSJODHbXVIWCOIiEfulRaDD5YVEeh29HVJgHfsSWQVm6RkP8RMGGr9IKwbZtS/7bLLwfBG+b3RBj+M8j4cym3bmE8t/WFgWVnAuDkiF+v/9DhqAlESH4bdLwh5Qlm3HIl4DSFDDgRPqooddvctxstatyBwKM8i7iJ/+faza4ug0WNZ/JIF3GebdQgJ4Q0kHmMDbsGWV4MhkP1XIHMOGViwbKU+4ogMKHUfCwkZ5Fd/5xmcqUSm4UAmVQijYI5krlN8AZWk7l0J8mRTo+aQEc6naegGTWBjoJmdRq5lZSjJdBVUq4FJKei/jWPdr0ehn+57xzrNUwq4iX8ty1Wz6I+R1vlfkJo9WdsjfeSI8Z1At6xwujXVjHKpW5sGQKlby2uLuYSN3ebc7DU7fUmiVIfcLSRKO8RU5NEqQ/5WmuizMesrelU5oPu9ghZ2k8NeoX5Un7s0S9fGdXnNq8Aors/k02FsxcAAAAASUVORK5CYII=);background-size:100% 100%;
|
|
width: 2.1875rem;
|
|
height: 2.1875rem;
|
|
}
|
|
.icon{
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAC7UlEQVRYR72WTWgTURDH/7ObJi1YENFT4kVtD/YgSMFaaOrbpfYgeElaURA8CIKKIAhCQYyCIAiC0KLgodBDwUqhiODB8N42RfFQEYoVBUGRCiKioPUjNbsjK4mk2ySbTTe+687O7/dm3hehiSOXy+20bXuEiAQzTwkhznpx1Cx+ET4FoKuMMSaEOF3ObIpAFfhfruM4l0zTzJQkmiIwNze3y7btKWbuXFNyoh/RaHRzb2/vT/db6AKWZd1h5tsAlgHcBZDwSHxLJBJbOjo68qELSCkniegwgC8A9gPYQETTzLypJNG0FkgpJ4joaNlsX2qadpCIttm2PQOglZlvGoZxMvRFqJQaB3DM229mzsVisaF8Pr8XwCHDMI6Evg2VUm6/j1fbzkR0Lx6PD5d6HqqAUuoWgBM+Z8n07OzscCaTcSrFNbwLlFKjAE75wGfa29uHu7u7f1etUCMnoWVZN5j5jM+/9wEMCSF+1YoLXAEp5XUiWnOmeyAPVlZWhgYHB7/7TTCQgFLqGoBzPkkftrW1pXt6er76wQMdREqpqwDO1ywnkdR1Pd3X1+ceRHWNuiogpbxCRCO1Mrp7nohSQohPdZGLQb4CUsrLRHTBJ+kjAGkhxIcg8JotyGazndFoNOLeap473ct44jhO2jTN90HhNQUsy3JX+pKmaYs1JOYLhUJqYGDgXSPwmgJKqSwAk5kPRCKRtxUknmmalurv73/TKLyqQPFFs1hK7DjOnpaWluWSBBEtMLO74F6vB15VQCl1EcC/Z5MbGIlEtjNza/GlkzIM49V64VUFpJRPiWi3F1AoFDbGYrF4Mpl8EQa8ooC3/EXQvOM4E5qmjQsh3KdWaGPNOVBefiKatG17zDTNx6ERPYkqCTwHMCqEcO/6po9VAm75w+xvPfarBJRS7hN6Rz0/BonRdf1jtYl5BThI4iCxuq53VZL4bwIAtgohlrzSlRbhviAzqydW1/XPyWRyoVKs73VcD2A9MX8AVWwjMF0q1kMAAAAASUVORK5CYII=);background-size:100% 100%;
|
|
width: .9375rem;
|
|
height: .9375rem;
|
|
}
|
|
.body{
|
|
padding: 2rem 1rem;
|
|
}
|
|
.store-info{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.name{
|
|
margin-left: .5rem;
|
|
}
|
|
.main-amt{
|
|
height: 3rem;
|
|
padding: 1.2rem 0 0 0;
|
|
}
|
|
.amt-content {
|
|
display: flex;
|
|
background: #fff;
|
|
padding: .5rem 1rem;
|
|
border-radius: 4px;
|
|
height: 2.5rem;
|
|
font-size: 1.125rem;
|
|
}
|
|
.input-label {
|
|
flex: 1;
|
|
line-height: 2.5rem;
|
|
}
|
|
.input-box {
|
|
line-height: 2.5rem;
|
|
font-size: 1.5625rem;
|
|
color: #777;
|
|
}
|
|
.gb {
|
|
display: inline-block;
|
|
width: 2px;
|
|
height: 1.875rem;
|
|
margin-top: -6px;
|
|
background: #2F87FD;
|
|
vertical-align: middle;
|
|
animation: gb 1.3s infinite;
|
|
}
|
|
.money-input {
|
|
font-weight: bold;
|
|
color:#2F87FD;
|
|
}
|
|
@keyframes gb {
|
|
from {
|
|
opacity: 1;
|
|
} to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.remark-info{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
color: #9e9e9e;
|
|
}
|
|
.set-remark{
|
|
margin-left: 5px;
|
|
}
|
|
.main-title{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.shade{
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,.1);
|
|
z-index: 1002;
|
|
overflow: auto;
|
|
}
|
|
.dialog{
|
|
z-index: 8888;
|
|
height: 13rem;
|
|
width: 100%;
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
.dialog-content{
|
|
background: #fff;
|
|
height: 11rem;
|
|
border-radius: 10px;
|
|
padding: 10px 20px;
|
|
margin: 0 auto;
|
|
width: 60%;
|
|
}
|
|
.btns{
|
|
padding: 0 0 0 5%;
|
|
}
|
|
.btn-cancel{
|
|
width: 45%;
|
|
height: 1.8rem;
|
|
border-radius: 20px;
|
|
border: none;
|
|
}
|
|
.btn-submit{
|
|
width: 45%;
|
|
height: 1.8rem;
|
|
border-radius: 20px;
|
|
border: none;
|
|
background-color: #2F87FD;
|
|
color: #fff;
|
|
}
|
|
.remark-text{
|
|
border: 1px solid #e4e0e0;
|
|
height: 6rem;
|
|
width: 100%;
|
|
}
|
|
.remark-body{
|
|
margin-top: 15px;
|
|
}
|
|
.loading{
|
|
z-index: 10000;
|
|
position: absolute;
|
|
width: 100%;
|
|
display: none;
|
|
margin: 40px 0;
|
|
}
|
|
.loading-body{
|
|
width: 30%;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
padding: .4rem 0;
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
.loading-icon{
|
|
background-image: url(data:image/gif;base64,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);background-size:100% 100%;
|
|
height: 30px;
|
|
width: 30px;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="body">
|
|
<div class="main-title">
|
|
<div class="store-info">
|
|
<div class="logo"></div>
|
|
<div class="name" th:text="${storeName}"></div>
|
|
</div>
|
|
<div class="remark-info">
|
|
<div class="icon"></div>
|
|
<div class="set-remark" onclick="showRemarkDialog()">设置备注</div>
|
|
</div>
|
|
</div>
|
|
<div class="main-amt">
|
|
<div class="amt-content" onclick="showInput()">
|
|
<div class="input-label">金额</div>
|
|
<div class="input-box">￥ <span class="money-input" name="comsumeMoney" id="comsumeMoney"></span> <span class="gb"></span></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="payinfo" id="payinfo">
|
|
<div class="shouyin" onclick="showInput()">
|
|
<p>智 慧 经 营 就 用 银 收 客</p>
|
|
</div>
|
|
<table cellspacing="0" cellpadding="0" id="table1">
|
|
<tr>
|
|
<td class="paynum" onclick="inputAmt(1)">1</td>
|
|
<td class="paynum" onclick="inputAmt(2)">2</td>
|
|
<td class="paynum" onclick="inputAmt(3)">3</td>
|
|
<td id="pay-return" onclick="inputAmt('del')"><div class="keybord-return"></div></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="paynum" onclick="inputAmt(4)">4</td>
|
|
<td class="paynum" onclick="inputAmt(5)">5</td>
|
|
<td class="paynum" onclick="inputAmt(6)">6</td>
|
|
<td rowspan="3" class="pay" id="pay">支付</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="paynum" onclick="inputAmt(7)">7</td>
|
|
<td class="paynum" onclick="inputAmt(8)">8</td>
|
|
<td class="paynum" onclick="inputAmt(9)">9</td>
|
|
</tr>
|
|
<tr>
|
|
<td id="pay-stop" onclick="hideInput()"><div class="keybord-stop"></div></td>
|
|
<td id="pay-zero" onclick="inputAmt(0)">0</td>
|
|
<td id="pay-float" onclick="inputAmt('.')">.</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id='shade' class="shade"></div>
|
|
|
|
<div class="dialog" id="dialog">
|
|
<div class="dialog-content">
|
|
<div class="label">设置备注</div>
|
|
<div class="remark-body">
|
|
<textarea id="remark" class="remark-text"></textarea>
|
|
</div>
|
|
<div class="btns">
|
|
<button class="btn-cancel" onclick="hideRemarkDialog('cancel')">取消</button>
|
|
<button class="btn-submit" onclick="hideRemarkDialog('submit')">确定</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loading" id="loading">
|
|
<div class="loading-body">
|
|
<div class="loading-icon">
|
|
</div>
|
|
<div class="loading-msg">
|
|
支付中...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<input type="hidden" id="merchantCode" th:value="${merchantCode}">
|
|
<input type="hidden" id="openid" th:value="${openid}">
|
|
<input type="hidden" id="userid" th:value="${userid}">
|
|
<input type="hidden" id="userAppId" th:value="${userAppId}">
|
|
<input type="hidden" id="storeId" th:value="${storeId}">
|
|
<input type="hidden" id="unionId" th:value="${unionId}">
|
|
<input type="hidden" id="payType" th:value="${payType}">
|
|
<input type="hidden" id="qrNo" th:value="${qrNo}">
|
|
<input type="hidden" id="channelVal" th:value="${channelVal}">
|
|
</body>
|
|
<script>
|
|
function inputAmt(o){
|
|
var dom = document.getElementById('comsumeMoney');
|
|
var txt = dom.innerText;
|
|
if(!txt){
|
|
if(o === 'del' || o === '.'){
|
|
return;
|
|
}
|
|
}
|
|
if(o === '.' && txt.indexOf(".") > 0){
|
|
return;
|
|
}
|
|
if(o === 'del'){
|
|
txt = txt.slice(0,-1);
|
|
dom.innerText = txt
|
|
return;
|
|
}
|
|
if(txt.indexOf(".") > 0 ){
|
|
var v = txt.split(".")[1];
|
|
if(v && v.length > 1){
|
|
return;
|
|
}
|
|
}else{
|
|
if(txt.indexOf("0") == 0 && o !== '.'){
|
|
return;
|
|
}
|
|
}
|
|
txt = txt === "" ? o : txt + "" + o;
|
|
let max = 99999;
|
|
if(parseFloat(txt) > max){
|
|
return;
|
|
}
|
|
dom.innerText = txt;
|
|
}
|
|
function hideInput(){
|
|
var dom = document.getElementById('payinfo');
|
|
dom.style.height = '20px'
|
|
}
|
|
function showInput(){
|
|
var dom = document.getElementById('payinfo');
|
|
dom.style.height = '13rem'
|
|
}
|
|
function showRemarkDialog(){
|
|
var shape = document.getElementById('shade');
|
|
var dialog = document.getElementById('dialog');
|
|
shape.style.display = 'block';
|
|
dialog.style.display = 'block';
|
|
}
|
|
function hideRemarkDialog(t){
|
|
var shape = document.getElementById('shade');
|
|
var dialog = document.getElementById('dialog');
|
|
shape.style.display = 'none';
|
|
dialog.style.display = 'none';
|
|
if(t === 'cancel'){
|
|
document.getElementById('remark').value = "";
|
|
}
|
|
}
|
|
document.getElementById("pay").onclick = ()=>{
|
|
var comsumeMoney = document.getElementById('comsumeMoney').innerText;
|
|
if(comsumeMoney == undefined || comsumeMoney == '' || comsumeMoney == null){
|
|
return;
|
|
}
|
|
var shape = document.getElementById('shade');
|
|
var loading = document.getElementById('loading');
|
|
shape.style.display = 'block';
|
|
loading.style.display = 'block';
|
|
var storeId = document.getElementById("storeId").value;
|
|
var openid = document.getElementById("openid").value;
|
|
var merchantCode = document.getElementById("merchantCode").value;
|
|
var remark = document.getElementById("remark").value;
|
|
var userId = document.getElementById("userid").value;
|
|
var unionId = document.getElementById("unionId").value;
|
|
var userAppId = document.getElementById("userAppId").value;
|
|
var payType = document.getElementById("payType").value;
|
|
var qrNo = document.getElementById("qrNo").value;
|
|
var channelVal = document.getElementById("channelVal").value;
|
|
|
|
var params = "storeId="+storeId + "&openid="+openid + "&merchantCode="+merchantCode +
|
|
"&remark="+remark + "&userId="+userId+"&unionId="+unionId +
|
|
"&userAppId="+userAppId +"&payWay="+payType+ "&comsumeMoney="+comsumeMoney;
|
|
if(qrNo){
|
|
params = params + "&snNo=" + qrNo;
|
|
}
|
|
if(channelVal){
|
|
params = params + "&channelVal=" + channelVal;
|
|
}
|
|
var url = "/wap/merchant/tradePay";
|
|
var xhr = new XMLHttpRequest();//创建请求对象
|
|
xhr.open("POST", url, true);//链接服务器
|
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState === 4) {//请求已完成，且响应已就绪
|
|
shape.style.display = "none";
|
|
loading.style.display = "none";
|
|
if (xhr.status === 200) {//请求成功
|
|
var resultStr = xhr.responseText//获取结果
|
|
var resultObj = JSON.parse(resultStr);//解析数据
|
|
if (resultObj.code == 200) {
|
|
var rdata = resultObj.data;
|
|
if("WXZF" == payType){
|
|
WeixinJSBridge.invoke('getBrandWCPayRequest', {
|
|
// 商品名称
|
|
"appId" : rdata.payAppId,
|
|
"timeStamp" : rdata.payTimeStamp,
|
|
"nonceStr" : rdata.paynonceStr,
|
|
"package" : rdata.payPackage,
|
|
"signType" : rdata.paySignType,
|
|
"paySign" : rdata.paySign,
|
|
}, function(res) {
|
|
if (res.err_msg == "get_brand_wcpay_request:ok" || res.err_msg == "stopMonitoringBeacons:ok") {
|
|
//成功之后跳转地址
|
|
window.location = '/wap/merchant/jumpUrl?orderNumber='+rdata.orderNumber;
|
|
} else {
|
|
cancelPay(rdata.orderNumber);
|
|
alert("支付失败");
|
|
}
|
|
})
|
|
}else if("ZFBZF" == payType){
|
|
var reg=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;
|
|
if(reg.test(rdata.source)){
|
|
window.location = rdata.source;
|
|
}else{
|
|
ap.tradePay({
|
|
tradeNO : rdata.source
|
|
}, function(res) {
|
|
if (res.resultCode == '9000') {
|
|
window.location = '/wap/merchant/jumpUrl?orderNumber='+rdata.orderNumber; //订单支付成功
|
|
} else if (res.resultCode == '8000') {
|
|
} else if (res.resultCode == '4000') {
|
|
cancelPay(rdata.orderNumber);
|
|
ap.alert("订单支付失败");
|
|
} else if (res.resultCode == '6001' || res.resultCode == '99') {
|
|
cancelPay(rdata.orderNumber);
|
|
} else if (res.resultCode == '6002') {
|
|
cancelPay(rdata.orderNumber);
|
|
ap.alert("网络连接出错");
|
|
}
|
|
});
|
|
}
|
|
}else{
|
|
window.location = rdata.redirectUrl;
|
|
}
|
|
} else {
|
|
alert(resultObj.message);
|
|
}
|
|
}
|
|
else {
|
|
alert("错误码 : " + xhr.status);
|
|
}
|
|
}
|
|
}
|
|
xhr.send(params);//发送请求
|
|
}
|
|
function cancelPay(orderNumber) {
|
|
var url = "/wap/merchant/cancelPay/"+orderNumber;
|
|
var xhr = new XMLHttpRequest();//创建请求对象
|
|
xhr.open("GET", url, true);//链接服务器
|
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
|
xhr.onreadystatechange = function () {
|
|
}
|
|
xhr.send();//发送请求
|
|
}
|
|
</script>
|
|
<script type="text/javascript">
|
|
(function (doc, win) {
|
|
var docEl = doc.documentElement,
|
|
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
|
|
recalc = function () {
|
|
var clientWidth = docEl.clientWidth;
|
|
if (!clientWidth) return;
|
|
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根据你设置的html的font-size属性值做适当的变化
|
|
};
|
|
|
|
if (!doc.addEventListener) return;
|
|
win.addEventListener(resizeEvt, recalc, false);
|
|
doc.addEventListener('DOMContentLoaded', recalc, false);
|
|
})(document, window);
|
|
</script>
|
|
</html> |