{yun:}include file="$wapstyle/member/header.htm"{/yun}
<div id="yunvue" class="none">
    <form id="binding_form">
		{yun:}if $smarty.get.type=="moblie"{/yun}
        <div class="verification_form">
            <div class="verification_form_Mobile">
                <input type="number" name="moblie" :value="moblie" @input="moblieInput" placeholder="请输入手机号码">
            </div>
            <div class="verification_form_Mobile">
                <input type="text" name="authcode" @input="authcodeInput" :value="authcode" placeholder="请输入图片验证码" style="width: 40%">
                <div class="verification_Mobile_verification">
                    <img id="vcode_img" :src="authcodeUrl" onclick="checkCode('vcode_img');" width="100%" height="100%">
                </div>
            </div>
            <div class="verification_form_code">
                <input type="number" name="code" maxlength="6" placeholder="请输入验证码">
                <div class="verification_form_text" onclick="throttle(getcode)" v-if="codeview">获取验证码</div>
                <div class="verification_form_text" v-else>{{flag}}秒</div>
            </div>
            <div class="verification_form_btn" onclick="formSubmit()">确认</div>
        </div>
		{yun:}/if{/yun}
		
		{yun:}if $smarty.get.type=="email"{/yun}
        <div class="verification_form">
            <div class="verification_form_Mobile">
                <input type="text" name="email" :value="email" @input="emailInput" placeholder="请输入邮箱">
            </div>
            <div class="verification_form_Mobile">
                <input type="text" name="authcode" @input="authcodeInput" :value="authcode" placeholder="请输入图片验证码" style="width: 40%">
                <div class="verification_Mobile_verification">
                    <img id="vcode_img" :src="authcodeUrl" onclick="checkCode('vcode_img');" width="100%" height="100%" />
                </div>
            </div>
            <div class="verification_form_btn" onclick="formSubmit()">发送验证邮件</div>
        </div>
		{yun:}/if{/yun}
    </form>
</div>

<script>
    var dsq = [];
    var type = '{yun:}$smarty.get.type{/yun}';
    type = type ? type : 'moblie';
    var yunvue = new Vue({
        el: '#yunvue',
        data: {
            moblie: '',
            email: '',
            authcode: '',
            codeview: true,
            flag: 120,
			authcodeUrl: '{yun:}$config.sy_wapdomain{/yun}/authcode.inc.php'
        },
        created() {
            this.getInfo();
        },
        methods: {
            getInfo: function () {
                showLoading();
                var that = this;
                $.post('{yun:}url d=wxapp h=user m=index c=getInfo{/yun}', {rand: Math.random()}, function (data) {
                    hideLoading();
                    that.moblie = data.data.telphone ? data.data.telphone : '';
                    that.email = data.data.email ? data.data.email : '';
                    that.islook = true
                    $("#yunvue").css('display', 'block');
                }, 'json');
            },
            moblieInput: function (e) {
                this.moblie = e.target.value;
            },
            emailInput: function (e) {
                this.email = e.target.value;
            },
            authcodeInput: function (e) {
                this.authcode = e.target.value;
            },
            pageTo: function (url) {
                window.location.href = url;
            }
        }
    });

    function getcode() {
        let moblie = yunvue.$data.moblie;
        let authcode = yunvue.$data.authcode;

        if (moblie == '' || moblie == undefined) {
            return showToast('请先输入手机号');
        } else if (!isjsMobile(moblie)) {
            return showToast('请填写正确的手机号');
        }
        if (authcode == '') {
            return showToast('请输入图片验证码');
        }
        var param = {
            str: moblie,
            code: authcode
        };
        showLoading();
        $.post(wapurl + "/index.php?c=ajax&a=mobliecert", param, function (data) {
            hideLoading();
            if (data) {
                var res = JSON.parse(data);
                showToast(res.msg, 2, function () {
                    if (res.error == 1) {
                        countdown();
                    } else if (res.error == 106) {
                        showToast(data.msg);
                        checkCode('vcode_img');
                        yunvue.$data.codeview = true;
                    }
                });
            }
        });
    }

    function countdown() {
        if (yunvue.$data.flag > 0) {
            yunvue.$data.codeview = false;
            let t = setTimeout(function () {
                yunvue.$data.flag -= 1;
                yunvue.$data.flag = yunvue.$data.flag;
                countdown();
            }, 1000);
            dsq.push(t);
        } else {
            yunvue.$data.codeview = true;
            yunvue.$data.flag = 120;
        }
    }

    function formSubmit() {
        var field = getFormValue('binding_form');
        let paramer = {};
        if (type == 'moblie') {
            if (field.moblie == '') {
                return showToast('请填写手机号');
            } else if (!isjsMobile(field.moblie)) {
                return showToast('请填写正确的手机号');
            }
            if (field.authcode == '') {
                return showToast('请填写图片验证码');
            }
            paramer['moblie'] = field.moblie;
            if (field.code == '') {
                return showToast('请填写短信验证码');
            }
            paramer['code'] = field.code;
        } else if (type == 'email') {
            if (field.email == '') {
                return showToast('请填写邮箱');
            } else if (!check_email(field.email)) {
                return showToast('邮箱格式错误');
            }
            if (field.authcode == '') {
                return showToast('请填写图片验证码');
            }
            paramer['email'] = field.email;
            paramer['authcode'] = field.authcode;
            paramer['type'] = 'wap';
        }
        if (type == "moblie") {
            var url = '{yun:}url d=wxapp h=user m=set c=bindingbox{/yun}';
            paramer['id'] = 'tel';
        } else {
            var url = '{yun:}url m=wap c=ajax a=emailcert{/yun}';
            paramer['id'] = type;
        }

        showLoading();
        $.post(url, paramer, function (data) {
            hideLoading();
            if (data.error == 0) {
                if (type == 'moblie') {
                    showToast('绑定成功', 2, function () {
                        goBack();
                    });
                } else if (type == 'email') {
                    showToast('邮件发送成功', 2, function () {
                        goBack();
                    });
                }
            } else {
                if (type == 'email') {
                    checkCode('vcode_img');
                }
                showToast(data.msg);
            }
        }, 'json');
    }
</script>
</body>
</html>