Browse Source

first commit

wjx 2 years ago
commit
92104d6a04
5 changed files with 297 additions and 0 deletions
  1. 121 0
      index.css
  2. 43 0
      index.html
  3. 92 0
      index.js
  4. 41 0
      paySucc.html
  5. BIN
      succImg.jpg

+ 121 - 0
index.css

@@ -0,0 +1,121 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+}
+.main {
+    max-width: 800px;
+    width: 100%;
+    margin: auto;
+}
+
+#succ {
+    width: 100%;
+    height: 100%;
+    background-color: #FFF;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 20;
+    display: none;
+}
+#succ .mainImg {
+    width: 80%;
+    display: block;
+    margin: auto;
+}
+
+.main .payInfo {
+    width: 100%;
+    height: 230px;
+    background-color: #3687FD;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #FFF;
+    padding-top: 45px;
+    box-sizing: border-box;
+}
+
+.main .ts {
+    font-weight: normal;
+}
+
+.main #money {
+    margin: 20px 0;
+    font-size: 38px;
+}
+
+.main #orderNo {
+    margin-top: 6px;
+}
+
+.main .payBtn {
+    background-color: #0CBB07;
+    width: 80%;
+    height: 45px;
+    text-align: center;
+    line-height: 45px;
+    border-radius: 6px;
+    color: #FFF;
+    margin: 100px auto 0;
+    font-size: 18px;
+}
+
+
+#tip {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .4);
+    z-index: 10;
+    display: none;
+}
+
+#tip .content {
+    position: absolute;
+    z-index: 15;
+    background-color: #FFF;
+    border-radius: 6px;
+    width: 85%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+#tip .tipTitle{
+    padding: 20px;
+    box-sizing: border-box;
+    text-align: center;
+    font-weight: bold;
+    border-bottom: 1px solid rgb(236, 236, 236);
+}
+
+#tip .tipBt {
+    padding: 12px;
+    box-sizing: border-box;
+    text-align: center;
+    color: #2f6ecd;
+}
+
+.back {
+    background-color: #0CBB07;
+    width: 80%;
+    height: 45px;
+    text-align: center;
+    line-height: 45px;
+    border-radius: 6px;
+    color: #FFF;
+    margin: 60px auto 0;
+    font-size: 18px;
+}

+ 43 - 0
index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>支付</title>
+    <link rel="stylesheet" href="./index.css">
+    <script>
+        let ua = navigator.userAgent.toLowerCase();
+        let isWeixin = ua.indexOf('micromessenger') != -1;
+        if (!isWeixin) {
+            window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=888"
+        }
+    </script>
+    <script src="./index.js"></script>
+</head>
+
+<body>
+    <div class="main">
+        <div class="payInfo">
+            <h3 class="ts">你需支付</h3>
+            <h1 id="money">0.00元</h1>
+            <h3 class="ts" id="title"></h3>
+            <h3 class="ts" id="orderNo">订单号: </h3>
+        </div>
+
+        <div class="payBtn" onclick="onBridgeReady()">点击支付</div>
+    </div>
+    <div id="tip">
+        <div class="content">
+            <div class="tipTitle">该订单已失效,请回复“2”或游戏内重新下单获取最新支付订单</div>
+            <div class="tipBt" onclick="closeHandle()">确定</div>
+        </div>
+    </div>
+
+    <div id="succ">
+        <img src="./succImg.jpg" alt="" class="mainImg" style="margin-top: 100px;">
+        <div class="back" onclick="closeHandle()">返回客服</div>
+    </div>
+</body>
+</html>

+ 92 - 0
index.js

