NN2023021801/app/api/view/h5/user/register_h5.html

{extend name='public/base'}
{block name="title"}
<title>注册</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
{/block}
{block name="css"}
<link rel="stylesheet" href="__H5CSS__/user.css">
<script src="__H5JS__/code.js"></script>
{/block}
{block name="style"}
<style>
    .register-box ._nc .stage1 .slider {left: 0;right: 0;}
    .register-box ._nc .stage1 {height: 48px;}
    .register-box ._nc .stage1 .slider {height: 48px;box-shadow: none;border: 1px solid #ddd;overflow: hidden;left: 1px;right: 1px;border-radius: 48px;}
    .register-box ._nc .stage1 .track div, ._nc .stage1 .label {line-height: 52px;height: 48px;}
    .register-box ._nc .stage1 .button {width: 52px;height: 48px;background: #f9f9f9;}
</style>
{/block}
{block name="content"}
<div class="ect-wrapper user-register" id="form">

<!--    <div class="logo"><img src="__H5IMAGE__/user/kefu.png" style="position: fixed;right: 60px;top: 60px;width: 80px;height: 80px;" onclick="kefuact()"></div>-->


    <div class="logo"><img src="__H5IMAGE__/user/ic_dl_logo@3x.png"></div>
    <div class="register-box">
        <p class="title">{$info.name}注册</p>

        <div class="input-box">

            <input placeholder="请输入用户名" type="text" v-model.trim="username" id="user_name" required="required">
        </div>

        <div class="input-box">
            <img src="__H5IMAGE__/user/ic_phone@3x.png" style="width: 12px;height: 18px;">
            <input placeholder="请输入手机号" type="number" v-model.number="mobile" id="mobile" required="required">
        </div>



        <div class="input-box code">
            <input placeholder="请输入验证码" type="text" maxlength="6" v-model="code" required="required">
            <span class="send-code send-message">获取验证码</span>

            <div style="line-height: 18px;margin-top: 8px;">
                <span class="content" style="color: #FF6E2B;font-size: 12px;line-height: 18px;">提示：如若短信验证码发送成功，因运营商原因稍会有延迟，请确定手机号码不在欠费停机状态，以及信号良好情况如果一直没收到请联系客服!</span>
            </div>

        </div>
        <br>
        <br>


        <div id="__nc" style="margin-top: 50px;margin-left:auto;margin-right:auto;width:100%;height:48px;margin-bottom: 2rem;">
            <div id="nc" style="width: 100%;"></div>
        </div>
        <input type="hidden" id="verify" value="">
        <div class="input-box code">
            <input placeholder="请输入邀请码" id="invite_code" type="text" v-model.trim="invite_code" required="required">
        </div>
        <div class="input-box passed">
            <img src="__H5IMAGE__/user/ic_close_eyes@3x.png" @click="show_password">
            <input placeholder="密码至少8位，必须包含数字/字母" type="password" v-model.trim="password" required="required">
        </div>

    </div>
    <div class="user-agreement">
        <var class="ect-click-ico" @click="setXy" style="height: 12px;display: inline-block;vertical-align: sub;"><i></i></var>
        <span class="content">注册即代表您已同意<var onclick="redirect('userAgreementInfo')">《用户协议》</var>和<var
                onclick="redirect('privateInfo')">《隐私政策》</var></span>
    </div>

<!--    <div id="downapp" class="user-agreement">-->
<!--        <span class="content">app下载地址(请复制用浏览器打开)：http://api.meikangjw.com/api/downapp</span>-->
<!--    </div>-->




    <div class="click-btn"><a href="javascript:void(0)" style="background-color: rgb(233,26,33)" @click="register">注册</a></div>
</div>
{/block}
{block name="footer"}
{/block}
{block name="script"}
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>

<script>



    var registerVue = new Vue({
        el: '#form',
        data: {
            mobile: '', // 电话
            code: '', //验证码
            invite_code: "{$code|default=''}", // 邀请码
            password: '', // 密码
            xy: '', // 协议
            username:''
        },
        mounted() {
            if (this.invite_code) {
                $('#invite_code').attr('disabled', 'true');
            }
        },
        methods: {
            register: function () {

                var appdownurl = "{$downappurl}";
                if (!this.mobile) {
                    layer.msg('电话不能为空');
                    return false;
                }
                if (!this.code) {
                    layer.msg('验证码不能为空');
                    return false;
                }
                if (!this.invite_code) {
                    layer.msg('邀请码不能为空');
                    return false;
                }
                if (!this.password) {
                    layer.msg('密码不能为空');
                    return false;
                }
                if (!this.xy) {
                    layer.msg('请勾选协议');
                    return false;
                }
                axios
                    .post('registerH5web', {
                        mobile: this.mobile,
                        code: this.code,
                        invite_code: this.invite_code,
                        password: this.password,
                        xy: this.xy,
                        user_name: this.username
                    })
                    .then(function (result) {
                        if (result.data.code == 200) {
                            setTimeout(function () {
                                location.href = appdownurl;
                                // $('#downapp').attr('hidden', 'false');
                            }, 500)
                        }
                        layer.msg(result.data.msg);
                    })
                    .catch(function (error) {
                        layer.msg('注册失败');
                    })

            },
            setXy: function (even) {
                var obj = even.currentTarget; // 当前选择对象
                $(obj).toggleClass('on');
                if ($(obj).hasClass('on')) {
                    this.xy = 1;
                } else {
                    this.xy = '';
                }
            },
            show_password: function (even) {
                var obj = even.currentTarget; // 当前选择对象
                $(obj).toggleClass('on');
                if ($(obj).hasClass('on')) {
                    $(obj).attr('src', '__IMAGE__/user/ic_dlzc_eyes@3x.png').next().attr('type', 'text');
                } else {
                    $(obj).attr('src', '__IMAGE__/user/ic_close_eyes@3x.png').next().attr('type', 'password');
                }
            }
        },

    });

    /**
     * 发送短信
     */
    new CatRegister('h5_register', 'register');

    /**
     * 人机验证
     */
    var appkey = "{$appkey}";
    var scene = "{$scene}";
    var nc_token = [appkey, (new Date()).getTime(), Math.random()].join(':');

    var nc = NoCaptcha.init({
        renderTo: '#nc',
        appkey: 'FFFF0N0000000000A9E1',
        scene: 'nc_message_h5',
        token: nc_token,
        trans: {"key1": "code200"},
        elementID: ["usernameID"],
        is_Opt: 0,
        language: "cn",
        timeout: 10000,
        retryTimes: 5,
        errorTimes: 5,
        inline: false,
        apimap: {
            // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
            // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
        },
        bannerHidden: false,
        initHidden: false,
        callback: function (data) {
            var arr = {
                nc_token: nc_token,
                csessionid: data.csessionid,
                sig: data.sig,
                appkey: appkey,
                scene: scene
            };
            var verify = JSON.stringify(arr);
            $('#verify').val(verify);
        },
        error: function (s) {
        }
    });
    NoCaptcha.setEnabled(true);
    nc.reset();//请务必确保这里调用一次reset()方法

    NoCaptcha.upLang('cn', {
        'LOADING': "加载中...",//加载
        'SLIDER_LABEL': "请向右滑动验证",//等待滑动
        'CHECK_Y': "验证通过",//通过
        'ERROR_TITLE': "非常抱歉，这出错了...",//拦截
        'CHECK_N': "验证未通过", //准备唤醒二次验证
        'OVERLAY_INFORM': "经检测你当前操作环境存在风险，请输入验证码",//二次验证
        'TIPS_TITLE': "验证码错误，请重新输入"//验证码输错时的提示
    });

    function kefuact(){
        location.href = 'https://live.easyliao.com/live/chat.do?c=27923&g=62563&config=93894';
    }
</script>
{/block}
{block name="share"}{/block}