-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
198 lines (177 loc) · 6.51 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="favicon" rel="shortcut icon" href="https://jerryz.com.cn/favicon.png" />
<script async src="https://umami.jerryz.com.cn/script.js"
data-website-id="05c49609-102a-4737-9f42-ed47d90d5452"></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2597042766299857"
crossorigin="anonymous"></script>
<title>万能收款码生成器 | by Jerry Zhou</title>
<meta name="description" content="万能收款码生成器，支持微信、支付宝、QQ三码合一">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f7f7f7;
display: flex;
align-items: center;
height: 100vh;
flex-direction: column;
}
.header {
text-align: center;
}
.container {
width: min(450px, calc(100% - 40px));
margin: 10px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.nodisplay {
display: none;
}
input[type=text] {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ddd;
box-sizing: border-box;
}
button {
background-color: #0084ff;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
width: 100%;
cursor: pointer;
border-radius: 5px;
}
.link-box {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ddd;
box-sizing: border-box;
color: #757575;
font-size: 14px;
}
.copyright {
text-align: center;
margin: 7px 0;
color: #999;
font-size: 14px;
}
.copyright a {
text-decoration: none;
font-weight: bold;
color: unset;
transition: opacity 0.2s;
}
.copyright a:hover {
opacity: 0.5;
}
.preview {
height: 705px;
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ddd;
box-sizing: border-box;
}
.guide {
font-size: 14px;
color: #757575
}
.guide a {
/* text-decoration: none;
font-weight: bold; */
color: unset;
transition: opacity 0.2s;
}
.guide a:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<h1 class="header">万能收款码生成器</h1>
<div class="container">
微信：<input type="text" id="wechat" placeholder="你的微信收款二维码链接">
支付宝：<input type="text" id="alipay" placeholder="你的支付宝收款二维码链接">
QQ：<input type="text" id="qq" placeholder="你的QQ收款二维码链接">
<button id="generate">生成</button>
</div>
<div class="container">
链接：<div id="link-box" class="link-box" style="width: 100%;">生成的万能收款码链接</div>
<button id="copy">复制</button>
</div>
<div class="nodisplay container" id="links">
预览：
<iframe id="preview" class="preview"></iframe>
</div>
<div class="container">
使用教程：
<div class="guide">
1. 从微信（首页-收付款-二维码收款-保存收款码）、支付宝（首页-收付款-收钱-保存图片）、QQ（首页-头像-我的QQ钱包-收付款-收款-保存收款码）中下载收款码（至少一个）<br>
2. 打开<a href="https://cli.im/deqr/" target="_blank">二维码识别器</a>，分别上传收款码，获取链接<br>
3. 将链接输入到文本框中，点击生成，打开生成的链接就可以使用万能收款码了
</div>
</div>
<div class="copyright">
Copyright © 2024
<a href="https://jerryz.com.cn" target="_blank">Jerry Zhou</a>
</div>
<script>
document.getElementById('generate').addEventListener('click', function () {
var wechat = document.getElementById('wechat').value;
var alipay = document.getElementById('alipay').value;
var qq = document.getElementById('qq').value;
if (!wechat && !alipay && !qq) {
alert('请至少填写一个付款码链接');
return;
}
fetch(`https://g3rvbpemgm.us.aircode.run/add?wechat=${wechat}&alipay=${alipay}&qq=${qq}`)
.then(response => response.json())
.then(data => {
var link = `https://p.jerryz.com.cn/pay?id=${data.id}`;
document.getElementById('link-box').textContent = link;
// 设置iframe的src属性为生成的链接
document.getElementById('preview').src = link;
document.getElementById('links').style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
});
});
document.getElementById('copy').addEventListener('click', function () {
var link = document.getElementById('link-box').textContent;
navigator.clipboard.writeText(link).then(() => {
alert('链接已复制到剪贴板');
}).catch(err => {
console.error('无法复制链接: ', err);
// 可以回退到较旧的方法如果新的API不可用
var textarea = document.createElement('textarea');
textarea.value = link;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
alert('链接已复制到剪贴板');
});
});
</script>
</body>
</html>