<!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>