pc官网-充值页面修改
“用lww
5 years ago
parent
8076110f31
commit
97543cebb8
@ -0,0 +1,184 @@
|
||||
.recharge_swiper{
|
||||
margin-top: 0.02rem;
|
||||
width: 100%;
|
||||
height: 2.9rem;
|
||||
}
|
||||
.recharge_swiper>img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.recharge_contain{
|
||||
padding: 0 3.6rem;
|
||||
font-family:PingFang SC;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
.recharge_title{
|
||||
font-size: 0.36rem;
|
||||
color: #292929;
|
||||
font-weight: bold;
|
||||
margin-top: 0.7rem;
|
||||
padding-bottom: 0.33rem;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
}
|
||||
.recharge_title .title{
|
||||
padding-left: 0.26rem;
|
||||
border-left: 0.05rem solid #2BBDEE;
|
||||
}
|
||||
.recharge_select{
|
||||
margin-top: 0.36rem;
|
||||
font-size: 0.28rem;
|
||||
color: #292929;
|
||||
font-weight: 400;
|
||||
}
|
||||
.recharge_input{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.recharge_input>input{
|
||||
width: 4rem;
|
||||
height: 0.6rem;
|
||||
outline: 0;
|
||||
border: 1px solid #D3D3D3;
|
||||
margin-left: 0.33rem;
|
||||
font-size: 0.28rem;
|
||||
}
|
||||
.select_input{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.select_input .title{
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
.select-box{
|
||||
width: 8.5rem;
|
||||
margin-left: 0.33rem;
|
||||
}
|
||||
.select-box .select-box-soon>div{
|
||||
width: 1.5rem;
|
||||
height: 0.6rem;
|
||||
text-align: center;
|
||||
line-height: 0.6rem;
|
||||
font-size:0.2rem;
|
||||
font-weight:400;
|
||||
color:rgba(41,41,41,1);
|
||||
border:1px solid #D3D3D3;
|
||||
margin-bottom: 0.3rem;
|
||||
float: left;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
.select-box .select-box-soon>div:nth-child(4n){
|
||||
margin-right: 0;
|
||||
}
|
||||
.select-box .select-box-soon>div.selectBg{
|
||||
background: url("../images/border-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.select-box .select-box-soon>div:hover:not(.price-input){
|
||||
border:1px solid rgba(3,180,245,1);
|
||||
cursor: pointer;
|
||||
}
|
||||
.select-box .select-box-soon> .price-input{
|
||||
width: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background:rgba(247,247,247,1);
|
||||
}
|
||||
.select-box .select-box-soon> .price-input>input{
|
||||
outline: 0;
|
||||
border: 1px solid #D3D3D3;
|
||||
width: 1rem;
|
||||
height: 0.4rem;
|
||||
margin: 0 0.09rem;
|
||||
font-size: 0.2rem;
|
||||
}
|
||||
.price-show{
|
||||
width: 7.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 0.2rem;
|
||||
border-top: 1px solid #E5E5E5;
|
||||
}
|
||||
.price-show>div:first-child{
|
||||
font-size:0.2rem;
|
||||
font-weight:400;
|
||||
color:rgba(3,180,245,1);
|
||||
}
|
||||
.price-show>div:last-child{
|
||||
font-size:0.2rem;
|
||||
font-weight:400;
|
||||
color:rgba(41,41,41,1);
|
||||
}
|
||||
.price-show>div>span{
|
||||
color: #03B4F5;
|
||||
}
|
||||
.way-price{
|
||||
display: flex;
|
||||
margin-top: 0.58rem;
|
||||
}
|
||||
.way-price .title{
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
.way-box{
|
||||
margin-left: 0.33rem;
|
||||
}
|
||||
.way-select{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.way-select>div{
|
||||
width: 1.80rem;
|
||||
height: 0.6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #D3D3D3;
|
||||
font-size:0.22rem;
|
||||
font-weight:400;
|
||||
color:rgba(41,41,41,1);
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
.way-select>div.wayBg{
|
||||
background: url("../images/border-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.way-select>div:hover{
|
||||
border: 1px solid #03B4F5;
|
||||
cursor: pointer;
|
||||
}
|
||||
.way-select>div>img{
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
.way-show{
|
||||
width: 7.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 0.2rem;
|
||||
border-top: 1px solid #E5E5E5;
|
||||
}
|
||||
.way-show>div{
|
||||
font-size:0.2rem;
|
||||
font-weight:400;
|
||||
}
|
||||
.way-show>div>span{
|
||||
color: #03B4F5;
|
||||
}
|
||||
.recharge-btn{
|
||||
width: 3rem;
|
||||
height: 0.7rem;
|
||||
font-size:0.28rem;
|
||||
font-weight:500;
|
||||
color:rgba(255,255,255,1);
|
||||
margin-top: 0.49rem;
|
||||
background-color: #03B4F5;
|
||||
text-align: center;
|
||||
line-height: 0.7rem;
|
||||
border-radius: 0.1rem;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,87 @@
|
||||
$(function() {
|
||||
//钱的数量选择
|
||||
$(".select-box-soon>div:not(.price-input)").click(function(){
|
||||
$(this).addClass("selectBg").siblings("div").removeClass("selectBg");
|
||||
let price = $(this).text().replace("元","");
|
||||
$('#amount').val(price);
|
||||
$(".price-show div span").text(price);
|
||||
$(".price-input input").val("");
|
||||
});
|
||||
|
||||
//输入金额事件
|
||||
$(".price-input input").bind("input propertychange",function(event){
|
||||
$(".price-show div span").text($(".price-input input").val());
|
||||
$('#amount').val($(".price-input input").val());
|
||||
$(".select-box-soon>div:not(.price-input)").removeClass("selectBg");
|
||||
});
|
||||
|
||||
//支付方式选择
|
||||
$(".way-select>div").click(function(){
|
||||
$(this).addClass("wayBg").siblings("div").removeClass("wayBg");
|
||||
let way = $(this).text();
|
||||
$(".way-show>div>span").text(way);
|
||||
$("#apitype").val($(this).data('type'));
|
||||
});
|
||||
|
||||
$(".recharge-btn").click(function () {
|
||||
var that = $('#recharge_form');
|
||||
if($.trim($("#toaccount2").val()).length == 0){
|
||||
layer.msg("充值账号不能为空!");
|
||||
return false;
|
||||
}
|
||||
|
||||
if($.trim($("#retoaccount2").val()) != $.trim($("#toaccount2").val())){
|
||||
layer.msg("两次账号不相同!");
|
||||
return false;
|
||||
}
|
||||
|
||||
if(parseFloat($("#amount").val()) <=0){
|
||||
layer.msg("充值金额不正确");
|
||||
return false;
|
||||
}
|
||||
var apitype = $("#apitype").val();
|
||||
if (apitype == 'weixin') {
|
||||
var loading = new Cute.ui.dialog().loading('加载中...',{mask:true});
|
||||
Cute.api.post("/media.php/Recharge/beginPay",that.serialize(), function(json){
|
||||
loading.close();
|
||||
if(json.status > 0){
|
||||
|
||||
that.dialog = new Cute.ui.dialog().layer('微信扫码支付',{
|
||||
content: json.html,
|
||||
mask: true,
|
||||
open:{
|
||||
// callback: function(){
|
||||
// that.timer = setInterval(function(){
|
||||
// Cute.api.post('pay/wx_order_query',{'order_no':json.data.out_trade_no}, function(data){
|
||||
// if(data.status > 0){
|
||||
// pay_callback();
|
||||
// clearInterval(that.timer);
|
||||
// }
|
||||
// });
|
||||
// },4000);
|
||||
// }
|
||||
},
|
||||
buttons: [{
|
||||
title: '已完成支付',
|
||||
type: 'main',
|
||||
close: true,
|
||||
// func: function(){
|
||||
// location.href = "/account/order.html";
|
||||
// }
|
||||
}, {
|
||||
title: '重新选择',
|
||||
type: 'cancel',
|
||||
close: true
|
||||
}]
|
||||
});
|
||||
}else{
|
||||
new Cute.ui.dialog().alert(json.info);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$("#recharge_form").submit();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue