reg_firend.html 11.3 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">
    <!--<link rel="stylesheet" href="assets/css/mui.min.css">-->
    <link rel="stylesheet" href="assets/css/weui.min.css">
    <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;
        }
        .joinstep{
            display:flex;
            justify-content: space-between;
            align-items: center;
            margin-top:0.6rem;

        }
        .step{
            color:#CCA756;
            font-size: 0.24rem;

        }
        .line{
            width:2.5rem;
            color:#C3C3C3;
            border: 0.01rem solid #ededed;
        }
        .stepnum{
            display:flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.6rem;
            padding: 0 0.4rem;
        }
        .num{
            color:#0d0d0d;
            font-size: 0.16rem;
            width:0.35rem;
            height:0.35rem;
            background:rgba(216,178,95,1);
            opacity:0.18;
            border-radius:50%;
            text-align: center;
            line-height: 0.35rem;
        }
        .stepline{
            width:1rem;
            height:0.01rem;
            /*color:#C3C3C3;*/
            border: 0.01rem solid #ededed;
        }
        .text{
            display:flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.1rem;
        }
        .steptext{
            width:3rem;
            color:#CCA756;
            font-size: 0.22rem;
            display:inline-block;
            text-align: center;
        }

        .mui-toast-container {
            text-align: center;
            width: 3rem;
            height: 1.6rem;
            position: fixed;
            top: 30%;
            transform: translateY(-1rem);
            left: 40%;
            right: 0;
            margin: 0 auto;
            font-size: 0.3rem;
            -webkit-transition:opacity .3s;
            transition:opacity .3s;
            -webkit-transform:translate(-50%,0);
            /*transform:translate(-50%,0);*/;
            z-index: 888;
        }
        .mui-toast-message {
            width: 3rem;
            height: 1.6rem;
            color:#fff;
            border-radius:6px;
            font-size: 0.3rem;
            text-align: center;
            line-height: 1.6rem;
            background-color:#323232;
            opacity:0.7;
            z-index: 888;

        }
        /*.textline{*/
            /*width:0.05rem;*/
            /*!*height:0.01rem;*!*/
            /*!*border: 0.01rem solid #ededed;*!*/
        /*}*/
    </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" @click="reg_fir">立即领取</div>
        <div class="join" v-if="kind">
            <div class="joinstep">
                <p class="line"></p>
                <p class="step">加入步骤</p>
                <p class="line"></p>
            </div>
            <div class="stepnum">
                <div>
                    <p class="num">1</p>
                </div>
                <p class="stepline"></p>
                <p class="num">2</p>
                <p class="stepline"></p>
                <p class="num">3</p>
                <p class="stepline"></p>
                <p class="num">4</p>
                <p class="stepline"></p>
                <p class="num">5</p>
            </div>
            <div class="text">
                <p class="steptext">登录APP</p>

                <p class="steptext">我的</p>

                <p class="steptext">设置</p>

                <p class="steptext">服务商入口</p>

                <p class="steptext">资质认证</p>
            </div>
        </div>

    </div>
</div>
</body>
</html>
<script type="text/javascript" src="assets/js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="assets/js/jquery-weui.js"></script>
<script type="text/javascript" src="assets/js/mui.min.js"></script>
<script type="text/javascript" src="assets/js/cookie.js"></script>
<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: '',
            invite_type: '',
            kind:true

        },
        created: function () {
            this.type = getUrlParam('type');
            this.invite_id = getUrlParam('form');
            this.invite_type = getUrlParam('invite_type');
            if(this.type==1){
                app.kind=false
            }else if(this.type==2){
                app.kind=true
            }

        },
        methods: {
            getCode: function () {
                var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
                if(! myreg.test(app.tel)){
                    //alert("请输入正确的手机号")
                    mui.toast("请输入正确的手机号");
                    unstock();
                }else{

                    const TIME_COUNT = 60;
                    app.show = false;
                    app.count = TIME_COUNT;

                        var header = {
                            "XX-Device-Type": getDevice(),
                        };
                        var post = {
                            tel: app.tel
                        };
                        getRequest('post', 'home/index/loginBySMS', post, header).then(function (res) {
                            mui.toast(res.data.msg);
                            unstock()
                            if (!app.timer) {
                                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)
                              }
                            // alert(JSON.stringify(res))
                           // alert(res.data.msg)


                        })





                }
            },

            // 好友注册
            reg_fir: function () {
                var header = {
                    "XX-Device-Type": getDevice(),
                    // 'XX-Token': getToken()
                };
                var post = {
                    tel: app.tel,
                    code:app.code,
                    invite_id:app.invite_id,
                    type:app.type

                };
                getRequest('post', '/home/index/checkSMS', post, header).then(function (res) {
                    // alert(JSON.stringify(res))
                    console.log(res)
                    if(res.data.code==0){
                        // alert(res.data.msg)
                        mui.toast(res.data.msg);
                        unstock();
                    }else{
                        // alert("领取成功")
                        mui.toast("领取成功");
                        unstock();
                    }
                })
            }
        }
    })
</script>