agg_admin/app/mobile/view/my/mobile.html

{extend name="public/base"/}
{block name="css"}

{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">首页</span>
    </template>
</van-nav-bar>
<van-form @submit="onSubmit()">
    <van-cell-group>
        <van-field
                v-model="mobile"
                required
                label="电话"
                placeholder="请输入电话"
                :rules="[{ required: true, message: '请填写电话' }]"
        ></van-field>
        <van-field
                v-model="verify"
                required
                center
                clearable
                label="短信验证码"
                placeholder="请输入短信验证码"
                :rules="[{ required: true, message: '请填写短信验证码' }]"
        >
            <template #button>
                <van-button size="small" :disabled="second != 60" type="primary" @click="sendSms">{{second_text}}</van-button>
            </template>
        </van-field>
    </van-cell-group>
    <div style="margin: 16px;">
        <van-button block type="primary" native-type="submit">确定</van-button>
    </div>
</van-form>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

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

        base.mobile = Vue.ref('');
        base.verify = Vue.ref('');

        //短信验证码
        base.is_send = false;
        base.second = Vue.ref(60);
        base.set = null;
        base.sendSms = () => {
            if (base.is_send) {
                return false;
            }

            if (base.mobile.value === '') {
                vant.showToast('请输入电话');
                return false;
            }

            base.is_send = true;
            postJson("{:url('login/sendSms')}", {mobile:base.mobile.value},({msg})=>{
                vant.showToast(msg);
                base.is_send = false;
            }).then(() => {
                base.set = setInterval(function(){
                    base.second.value--;
                    console.log(base.second.value);
                    if (base.second.value === 0) {
                        base.second.value = 60;
                        base.is_send = false;
                        clearInterval(base.set);
                    }
                },1000);
            });
        };
        base.second_text = Vue.computed(()=>{
            if (base.second.value === 60) {
                return '发送验证码';
            } else {
                return `${base.second.value}秒`;
            }
        });

        base.onSubmit = () => {
            postJson('/my/mobilePost',{mobile:base.mobile.value,verify:base.verify.value}).then(() => {
                location.href = "{:url('my/index')}";
            });
        };

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