{extend name="public/base_human"/}
{block name="css"}
<style>
    .icon{
        text-align:center;
        margin-top:50px;
    }

    .msg{
        text-align:center;
        margin:0;
        padding:0;
        font-size:24px;
    }
    .click {
        text-align:center;
        margin-top:10px;
        font-size:14px;
        color:var(--blue);
    }
    .tips{
        text-align:center;
        margin-top:50px;
        font-size:14px;
        color:#aaa;
    }

    .tips .num{
        color:#FF589B;
    }

    .wechat {
        width: 80%;
        display: block;
        margin: 0 auto;
    }
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
>
    <template #title>
        <span class="text-white">提示</span>
    </template>
</van-nav-bar>
<div style="width:100%;height:46px;"></div>
<h3 class="msg">{$msg}</h3>
<h3 class="click" @click="showBind" v-if="'{$msg}' == '请先报名'">若是其他人帮您报名，请点击验证手机号</h3>
<p style="text-align: center" @click="toUrl"><van-button type="success">点我进入下一步</van-button></p>
<p class="tips">请务必加下方工作人员微信，以便了解活动最新详情</p>
<img src="/static/mobile/images/wechat_qrcode.jpg" class="wechat" alt="">
<van-popup v-model:show="showPopup" position="bottom" :style="{ 'padding-top':'20px',height: '150px' }">
    <van-form @submit="onSubmit">
        <van-field
                v-model="form.mobile"
                required
                type="mobile"
                label="手机号"
                placeholder="请输入手机号"
                :rules="[{ required: true, message: '请输入手机号' }]"
        ></van-field>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                绑定
            </van-button>
        </div>
    </van-form>
</van-popup>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.showPopup = Vue.ref(false);
        base.form = Vue.reactive({mobile:''});

        base.toUrl = () => {
            location.href = "{:url('human/index')}";
        };

        base.showBind = () => {
            base.showPopup.value = true;
        };

        //表单提交
        base.onSubmit = () => {
            postJson('/human/bindMobile',base.form).then(() => {
                vant.showDialog({
                    title: '提示',
                    message: '绑定成功',
                }).then(() => {
                    location.reload();
                });
            });
        };

        return base;
    }
</script>
{/block}