@@ -0,0 +1,92 @@
+const api = 'https://test.game.hzshengmel.com/api/sdk'  // 请求地址
+let payParam = ''; appId="";  // 支付参数
+let wechatPayId = "";
+
+// 关闭
+const closeHandle = () => {
+    console.log('关闭')
+    document.addEventListener('WeixinJSBridgeReady', () => {
+        WeixinJSBridge.call('closeWindow');
+    }, false);
+    WeixinJSBridge.call('closeWindow');
+}
+
+// 支付
+const onBridgeReady = () => {
+    if (payParam) {
+        let { package, nonceStr, paySign, signType, timeStamp } = JSON.parse(payParam)
+        WeixinJSBridge.invoke('getBrandWCPayRequest', {
+            "appId": appId,                                   //公众号ID,由商户传入     -
+            "timeStamp": timeStamp,                           //时间戳,自1970年以来的秒数     
+            "nonceStr": nonceStr,                             //随机串     
+            "package": `prepay_id=${package.prepay_id}`,
+            "signType": signType,                             //微信签名方式:     
+            "paySign": paySign                                //微信签名 
+        }, res => {
+            if (res.err_msg == "get_brand_wcpay_request:ok") {
+                // 使用以上方式判断前端返回,微信团队郑重提示:
+                // res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
+                // 跳转支付成功展示页面
+                // closeHandle()
+                // window.location.href = window.location.origin + "/html/wechatPay/paySucc.html";
+                document.getElementById('succ').style.display = 'block'
+            } else if (res.err_msg == "get_brand_wcpay_request:fail") {
+                document.getElementById('tip').style.display = 'block'
+                document.getElementsByClassName('tipTitle')[0].innerHTML = '该订单已失效,请回复“2”或游戏内重新下单获取最新支付订单';
+            } else {
+                console.log("取消支付")
+                //修改上面生成的预支付订单状态
+                // cancelPayMoney();
+            }
+        });
+    } else {
+        document.getElementById('tip').style.display = 'block'
+        document.getElementsByClassName('tipTitle')[0].innerHTML = '订单异常,请联系客服重新下单';
+    }
+}
+
+window.onload = () => {
+    let search = window.location.search.replace('?', '')
+    let obj = {}
+    search.split('&').forEach(s => {
+        let arr = s.split('=')
+        obj[arr[0]] = arr[1]
+    })
+    document.getElementById('money').innerHTML = (obj.amount || '8') + '元'
+    document.getElementById('title').innerHTML = decodeURIComponent(obj.description) || '购买8元档充值'
+    document.getElementById('orderNo').innerHTML = '订单号:' + (obj.orderId || '2023010711541555400125675')
+    if (!obj.appId) {
+        alert('请传入appId')
+        return
+    }
+    if (!obj.code) {
+        window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${obj.appId}&redirect_uri=${encodeURIComponent(location.href)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`)
+    } else {
+        console.log('获取信息====>', obj)
+        appId = obj.appId
+        fetch(api + `/api/pay/param/applet?orderId=${obj.orderId}&code=${obj.code}`, {
+            method: 'GET',
+            headers: { ['Content-Type']: 'application/json;charset=UTF-8' }
+        }).then(res => res.json()).then(res => {
+            if (res.success) {
+                let { payParam: param } = res.data
+                payParam = param
+                if (typeof WeixinJSBridge == "undefined") {
+                    if (document.addEventListener) {
+                        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
+                    } else if (document.attachEvent) {
+                        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
+                        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
+                    }
+                } else {
+                    //wechatPayId = result.data.wechatPayId;//微信预支付id 用于用户取消支付时,修改生成的预支付订单状态onBridgeReady(result.data.appId,result.data.timeStamp,result.data.nonceStr,result.data.package,result.data.signType,result.data.paySign);
+                    onBridgeReady()
+                }
+            } else {
+                document.getElementById('tip').style.display = 'block'
+                document.getElementsByClassName('tipTitle')[0].innerHTML = res.msg || '该订单已失效,请回复“2”或游戏内重新下单获取最新支付订单';
+            }
+        })
+    }
+}
+

+ 41 - 0
paySucc.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./index.css">
+    <title>支付成功</title>
+    <script>
+        let ua = navigator.userAgent.toLowerCase();
+        let isWeixin = ua.indexOf('micromessenger') != -1;
+        if (!isWeixin) {
+            window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=888"
+        }
+        function stopBack() {
+            history.pushState(null, null, document.URL);
+            window.addEventListener('popstate', function () {
+                history.pushState(null, null, document.URL);
+            });
+        }
+        function closeHandle() {
+            document.addEventListener('WeixinJSBridgeReady', function () {
+                WeixinJSBridge.call('closeWindow');
+            }, false);
+            WeixinJSBridge.call('closeWindow');
+        }
+        window.onload = function () {
+            stopBack()
+        }
+    </script>
+</head>
+
+<body>
+    <div class="main">
+        <img src="./succImg.jpg" alt="" class="mainImg" style="margin-top: 100px;">
+        <div class="back" onclick="closeHandle()">返回客服</div>
+    </div>
+</body>
+
+</html>

BIN
succImg.jpg