odd_job/app/mobile/view/login/mobile.html

{extend name="public/base"/}
{block name="css"}
<style>
    .other-login {width:60%;margin:50px auto 0 auto;}
    .other-login .other-login-icon{display:flex;align-items:center;justify-content:space-around;}
    .service {display: flex;justify-content: center;text-align:center;margin-top:50px;font-size:14px;}
    .service a {color:#0081ff;}
    .lw-title {font-size:18px;text-align:center;font-weight:bold;padding-top:10px;}
    .content {width:100%;padding-top:10px;}
    .content p {padding:0;margin:0;text-indent:2em;}
</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>
    <van-form @submit="onSubmit">
        <van-cell-group>
            <van-field
                    v-model="mobile"
                    required
                    label="电话"
                    placeholder="请输入电话"
                    :rules="[
                        { required: true, message: '请填写电话' },
                        { validator, 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.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--;
                    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 = () => {
            const param = {mobile:base.mobile.value,verify:base.verify.value};

            postJson("{:url('login/mobilePost')}", param).then(({data}) => {
                location.href = data.url;
            });
        };

        //手机号验证
        base.validator = (val) => {
            return /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(val);
        };

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