reg_firend.html 5.4 KB
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <script src="http://kindapp.w.bronet.cn/A6079080424317/assets/js/fontsize.js"></script>
    <link rel="stylesheet" href="http://kindapp.w.bronet.cn/A6079080424317/assets/css/api.css"/>
    <link rel="stylesheet" href="http://kindapp.w.bronet.cn/A6079080424317/assets/icon/iconfont.css">
    <title>邀友有赚</title>
    <style>
        .friend_top {
            background: url("http://kindapp.w.bronet.cn/A6079080424317/assets/image/friend.png") no-repeat;
            background-size: cover;
            height: 4.55rem;
        }

        .friend_box {
            width: 86%;
            margin: -3.26rem auto 0 auto;
            background-color: #fff;
            overflow: hidden;
        }

        .friend_box_img {
            background: url("http://kindapp.w.bronet.cn/A6079080424317/assets/image/firend1.jpg");
            width: 63%;
            height: 2.28rem;
            line-height: 2.28rem;
            text-align: center;
            margin: 0.53rem auto 0.24rem auto;
            background-size: cover;
            font-size: 15px;
            color: #fff;
        }

        .friend_price {
            font-size: 36px;
        }

        .friend_tips {
            font-size: 12px;
            color: #424242;
            text-align: center;
        }

        .friend_input_box {
            margin: 0.56rem auto;
            width: 63%;
        }

        .friend_input {
            border-bottom: 1px solid #ededed;
            font-size: 12px;
            color: #424242;
            margin-bottom: 0.4rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .friend_input input {
            padding: 0.2rem 0;
            width: 50%;
            flex: 1;
        }

        .friend_input::-webkit-input-placeholder {
            color: #C2C1C3;
            font-size: 12px;
        }

        .friend_code {
            border: 1px solid #858485;
            padding: 0.08rem 0.13rem;
            border-radius: 0.16rem;
            color: #858485;
            font-size: 10px;
            text-align: center;
        }

        .friend_btn {
            width: 63%;
            margin: 0 auto;
            background-color: #dbb25f;
            color: #fff;
            font-size: 15px;
            text-align: center;
            padding: 0.17rem 0;
            border-radius: 0.16rem;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="friend_top"></div>
    <div class="friend_box">
        <div class="friend_box_img">
            <div v-if="type==1"><span></span><span class="friend_price">1000</span><span>元消费金</span></div>
            <div v-else><span></span><span class="friend_price">20</span><span>元首单奖励</span></div>
        </div>
        <div class="friend_tips">健康提升新选择,为健康为投资</div>
        <div class="friend_input_box">
            <div class="friend_input"><input type="text" placeholder="请输入手机号" v-model="tel"></div>
            <div class="friend_input"><input type="text" placeholder="请输入验证码" v-model="code">
                <span v-if="show" @click="getCode" class="friend_code">获取验证码</span>
                <span v-else class="friend_code">{{count}}S</span>
            </div>
        </div>
        <div class="friend_btn">立即领取</div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="http://kindapp.w.bronet.cn/A6079080424317/assets/js/api.js"></script>
<script type="text/javascript" src="http://kindapp.w.bronet.cn/A6079080424317/assets/js/public.js"></script>
<script type="text/javascript" src="http://kindapp.w.bronet.cn/A6079080424317/assets/js/fastclick.js"></script>
<script>
    new FastClick(document.body);
</script>
<script type="text/javascript" src="http://kindapp.w.bronet.cn/A6079080424317/assets/js/vue.min.js"></script>
<script type="text/javascript" src="http://kindapp.w.bronet.cn/A6079080424317/assets/js/axios.min.js"></script>
<script type="text/javascript" src="http://kindapp.w.bronet.cn/A6079080424317/assets/icon/iconfont.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true,
            count: '',
            timer: null,
            type: 1,
            invite_id: '',
            tel:'',
            code:''
        },
        created: function () {
            this.type = getUrlParam('type');
            this.invite_id = getUrlParam('form');
            alert(this.invite_id);
        },
        methods: {
            getCode: function () {
                const TIME_COUNT = 60;
                if (!app.timer) {
                    app.count = TIME_COUNT;
                    app.show = false;
                    app.timer = setInterval(function () {
                        if (app.count > 0 && app.count <= TIME_COUNT) {
                            app.count--;
                        } else {
                            app.show = true;
                            clearInterval(this.timer);
                            app.timer = null;
                        }
                    }, 1000)
                }
            },
        }
    })
</script>