zhaoyingbo/qrcode_wx_miniproj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add baidu count

Browse Source
This commit is contained in:
RainSun 2019-11-29 21:53:40 +08:00
parent 337737f493
commit 05d8c0ce5a
1 changed files with 346 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

593
backEnd/templates/qrcode.html
View File

@ -1,288 +1,388 @@
<!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="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>
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>
<script type="text/javascript">
var setting = {
username:"",
qqpay: "",
wxpay: "",
alpay: "",
id:"",
qrcodeApi: "http://qr.topscan.com/api.php?text="
}
var bgs = ['https://qrcode-1256486458.cos.ap-chengdu.myqcloud.com/bg/bg1.jpg',
'https://qrcode-1256486458.cos.ap-chengdu.myqcloud.com/bg/bg2.jpg',
'https://qrcode-1256486458.cos.ap-chengdu.myqcloud.com/bg/bg3.jpg',
'https://qrcode-1256486458.cos.ap-chengdu.myqcloud.com/bg/bg4.jpg',
'https://qrcode-1256486458.cos.ap-chengdu.myqcloud.com/bg/bg5.jpg',
'https://qrcode-1256486458.cos.ap-chengdu.myqcloud.com/bg/bg6.jpg',]
//获取到后端信息
var data = {{data|tojson}};
//初始化
function init() {
data = JSON.parse(data);
data = data[0]
// 判断时间
var timeout = parseInt(data.timeout)
timeout = new Date(timeout)
var now = new Date()
if(timeout - now <= 0) window.location.replace("https://qr.powerrain.cn/qr");
// 换背景
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);
console.log(setting);
manangeUrl();
}
function ele(id) {
return document.getElementById(id);
}
function showIcon() {
if(setting.alpay){
ele("al").style.display = "block";
var setting = {
username: "",
qqpay: "",
wxpay: "",
alpay: "",
id: "",
qrcodeApi: "http://qr.topscan.com/api.php?text="
}
if(setting.wxpay){
ele("wx").style.display = "block";
var bgs = ['https://qrcode-1256486458.cos.ap-chengdu.myqcloud.com/bg/bg1.jpg',
'https://qrcode-1256486458.cos.ap-chengdu.myqcloud.com/bg/bg2.jpg',
'https://qrcode-1256486458.cos.ap-chengdu.myqcloud.com/bg/bg3.jpg',
'https://qrcode-1256486458.cos.ap-chengdu.myqcloud.com/bg/bg4.jpg',
'https://qrcode-1256486458.cos.ap-chengdu.myqcloud.com/bg/bg5.jpg',
'https://qrcode-1256486458.cos.ap-chengdu.myqcloud.com/bg/bg6.jpg',]
//获取到后端信息
var data = {{ data| tojson}};
//初始化
function init() {
data = JSON.parse(data);
data = data[0]
// 判断时间
var timeout = parseInt(data.timeout)
timeout = new Date(timeout)
var now = new Date()
if (timeout - now <= 0) window.location.replace("https://qr.powerrain.cn/qr");
// 换背景
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);
console.log(setting);
manangeUrl();
}
if(setting.qqpay){
ele("qq").style.display = "block";
function ele(id) {
return document.getElementById(id);
}
}
function urlEncode(String) {
return encodeURIComponent(String).replace(/'/g,"%27").replace(/"/g,"%22");
}
function noSupport(text,type) {
//遗留问题，等有了域名再说，微信访问会自带参数啥的生成一个超级复杂的二维码
console.log(window.location.hostname)
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);
function showIcon() {
if (setting.alpay) {
ele("al").style.display = "block";
}
} 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://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/f7246b600c3387445f39938f5c0fd9f9d62aa041.jpg");
}else{
//木有微信的链接
noSupport("微信",1)
if (setting.wxpay) {
ele("wx").style.display = "block";
}
} 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://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/060828381f30e9243d5820c241086e061c95f741.jpg");
}else{
//木有QQ的链接
noSupport("QQ",1);
if (setting.qqpay) {
ele("qq").style.display = "block";
}
} 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;}
.clearfix {zoom:1;}
function urlEncode(String) {
return encodeURIComponent(String).replace(/'/g, "%27").replace(/"/g, "%22");
}
.all {
display: none;
width:100%;
height:100%;
}
function noSupport(text, type) {
//遗留问题，等有了域名再说，微信访问会自带参数啥的生成一个超级复杂的二维码
console.log(window.location.hostname)
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
}
.all .main {
display: flex;
max-width: 400px;
width:100%;
flex-direction: column;
margin:0 auto;
align-items: center;
position: relative;
}
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://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/f7246b600c3387445f39938f5c0fd9f9d62aa041.jpg");
} 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://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/060828381f30e9243d5820c241086e061c95f741.jpg");
} else {
//木有QQ的链接
noSupport("QQ", 1);
}
} else {
noSupport('', 0);
}
}
.all .background {
height:100%;
width:100%;
position:absolute;
top:0;
}
window.onload = function () {
init();
}
</script>
<style type="text/css">
@charset "utf-8";
.all .main .qrcode {
margin-top:30px;
width:80%;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
label,
td,
th {
cursor: text;
}
.all .main .user {
font-size:25px;
color: #fff;
margin-top:30px;
font-weight: bold;
}
a:link,
a:visited,
a:hover,
a:active {
cursor: pointer;
}
.all .main .title {
font-size:20px;
color: #fff;
margin-top:30px;
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-size: 14px;
font-family: "微软雅黑", Arial, Helvetica, sans-serif;
color: #333;
}
.all .main .imageBox {
margin-top: 30px;
height:50px;
width:80%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
div,
p,
ul,
ol,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
form,
input,
select,
textarea,
table,
td {
margin: 0;
padding: 0;
}
.all .imageBox>div {
height:50px;
width:52px;
background-image: url(https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b64543a98226cffc74a50341b4014a90f703eab2.jpg);
background-size: cover;
}
.all .imageBox .wx {
background-position-x:-12px;
display: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
.all .imageBox .al {
display: none;
background-position-x:-276px;
}
.all .imageBox .qq {
display: none;
background-position-x:-138px;
}
area {
outline: none;
}
.wq {
display: none;
height:100%;
width:100%;
}
img {
border: 0;
outline: none;
}
.wq .wx_b {
height:100%;
width:100%;
position:absolute;
top:0;
background: #09bb07;
}
ol,
ul {
list-style: none;
}
.wq .qq_b {
height:100%;
width:100%;
position:absolute;
top:0;
background-image:linear-gradient(180deg, #0088cc, #01cfff);
}
a {
font-family: "微软雅黑", Arial, Helvetica, sans-serif;
text-decoration: none;
outline: none;
}
.wq .w {
display: flex;
max-width: 400px;
width:100%;
flex-direction: column;
margin:0 auto;
align-items: center;
position: relative;
}
a:hover {
text-decoration: none;
}
.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;
}
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
}
.wq .pay>img {
width: 60%;
margin-top:20px;
margin-bottom: 20px;
}
.clearfix {
zoom: 1;
}
.wq .title {
font-size: 35px;
color: #fff;
margin-top:30px;
letter-spacing:3px;
}
.all {
display: none;
width: 100%;
height: 100%;
}
.wq .qrcode {
margin-top:30px;
width:80%;
}
.all .main {
display: flex;
max-width: 400px;
width: 100%;
flex-direction: column;
margin: 0 auto;
align-items: center;
position: relative;
}
.wq .user {
font-size:30px;
color: #fff;
margin-top:30px;
}
.all .background {
height: 100%;
width: 100%;
position: absolute;
top: 0;
}
.all .main .qrcode {
margin-top: 30px;
width: 80%;
}
</style>
.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://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b64543a98226cffc74a50341b4014a90f703eab2.jpg);
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: 30px;
}
</style>
</head>
<body>
<div class="all" id="all">
<!-- <img class="background" src="https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/2934349b033b5bb5092b9c0d3bd3d539b700bc41.jpg"> -->
@ -312,6 +412,5 @@ a:hover{ text-decoration:none;}
</div>
</div>
</body>
</html>
</html>