446 lines
9.2 KiB
HTML
446 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>收款码合成</title>
|
||
<meta name="viewport"
|
||
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
|
||
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
|
||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||
<meta http-equiv="Pragma" content="no-cache" />
|
||
<meta http-equiv="Expires" content="0" />
|
||
<!-- 百度统计 -->
|
||
<script type="text/javascript">
|
||
var _hmt = _hmt || [];
|
||
(function () {
|
||
var hm = document.createElement("script");
|
||
hm.src = "https://hm.baidu.com/hm.js?246ff6a5f65b462dcfb917beb7baffbe";
|
||
var s = document.getElementsByTagName("script")[0];
|
||
s.parentNode.insertBefore(hm, s);
|
||
})();
|
||
</script>
|
||
|
||
<!-- 根据id获取用户信息 -->
|
||
<script type="text/javascript">
|
||
(function(){
|
||
var GetQueryString = function(name) {
|
||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||
var r = window.location.search.substr(1).match(reg);
|
||
if (r != null) return unescape(r[2]); return null;
|
||
}
|
||
var id = GetQueryString("id")
|
||
// 不合法id的处理
|
||
if(id == null || id.search(/\W+/) != -1 || id.length != 24) {
|
||
window.location.replace("https://qr.lacus.site/qr/410.html");
|
||
}
|
||
var data = document.createElement("script");
|
||
data.src = `https://qr.lacus.site/data/${id}.js`
|
||
var s = document.getElementsByTagName("script")[0];
|
||
// 加载失败处理，默认失败时间是2秒
|
||
var timer = setTimeout(function(){
|
||
window.location.replace("https://qr.lacus.site/qr/500.html");
|
||
},2000)
|
||
data.onload = function(){
|
||
clearTimeout(timer)
|
||
}
|
||
s.parentNode.insertBefore(data, s);
|
||
}());
|
||
</script>
|
||
|
||
<!-- 正常渲染 -->
|
||
<script type="text/javascript">
|
||
var setting = {
|
||
username: "",
|
||
qqpay: "",
|
||
wxpay: "",
|
||
alpay: "",
|
||
id: "",
|
||
qrcodeApi: "http://qr.topscan.com/api.php?text="
|
||
}
|
||
|
||
var bgs = ['https://qr.lacus.site/qr/img/bg1.jpg',
|
||
'https://qr.lacus.site/qr/img/bg2.jpg',
|
||
'https://qr.lacus.site/qr/img/bg3.jpg',
|
||
'https://qr.lacus.site/qr/img/bg4.jpg',
|
||
'https://qr.lacus.site/qr/img/bg5.jpg',
|
||
'https://qr.lacus.site/qr/img/bg6.jpg',]
|
||
|
||
//初始化
|
||
function init() {
|
||
// data = JSON.parse(data);
|
||
data = data[0]
|
||
// 控制台输出信息
|
||
try {
|
||
console.log('%cRainSun Copyright \xa9 2018-%s','font-size:12px;color:#999999;', (new Date).getFullYear());
|
||
console.log('%c非常感谢您的使用，如出现bug请发送邮件至%czhaoyingbo@live.cn', 'color:#409eff','color:red');
|
||
}
|
||
catch (e) {
|
||
}
|
||
// 换背景
|
||
ele('bg').src = bgs[Math.floor(Math.random() * bgs.length)]
|
||
setting.id = data._id.$oid
|
||
setting.alpay = data.alcode;
|
||
setting.qqpay = data.qqcode;
|
||
setting.wxpay = data.wxcode;
|
||
setting.username = data.username;
|
||
if (setting.qqpay) setting.qqpay = decodeURIComponent(setting.qqpay);
|
||
manangeUrl();
|
||
}
|
||
|
||
function ele(id) {
|
||
return document.getElementById(id);
|
||
}
|
||
|
||
function showIcon() {
|
||
if (setting.alpay) {
|
||
ele("al").style.display = "block";
|
||
}
|
||
if (setting.wxpay) {
|
||
ele("wx").style.display = "block";
|
||
}
|
||
if (setting.qqpay) {
|
||
ele("qq").style.display = "block";
|
||
}
|
||
}
|
||
|
||
function urlEncode(String) {
|
||
return encodeURIComponent(String).replace(/'/g, "%27").replace(/"/g, "%22");
|
||
}
|
||
|
||
function noSupport(text, type) {
|
||
//遗留问题，等有了域名再说，微信访问会自带参数啥的生成一个超级复杂的二维码
|
||
ele("qrcode").setAttribute("src", setting.qrcodeApi + urlEncode(window.location.href));
|
||
ele("all").style.display = "block";
|
||
ele("user").innerHTML = setting.username;
|
||
showIcon();
|
||
if (type === 1) alert("本二维码不支持" + text + "支付"); //其他浏览器是0
|
||
}
|
||
|
||
function manangeUrl() {
|
||
if (navigator.userAgent.match(/Alipay/i)) {
|
||
//支付宝扫码
|
||
if (setting.alpay) {
|
||
window.location.href = setting.alpay;
|
||
} else {
|
||
//木有支付宝的链接
|
||
noSupport("支付宝", 1);
|
||
}
|
||
} else if (navigator.userAgent.match(/MicroMessenger\//i)) {
|
||
if (setting.wxpay) {
|
||
ele("qrcode1").setAttribute("src", setting.qrcodeApi + urlEncode(setting.wxpay));
|
||
ele("wq").style.display = "block";
|
||
ele("wq_b").setAttribute("class", "wx_b");
|
||
ele("title").innerHTML = "推荐使用微信支付";
|
||
ele("user1").innerHTML = setting.username;
|
||
ele("wq_pay").setAttribute("src", "https://qr.lacus.site/qr/img/sprite3.png");
|
||
} else {
|
||
//木有微信的链接
|
||
noSupport("微信", 1)
|
||
}
|
||
} else if (navigator.userAgent.match(/QQ\//i)) {
|
||
if (setting.qqpay) {
|
||
ele("qrcode1").setAttribute("src", setting.qrcodeApi + urlEncode(setting.qqpay));
|
||
ele("wq").style.display = "block";
|
||
ele("wq_b").setAttribute("class", "qq_b");
|
||
ele("title").innerHTML = "推荐使用QQ支付";
|
||
ele("user1").innerHTML = setting.username;
|
||
ele("wq_pay").setAttribute("src", "https://qr.lacus.site/qr/img/sprite2.png");
|
||
} else {
|
||
//木有QQ的链接
|
||
noSupport("QQ", 1);
|
||
}
|
||
} else {
|
||
noSupport('', 0);
|
||
}
|
||
}
|
||
|
||
window.onload = function () {
|
||
init();
|
||
}
|
||
</script>
|
||
<style type="text/css">
|
||
@charset "utf-8";
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6,
|
||
p,
|
||
li,
|
||
label,
|
||
td,
|
||
th {
|
||
cursor: text;
|
||
}
|
||
|
||
a:link,
|
||
a:visited,
|
||
a:hover,
|
||
a:active {
|
||
cursor: pointer;
|
||
}
|
||
|
||
body {
|
||
height: 100%;
|
||
width: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
font-size: 14px;
|
||
font-family: "微软雅黑", Arial, Helvetica, sans-serif;
|
||
color: #333;
|
||
}
|
||
|
||
div,
|
||
p,
|
||
ul,
|
||
ol,
|
||
li,
|
||
dl,
|
||
dt,
|
||
dd,
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6,
|
||
form,
|
||
input,
|
||
select,
|
||
textarea,
|
||
table,
|
||
td {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
font-size: 100%;
|
||
font-weight: normal;
|
||
}
|
||
|
||
area {
|
||
outline: none;
|
||
}
|
||
|
||
img {
|
||
border: 0;
|
||
outline: none;
|
||
}
|
||
|
||
ol,
|
||
ul {
|
||
list-style: none;
|
||
}
|
||
|
||
a {
|
||
font-family: "微软雅黑", Arial, Helvetica, sans-serif;
|
||
text-decoration: none;
|
||
outline: none;
|
||
}
|
||
|
||
a:hover {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.clearfix:after {
|
||
content: "";
|
||
display: block;
|
||
height: 0;
|
||
clear: both;
|
||
}
|
||
|
||
.all {
|
||
display: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.all .main {
|
||
display: flex;
|
||
max-width: 400px;
|
||
width: 100%;
|
||
flex-direction: column;
|
||
margin: 0 auto;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.all .background {
|
||
height: 100%;
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
}
|
||
|
||
.all .main .qrcode {
|
||
margin-top: 30px;
|
||
width: 80%;
|
||
}
|
||
|
||
.all .main .user {
|
||
font-size: 25px;
|
||
color: #fff;
|
||
margin-top: 30px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.all .main .title {
|
||
font-size: 20px;
|
||
color: #fff;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.all .main .imageBox {
|
||
margin-top: 30px;
|
||
height: 50px;
|
||
width: 80%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.all .imageBox>div {
|
||
height: 50px;
|
||
width: 52px;
|
||
background-image: url('https://qr.lacus.site/qr/img/sprite1.png');
|
||
background-size: cover;
|
||
}
|
||
|
||
.all .imageBox .wx {
|
||
background-position-x: -12px;
|
||
display: none;
|
||
}
|
||
|
||
.all .imageBox .al {
|
||
display: none;
|
||
background-position-x: -276px;
|
||
}
|
||
|
||
.all .imageBox .qq {
|
||
display: none;
|
||
background-position-x: -138px;
|
||
}
|
||
|
||
.wq {
|
||
display: none;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.wq .wx_b {
|
||
height: 100%;
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
background: #09bb07;
|
||
}
|
||
|
||
.wq .qq_b {
|
||
height: 100%;
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
background-image: linear-gradient(180deg, #0088cc, #01cfff);
|
||
}
|
||
|
||
.wq .w {
|
||
display: flex;
|
||
max-width: 400px;
|
||
width: 100%;
|
||
flex-direction: column;
|
||
margin: 0 auto;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.wq .footer {
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.wq .pay {
|
||
background: #fff;
|
||
max-width: 500px;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.wq .pay>img {
|
||
width: 60%;
|
||
margin-top: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.wq .title {
|
||
font-size: 35px;
|
||
color: #fff;
|
||
margin-top: 30px;
|
||
letter-spacing: 3px;
|
||
}
|
||
|
||
.wq .qrcode {
|
||
margin-top: 30px;
|
||
width: 80%;
|
||
}
|
||
|
||
.wq .user {
|
||
font-size: 30px;
|
||
color: #fff;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.wq .tip {
|
||
font-size: 20px;
|
||
color: #fff;
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="all" id="all">
|
||
<!-- <img class="background" src="https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/2934349b033b5bb5092b9c0d3bd3d539b700bc41.jpg"> -->
|
||
<img class="background" id="bg">
|
||
<div class='main'>
|
||
<image class='qrcode' id='qrcode' src=""></image>
|
||
<div class='user' id='user'></div>
|
||
<div class='title'>本二维码支持以下APP向我付款</div>
|
||
<div class='imageBox'>
|
||
<div class='wx' id='wx'></div>
|
||
<div class='al' id='al'></div>
|
||
<div class='qq' id='qq'></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wq" id="wq">
|
||
<div class="" id="wq_b"></div>
|
||
<div class="w">
|
||
<div class="title" id='title'></div>
|
||
<image class='qrcode' id='qrcode1' src=""></image>
|
||
<div class="tip">请长按二维码识别</div>
|
||
<div class='user' id='user1'></div>
|
||
</div>
|
||
<div class="footer">
|
||
<div class="pay">
|
||
<img id="wq_pay" src="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
|
||
</html> |