Home Verkennen Help
Inloggen
liuxue
/
payoffline
Volgen 1
Ster 0
Vork 0
Bestanden Kwesties 0 Pull-aanvragen 0 Wiki
Bladeren bron

init

liuxue 3 jaren geleden
commit
3381d96b70
2 gewijzigde bestanden met toevoegingen van 581 en 0 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 195 0
      Paytocomplete.html
  2. 386 0
      index.html

+ 195 - 0
Paytocomplete.html
Bestand weergeven 

@@ -0,0 +1,195 @@
1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+
4 
+
5 
+<head>
6 
+    <meta charset="utf-8">
7 
+    <meta name="viewport"
8 
+        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
9 
+    <meta name=viewport
10 
+        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
11 
+    <title>支付完成</title>
12 
+    <script type="text/javascript">
13 
+
14 
+    </script>
15 
+
16 
+</head>
17 
+<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
18 
+<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js" type="text/javascript"></script>
19 
+<script type="text/javascript">
20 
+    function adapter() {
21 
+        const dpWidth = document.documentElement.clientWidth
22 
+        const rootFonstSize = (dpWidth * 100) / 750
23 
+        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
24 
+            document.documentElement.style.fontSize = rootFonstSize + 'px'
25 
+        } else {
26 
+            document.documentElement.style.fontSize = dpWidth
27 
+        }
28 
+    }
29 
+    adapter()
30 
+    window.onresize = adapter
31 
+</script>
32 
+
33 
+<body>
34 
+    <div id="Paytocomplete">
35 
+        <div class="Paytocomplete_header">
36 
+            <div class="Paytocomplete-header-nei">
37 
+                <div class="Paytocomplete-header-nei-left">
38 
+                    <img src="https://cdn.bjtdba.com/vod/image/2022-10-18/20221018150019704.png" alt="">
39 
+                </div>
40 
+                <div class="Paytocomplete-header-nei-in">支付完成</div>
41 
+            </div>
42 
+        </div>
43 
+        <div class="Paytocomplete-digital">
44 
+            <span>￥</span>
45 
+            <text>7.00</text>
46 
+        </div>
47 
+        <div class="Paytocomplete-yes">支付成功</div>
48 
+        <div class="Paytocomplete-fanhui">返回商户首页</div>
49 
+        <div class="Paytocomplete-neirong">
50 
+            <div class="Paytocomplete-neirong-yi">
51 
+                <div class="Paytocomplete-neirong-yi-left">商户名称11111</div>
52 
+                <div class="Paytocomplete-neirong-yi-left">商户名称商户名称</div>
53 
+            </div>
54 
+            <div class="Paytocomplete-neirong-yi">
55 
+                <div class="Paytocomplete-neirong-yi-left">订单状态</div>
56 
+                <div class="Paytocomplete-neirong-yi-left">支付成功</div>
57 
+            </div>
58 
+            <div class="Paytocomplete-neirong-yi">
59 
+                <div class="Paytocomplete-neirong-yi-left">订单号</div>
60 
+                <div class="Paytocomplete-neirong-yi-left">23456723456</div>
61 
+            </div>
62 
+            <div class="Paytocomplete-neirong-yi">
63 
+                <div class="Paytocomplete-neirong-yi-left">养老金</div>
64 
+                <div class="Paytocomplete-neirong-yi-left">¥234</div>
65 
+            </div>
66 
+            <div class="Paytocomplete-neirong-yi">
67 
+                <div class="Paytocomplete-neirong-yi-left">交易时间</div>
68 
+                <div class="Paytocomplete-neirong-yi-left">2022-5-21 13:32:42</div>
69 
+            </div>
70 
+
71 
+        </div>
72 
+    </div>
73 
+</body>
74 
+
75 
+</html>
76 
+<style>
77 
+    body {
78 
+
79 
+        background: #F8F8F8;
80 
+    }
81 
+
82 
+    * {
83 
+        margin: 0;
84 
+        padding: 0;
85 
+    }
86 
+
87 
+    #Paytocomplete {
88 
+        width: 100%;
89 
+        height: 100%;
90 
+        display: flex;
91 
+        flex-direction: column;
92 
+        align-items: center;
93 
+    }
94 
+
95 
+    .Paytocomplete_header {
96 
+        width: 100%;
97 
+        height: 1.76rem;
98 
+        display: flex;
99 
+        justify-content: center;
100 
+        align-items: center;
101 
+        background: #FFFFFF;
102 
+    }
103 
+
104 
+    .Paytocomplete-header-nei {
105 
+        width: 6.86rem;
106 
+        height: 100%;
107 
+        display: flex;
108 
+    }
109 
+
110 
+    .Paytocomplete-header-nei-in {
111 
+        margin-top: 1.07rem;
112 
+        font-size: 0.36rem;
113 
+        font-weight: 500;
114 
+        color: #333333;
115 
+        text-align: center;
116 
+        margin-left: 2.17rem;
117 
+    }
118 
+
119 
+    .Paytocomplete-header-nei-left {
120 
+        width: 0.36rem;
121 
+        height: 0.36rem;
122 
+        margin-top: 1.17rem;
123 
+    }
124 
+
125 
+    .Paytocomplete-header-nei-left img {
126 
+        width: 100%;
127 
+        height: 100%;
128 
+        display: block;
129 
+    }
130 
+
131 
+    .Paytocomplete-digital {
132 
+        height: 1.01rem;
133 
+        margin: 0.8rem 0 0 0;
134 
+        display: flex;
135 
+        align-items: center;
136 
+        height: 1.01rem;
137 
+    }
138 
+
139 
+    .Paytocomplete-digital span {
140 
+        font-size: 0.64rem;
141 
+        font-weight: 600;
142 
+        color: #333333;
143 
+        margin-top: 0.27rem;
144 
+    }
145 
+
146 
+    .Paytocomplete-digital text {
147 
+        font-size: 1.01rem;
148 
+        font-weight: bold;
149 
+        color: #333333;
150 
+    }
151 
+
152 
+    .Paytocomplete-yes {
153 
+        font-size: 0.32rem;
154 
+        font-weight: 500;
155 
+        color: #1B1B1B;
156 
+        margin: 0.12rem 0 0 0;
157 
+    }
158 
+
159 
+    .Paytocomplete-fanhui {
160 
+        margin: 0.34rem 0 0 0;
161 
+        display: flex;
162 
+        justify-content: center;
163 
+        align-items: center;
164 
+        width: 1.9rem;
165 
+        height: 0.58rem;
166 
+        border-radius: 0.3rem;
167 
+        border: 0.01rem solid #FE0032;
168 
+        font-size: 0.24rem;
169 
+        font-weight: 400;
170 
+        color: #FE0032;
171 
+    }
172 
+
173 
+    .Paytocomplete-neirong {
174 
+        width: 6.86rem;
175 
+        display: flex;
176 
+        flex-direction: column;
177 
+        justify-content: space-between;
178 
+        align-items: center;
179 
+        margin: 0.87rem 0 0 0;
180 
+    }
181 
+
182 
+    .Paytocomplete-neirong-yi {
183 
+        width: 100%;
184 
+        display: flex;
185 
+        justify-content: space-between;
186 
+        align-items: center;
187 
+        margin-bottom: 0.26rem;
188 
+    }
189 
+
190 
+    .Paytocomplete-neirong-yi-left {
191 
+        font-size: 0.28rem;
192 
+        font-weight: 400;
193 
+        color: #333333;
194 
+    }
195 
+</style>

