You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

650 lines
18 KiB
HTML

2 years ago
<!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>