123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">
- <meta name="format-detection" content="telephone=no">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <title>选择支付方式</title>
- <link rel="stylesheet" href="{:client_asset('/css/frontend/vip_power.css')}">
- <script type="text/javascript">
- (function (doc, win) {
- var docEl = doc.documentElement,
- resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
- recalc = function () {
- var clientWidth = docEl.clientWidth;
- if (!clientWidth) return;
- docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
- };
- recalc();
- if (!doc.addEventListener) return;
- win.addEventListener(resizeEvt, recalc, false);
- doc.addEventListener('DOMContentLoaded', recalc, false);
- })(document, window);
- </script>
- <style>
- .rechargeZhezhao{width:100%;height:100%;position:fixed;
- font-size: 0.3rem;
- left:0;top:0;background:rgba(0,0,0,0.5);z-index:-1;opacity:0;-webkit-transition:all 0.1s linear;transition:all 0.1s linear;}
- .rechargeZhezhao.show{opacity:1;z-index:9;}
- .rechargeBoard{background:#F5F5F7;position:absolute;left:0;bottom:0;right:0;
- opacity:0;-webkit-transition:all 0.1s linear;transition:all 0.1s linear;}
- .rechargeZhezhao.show .rechargeBoard{opacity:1;}
- .rechargeBoard .tit{height:0.9rem;line-height:0.9rem;background:#fff;text-align:center;font-size:0.34rem;
- font-family:PingFangSC Medium;color:rgba(58, 74, 90, 1);font-weight: bold;}
- .rechargeBoard ul{width:6.6rem;border-radius:0.16rem;background:#fff;margin:0.4rem auto;padding: 0;}
- .rechargeBoard li{height:0.9rem;display:flex;display:-webkit-flex;align-items:center;}
- .rechargeBoard li .icon{width:0.5rem;height:0.5rem;border-radius:100%;margin:0 0.4rem;
- display:block;}
- .rechargeBoard li .txt{flex:1;}
- .rechargeBoard li .checkbox{width:0.3rem;height:0.3rem;border-radius:100%;margin-right:0.4rem;background:url({:client_asset('/img/frontend/images/icon-check.png')}) center center no-repeat;background-size:100% 100%;}
- .rechargeBoard li.checked .checkbox{background-image:url({:client_asset('/img/frontend/images/icon-checked.png')});}
- .rechargeBoard .btn{width: 100%;
- border-radius: 0;
- padding: 0.1rem 0;
- background:#fff;box-shadow:0 -1px 3px rgba(0,0,0,0.05)}
- .rechargeBoard .btn a{width:6rem;
- display: inline-block;
- height: 0.76rem;background:rgba(205, 35, 37, 1);
- border-radius:0.05rem;display:flex;display:-webkit-flex;margin:0 auto;font-size:0.3rem;font-family:PingFang SC Bold;
- outline: none;
- text-decoration: none;
- color:rgba(255,255,255,1);justify-content:center;align-items:center;-webkit-justify-content:center;-webkit-align-items:center;}
- .gameover-con .gobookstore{outline:none;}
- .rechargeBoard li.card {
- position: relative;
- }
- .rechargeBoard li.card::before{
- content: "";
- position: absolute;
- left: 0.3rem;
- top: 0;
- height: 0.01rem;
- background-color: rgba(0, 0, 0, 0.1);
- width: 6rem;
- }
- .rechargeBoard li.card .checkbox{
- background-image: url({:client_asset('/img/frontend/images/recharge_more.png')});
- width: 0.14rem;
- height: 0.24rem;
- margin-right: 0.48rem;
- }
- .card .txt{
- color: rgba(102, 102, 102, 1);
- }
- </style>
- </head>
- <body>
- <div class="rechargeZhezhao show">
- <div class="rechargeBoard" id="J_rechargeBoard">
- <div class="tit after-scale">立即充值<span class="close"></span></div>
- <ul>
- {foreach name="$data.pay_list" item="vo" }
- <li class="wxpay {$key==0 ? 'checked' : ''}" data-id="{$vo.payment_method}"><img src="{$vo.icon}" class="icon"/><span class="txt">{$vo.p_desc}</span><span class="checkbox"></span></li>
- {/foreach}
- </ul>
- <input type="hidden" name="goods_id" id="goods_id" value="{$data.goods_id}">
- <input type="hidden" name="goods_id" id="activity_id" value="{$data.aid}">
- <div class="btn"><a href="javascript:;" class="J_torecharge">立即支付{$data.money}元</a></div>
- </div>
- </div>
- <script type="text/javascript" src="{:client_asset('/libs/zepto/zepto.min.js')}"></script>
- <script type="text/javascript" src="{:client_asset('/libs/Zepto-Cookie/zepto.cookie.min.js')}"></script>
- <script type="text/javascript" src="{:client_asset('/js/frontend/common.js')}"></script>
- <script type="text/javascript" src="{:client_asset('/js/frontend/app_log.js')}"></script>
- <script>
- $(function () {
- $(document).on("click", 'ul li', function () {
- $(this).parent().find("li").removeClass("checked");
- $(this).addClass("checked");
- });
- $(document).on("click", ".J_torecharge", function () {
- var goods_id = $("#goods_id").val();
- var act_id = $("#activity_id").val();
- var pay_method = $(".checked").attr("data-id");
- var jsonStr = '{"goodsId": '+goods_id+', "payMethod": '+pay_method+', "activityId": '+act_id+'}';
- console.log(jsonStr);
- if (window.cps !== undefined) {
- window.cps.orderPay(jsonStr);
- window.cps.dismissDialogWebView();
- }
- });
- $(".rechargeZhezhao").on("click", function (e) {
- if ($(e.target).hasClass("rechargeZhezhao")) {
- //关闭
- if (window.cps !== undefined) {
- window.cps.dismissDialogWebView();
- }
- }
- });
- });
- </script>
- </body>
- </html>
|