1.简单H5模块(qrcode ajax jqury js md5 aes)

    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5.     <meta name="viewport"
    6.         content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
    7.     <meta charset="UTF-8">
    8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    9.     <title>众成鑫富</title>
    10. </head>
    12. <body>
    13.     <div id="main">
    14.         <header>
    15.             微信支付
    16.         </header>
    17.         <main>
    18.             <div class="iptBox">
    19.                 <input type="text" placeholder="请输入您的充值号码!" id="ipt">
    20.                 <div class="info">
    21.                     <span class="errTip"></span>
    22.                 </div>
    23.             </div>
    24.             <div class="pro" id="qrcode" ref="qrcode"></div>
    25.             <div class="check">充值价格: <span>10.00</span>元</div>
    26.         </main>
    27.         <footer>
    28.             <button id="payBtn">生成支付码</button>
    29.         </footer>
    30.     </div>
    31.     <script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
    32.     <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.js"></script>
    33.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    34.     <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    35.     <script>
    36.         // 设置全局延迟调用时长
    37.         const waitDuration = 500;
    38.         // 请求地址baseUrl
    39.         const baseUrl = "http://192.168.9.34:8001";
    40.         // 设置AES加密key
    41.         const aesKey = "wRdSzczXttHFtXyC";
    42.         // 设置appSecret
    43.         const appSecret = "6cd8132a04df9592bf8fadca6061d939";
    44.         // 设置appid(支付)
    45.         const payAppId = "9t3f2twrcpl";
    46.         // 设置version版本
    47.         const version = "v1.0";
    48.         // 设置二维码生成链接
    49.         var codeUrl;
    51.         // appid=23raqkwr9ll
    52.         // appsecret=f8d81572105cb719bb1a1ecfd7fed244
    53.         // aeskey=eKJTNaCswmaikbZQ
    55.         // 获取dom节点,为按钮绑定点击事件(加入节流功能函数)
    56.         var payBtn = document.querySelector('#payBtn');
    57.         var telPhoneVal = document.querySelector('#ipt');
    58.         var errTip = document.querySelector('.errTip');
    59.         var qrcodeBox = document.getElementById('qrcode');
    61.         let pp = document.createElement('p');
    62.         pp.innerHTML = "支付二维码展示窗口";
    63.         document.querySelector('#qrcode').appendChild(pp);
    65.         // 定义两个缓存值(充值账号)
    66.         var firstLen = 0;
    67.         var lastLen = 0;
    68.         var reg = /^1(3|4|5|7|8)\d{9}$/;
    70.         // 支付按钮触发点击事件
    71.         payBtn.addEventListener("click", clickFn(clickEvent, waitDuration));
    73.         // 节流功能函数,防止用户多次触发
    74.         function clickFn(fn, delay) {
    75.             let timer;
    76.             return function () { // 这里是标签的点击事件调用该匿名函数，所以该匿名函数指向fn的DOM节点
    77.                 if (timer) {
    78.                     return;
    79.                 }
    80.                 let that = this;
    81.                 let arg = arguments;
    82.                 timer = setTimeout(function () {
    83.                     fn.apply(that, arg);
    84.                     timer = null;
    85.                 }, delay)
    86.             }
    87.         };
    89.         // 支付函数,以下为支付业务功能代码
    90.         function clickEvent() {
    91.             // !!! 再点击支付的时候删除#qrcode下面的所有子节点
    92.             if (qrcodeBox.childNodes) {
    93.                 for (var i = qrcodeBox.childNodes.length - 1; i >= 0; i--) {
    94.                     qrcodeBox.removeChild(qrcodeBox.childNodes[i]);
    95.                 }
    96.             };
    97.             qrcodeBox.style.border="1px solid #007aff";
    98.             // 请求之前创建节点告知用户二维码正在加载
    99.             let pp = document.createElement('p');
    100.             pp.innerHTML = "支付二维码正在生成中...";
    101.             document.querySelector('#qrcode').appendChild(pp);
    102.             // 设置支付参数
    103.             const data = {
    104.                 openId: Math.random().toString(36).substr(2),
    105.                 merPayOrderId:Math.random().toString(36).substr(2),
    106.                 // merPayOrderId: '2423hf2434l3lfsdk',
    107.                 amount: 1,
    108.                 desc: "测试支付"
    109.             };
    111.             // 设置参数加密
    112.             var encrypt = CryptoJS.AES.encrypt(JSON.stringify(data), CryptoJS.enc.Utf8.parse(aesKey), {
    113.                 mode: CryptoJS.mode.ECB,
    114.                 padding: CryptoJS.pad.Pkcs7
    115.             }).toString();
    117.             // 设置参数解密 
    118.             var decrypt = CryptoJS.AES.decrypt(encrypt, CryptoJS.enc.Utf8.parse(aesKey), {
    119.                 mode: CryptoJS.mode.ECB,
    120.                 padding: CryptoJS.pad.Pkcs7
    121.             }).toString(CryptoJS.enc.Utf8);
    123.             // 设置请求参数(获取微信支付二维码)
    124.             const postOBj = {
    125.                 timestamp: new Date().valueOf(),
    126.                 edata: encrypt,
    127.                 sign: md5(JSON.stringify(data) + (new Date().valueOf()) + appSecret),
    128.                 appid: payAppId,
    129.                 version: version
    130.             };
    132.             // 原生请求跨域!!!!!!!!!!! this question comes from back-end;
    133.             $.ajax({
    134.                 url: "http://192.168.9.34:8001/api/pay",
    135.                 type: "POST",
    136.                 dataType: "json",
    137.                 headers: {
    138.                     "content-type": 'application/json'
    139.                 },
    140.                 contentType: 'application/json',
    141.                 data: JSON.stringify(postOBj),
    142.                 success: function (res) {
    143.                     console.log(res, '响应数据');
    144.                     if (res.code == 10) {
    145.                         setTimeout(() => {
    146.                             if (qrcodeBox.childNodes) {
    147.                                 for (var i = qrcodeBox.childNodes.length - 1; i >= 0; i--) {
    148.                                     qrcodeBox.removeChild(qrcodeBox.childNodes[i]);
    149.                                 }
    150.                             };
    151.                             qrcodeBox.style.border="1px solid transparent";
    152.                             // new QRCode(document.getElementById("codeBox"), res.data.QrcodeUrl); // 设置要生成二维码的链接(便捷式生成无法设置宽高)
    153.                             var qrcode = new QRCode('qrcode', {
    154.                                 text: res.data.QrcodeUrl ? res.data.QrcodeUrl : '',
    155.                                 width: 256,
    156.                                 height: 256,
    157.                                 colorDark: '#000000',
    158.                                 colorLight: '#ffffff',
    159.                                 correctLevel: QRCode.CorrectLevel.Q
    160.                             });
    161.                             qrcode.makeCode();
    162.                         }, 1000);
    163.                     } else {
    164.                         setTimeout(() => {
    165.                             if (qrcodeBox.childNodes) {
    166.                                 for (var i = qrcodeBox.childNodes.length - 1; i >= 0; i--) {
    167.                                     qrcodeBox.removeChild(qrcodeBox.childNodes[i]);
    168.                                 }
    169.                             };
    170.                             let pp = document.createElement('p');
    171.                             pp.innerHTML = "支付码生成失败,请重新支付!";
    172.                             document.querySelector('#qrcode').appendChild(pp);
    173.                         }, 1000);
    174.                     }
    175.                 },
    176.                 error: function (err) {
    177.                     console.log(err);
    178.                 }
    179.             });
    180.         };
    182.         // 手机号验证
    183.         telPhoneVal.oninput = function () {
    184.             telPhoneVal.value = telPhoneVal.value.substr(0, 13); //只允许输入11位+2个空格
    185.             //用户输入满11位开始验证
    186.             if (telPhoneVal.value.length == 13) {
    187.                 //将数据去掉空格后验证
    188.                 if (!reg.test(telPhoneVal.value.replace(/\s/g, ''))) {
    189.                     errTip.innerHTML = '*' + ' ' + '您输入的手机账号有误,请重新输入'
    190.                 } else {
    191.                     errTip.innerHTML = ''
    192.                 }
    193.             } else {
    194.                 errTip.innerHTML = ''
    195.             }
    196.         };
    198.         // 手机号四位分割
    199.         telPhoneVal.onfocus = function () {
    200.             timer = setInterval(function () {
    201.                 lastLen = telPhoneVal.value.length;
    202.                 if (lastLen > firstLen) {
    203.                     firstLen = telPhoneVal.value.length;
    204.                     if (lastLen === 4 || lastLen === 9) {
    205.                         var temp1 = telPhoneVal.value.substr(0, telPhoneVal.value.length - 1);
    206.                         var temp2 = telPhoneVal.value.substr(telPhoneVal.value.length - 1);
    207.                         telPhoneVal.value = temp1 + ' ' + temp2;
    208.                     }
    209.                 } else if (lastLen <= firstLen) {
    210.                     if (lastLen === 4 || lastLen === 9) {
    211.                         telPhoneVal.value = telPhoneVal.value.substr(0, telPhoneVal.value.length - 1);
    212.                     }
    213.                     firstLen = telPhoneVal.value.length;
    214.                 }
    215.             }, 10); //如果手机出现卡顿，可适当把定时器时间加大
    216.         };
    217.     </script>
    218.     <style>
    219.         * {
    220.             padding: 0;
    221.             margin: 0;
    222.         }
    224.         body,
    225.         html {
    226.             width: 100%;
    227.             height: 100%;
    228.         }
    230.         #main {
    231.             width: 100%;
    232.             height: 100%;
    233.             background-color: #f2f2f2;
    234.             display: flex;
    235.             justify-content: space-between;
    236.             flex-wrap: nowrap;
    237.             flex-direction: column;
    238.         }
    240.         header {
    241.             height: 30px;
    242.             width: 100%;
    243.             background-color: #5298e4;
    244.             display: flex;
    245.             justify-content: center;
    246.             align-items: center;
    247.             font-size: 16px;
    248.             font-family: 'Courier New', Courier, monospace;
    249.             color: #fff;
    250.             font-weight: bolder;
    251.             letter-spacing: 1px;
    252.         }
    254.         main {
    255.             flex: 1;
    256.             width: 100%;
    257.             height: 100%;
    258.             overflow-y: scroll;
    259.             background: #fff;
    260.         }
    262.         .iptBox {
    263.             display: flex;
    264.             height: 20%;
    265.             width: 100%;
    266.             flex-direction: column;
    267.             justify-content: center;
    268.             align-items: center;
    269.             padding: 5px 0px;
    270.             box-sizing: border-box;
    271.         }
    273.         .iptBox input {
    274.             display: inline;
    275.             height: 50px;
    276.             width: 90%;
    277.             outline: none;
    278.             border: none;
    279.             font-size: 26px;
    280.             font-weight: bolder;
    281.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    282.             border-radius: none !important;
    283.         }
    285.         .info {
    286.             width: 90%;
    287.             margin: 0 auto;
    288.             border-top: 1px solid #87aacf;
    289.             height: 40px;
    290.             margin-top: 5px;
    291.             color: #f55c64;
    292.             font-size: 13px;
    293.             padding-top: 18px;
    294.         }
    296.         .pro {
    297.             width: 256px;
    298.             margin: 0 auto;
    299.             margin-top: 15px;
    300.             display: flex;
    301.             justify-content: center;
    302.             align-items: center;
    303.             height: 256px;
    304.             border: 1px solid #007aff;
    305.         }
    307.         #qrcode>>>canvas {
    308.             width: 250px !important;
    309.             height: 250px !important;
    310.         }
    312.         #qrcode>>>img {
    313.             width: 250px !important;
    314.             height: 250px !important;
    315.         }
    317.         #qrcode p {
    318.             font-size: 18px;
    319.             color: #666;
    320.             font-family: '楷体';
    321.             font-weight: 600;
    322.         }
    324.         .check {
    325.             padding: 10px 5%;
    326.             box-sizing: border-box;
    327.             font-size: 16px;
    328.             color: #333;
    329.             font-family: '楷体';
    330.             margin-top: 30px;
    331.         }
    333.         .check span {
    334.             font-size: 22px;
    335.             color: #007aff;
    336.         }
    338.         footer {
    339.             width: 100%;
    340.             background-color: rgba(255, 255, 255, 0.4);
    341.             display: flex;
    342.             justify-content: center;
    343.             align-items: center;
    344.             padding: 15px 0px 24px 0px;
    345.             box-sizing: border-box;
    346.         }
    348.         button {
    349.             width: 160px;
    350.             line-height: 38px;
    351.             text-align: center;
    352.             font-weight: bold;
    353.             color: #fff;
    354.             text-shadow: 1px 1px 1px #333;
    355.             border-radius: 5px;
    356.             position: relative;
    357.             overflow: hidden;
    358.             border: 1px solid #007aff;
    359.             box-shadow: 0 1px 2px #388ae2 inset, 0 -1px 0 #498fda inset, 0 -2px 3px #b9ecc4 inset;
    360.             background: -webkit-linear-gradient(top, #2880dd, #6289b3);
    361.             background: -moz-linear-gradient(top, #2b85e6, #2680e0);
    362.             background: linear-gradient(top, #3987db, #438ddb);
    363.         }
    365.         button:hover {
    366.             background: -webkit-linear-gradient(top, #40e048, #2fcc7d);
    367.             background: -moz-linear-gradient(top, #40e048, #2fcc7d);
    368.             background: linear-gradient(top, #40e048, #2fcc7d);
    369.         }
    371.         input::-webkit-input-placeholder {
    372.             /* WebKit browsers*/
    373.             color: #ccc;
    374.             font-size: 14px;
    375.             letter-spacing: 1px;
    376.             display: table-cell;
    377.             vertical-align: top;
    378.             font-style: oblique;
    379.             padding-left: 2px;
    380.             font-family: '楷体';
    381.         }
    383.         input:-moz-input-placeholder {
    384.             /* Mozilla Firefox 4 to 18*/
    385.             color: #ccc;
    386.             font-size: 14px;
    387.             letter-spacing: 1px;
    388.             display: table-cell;
    389.             vertical-align: top;
    390.             font-style: oblique;
    391.             font-family: '楷体';
    392.         }
    394.         input::-moz-input-placeholder {
    395.             /* Mozilla Firefox 19+*/
    396.             color: #ccc;
    397.             font-size: 14px;
    398.             letter-spacing: 1px;
    399.             display: table-cell;
    400.             vertical-align: top;
    401.             font-style: oblique;
    402.             font-family: '楷体';
    403.         }
    405.         input:-ms-input-placeholder {
    406.             /* Internet Explorer 10+*/
    407.             color: #ccc;
    408.             letter-spacing: 1px;
    409.             font-size: 14px;
    410.             display: table-cell;
    411.             vertical-align: top;
    412.             font-style: oblique;
    413.             font-family: '楷体';
    414.         }
    415.     </style>
    416. </body>
    418. </html>