+ 386 - 0
index.html
Bestand weergeven 

@@ -0,0 +1,386 @@
1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+
4 
+<head>
5 
+    <meta charset="UTF-8">
6 
+    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
7 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
8 
+    <title>向商家付款</title>
9 
+    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
10 
+    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
11 
+    <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>
12 
+    <script type="text/javascript">
13 
+        function adapter() {
14 
+            const dpWidth = document.documentElement.clientWidth
15 
+            const rootFonstSize = (dpWidth * 100) / 750
16 
+            if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
17 
+                document.documentElement.style.fontSize = rootFonstSize + 'px'
18 
+            } else {
19 
+                document.documentElement.style.fontSize = dpWidth
20 
+            }
21 
+        }
22 
+        adapter()
23 
+        window.onresize = adapter
24 
+    </script>
25 
+    <style>
26 
+        body {
27 
+
28 
+            background: #F8F8F8;
29 
+        }
30 
+
31 
+        * {
32 
+            margin: 0;
33 
+            padding: 0;
34 
+        }
35 
+
36 
+        #pay {
37 
+            width: 100%;
38 
+            height: 100%;
39 
+            display: flex;
40 
+            flex-direction: column;
41 
+            align-items: center;
42 
+        }
43 
+
44 
+        /* .pay_header {
45 
+            width: 100%;
46 
+            height: 1.76rem;
47 
+            display: flex;
48 
+            justify-content: center;
49 
+            align-items: center;
50 
+            background: #FFFFFF;
51 
+        }
52 
+
53 
+        .pay-header-nei {
54 
+            width: 6.86rem;
55 
+            height: 100%;
56 
+            display: flex;
57 
+        }
58 
+
59 
+        .pay-header-nei-in {
60 
+            margin-top: 1.07rem;
61 
+            font-size: 0.36rem;
62 
+            font-weight: 500;
63 
+            color: #333333;
64 
+            text-align: center;
65 
+            margin-left: 2.17rem;
66 
+        }
67 
+
68 
+        .pay-header-nei-left {
69 
+            width: 0.36rem;
70 
+            height: 0.36rem;
71 
+            margin-top: 1.17rem;
72 
+        }
73 
+
74 
+        .pay-header-nei-left img {
75 
+            width: 100%;
76 
+            height: 100%;
77 
+            display: block;
78 
+        } */
79 
+
80 
+        .pay_name {
81 
+            width: 6.2rem;
82 
+            height: 0.9rem;
83 
+            margin: 0.5rem 0 0.5rem 0;
84 
+            display: flex;
85 
+            justify-content: space-between;
86 
+            align-items: center;
87 
+        }
88 
+
89 
+        .pay_name_left {
90 
+            height: 100%;
91 
+            display: flex;
92 
+            flex-direction: column;
93 
+            align-items: center;
94 
+            justify-content: space-between;
95 
+        }
96 
+
97 
+        .pay_name_left_top {
98 
+            font-size: 0.34rem;
99 
+            font-weight: 600;
100 
+            color: #333333;
101 
+        }
102 
+
103 
+        .pay_name_left_bottom {
104 
+            font-size: 0.26rem;
105 
+            font-weight: 400;
106 
+            color: #999999;
107 
+        }
108 
+
109 
+        .pay_name_right {
110 
+            width: 0.9rem;
111 
+            height: 0.9rem;
112 
+            background: #D8D8D8;
113 
+            border: 0.01rem solid #979797;
114 
+        }
115 
+        .pay_name_right img{
116 
+            width: 100%;
117 
+            height: 100%;
118 
+            display: block;
119 
+        }
120 
+
121 
+        input::-webkit-input-placeholder {
122 
+            /*WebKit browsers*/
123 
+            color: #999999;
124 
+            font-size: 0.4rem;
125 
+            margin-top: 13rem;
126 
+
127 
+        }
128 
+
129 
+        input::-moz-input-placeholder {
130 
+            /*Mozilla Firefox*/
131 
+            color: #999999;
132 
+            font-size: 0.4rem;
133 
+            margin-top: 13rem;
134 
+
135 
+        }
136 
+
137 
+        input::-ms-input-placeholder {
138 
+            /*Internet Explorer*/
139 
+            color: #999999;
140 
+            font-size: 0.4rem;
141 
+            margin-top: 13rem;
142 
+
143 
+        }
144 
+
145 
+        .pay_input {
146 
+            width: 100%;
147 
+            height: 3.48rem;
148 
+            background: #FFFFFF;
149 
+            border-radius: 0.16rem;
150 
+            display: flex;
151 
+            flex-direction: column;
152 
+            align-items: center;
153 
+            justify-content: space-between;
154 
+        }
155 
+
156 
+        .pay_input-top {
157 
+            width: 6.36rem;
158 
+            height: 2.63rem;
159 
+            border-bottom: 0.01rem solid #E5E5E5;
160 
+        }
161 
+
162 
+        .pay_input-top-shifu {
163 
+            margin: 0.54rem 0 0 0.41rem;
164 
+            font-size: 0.26rem;
165 
+            font-weight: 400;
166 
+            color: #333333;
167 
+        }
168 
+
169 
+        .pay_input-top-manei {
170 
+            margin: 0.12rem 0 0 0.41rem;
171 
+            height: 1.19rem;
172 
+            display: flex;
173 
+            align-items: center;
174 
+        }
175 
+
176 
+        .pay_input-top-manei span {
177 
+            font-size: 0.64rem;
178 
+            font-weight: 600;
179 
+            color: #333333;
180 
+        }
181 
+
182 
+        .pay_input-top-manei input {
183 
+            width: 100%;
184 
+            height: 0.99rem;
185 
+            border: none;
186 
+            outline: medium;
187 
+            margin-left: 0.27rem;
188 
+            font-size: 1.1rem;
189 
+        }
190 
+
191 
+        .pay_input-bottom {
192 
+            width: 6.36rem;
193 
+            height: 0.84rem;
194 
+            display: flex;
195 
+            justify-content: center;
196 
+            align-items: center;
197 
+            font-size: 0.24rem;
198 
+            font-weight: 400;
199 
+            color: #FE0032;
200 
+        }
201 
+
202 
+        .pay_input-bottom-left {
203 
+            width: 0.3rem;
204 
+            height: 0.3rem;
205 
+        }
206 
+
207 
+        .pay_input-bottom-left img {
208 
+            width: 100%;
209 
+            height: 100%;
210 
+            display: block;
211 
+        }
212 
+
213 
+        .pay_input-bottom-right {
214 
+            margin-left: 0.08rem;
215 
+        }
216 
+
217 
+        .pay_bottom {
218 
+            width: 6.86rem;
219 
+            height: 0.88rem;
220 
+            background: linear-gradient(179deg, #FE7577 0%, #FE0032 100%);
221 
+            border-radius: 1rem;
222 
+            position: fixed;
223 
+            bottom: 0.68rem;
224 
+            text-align: center;
225 
+            line-height: 0.88rem;
226 
+            font-size: 0.32rem;
227 
+            font-weight: 600;
228 
+            color: #FFFFFF;
229 
+        }
230 
+    </style>
231 
+</head>
232 
+
233 
+<body>
234 
+    <div id="pay">
235 
+        <!-- <div class="pay_header">
236 
+            <div class="pay-header-nei">
237 
+                <div class="pay-header-nei-left">
238 
+                    <img src="https://cdn.bjtdba.com/vod/image/2022-10-18/20221018150019704.png" alt="">
239 
+                </div>
240 
+                <div class="pay-header-nei-in">向商家付款</div>
241 
+            </div>
242 
+        </div> -->
243 
+        <div class="pay_name">
244 
+            <div class="pay_name_left">
245 
+                <div class="pay_name_left_top">付款给商家</div>
246 
+                <div class="pay_name_left_bottom" id="mername"></div>
247 
+            </div>
248 
+            <div class="pay_name_right">
249 
+                <img src="" id="merbanner" alt="">
250 
+            </div>
251 
+        </div>
252 
+        <div class="pay_input">
253 
+            <div class="pay_input-top">
254 
+                <div class="pay_input-top-shifu">实付金额</div>
255 
+                <div class="pay_input-top-manei">
256 
+                    <span>￥</span>
257 
+                    <input type="text" id="textInput" placeholder="请输入金额" maxLength="8"
258 
+                        onkeyup="value=value.replace(/[^\d^\.]+/g,'')" oninput="myFunction()">
259 
+                </div>
260 
+            </div>
261 
+            <div class="pay_input-bottom">
262 
+                <div class="pay_input-bottom-left">
263 
+                    <img src="https://cdn.bjtdba.com/vod/image/2022-10-18/20221018152247280.png" alt="">
264 
+                </div>
265 
+                <div class="pay_input-bottom-right">储蓄保全国合作伙伴招募中</div>
266 
+            </div>
267 
+        </div>
268 
+        <div class="pay_bottom" onclick="btn()">立即支付</div>
269 
+    </div>
270 
+
271 
+    <script type="text/javascript">
272 
+        var ua = window.navigator.userAgent.toLowerCase();
273 
+        var Wxuserinfor;//微信user
274 
+        var mer_id;//商户Id
275 
+        //动态获取金额
276 
+        function myFunction() {
277 
+            console.log($("#textInput").val());
278 
+        }
279 
+        //获取参数
280 
+        var userpay = parseParms()
281 
+        get_mer_info()//调用二维码接口
282 
+        //跳转微信授权登陆
283 
+        let local = window.location.href;
284 
+        if (local.split(':')[0] == 'http') {
285 
+            local = local.split(':')[0] + 's:' + local.split(':')[1]
286 
+            console.log(local)
287 
+        } else {
288 
+            local = window.location.href;
289 
+        }
290 
+        let wechatHrefurl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + 'wx66f5f8def2b755da' +
291 
+            "&redirect_uri=" + encodeURIComponent(local) +
292 
+            "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
293 
+
294 
+        //不是微信并且不是支付宝
295 
+        if (ua.match(/MicroMessenger/i) != "micromessenger" && ua.match(/AlipayClient/i) != "alipayclient") {
296 
+            alert('请使用微信或支付宝扫码');
297 
+        }
298 
+        //判断是不是微信
299 
+        if (ua.match(/MicroMessenger/i) == "micromessenger") {
300 
+            console.log(userpay)
301 
+            if (userpay.code == "" || userpay.code == null) {
302 
+                window.location.href = wechatHrefurl;
303 
+            } else {
304 
+                user()
305 
+            }
306 
+        }
307 
+        //判断是不是支付宝
308 
+        if (ua.match(/AlipayClient/i) == "alipayclient") {
309 
+            console.log(userpay)
310 
+            if (userpay.code == null || userpay.code == "") {
311 
+                local = local.replace('#/', '');
312 
+                let aliHrefurl =
313 
+                    "https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=2021001197698727&scope=auth_user&redirect_uri=" +
314 
+                    encodeURIComponent(local)
315 
+                window.location.href = aliHrefurl;
316 
+            } else {
317 
+                aliUser()
318 
+            }
319 
+        }
320 
+        //获取二维码
321 
+        function get_mer_info() {
322 
+            $.post("https://test.bjtdba.com/api/merchantcheckcodeid/" + userpay.id, function (data) {
323 
+                if (data.status == 200) {
324 
+                    if (data.data.code == 1) {
325 
+                        mer_id = data.data.mer_id; //获取店铺id
326 
+                        getQrcode(data)
327 
+                    } else {
328 
+                        //如果不可以收款清空body
329 
+                        alert("商户未开通")
330 
+                        $("body").html("")
331 
+                    }
332 
+                } else {
333 
+                    alert(data.message)
334 
+                    //400收款清空body
335 
+                    $("body").html("")
336 
+                }
337 
+
338 
+            })
339 
+        }
340 
+        //获取商户信息
341 
+        function getQrcode(event) {
342 
+            $.get("https://test.bjtdba.com/api/merchant/get_mer_info", { mer_id: event.data.mer_id }, function (data) {
343 
+                console.log(data, "商户信息")
344 
+                if(data.status==200){
345 
+                    $("#mername").text(data.data.mer_name)//商户头像
346 
+                    $("#merbanner").attr("src",data.data.mer_banner)//商户头像
347 
+                }
348 
+            })
349 
+        }
350 
+        //wx获取用户信息
351 
+        function user() {
352 
+            $.get("https://test.bjtdba.com/api/wechat/wechatAuthorization", { code: userpay.code }, function (data) {
353 
+                if (data.status == 200) {
354 
+                    Wxuserinfor = data.data
355 
+                    console.log(Wxuserinfor, "接口")
356 
+                }
357 
+            })
358 
+        }
359 
+        //支付宝获取用户信息
360 
+        function aliUser() {
361 
+            $.get("https://test.bjtdba.com/api/ali/aliSign", { code: userpay.code }, function (data) {
362 
+                console.log(data, '支付宝用户信息')
363 
+            })
364 
+        }
365 
+        //点击支付创建订单
366 
+        function btn() {
367 
+            console.log(Wxuserinfor, '微信用户信息')
368 
+        }
369 
+        //hash参数转对象
370 
+        function parseParms() {
371 
+            var str = window.location.href.split("?")[1];
372 
+            var pieces = str.split("&"), data = {}, i, parts;
373 
+            // process each query pair
374 
+            for (i = 0; i < pieces.length; i++) {
375 
+                parts = pieces[i].split("=");
376 
+                if (parts.length < 2) {
377 
+                    parts.push("");
378 
+                }
379 
+                data[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
380 
+            }
381 
+            return data
382 
+        }
383 
+    </script>
384 
+</body>
385 
+
386 
+</html>