lizhen
/
xiaoyou


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