<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="divport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/assets/frontend/recharge/reset.css">
<link rel="stylesheet" href="/assets/frontend/recharge/icon.css">
<title>充值</title>
<style>
.page {
height: 100vh;
width: 100%;
overflow: hidden;
}
.content{
padding-top: 0.40rem;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
margin:0 auto;
width: 8.00rem;
background-color: #f8f8f8;
}
.phone-wrap {
width: 7.50rem;
padding:0 0.15rem 0.15rem;
}
.phone-item {
width: 100%;
height: 0.35rem;
border-bottom: 2px solid #eee;
justify-content: space-between;
}
.phone-item input {
flex:1;
font-size: 0.16rem;
background-color: #f8f8f8;
}
.phone-item .phone-nick{
color:#999999;
font-size: 0.13rem;
}
.recharge-wrap {
width: 7.50rem;
padding: 0.15rem;
padding-top: 0rpx;
padding-bottom: 0rpx;
}
.recharge-title {
font-size: 0.16rem;
font-weight: bold;
}
.exchange-section {
margin-top: 0.10rem;
display: flex;
flex-wrap: wrap;
/* justify-content: space-between; */
}
.exchange-box {
width: 1.25rem;
height: 0.71rem;
border: 0.01rem solid #7D73DC;
border-radius: 0.10rem;
margin-bottom: 0.15rem;
color: #999999;
align-items: center;
justify-content: center;
cursor: pointer;
margin-right: 0.40rem;
}
.exchange-box:nth-child(4n){
margin-right: 0;
}
.exchange-top {
display: flex;
align-items: center;
}
.exchange-pic {
height: auto;
width: 0.18rem;
margin-right: 0.07rem;
}
.diamonds-num {
font-size: 0.16rem;
color: #261A00;
}
/* .actvie {
color: #FFFFFF;
} */
.diamonds-name {
font-size: 0.12rem;
margin-left: 0.04rem;
}
.exchange-price {
font-size: 0.12rem;
margin-top: 0.10rem;
}
.current {
background: linear-gradient(90deg, #629CFF, #7870F1);
box-shadow: 0px 3px 5px 0px rgba(126, 114, 220, 0.59);
color: #FFFFFF !important;
}
.current .diamonds-num{
color: #FFFFFF;
}
.mode-wrap{
width: 7.50rem;
height: 1.15rem;
padding: 0.15rem;
padding-top:0rpx;
}
.mode-wrap .mode-title{
font-size: 0.16rem;
font-weight: bold;
}
.mode-item{
width: 7.50rem;
height: 0.20rem;
justify-content: space-between;
margin-top: 0.10rem;
cursor: pointer;
}
.mode-left{
font-size: 0.14rem;
}
.mode-left .zicon-weixin{
font-size: 0.27rem;
color: #46BB36;
margin-right: 0.07rem;
}
.mode-left .zicon-alipay{
color:#02A9F1;
font-size: 0.27rem;
margin-right: 0.07rem;
}
.pay-ic{
font-size: 0.20rem;
}
.zicon-xuanze{
color: #46BB36;
}
.zicon-xuanze1{
color: #999;
}
.mode-tips{
width: 7.50rem;
align-items: flex-start;
margin-top: 0.20rem;
}
.mode-tips .zicon-tishi{
font-size: 0.14rem;
color: #FFCE00;
margin-top: 8rpx;
}
.mode-tips .mode-txt{
/* width: 2.25rem; */
margin-left: 0.05rem;
color: #999999;
font-size: 0.12rem;
}
.recharge-btn{
width: 2.90rem;
height: 0.40rem;
background: #EEEEEE;
border-radius: 0.20rem;
margin: 0.50rem auto 0.10rem;
font-size: 0.15rem;
font-family: PingFang SC;
font-weight: 500;
cursor: pointer;
}
.recharge-btn.active{
background: linear-gradient(90deg, #629CFF, #7870F1);
color: #FFFFFF;
}
.inpt-section{
margin-bottom: 0.10rem;
width: 100%;
height: 0.50rem;
padding: 0 0.15rem;
line-height: 0;
border-bottom: 1px solid #F1F1F1;
}
.inpt-section .moneyInpt{
font-size: 0.14rem;
color:#333;
/* width: 100%; */
flex:1;
background:transparent;
}
.money-tips{
color:#999999;
font-size: 0.13rem;
}
@media(max-width: 500px) {
.content{
width: 100%;
}
.phone-wrap{
width: 100%;
}
.recharge-wrap{
width: 100%;
}
.mode-wrap{
width: 100%;
}
.mode-item{
width: 100%;
}
form{width:100%} .mode-tips .mode-txt { margin-left: 0.05rem;color: #999999;font-size: 0.12rem;max-width: 3.4rem;line-height: 0.16rem;}
}
.warning{
color:#E6A23C !important;
}
</style>
<script>
!(function(win, doc) {
function setFontSize() {
var docEl = doc.documentElement;
var winWidth = docEl.clientWidth;
doc.documentElement.style.fontSize = (winWidth / 1920) * 100 + "px";
}
var userAgent = navigator.userAgent;
win.addEventListener("resize", function() {
if (navigator.userAgent !== userAgent) {
location.reload();
}
});
setFontSize();
})(window, document);
</script>
</head>
<body>
<div class="page">
<div class="content">
<form method="post" action="/index/recharge/recharge_pc">
<div class="phone-wrap row">
<div class="phone-item row">
<input type="text" name="mobile" placeholder="请输入注册手机号" class="phoneInpt" oninput="onInpt()" autofocus="true"/>
<span class="phone-nick" ></span>
</div>
</div>
<div class="recharge-wrap">
<div class="recharge-title">充值金额</div>
<div class="exchange-section">
<!-- current为激活状态 @click="clickBox(index)"-->
{volist name='conf_list' id='vo'}
<div class="exchange-box column <?php if($i==1){echo 'current';}?>" data-id="{$vo.id}">
<div class="exchange-top">
<img class="exchange-pic" src="/assets/frontend/recharge/images/b-b.png"></img>
<div class="diamonds-num" >{$vo.gold}</div>
<div class="diamonds-name">金币</div>
</div>
<div class="exchange-price">￥{$vo.money}</div>
</div>
{/volist}
</div>
</div>
<div class="inpt-section row">
<input type="number" name="money" placeholder="请输入1-1000任意整数金额" class="moneyInpt" oninput="onMoneyInpt()" />
<span class="money-tips" ></span>
</div>
<div class="mode-wrap" >
<div class="mode-title">充值方式</div>
<div class="mode-item row" data-type="wechat">
<div class="mode-left row">
<div class="zicon zicon-weixin"></div>
<div>微信充值</div>
</div>
<div class="zicon pay-ic zicon-xuanze1"></div>
</div>
<div class="mode-item row" data-type="alipay">
<div class="mode-left row">
<div class="zicon zicon-alipay"></div>
<div>支付宝充值</div>
</div>
<!-- <div class="zicon" :class="choosed ? 'zicon-xuanze' : 'zicon-xuanze1'" @click="changeIcon"></div> -->
<div class="zicon pay-ic zicon-xuanze"></div>
</div>
<div class="mode-tips row">
<div class="zicon zicon-tishi"></div>
<div class="mode-txt">说明：充值前请确认您已满18周岁，金币充值成功后无法退款，不可提现。</div>
</div>
</div>
<input type="submit" class="recharge-btn center active" value="立即充值" />
<input type="hidden" name="pay_type" value="alipay" class="payType">
<input type="hidden" name="rc_id" value="1" class="rcId">
<!--<div class="recharge-btn center active">立即充值</div>-->
</form>
</div>
</div>
</body>
</html>
<script src="/assets/frontend/recharge/jquery.min.js"></script>
<script>
$(".mode-item").click(function (e) {
$(this).find(".pay-ic").removeClass("zicon-xuanze1").addClass("zicon-xuanze");
$(this).siblings().find(".pay-ic").removeClass("zicon-xuanze").addClass("zicon-xuanze1");
var type = $(this).data("type");
$(".payType").val(type);
console.log($(".payType").val());
});
$(".exchange-box").click(function (e) {
$(this).addClass("current").siblings().removeClass("current")
var id = $(this).data("id");
$(".rcId").val(id);
console.log($(".rcId").val());
$(".moneyInpt").val('');
$(".money-tips").html('').removeClass("warning");
});
</script>
<script>
!(function(win, doc) {
function $_getDevice() {
var docEl = doc.documentElement;
const winWidth = docEl.clientWidth;
if(winWidth - 1 < 750){
return 'mobile'
}else if(winWidth - 1 < 1400){
return 'book'
}else {
return 'pc'
}
}
function setFontSize() {
var docEl = doc.documentElement;
var winWidth = docEl.clientWidth;
var device = $_getDevice();
var designSize = device == 'mobile' ? 750 : (device == 'book' ? 1400 : 1920);
var scaleV = 100;
if(device == 'mobile'){
scaleV = 200
}
doc.documentElement.style.fontSize = (winWidth / designSize) * scaleV + "px";
}
var userAgent = navigator.userAgent;
win.addEventListener("resize", function() {
if (navigator.userAgent !== userAgent) {
location.reload();
}
});
setFontSize();
})(window, document);
</script>
<script>
var timer;
function onInpt(){
var phone = $(".phoneInpt").val();
if(!phone){
return;
}
if(timer){
// console.log('正清空中---')
clearTimeout(timer);
timer=null;
}
timer=setTimeout(function(){
$.post("http://mita.lanmaonet.com/api/recharge/check_user", {mobile:phone},
function (data, textStatus, jqXHR) {
console.log(data, textStatus)
if(textStatus === "success"){
// $.messager.alert("系统提示","添加成功",data.message);
if(data.code === 1){
$(".phone-nick").html('昵称: '+data.data.nickname).removeClass("warning");
}else{
$(".phone-nick").html('未搜到该用户').addClass("warning");
}
}else{
alert("系统提示","失败");
}
}
);
},1400);
}
var timer2
function onMoneyInpt(){
if(timer2){
// console.log('正清空中---')
clearTimeout(timer2);
timer2=null;
}
timer2=setTimeout(function(){
var money = $(".moneyInpt").val();
if(! /^([1-9]\d+)$|^[1-9]$/.test(money)){
$(".money-tips").html('金额应大于0正整数').addClass("warning");
}else{
$(".money-tips").html('').removeClass("warning");
$('.exchange-box').removeClass("current");
$(".rcId").val('');
}
},1000)
}
</script>