<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />--> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="/themes/simplebootx/Portal/Template/css/swiper-3.4.2.min.css" /> <link rel="stylesheet" type="text/css" href="/themes/simplebootx/Portal/Template/css/init.css" /> <link rel="stylesheet" type="text/css" href="/themes/simplebootx/Portal/Template/css/PersonCenter/topus.css" /> <script src="/themes/simplebootx/Portal/Template/js/base.js" type="text/javascript" charset="utf-8"></script> <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <title>充值</title> <style> .wrapper{ width: 8rem; height: 100%; background-color: rgba(0,0,0,0.5); position: fixed; z-index: 2; margin-left: -0.4rem; } .illustrate{ width: 6.48rem; height: 7.2rem; position: absolute; z-index: 3; background-color: #FFFFFF; left: 1rem; top: 2.63rem; display: flex; flex-direction: column; align-items: center; border-radius: 0.15rem; } .certain{ width: 6.48rem; height:0.8rem; background:RGBA(0, 145, 229, 1); color:#FFFFFF; border:none; outline:none; position:absolute;; top:6.7rem; } /*标题*/ .title{ position:absolute; top:0.4rem; } .explain{ font-size: 0.4rem; color:RGBA(51, 51, 51, 1); } .text{ font-size: 0.3rem; position:absolute; top:1.2rem; width:5.4rem; color:RGBA(102, 102, 102, 1); height:5.2rem; overflow: auto; } </style> </head> <body> <div class="container" id="card"> <!--弹出框--> <!--遮罩层--> <div class="wrapper"> <!--弹出内容--> <div class="illustrate"> <div class="title"> <p class="explain">充值卡使用说明</p> </div> <div class="text"> 充值说明 </div> <button class="certain">确定</button> </div> </div> <div class="header"> <i class="iconfont icon-my_icon"></i><p>充值卡使用说明</p> </div> <div class="top_us_card" v-for="item in cardindex"> <p class="top_us_num">充值面额</p> <div class="top_us_num_wrap"> <p class="forever">有效期:永久</p> <p class="give_num">赠送{{item.bonus}}元</p> <span class="btn" onclick="recharge(this.id)" :id="item.id">立即充值</span> </div> <div class="money"> <p class="icon">¥</p><p class="money_num">{{item.denomination}}</p> </div> </div> </div> <script> function recharge(id) { $.ajax({ url:"{:U('Portal/Card/recharge_s')}", data:{ id:id, from:2, unique_id: localStorage.getItem('unique_id') }, type:"POST", dataType:"JSON", success: function (data) { console.log(data); wx.chooseWXPay({ timestamp: data.data.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 nonceStr: data.data.nonceStr, // 支付签名随机串,不长于 32 位 package: data.data.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*) signType: data.data.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5' paySign: data.data.paySign, // 支付签名 success: function (res) { // 支付成功后的回调函数 } }); } }) } </script> <script src="/themes/simplebootx/Portal/Template/js/vue.min.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/js/cookie.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/js/topus.js" type="text/javascript" charset="utf-8"></script> <script> $(".certain").click(function(){ $('.wrapper').css("display","none") }); $(".wrapper").click(function(){ $(this).css("display","none") }); //充值卡充值弹出弹出框 $(".header").click(function(){ // alert(111) $(".wrapper").css("display","block") }); </script> <script> wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '{$sdk.appId}', // 必填,公众号的唯一标识 timestamp: '{$sdk.timestamp}', // 必填,生成签名的时间戳 nonceStr: '{$sdk.nonceStr}', // 必填,生成签名的随机串 signature: '{$sdk.signature}',// 必填,签名 jsApiList: [ 'chooseWXPay' ] // 必填,需要使用的JS接口列表 }); </script> </body> </html>