<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>购买商品</title> <link href="__CSS__/xg_common.css" rel="stylesheet" > <style> html{ } body{ min-height: 100vh; margin: 0px auto; font:14px/1.42858 '微软雅黑'; background-color: #f2f2f2; position: relative; } h1,h2,h3,h3,h5,h6,ul,li,ol,p{ margin: 0; padding: 0; } .header,.footer{ position: fixed; left: 0px;right: 0px; z-index: 2; } .header .xg-title{ margin: 0px; text-align: center; font-size: .49rem; font-weight: normal; } /*商品信息模块*/ .good-info{ margin-bottom: 0.14rem; } .good-info h5{ margin-bottom: 0.12rem; color: rgb(151,151,151); font-size: 0.32rem; font-weight: normal; } .good-info-left{ display: block; float: left; margin-right: 0.32rem; } .good-info-img{ display: inline-block; width: 3.5rem; } .good-info-right{ overflow: hidden; } .good-info-desc{ font-size: 0.43rem; color: rgb(51,51,51); margin-bottom: 0.72rem; font-weight: bold; } .good-info-tags{ display: inline-block; color: rgb(151,151,151); padding: 0.01rem 0.12rem; border: 1px solid currentColor; border-radius: 20px; font-size: 0.3rem; } .good-info-price{ color: rgb(217,65,50); float: right; font-size: 0.4rem; vertical-align: sub; margin-top: 0.05rem; } .good-info-price>small{ font-size: 0.2rem; } /*支付方式模块*/ .pay-way{ margin-bottom: 0.14rem; padding-bottom: 0; } .pay-way .pay-way-desc{ font-size: 0.4rem; color: #d94133; padding-bottom: 0.16rem; font-weight:bold; } .pay-way-list{ list-style: none; font-size: 0.4rem; line-height: 1.32rem; color: rgb(102,102,102); } .pay-way-item{ border-top: 1px solid #f2f2f2; padding-left: 0.66rem; background-size: 0.54rem 0.54rem; background-position: left center; background-repeat: no-repeat; } .pay-way-item.zfb{ background-image: url("__IMG__/trade/icon_zhifubao@3x.png"); } .pay-way-item.wx{ background-image: url("__IMG__/trade/icon_weixin@3x.png"); } .pay-way-right{ float: right; } .pay-way-right > .pay-price{ float: left; color: rgb(217,65,50); display: none; } .pay-way-right > .icon-check{ float: right; width: 0.7rem; height: 1.32rem; font-size: 0; background: url("__IMG__/trade/btn_normal_weixuan@3x.png") no-repeat center center / 0.5rem 0.5rem; } .pay-way-item.active .pay-way-right > .pay-price{ display: inline-block; } .pay-way-item.active .pay-way-right > .icon-check{ background-image: url("__IMG__/trade/btn_selected_xuanzhong@3x.png"); } /*温馨提示模块*/ .xg-tips h5{ color: rgb(51,51,51); margin: 0px 0px 0.5rem; font-size: 0.43rem; font-weight: normal; } .tips-list{ margin: 0; padding: 0; list-style: none; } .tips-item{ line-height: 0.5rem; font-size: 0.33rem; margin-bottom: 0.16rem; color: rgb(151,151,151); } .pop-window { display:none; -webkit-overflow-scrolling: touch; overflow:hidden; position:fixed; top:0; left:0; bottom:0; right:0; width:100vw; height:100vh; z-index:999; background:rgba(0,0,0,.2); } .pop-window .pop-box { position:relative; top:26%; margin:0 auto 0; width:80vw; background:#FFF; border-radius:3vw; max-width:293px; } .pop-window .pop-page {position:relative;margin:0 auto;width:100%;height:100%;background:#FFF;} .pop-window .pop-page .pop-wrap,.pop-window .pop-page .pop-wrap>div {height:100%;} .pop-window .pop-box .pop-wrap { padding:5vw 7vw; } .pop-window .pop-box .pop-wrap .pop-title { position:relative; margin:0; color:#707070; font-size:2.7rem; font-weight:normal; text-align:center; } /* .pop-window .pop-box .pop-wrap .pop-title span { color:#18B1EA; }*/ .pop-window .pop-box .pop-wrap .pop-close { position:absolute; right:-1rem; top:-1rem; font-size:2.2rem; color:#999; } .pop-window .pop-box .pop-wrap .pop-content { color:#999; font-size:1.8rem; position:relative; margin-top:.2rem; } .pop-window .pop-box .pop-wrap .pop-content .des { color:#666; display:block; } .pop-window .pop-box .pop-wrap .pop-btnbox { overflow:hidden; clear:both; position:relative; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-btn { width:45%; text-align:center; padding:.4rem 0; font-size:2.6rem; border-radius:4rem; display:block; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-cancel { color:#707070; border:1px solid #F1F1F1; float:left; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-confirm { color:#FFF; background:#18B1EA; border:1px solid #18B1EA; float:right; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-confirm.disabled { background:#CCC; border-color:#CCC; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-input { padding:.8rem 0rem .8rem 8rem; width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; color:#18B1EA; border:none; border-radius:2rem; font-size:3rem; line-height:1; vertical-align: middle; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-span { width: 205px; box-sizing: border-box; -webkit-box-sizing: border-box; color: #18B1EA; font-size: 2rem; line-height: 3rem; vertical-align: middle; overflow-x: scroll; display: inline-block; } .pop-window .pop-box .pop-wrap .pop-btnbox .prefix { position:absolute; left:.5rem; top:0rem; font-size:1.6rem; display:block; text-align: left; vertical-align:middle; line-height: 3rem; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-copy { background:#18B1EA; color:#FFF; box-sizing:border-box; -webkit-box-sizing:border-box; position:absolute; top:0; right:0; height:100%; width:7rem; font-size:2rem; text-align:center; padding-top:.8rem; border-top-right-radius:2rem; border-bottom-right-radius:2rem; } .pop-window .pop-box .pop-wrap .pop-textarea { width:100%; height:26vh; padding:.4rem; font-size:1.5rem; border:1px solid #DCDCDC; box-sizing:border-box; -webkit-box-sizing:border-box; } .totalnum { position:absolute; bottom:-1.2rem; right:.3rem; font-size:1.2rem; } .pop-dialog { display:none; position:fixed; z-index:1999; top:0; left:0; right:0; text-align:center; width:100vw; height:100vh; } .pop-dialog span { background:rgba(0,0,0,.6); top:50%; color:#FFF; display:inline-block; line-height:2; position:relative; padding:.5rem 2rem; word-break:break-all; max-width:60vw; } .pop-table { display:table; width:100%;height:100%; position:relative; } .pop-table .pop-wrap{display:table-cell;width:100%;height:100%;vertical-align:middle;text-align:center;} .pop-row { display:table-row; position:relative; } .pop-cell { display:table-cell; position:relative; vertical-align:middle; } .pop-cell.pop-mark{ width:24%; } .pop-form { display:none; -webkit-overflow-scrolling: touch; overflow:hidden; position:fixed; top:0; left:0; bottom:0; right:0; width:100vw; height:100vh; z-index:999; background:rgba(0,0,0,.5); } .pop-form .pop-box { position:relative; top:28%; margin:0 auto 0; width:90vw; background:#FFF; border-radius:3vw; } .pop-form .pop-box .pop-wrap { padding:4vw 6vw 6vw; } .pop-form .pop-box .pop-wrap form { padding:1px; } .pop-form .pop-box .pop-wrap .pop-content { position:relative; width:100%; } .pop-form .pop-title { position:relative; margin:0; color:#707070; font-size:3.4rem; font-weight:100; text-align:center; } .pop-form .pop-box .pop-wrap .pop-close { position:absolute; right:0rem; top:0rem; font-size:2.2rem; color:#999; } .pop-form .pop-table-wrap { padding-top:1.7rem; width:100%; position:relative; overflow:hidden; } .pop-form .pop-table-wrap .pop-table { } .pop-form .pop-table-wrap .pop-table .pop-cell { height:6rem; font-size:2.2rem; } .pop-form .pop-table-wrap .pop-table .pop-cell:first-child { width:3.5rem; white-space: nowrap; } .pop-form .pop-table-wrap .pop-table .pop-cell:last-child { text-align:right; } .pop-form .pop-table-wrap .pop-table .pop-cell .pgood { } .pop-form .pop-table-wrap .pop-table .pop-cell p { margin:0; } .pop-form .pop-table-wrap .pop-table .pop-row~.pop-row { border-top:1px solid rgba(231,231,231,.5); } .pop-form .pop-table-wrap .pop-table .paddress { font-size:0.48rem; width:88%; } .pop-form .pop-table-wrap .pop-table .paddress { text-align: left; float: right; } .pop-form .pop-table-wrap .pop-table .paddress span { display:block; text-overflow:ellipsis; overflow:hidden; } .pop-form .pop-table-wrap .pop-table .pop-cell .icon-right { position:absolute; top:34.3%; right:0.2rem; width:0.3rem; height:0.54rem; display:block; } .pop-form .pop-butn-box { padding-top:0.58rem; } .pop-form .pop-butn-box .butn { width:100%; -webkit-appearance:none; font-size:3rem; color:#FFF; display:inline-block; padding:0.6rem 0; background:#18B1EA; border-radius:3rem; border:none; margin:0; } .pop-message,.pop-cue,.pop-notice,.pop-hint,.pop-share,.pop-prompt,.pop-prompt2,.pop-form,.pop-bind,.pop-login,.pop-pay,.pop-pay-temp,.pop-partir,.pop-bookmark,.pop-load {display:none;position:fixed;z-index:1999;top:0;left:0;right:0;text-align:center;width:100vw;height:100vh;} .pop-message .pop-box {background:rgba(0,0,0,.84);position:relative;color:#FFF;display:inline-block;position:relative;word-break:break-all;border-radius:0.2rem;width:4.64rem;height:4.64rem;} .pop-message .pop-box .pop-image {width:1.94rem;height:1.4rem;margin-top:1.12rem;} .pop-message .pop-box .pop-text {margin:0.76rem 0 0;font-size:0.52rem;color:#FFF;} .pop-info {background-color:rgba(0,0,0,0);} .pop-info .pop-page {display:table;background:transparent;} .pop-info .pop-wrap {display:table-cell;vertical-align:middle;} .pop-info .publishing {width:4.5rem;height:3rem !important;margin:0 auto;background:#333;border-radius:0.4rem;} .pop-info .publishing img {margin:0 auto;display:block;width:1.5rem;padding:0.5rem 0 0.1rem;} .pop-info .publishing span{font-size:.38rem;color:#FFF;text-align:center;display:block;} .look_result {color:#18B1EA;font-size:.32rem;cursor:pointer;width:3.5rem;height:1.4rem;line-height:1.4rem;margin:0 auto;background:#FFF;display:inline-block;border-radius:3px;} @media screen and (min-width: 768px) { html { font-size:48px!important; } .look_result {font-size:.44rem;width:5rem;height:2rem;line-height:2rem;} } </style> </head> <body> <header class="header"> <a class="xg-back" href="javascript:;" onclick="history.back();"></a> <h1 class="xg-title">购买商品</h1> </header> <main class="xg-main"> <div class="xg-container"> <div class="xg-module good-info"> <h5>商品信息</h5> <div class="good-info-container clf"> <img class="good-info-left good-info-img" src="__IMG__/pic_zhanghao@3x.png" width="160" alt=""> <div class="good-info-right"> <div class="good-info-desc">{$data.title}</div> <span class="good-info-tags">{$data.game_name}</span> <strong class="good-info-price"><small>¥</small>{$data.price}</strong> </div> </div> </div> <div class="xg-module pay-way"> <if condition="I('time') neq '' "> <p class="pay-way-desc"></p> <script type="text/javascript" src="__JS__/jquery-1.11.3.min.js"></script> <script type="text/javascript"> /*倒计时*/ var intDiff = parseInt("{:I('time')}");//倒计时总秒数量 function timer(intDiff){ var jsdtime = $('.pay-way-desc').html(alo(intDiff)); if(intDiff>0) var a = setInterval(function(){ --intDiff>=0?jsdtime.html(alo(intDiff)):(clearInterval(a)); }, 1000); } function alo(intDiff) { var day=hour=minute=second=0; if (intDiff>0) { day = Math.floor(intDiff / (60 * 60 * 24)); hour = Math.floor(intDiff / (60 * 60)) - (day * 24); minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60); second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); } return '请在'+minute+'分'+second+'秒内完成购买'; } $(function(){ timer(intDiff); }); </script> <else/> <p class="pay-way-desc">订单有效支付时间为30分钟</p> </if> <ul class="pay-way-list" id="pay_way"> <li class="pay-way-item zfb active" data-way="1"> <span class="way-type">支付宝支付</span> <span class="pay-way-right"><strong class="pay-price">-{$data.price}</strong><i class="icon-check"></i></span> </li> <li class="pay-way-item wx" data-way="2"> <span class="way-type">微信支付</span> <span class="pay-way-right"><strong class="pay-price">-{$data.price}</strong><i class="icon-check"></i></span> </li> </ul> </div> <div class="xg-module xg-tips"> <h5>温馨提示</h5> <ul class="tips-list"> <li class="tips-item">1.角色信息已通过平台官网审验;</li> <li class="tips-item">2.购买后,登录游戏,选择【购买到的小号】进入游戏查验角色;</li> <li class="tips-item">3.交易过程仅限小号转移,不存在游戏号交易或换绑行为,无需担心角色找回;</li> <li class="tips-item">4.购买后<span class="clo_red">不支持退货</span></li> </ul> </div> </div> </main> <footer class="footer" id="submit_data"> <input type="hidden" name="way" value="1"> <input type="hidden" name="pay_amount" value="{$data.price}"> <input type="hidden" name="id" value="{$data.id}"> <input type="hidden" name="small_id" value="{$data.small_id}"> <button type="button" class="xg-btn xg-btn-submit xg-btn-primary jssubmit">确认支付</button> </footer> <div class="popmsg pop-dialog"></div> <div class="popwin pop-window"><div class="pop-table"><div class="pop-wrap"></div></div></div> <!-- <div class="popwin2 pop-window" style="display:block;"><div class="pop-table"><div class="pop-wrap"><a class="look_result"><span>查看支付结果</span></a></div></div></div> --><script src="__JS__/jquery-1.11.1.min.js"></script> <script src="__JS__/xg_mobile.js"></script> <script src="__JS__/pop.lwx.min.js"></script> <script> $(function() { var pmsg = $(".popmsg").pop(); var popwin = $('.popwin').pop(); $('input[name="way"]').val($('#pay_way li.active').attr('data-way')); $('#pay_way li').click(function() { var that = $(this); that.siblings('li').removeClass('active'); that.addClass('active'); $('input[name="way"]').val(that.attr('data-way')); return false; }); $('.jssubmit').click(function() { var that = $(this),form = $('#submit_data'); if(that.hasClass('nodisabled')) {return false;} that.addClass('nodisabled'); if(validate(form)) { $.ajax({ type:'post', dataType:'json', url:'{:U("buy_good")}', data:form.find('input').serialize(), success:function(data){ if(parseInt(data.status) == 1) { that.removeClass('nodisabled'); if($('#pay_way li.active').attr('data-way')==1){ window.location.href = data.url; } else { window.location.href = data.url; //popwin.open(400,'<a class="look_result" id="jslookresult"><span>查看支付结果</span></a>'); popwin.find('#jslookresult').on('click',function() { $.ajax({ type:'post', dataType:'json', data:form.find('input').serialize(), url:'{:U("Pay/look")}', success:function(result){ if(parseInt(result.status)==1) { window.location.href = result.url; } else { popwin.close(300); pmsg.msg('支付失败'); } }, error:function(){ popwin.close(300); pmsg.msg('服务器故障,请稍后再试'); } }); return false; }); } } else { if(data.url) { window.location.href=data.url; } else { pmsg.msg(data.info); that.removeClass('nodisabled'); } } }, error:function(){ pmsg.msg('服务器故障,请稍后再试');that.removeClass('nodisabled'); }, }); } else { that.removeClass('nodisabled'); } return false; }); }); function validate(obj) { var way = $.trim(obj.find('input[name="way"]').val()); if(!way) {pmsg.msg('请选择支付方式');return false;} return true; } </script> </body> </html>