Files
chaozhanggui/pluss-wap-page/src/main/resources/templates/th_index.html
junshuai 62548736a7 add file
2022-07-23 13:54:07 +08:00

736 lines
37 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:#df6051;
}
.pay:active{
/*background-color: #df6051;*/
background-color: rgba(223,96,81,0.7);
}
.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: #df6051;
vertical-align: middle;
animation: gb 1.3s infinite;
}
.money-input {
font-weight: bold;
color: #df6051;
}
@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;
top: 30%;
}
.dialog-content{
background: #fff;
border-radius: 10px;
padding: 10px 20px;
margin: 0 auto;
width: 60%;
box-shadow: 0px 0px 10px #686868
}
.btns{
padding: 0 0 0 5%;
}
.btn-cancel{
width: 48%;
height: 1.4rem;
border-radius: 20px;
border: none;
}
.btn-submit{
width: 45%;
height: 1.4rem;
border-radius: 20px;
border: none;
background-color: #df6051;
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;
}
.label{
text-align: center;
}
.inner-text{
color: #727272;
line-height: 1.2rem;
font-size: .78rem;
}
.label-txt{
text-align: center;
}
.desc-text{
margin-top: -0.5rem;
}
.footer-btn{
text-align: center;
margin-top: -0.50rem;
}
.crux-text{
color: #f73131;
font-weight: bold;
}
.crux-br{
display: inline-block;
width: 100%;
border-top: 1px solid #e4e4e4;
vertical-align: top;
margin-top: .3rem;
}
.footer-btn button{
background-color: #fff;
border: 1px solid #b2b2b2;
color: #5f5f5f;
/*vertical-align:bottom;*/
line-height: 1.50rem;
}
.footer-btn .success{
background-color: #df6051;
border: 0;
color: #fff;
}
.item{
display: flex;
justify-content: start;
align-items: center;
font-size: 15px;
}
.merc-label{
width: 35%;
color: #606060;
}
.item > input {
width: 65%;
height: 20px;
border: 0;
border-bottom: 1px solid #c5b6b6;
text-align: right;
outline: none;
}
.body-input{
line-height: 30px;
}
.dialog-desc{
line-height: 20px;
}
.dialog-desc-p{
font-size: 13px;
margin-top: 5px;
color: #df6051;
}
</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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="dialog dialog-txt" id="dialog-txt">
<div class="dialog-content">
<div class="label-txt">反诈中心提醒</div>
<span class="crux-br"></span>
<div class="desc-text">
<p class="inner-text">
<span class="crux-text">刷单返利</span>
<span class="crux-text">信用卡借呗提额</span>
<span class="crux-text">电商退款</span>
<span class="crux-text">网络贷款</span>
<span class="crux-text">赌博上分</span>
<span class="crux-text">投资理财</span>都是骗子,一旦付款资金无法追回,如果是以上情况切勿付款!
</p>
</div>
<span class="crux-br"></span>
<div class="footer-btn">
<button id="btn-success" class="btn-cancel">我已确认<span id="countDown">(<span id="second"></span>S)</span></button>
<button id="btn-cancel" onclick="hideDialog()" class="btn-cancel">取消支付</button>
</div>
</div>
</div>
<div class="dialog dialog-txt" id="dialog-info">
<div class="dialog-content">
<div class="label-txt">请确认收款方信息</div>
<span class="crux-br"></span>
<div class="desc-text body-input">
<div class="item">
<div class="merc-label">姓名:</div>
<input type="text" name="accountName" id="accountName" maxlength="20" autocomplete="off" value="" />
</div>
<div class="item">
<div class="merc-label">手机号:</div>
<input type="number" name="accountPhone" id="accountPhone" maxlength="11" autocomplete="off" value="" />
</div>
<div class="decs dialog-desc">
<p class="dialog-desc-p">若遇到诈骗,可再次扫码对商家进行投诉!</p>
</div>
</div>
<span class="crux-br"></span>
<div class="footer-btn">
<button class="btn-cancel success" id="submitPay">继续支付</button>
<button class="btn-cancel" onclick="hideInfoDialog()">取消</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="p" th:value="${p}">
<input type="hidden" id="merchantCode" th:value="${merchantCode}">
<input type="hidden" id="token" th:value="${token}">
<input type="hidden" id="accountNameValue" th:value="${accountName}">
<input type="hidden" id="accountPhoneValue" th:value="${accountPhone}">
</body>
<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>
<script>
document.getElementById("shade").style.display = "block";
document.getElementById("dialog-txt").style.display = "block";
let accName = document.getElementById("accountNameValue").value;
let accVal = document.getElementById("accountPhoneValue").value;
document.getElementById("accountName").setAttribute("placeholder",accName);
document.getElementById("accountPhone").setAttribute("placeholder",accVal);
var i = 5;
var flag = false;
var interval = null;
openCountDowm();
function openCountDowm(t){
i = t || i;
document.getElementById("second").innerText = i;
interval = setInterval("countDown()",1000);
}
function countDown(){
if(i <= 1){
clearInterval(interval);
document.getElementById("countDown").style.display = "none";
document.getElementById("btn-success").classList.add("success");
}
document.getElementById("second").innerText = --i;
}
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 = "";
}
}
function hideInfoDialog(){
var dialog = document.getElementById('dialog-info');
dialog.style.display = 'none';
document.getElementById("accountName").value = "";
document.getElementById("accountPhone").value = "";
}
function hideDialog(){
clearInterval(interval);
var shape = document.getElementById('shade');
var dialog = document.getElementById('dialog-txt');
shape.style.display = 'none';
dialog.style.display = 'none';
}
function showDialog(){
var shape = document.getElementById('shade');
var dialog = document.getElementById('dialog-txt');
shape.style.display = 'block';
dialog.style.display = 'block';
}
document.getElementById("btn-success").onclick = () => {
if(i > 0){
return;
}
flag = true;
hideDialog();
}
document.getElementById("submitPay").onclick = ()=>{
let name = document.getElementById("accountName").value;
let phone = document.getElementById("accountPhone").value;
if(!name){
alert("请输入收款方姓名!");
return;
}
if(!phone){
alert("请输入收款方手机号!");
return;
}
var shape = document.getElementById('shade');
var loading = document.getElementById('loading');
shape.style.display = 'block';
loading.style.display = 'block';
var comsumeMoney = document.getElementById('comsumeMoney').innerText;
var p = document.getElementById("p").value;
var remark = document.getElementById("remark").value;
var merchantCode = document.getElementById("merchantCode").value;
var token = document.getElementById("token").value;
var params = "p="+p+"&comsumeMoney="+comsumeMoney+"&remark="+remark+ "&merchantCode="+merchantCode+"&token="+token+"&accountName="+name+"&accountPhone="+phone;
var url = "/wap/merchant/moveTradePay";
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" == rdata.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" == rdata.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);//发送请求
}
document.getElementById("pay").onclick = ()=>{
var comsumeMoney = document.getElementById('comsumeMoney').innerText;
if(comsumeMoney == undefined || comsumeMoney == '' || comsumeMoney == null){
return;
}
if(!flag){
showDialog();
openCountDowm(5);
return;
}
document.getElementById('dialog-info').style.display = "block";
// var shape = document.getElementById('shade');
// var loading = document.getElementById('loading');
// shape.style.display = 'block';
// loading.style.display = 'block';
// var p = document.getElementById("p").value;
// var remark = document.getElementById("remark").value;
// var merchantCode = document.getElementById("merchantCode").value;
// var token = document.getElementById("token").value;
// var params = "p="+p+"&comsumeMoney="+comsumeMoney+"&remark="+remark+ "&merchantCode="+merchantCode+"&token="+token;
// var url = "/wap/merchant/moveTradePay";
// 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" == rdata.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" == rdata.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(m) {
var url = "/wap/merchant/cancelPay/"+m;
var xhr = new XMLHttpRequest();//创建请求对象
xhr.open("GET", url, true);//链接服务器
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
}
xhr.send();
}
</script>
</html>