first commit
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
@@ -0,0 +1,455 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
<title>支付确认</title>
|
||||
<script>
|
||||
var ua=navigator.userAgent;
|
||||
var url=location.search?location.search.split('?')[1]:'';
|
||||
url&&url.substr(url.length-1,1)=='='&&(url=url.substring(0,url.length-1));
|
||||
if(url&&!(/MicroMessenger/i.test(ua))&&!(/QQ/i.test(ua))){
|
||||
|
||||
window.location.href=url;
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
html {
|
||||
font-size: 20px;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.fui-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
font-family: "Helvetica Neue", Helvetica, sans-serif;
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
background: #fafafa;
|
||||
overflow: hidden;
|
||||
}
|
||||
.fui-page-group {
|
||||
display: block;
|
||||
}
|
||||
.fui-page.fui-page-current, .fui-page-group.fui-page-current {
|
||||
overflow: hidden;
|
||||
}
|
||||
.fui-content {
|
||||
background-color: #019fe8;
|
||||
background-image: url(alipay.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 80%;
|
||||
background-position: center 8rem;
|
||||
}
|
||||
|
||||
.layer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url(guide.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: top right;
|
||||
background-size: 28%;
|
||||
color: #fff;
|
||||
}
|
||||
.layer .text {
|
||||
height: 10rem;
|
||||
width: 13rem;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 2.5rem;
|
||||
left: 50%;
|
||||
margin-left: -5.5rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.danmu {display: none;opacity: 0;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body ontouchstart>
|
||||
<div class='fui-page-group statusbar'>
|
||||
<style>
|
||||
.fui-content {background-color: #019fe8; background-image: url("alipay.png"); background-repeat: no-repeat; background-size: 80%; background-position: center 8rem;}
|
||||
.layer {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: url("guide.png"); background-repeat: no-repeat; background-position: top right; background-size: 28%; color: #fff;}
|
||||
.layer .text{height: 10rem; width: 13rem; color: #fff; position: absolute; top: 2.5remimg/; left: 50%; margin-left: -5.5rem; font-size: 1.1rem;}
|
||||
.layer .tip {height: 1rem; left: 0; right: 0; bottom: 3rem; position: absolute; font-size: 0.8rem; text-align: center;}
|
||||
</style>
|
||||
|
||||
<div class='fui-page fui-page-current order-create-page'>
|
||||
<div class='fui-content'>
|
||||
<div class="layer">
|
||||
<div class="text">
|
||||
<p>① 请点击右上角</p>
|
||||
<p>② 通过【浏览器打开】</p>
|
||||
<p>③ 完成支付</p>
|
||||
<p>④ 返回此页面</p>
|
||||
</div>
|
||||
<div class="tip">TIP: 支付完成后自动跳转</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
AlipayWallet = {};
|
||||
var href='http://qr.alipay.com/?scheme=alipays%3A%2F%2Fplatformapi%2Fstartapp%3FsaId%3D10000007%26clientVersion%3D3.7.0.0718%26qrcode%3D'+encodeURIComponent(url)+'%253F_s%253Dweb-other';
|
||||
(function () {
|
||||
var ua = navigator.userAgent.toLowerCase(),
|
||||
locked = false,
|
||||
domLoaded = document.readyState === 'complete',
|
||||
delayToRun;
|
||||
|
||||
function customClickEvent() {
|
||||
var clickEvt;
|
||||
if (window.CustomEvent) {
|
||||
clickEvt = new window.CustomEvent('click', {
|
||||
canBubble: true,
|
||||
cancelable: true
|
||||
});
|
||||
} else {
|
||||
clickEvt = document.createEvent('Event');
|
||||
clickEvt.initEvent('click', true, true);
|
||||
}
|
||||
|
||||
return clickEvt;
|
||||
}
|
||||
|
||||
function getAndroidVersion() {
|
||||
var match = ua.match(/android\s([0-9\.]*)/);
|
||||
return match ? match[1] : false;
|
||||
}
|
||||
|
||||
var noIntentTest = /aliapp|360 aphone|weibo|windvane|ucbrowser|baidubrowser/.test(ua);
|
||||
var hasIntentTest = /chrome|samsung/.test(ua);
|
||||
var isAndroid = /android|adr/.test(ua) && !(/windows phone/.test(ua));
|
||||
var canIntent = !noIntentTest && hasIntentTest && isAndroid;
|
||||
var openInIfr = /weibo|m353/.test(ua);
|
||||
var inWeibo = ua.indexOf('weibo') > -1;
|
||||
|
||||
if (ua.indexOf('m353') > -1 && !noIntentTest) {
|
||||
canIntent = false;
|
||||
}
|
||||
|
||||
// if (ua.indexOf('kot49h') > -1) {
|
||||
// alert(ua);
|
||||
// canIntent = false;
|
||||
// }
|
||||
|
||||
// 是否在 webview
|
||||
var inWebview = '';
|
||||
if (inWebview) {
|
||||
canIntent = false;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 打开钱包
|
||||
* @param {string} params 唤起钱包的参数设置('alipays://platformapi/startapp?'后面的值)
|
||||
* @param {boolean} jumpUrl 唤起钱包后，android下要跳转到的URL；
|
||||
* 若传"default"，则为https://d.alipay.com/i/index.htm?nojump=1#once
|
||||
*/
|
||||
AlipayWallet.open = function (params, jumpUrl) {
|
||||
if (!domLoaded && (ua.indexOf('360 aphone') > -1 || canIntent)) {
|
||||
var arg = arguments;
|
||||
delayToRun = function () {
|
||||
AlipayWallet.open.apply(null, arg);
|
||||
delayToRun = null;
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
// 唤起锁定，避免重复唤起
|
||||
if (locked) {
|
||||
return;
|
||||
}
|
||||
locked = true;
|
||||
|
||||
var o;
|
||||
// 参数容错
|
||||
if (typeof params === 'object') {
|
||||
o = params;
|
||||
} else {
|
||||
o = {
|
||||
params: params,
|
||||
jumpUrl: jumpUrl
|
||||
};
|
||||
}
|
||||
|
||||
// 参数容错
|
||||
if (typeof o.params !== 'string') {
|
||||
o.params = '';
|
||||
}
|
||||
if (typeof o.openAppStore !== 'boolean') {
|
||||
o.openAppStore = true;
|
||||
}
|
||||
|
||||
o.params = o.params || 'appId=20000001';
|
||||
o.params = o.params + '';
|
||||
o.params = o.params + '&_t=' + (new Date() - 0);
|
||||
|
||||
if (o.params.indexOf('startapp?') > -1) {
|
||||
o.params = o.params.split('startapp?')[1];
|
||||
} else if (o.params.indexOf('startApp?') > -1) {
|
||||
o.params = o.params.split('startApp?')[1];
|
||||
}
|
||||
|
||||
// 是否为RC环境
|
||||
var isRc = '';
|
||||
|
||||
// 是否唤起re包
|
||||
var isRe = '';
|
||||
if (typeof o.isRe === 'undefined') {
|
||||
o.isRe = !!isRe;
|
||||
}
|
||||
|
||||
// 通过alipays协议唤起钱包
|
||||
var schemePrefix;
|
||||
if (ua.indexOf('mac os') > -1 && ua.indexOf('mobile') > -1) {
|
||||
// IOS RC包前缀为 alipaysrc
|
||||
if (isRc) {
|
||||
if (o.isRe) {
|
||||
schemePrefix = 'alipayrerc';
|
||||
} else {
|
||||
schemePrefix = 'alipaysrc';
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!schemePrefix && o.isRe) {
|
||||
schemePrefix = 'alipayre';
|
||||
}
|
||||
schemePrefix = schemePrefix || 'alipays';
|
||||
|
||||
// 由于历史原因，对 alipayqr 前缀做特殊处理
|
||||
if (href.indexOf('scheme=alipayqr') > -1) {
|
||||
schemePrefix = 'alipayqr';
|
||||
isRc = false;
|
||||
}
|
||||
|
||||
|
||||
if (!canIntent) {
|
||||
|
||||
var alipaysUrl = schemePrefix + '://platformapi/startapp?' + o.params;
|
||||
|
||||
if ( ua.indexOf('qq/') > -1 || ( ua.indexOf('safari') > -1 && (ua.indexOf('os 9_') > -1 || ua.indexOf('os 10_') > -1)) ) {
|
||||
var openSchemeLink = document.getElementById('openSchemeLink');
|
||||
if (!openSchemeLink) {
|
||||
openSchemeLink = document.createElement('a');
|
||||
openSchemeLink.id = 'openSchemeLink';
|
||||
openSchemeLink.style.display = 'none';
|
||||
document.body.appendChild(openSchemeLink);
|
||||
}
|
||||
openSchemeLink.href = alipaysUrl;
|
||||
// 执行click
|
||||
openSchemeLink.dispatchEvent(customClickEvent());
|
||||
} else {
|
||||
var ifr = document.createElement('iframe');
|
||||
ifr.src = alipaysUrl;
|
||||
ifr.style.display = 'none';
|
||||
document.body.appendChild(ifr);
|
||||
}
|
||||
|
||||
|
||||
|
||||
} else {
|
||||
// android 下 chrome 浏览器通过 intent 协议唤起钱包
|
||||
var packageKey = 'AlipayGphone';
|
||||
if (isRc) {
|
||||
packageKey = 'AlipayGphoneRC';
|
||||
}
|
||||
var intentUrl = 'intent://platformapi/startapp?' + o.params + '#Intent;scheme=' + schemePrefix + ';package=com.eg.android.' + packageKey + ';end';
|
||||
|
||||
var openIntentLink = document.getElementById('openIntentLink');
|
||||
if (!openIntentLink) {
|
||||
openIntentLink = document.createElement('a');
|
||||
openIntentLink.id = 'openIntentLink';
|
||||
openIntentLink.style.display = 'none';
|
||||
document.body.appendChild(openIntentLink);
|
||||
}
|
||||
openIntentLink.href = intentUrl;
|
||||
// 执行click
|
||||
openIntentLink.dispatchEvent(customClickEvent());
|
||||
}
|
||||
|
||||
// 延迟移除用来唤起钱包的IFRAME并跳转到下载页
|
||||
setTimeout(function () {
|
||||
if (typeof o.jumpUrl !== 'string') {
|
||||
o.jumpUrl = '';
|
||||
}
|
||||
// 默认跳转地址
|
||||
if (o.jumpUrl === 'default') {
|
||||
o.jumpUrl = 'https://ds.alipay.com/?nojump=true';
|
||||
}
|
||||
|
||||
if (o.jumpUrl && typeof o.jumpUrl === 'string') {
|
||||
//location.href = o.jumpUrl;
|
||||
}
|
||||
}, 1000)
|
||||
|
||||
|
||||
// 唤起加锁，避免短时间内被重复唤起
|
||||
setTimeout(function () {
|
||||
locked = false;
|
||||
}, 2500)
|
||||
}
|
||||
|
||||
if (!domLoaded) {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
domLoaded = true;
|
||||
if (typeof delayToRun === 'function') {
|
||||
delayToRun();
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
!function (e, t) {
|
||||
"object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define("callapp", [], t) : "object" == typeof exports ? exports.callapp = t() : e.callapp = t()
|
||||
}(this, function () {
|
||||
return function (e) {
|
||||
function t(r) {
|
||||
if (n[r]) return n[r].exports;
|
||||
var i = n[r] = {
|
||||
exports: {},
|
||||
id: r,
|
||||
loaded: !1
|
||||
};
|
||||
return e[r].call(i.exports, i, i.exports, t), i.loaded = !0, i.exports
|
||||
}
|
||||
|
||||
var n = {};
|
||||
return t.m = e, t.c = n, t.p = "", t(0)
|
||||
}([function (e, t) {
|
||||
"use strict";
|
||||
|
||||
function n(e, t) {
|
||||
for (var n = e.split("."), r = t.split("."), i = 0; i < n.length || i < r.length; i += 1) {
|
||||
var o = parseInt(n[i], 10) || 0,
|
||||
a = parseInt(r[i], 10) || 0;
|
||||
if (o < a) return -1;
|
||||
if (o > a) return 1
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
function r(e) {
|
||||
v || (v = m.createElement("iframe"), v.id = "callapp_iframe_" + Date.now(), v.frameborder = "0", v.style.cssText = "display:none;border:0;width:0;height:0;", m.body.appendChild(v)), v.src = e
|
||||
}
|
||||
|
||||
function i(e) {
|
||||
var t = m.createElement("a");
|
||||
t.setAttribute("href", e), t.style.display = "none", m.body.appendChild(t);
|
||||
var n = m.createEvent("HTMLEvents");
|
||||
n.initEvent("click", !1, !1), t.dispatchEvent(n)
|
||||
}
|
||||
|
||||
function o(e) {
|
||||
return /^(http|https)\:\/\//.test(e)
|
||||
}
|
||||
|
||||
Object.defineProperty(t, "__esModule", {
|
||||
value: !0
|
||||
});
|
||||
var a = {},
|
||||
c = window.navigator.userAgent,
|
||||
d = !1,
|
||||
s = !1,
|
||||
l = "",
|
||||
p = c.match(/Android[\s\/]([\d\.]+)/);
|
||||
p ? (d = !0, l = p[1]) : c.match(/(iPhone|iPad|iPod)/) && (s = !0, p = c.match(/OS ([\d_\.]+) like Mac OS X/), p && (l = p[1].split("_").join(".")));
|
||||
var f = !1,
|
||||
u = !1,
|
||||
h = !1;
|
||||
c.match(/(?:Chrome|CriOS)\/([\d\.]+)/) ? (f = !0, c.match(/Version\/[\d+\.]+\s*Chrome/) && (h = !0)) : c.match(/iPhone|iPad|iPod/) && (c.match(/Safari/) && c.match(/Version\/([\d\.]+)/) ? u = !0 : c.match(/OS ([\d_\.]+) like Mac OS X/) && (h = !0));
|
||||
var m = window.document,
|
||||
v = void 0;
|
||||
a.gotoPage = function (e, t, a) {
|
||||
var p = e,
|
||||
m = d && f && !h,
|
||||
v = d && !!c.match(/samsung/i) && n(l, "4.3") >= 0 && n(l, "4.5") < 0,
|
||||
w = s && n(l, "9.0") >= 0 && u;
|
||||
if (m || v || a) {
|
||||
var x = p.substring(0, p.indexOf("://")),
|
||||
g = "#Intent;scheme=" + x + ";package=" + t + ";end";
|
||||
p = p.replace(/.*?:\/\//g, "intent://"), p += g
|
||||
}
|
||||
if (w) {
|
||||
if (o(p)) return window.Tracker && window.Tracker.click && window.Tracker.click("not_schema"), void console.log("not schema");
|
||||
setTimeout(function () {
|
||||
return i(p)
|
||||
}, 100)
|
||||
} else 0 === p.indexOf("intent:") ? setTimeout(function () {
|
||||
return window.location.href = p
|
||||
}, 100) : r(p)
|
||||
}, t.default = a, e.exports = t.default
|
||||
}])
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
function getAllParams(url) {
|
||||
var reg = /[(\?|\&)]([^=]+)\=([^&#]+)/g, matches, output = {};
|
||||
while (matches = reg.exec(url)) {
|
||||
var key = decodeURIComponent(matches[1]), value = decodeURIComponent(matches[2]);
|
||||
output[key] = value;
|
||||
}
|
||||
return output;
|
||||
}
|
||||
|
||||
var isAndroid = false;
|
||||
var matched = navigator.userAgent.match(/Android[\s\/]([\d\.]+)/);
|
||||
if (matched) {
|
||||
isAndroid = true;
|
||||
}
|
||||
|
||||
var params = getAllParams(href);
|
||||
var scheme = 'alipays://platformapi/startApp?appId=20000001';
|
||||
if (params.scheme) {
|
||||
scheme = params.scheme;
|
||||
}
|
||||
|
||||
var schemeParam = scheme
|
||||
schemeParam = schemeParam.replace(/&/ig, '&');
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
AlipayWallet.open({
|
||||
params: schemeParam,
|
||||
jumpUrl: ''
|
||||
});
|
||||
if (isAndroid && /HUAWEI\sMLA-UL00/.test(navigator.userAgent)) {
|
||||
callapp.gotoPage(scheme, 'com.eg.android.AlipayGphone', true);
|
||||
}
|
||||
}, 1000)
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
@@ -0,0 +1,329 @@
|
||||
@charset "UTF-8";
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
font-family: 'helvetica neue', tahoma, arial, 'hiragino sans gb', 'microsoft yahei', 'Simsun', sans-serif
|
||||
}
|
||||
|
||||
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, hr {
|
||||
margin: 0;
|
||||
padding: 0px 2px;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.333;
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: 100%;
|
||||
font-family: arial, 'hiragino sans gb', 'microsoft yahei', 'Simsun', sans-serif
|
||||
}
|
||||
|
||||
input, textarea, select, button {
|
||||
font-size: 12px;
|
||||
font-weight: normal
|
||||
}
|
||||
|
||||
input[type="button"], input[type="submit"], select, button {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0
|
||||
}
|
||||
|
||||
address, caption, cite, code, dfn, em, th, var {
|
||||
font-style: normal;
|
||||
font-weight: normal
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none
|
||||
}
|
||||
|
||||
caption, th {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
q:before, q:after {
|
||||
content: ''
|
||||
}
|
||||
|
||||
abbr, acronym {
|
||||
border: 0;
|
||||
font-variant: normal
|
||||
}
|
||||
|
||||
sup {
|
||||
vertical-align: text-top
|
||||
}
|
||||
|
||||
sub {
|
||||
vertical-align: text-bottom
|
||||
}
|
||||
|
||||
fieldset, img, a img, iframe {
|
||||
border-width: 0;
|
||||
border-style: none
|
||||
}
|
||||
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
legend {
|
||||
color: #000
|
||||
}
|
||||
|
||||
a:link, a:visited {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 0
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
a {
|
||||
color: #328CE5
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #2b8ae8;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: none
|
||||
}
|
||||
|
||||
body, .body {
|
||||
background: #f7f7f7;
|
||||
height: 100%;
|
||||
max-width: 640px;
|
||||
min-width: 300px;
|
||||
min-height: 100%;
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.mod-title {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background: #fff
|
||||
}
|
||||
|
||||
.ico_log {
|
||||
display: inline-block;
|
||||
width: 130px;
|
||||
height: 38px;
|
||||
vertical-align: middle;
|
||||
margin-right: 7px
|
||||
}
|
||||
|
||||
.ico-1 {
|
||||
background: url("weixin.jpg") no-repeat;
|
||||
}
|
||||
|
||||
.ico-2 {
|
||||
background: url("alipay.jpg") no-repeat;
|
||||
}
|
||||
|
||||
.ico-3 {
|
||||
background: url("weixin.jpg") no-repeat;
|
||||
}
|
||||
|
||||
.mod-title .text {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
font-weight: normal;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.mod-ct {
|
||||
min-width: 300px;
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
margin-top: 15px;
|
||||
background: #fff url("wave.png") top center repeat-x;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-top: none
|
||||
}
|
||||
|
||||
.mod-ct .order {
|
||||
font-size: 20px;
|
||||
padding-top: 10px
|
||||
}
|
||||
|
||||
.mod-ct .amount {
|
||||
font-size: 48px;
|
||||
margin-top: 10px
|
||||
}
|
||||
|
||||
.mod-ct .qr-image {
|
||||
margin-top: 30px
|
||||
}
|
||||
|
||||
.mod-ct .qr-image img {
|
||||
width: 230px;
|
||||
height: 230px
|
||||
}
|
||||
|
||||
.mod-ct .detail {
|
||||
margin-top: 10px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
}
|
||||
|
||||
.mod-ct .detail .arrow .ico-arrow {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 11px;
|
||||
background: url("wechat-pay.png") -25px -100px no-repeat
|
||||
}
|
||||
|
||||
.mod-ct .detail .detail-ct {
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
line-height: 28px
|
||||
}
|
||||
|
||||
.mod-ct .detail .detail-ct dt {
|
||||
float: left
|
||||
}
|
||||
|
||||
.mod-ct .detail-open {
|
||||
border-top: 1px solid #e5e5e5
|
||||
}
|
||||
|
||||
.mod-ct .detail .arrow {
|
||||
padding: 6px 34px;
|
||||
border: 1px solid #e5e5e5
|
||||
}
|
||||
|
||||
.mod-ct .detail .arrow .ico-arrow {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 11px;
|
||||
background: url("wechat-pay.png") -25px -100px no-repeat
|
||||
}
|
||||
|
||||
.mod-ct .detail-open .arrow .ico-arrow {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 11px;
|
||||
background: url("wechat-pay.png") 0 -100px no-repeat
|
||||
}
|
||||
|
||||
.mod-ct .detail-open .detail-ct {
|
||||
display: block
|
||||
}
|
||||
|
||||
.mod-ct .tip {
|
||||
margin-top: 20px;
|
||||
border-top: 1px dashed #e5e5e5;
|
||||
padding: 10px 0;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.mod-ct .tip .ico-scan {
|
||||
display: inline-block;
|
||||
width: 56px;
|
||||
height: 55px;
|
||||
background: url("wechat-pay.png") 0 0 no-repeat;
|
||||
vertical-align: middle;
|
||||
*display: inline;
|
||||
*zoom: 1
|
||||
}
|
||||
|
||||
.mod-ct .tip .tip-text {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
margin-left: 23px;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
*display: inline;
|
||||
*zoom: 1
|
||||
}
|
||||
|
||||
.mod-ct .tip .dec {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 45px;
|
||||
background: url("wechat-pay.png") 0 -55px no-repeat;
|
||||
position: absolute;
|
||||
top: -23px
|
||||
}
|
||||
|
||||
.mod-ct .tip .dec-left {
|
||||
background-position: 0 -55px;
|
||||
left: -136px
|
||||
}
|
||||
|
||||
.mod-ct .tip .dec-right {
|
||||
background-position: -25px -55px;
|
||||
right: -136px
|
||||
}
|
||||
|
||||
.foot {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
color: #888888;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
font-family: "simsun"
|
||||
}
|
||||
|
||||
.copyRight {
|
||||
text-align: center;
|
||||
color: rgba(97, 167, 184, 0.08);
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.copyRight a {
|
||||
color: rgba(88, 161, 184, 0.08);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "微软雅黑";
|
||||
font-size: 15px;
|
||||
margin: 5px 0;
|
||||
padding-bottom: 2px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.time-item strong {
|
||||
background: #3ec742;
|
||||
color: #fff;
|
||||
line-height: 25px;
|
||||
font-size: 15px;
|
||||
font-family: Arial;
|
||||
padding: 0 10px;
|
||||
margin-right: 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.item-title {
|
||||
background: none;
|
||||
line-height: 25px;
|
||||
font-size: 24px;
|
||||
padding: 0 10px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,263 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Language" content="zh-cn">
|
||||
<meta name="apple-mobile-web-app-capable" content="no"/>
|
||||
<meta name="apple-touch-fullscreen" content="yes"/>
|
||||
<meta name="format-detection" content="telephone=no,email=no"/>
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="white">
|
||||
<meta name="renderer" content="webkit"/>
|
||||
<meta name="force-rendering" content="webkit"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
|
||||
<meta http-equiv="Expires" content="0">
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Cache-control" content="no-cache">
|
||||
<meta http-equiv="Cache" content="no-cache">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<title>扫码支付</title>
|
||||
<link href="pay.css" rel="stylesheet" media="screen">
|
||||
<script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="body" id="body">
|
||||
<h1 class="mod-title">
|
||||
|
||||
<span class="ico_log ico-1" v-if="payType == 1"></span>
|
||||
<span class="ico_log ico-2" v-if="payType == 2"></span>
|
||||
|
||||
</h1>
|
||||
|
||||
<div class="mod-ct">
|
||||
<div class="order">
|
||||
</div>
|
||||
<div class="amount" id="timeOut" style="font-size: 20px;color: red;display: none;"><p>订单已过期，请您返回网站重新发起支付</p><br></div>
|
||||
<div id="orderbody">
|
||||
<div class="amount" id="money">￥{{ reallyPrice }}</div>
|
||||
<div class="qrcode-img-wrapper" data-role="qrPayImgWrapper">
|
||||
<div data-role="qrPayImg" class="qrcode-img-area">
|
||||
<div class="ui-loading qrcode-loading" data-role="qrPayImgLoading" style="display: none;">加载中</div>
|
||||
<div style="position: relative;display: inline-block;">
|
||||
<img id='show_qrcode' alt="加载中..." :src="'../enQrcode?url='+payUrl" width="210" height="210" style="display: block;">
|
||||
<!--<img onclick="$('#use').hide()" id="use" src="use_1.png" v-if="payType==1"
|
||||
style="position: absolute;top: 50%;left: 50%;width:32px;height:32px;margin-left: -16px;margin-top: -16px">
|
||||
<img onclick="$('#use').hide()" id="use" src="use_2.png" v-if="payType==2"
|
||||
style="position: absolute;top: 50%;left: 50%;width:32px;height:32px;margin-left: -16px;margin-top: -16px">-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="time-item">
|
||||
|
||||
|
||||
<div class="time-item" id="msg">
|
||||
<h1 v-if="price != reallyPrice">
|
||||
<span style="color:red">为了您正常支付 请务必付款 {{ reallyPrice }} 元 <br>备注说明无需填写</span><br>
|
||||
|
||||
|
||||
</h1>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<strong id="hour_show">0时</strong>
|
||||
<strong id="minute_show">0分</strong>
|
||||
<strong id="second_show">0秒</strong>
|
||||
</div>
|
||||
|
||||
<div class="tip">
|
||||
<div class="ico-scan"></div>
|
||||
<div class="tip-text">
|
||||
<p>请使用{{payType1}}扫一扫</p>
|
||||
|
||||
<p v-if="isAuto == 0">扫描二维码完成支付</p>
|
||||
<p v-if="isAuto == 1">扫码后输入金额支付</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail" id="orderDetail">
|
||||
<dl class="detail-ct" id="desc" style="display: none;">
|
||||
<dt>金额</dt>
|
||||
<dd>{{price}}</dd>
|
||||
<dt>商户订单：</dt>
|
||||
<dd>{{payId}}</dd>
|
||||
<dt>创建时间：</dt>
|
||||
<dd>{{formatDate(date)}}</dd>
|
||||
<dt>状态</dt>
|
||||
<dd>等待支付</dd>
|
||||
</dl>
|
||||
|
||||
<a href="javascript:void(0)" class="arrow" onclick="aaa()"><i class="ico-arrow"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tip-text">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="foot">
|
||||
<div class="inner">
|
||||
<p>手机用户可保存上方二维码到手机中</p>
|
||||
<p>在{{payType1}}扫一扫中选择“相册”即可</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="copyRight">
|
||||
|
||||
</div>
|
||||
|
||||
<script src="https://lib.baomitu.com/vue/2.5.21/vue.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
function aaa() {
|
||||
if ($('#orderDetail').hasClass('detail-open')) {
|
||||
$('#orderDetail .detail-ct').slideUp(500, function () {
|
||||
$('#orderDetail').removeClass('detail-open');
|
||||
});
|
||||
} else {
|
||||
$('#orderDetail .detail-ct').slideDown(500, function () {
|
||||
$('#orderDetail').addClass('detail-open');
|
||||
});
|
||||
}
|
||||
}
|
||||
function formatDate(now) {
|
||||
now = new Date(now*1000)
|
||||
return now.getFullYear()
|
||||
+ "-" + (now.getMonth()>8?(now.getMonth()+1):"0"+(now.getMonth()+1))
|
||||
+ "-" + (now.getDate()>9?now.getDate():"0"+now.getDate())
|
||||
+ " " + (now.getHours()>9?now.getHours():"0"+now.getHours())
|
||||
+ ":" + (now.getMinutes()>9?now.getMinutes():"0"+now.getMinutes())
|
||||
+ ":" + (now.getSeconds()>9?now.getSeconds():"0"+now.getSeconds());
|
||||
|
||||
}
|
||||
var myTimer;
|
||||
function timer(intDiff) {
|
||||
var i = 0;
|
||||
i++;
|
||||
var day = 0,
|
||||
hour = 0,
|
||||
minute = 0,
|
||||
second = 0;//时间默认值
|
||||
if (intDiff > 0) {
|
||||
day = Math.floor(intDiff / (60 * 60 * 24));
|
||||
hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
|
||||
minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
|
||||
second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
|
||||
}
|
||||
if (minute <= 9) minute = '0' + minute;
|
||||
if (second <= 9) second = '0' + second;
|
||||
$('#hour_show').html('<s id="h"></s>' + hour + '时');
|
||||
$('#minute_show').html('<s></s>' + minute + '分');
|
||||
$('#second_show').html('<s></s>' + second + '秒');
|
||||
if (hour <= 0 && minute <= 0 && second <= 0) {
|
||||
qrcode_timeout()
|
||||
clearInterval(myTimer);
|
||||
|
||||
}
|
||||
intDiff--;
|
||||
|
||||
myTimer = window.setInterval(function () {
|
||||
i++;
|
||||
var day = 0,
|
||||
hour = 0,
|
||||
minute = 0,
|
||||
second = 0;//时间默认值
|
||||
if (intDiff > 0) {
|
||||
day = Math.floor(intDiff / (60 * 60 * 24));
|
||||
hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
|
||||
minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
|
||||
second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
|
||||
}
|
||||
if (minute <= 9) minute = '0' + minute;
|
||||
if (second <= 9) second = '0' + second;
|
||||
$('#hour_show').html('<s id="h"></s>' + hour + '时');
|
||||
$('#minute_show').html('<s></s>' + minute + '分');
|
||||
$('#second_show').html('<s></s>' + second + '秒');
|
||||
if (hour <= 0 && minute <= 0 && second <= 0) {
|
||||
qrcode_timeout()
|
||||
clearInterval(myTimer);
|
||||
|
||||
}
|
||||
intDiff--;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function qrcode_timeout(){
|
||||
document.getElementById("orderbody").style.display = "none";
|
||||
document.getElementById("timeOut").style.display = "";
|
||||
}
|
||||
|
||||
|
||||
function getQueryString(name) {
|
||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
if (r != null)
|
||||
return decodeURI(r[2]);
|
||||
return null;
|
||||
}
|
||||
|
||||
$.post("../getOrder","orderId="+getQueryString("orderId"),function (data) {
|
||||
if (data.code==1){
|
||||
var time = new Date().getTime()-data.data.date*1000;
|
||||
time = time/1000;
|
||||
time = data.data.timeOut*60 - time;
|
||||
|
||||
if (data.data.state == -1){
|
||||
time = 0;
|
||||
}
|
||||
timer(time);
|
||||
|
||||
if (data.data.payType == 1) {
|
||||
data.data.payType1 = "微信";
|
||||
}else if (data.data.payType == 2) {
|
||||
data.data.payType1 = "支付宝";
|
||||
}
|
||||
|
||||
|
||||
new Vue({
|
||||
el: '#body',
|
||||
data: data.data
|
||||
})
|
||||
|
||||
check();
|
||||
}else{
|
||||
timer(0)
|
||||
}
|
||||
});
|
||||
|
||||
function check() {
|
||||
$.post("../checkOrder","orderId="+getQueryString("orderId"),function (data) {
|
||||
console.log(data);
|
||||
if (data.code == 1){
|
||||
window.location.href = data.data;
|
||||
} else{
|
||||
if (data.data == "订单已过期") {
|
||||
intDiff = 0;
|
||||
}else{
|
||||
setTimeout("check()",1500);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 263 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Reference in New Issue
Block a user