graduate_light/app/mobile/view/login/login.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"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">登录</span>
    </template>
</van-nav-bar>
<van-tabs v-model:active="active">
    <van-tab title="验证码登录">
        <van-form @submit="onSubmit('mobile')">
            <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>
    </van-tab>
    <van-tab title="密码登录">
        <van-form @submit="onSubmit('account')">
            <van-cell-group>
                <van-field
                        v-model="account"
                        required
                        label="账号"
                        placeholder="请输入账号"
                        :rules="[{ required: true, message: '请填写账号' }]"
                ></van-field>
                <van-field
                        v-model="password"
                        type="password"
                        required
                        label="密码"
                        placeholder="请输入密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                ></van-field>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button block type="primary" native-type="submit">确定</van-button>
            </div>
        </van-form>
    </van-tab>
</van-tabs>
<div class="other-login">
    <van-divider>其他登录方式</van-divider>
    <div class="other-login-icon">
        <van-image width="40" height="40" src="__COMMON_IMAGES__/icon_wechat.png" @click="wechatLogin"></van-image>
    </div>
</div>
<van-popup
        v-model:show="service_show"
        position="bottom"
        round
        :style="{ height: '80%' }"
>
    <div class="lw-title">用户协议</div>
    <div class="content">
        {$service.service}
    </div>
</van-popup>
<van-popup
        v-model:show="privacy_show"
        position="bottom"
        round
        :style="{ height: '80%' }"
>
    <div class="lw-title">隐私政策</div>
    <div class="content">
        {$service.privacy}
    </div>
</van-popup>
<div class="service">
    <van-checkbox v-model="service_check" shape="square" icon-size="14px">
        同意
        <a href="javascript:void(0);" @click.stop="showService('service_show')">《用户协议》</a>
        和
        <a href="javascript:void(0);" @click.stop="showService('privacy_show')">《隐私政策》</a>
        <!--<a href="{:url('index/singlePage')}?field=privacy">《隐私政策》</a>-->
    </van-checkbox>
</div>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

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

        base.active = Vue.ref(0);
        base.service_check = Vue.ref(false);
        base.service_show = Vue.ref(false);
        base.privacy_show = Vue.ref(false);

        base.mobile = Vue.ref('');
        base.verify = Vue.ref('');
        base.account = Vue.ref('');
        base.password = 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 = (type) => {
            if (!base.service_check.value) {
                vant.showToast('请勾选协议');
                return false;
            }

            let param = {};
            if (type === 'mobile') {
                param = {type:'mobile',mobile:base.mobile.value,verify:base.verify.value};
            } else if (type === 'account') {
                param = {type:'account',account:base.account.value,password:base.password.value};
            }

            postJson("{:url('login/loginPost')}", param).then(({data}) => {
                location.href = data.url;
            });
        };
        base.wechatLogin = () => {
            if (!base.service_check.value) {
                vant.showToast('请勾选协议');
                return false;
            }

            location.href = "{:url('login/wechat')}";
        };

        //协议
        base.showService = (value) => {
            base[value].value = true;
        };

        //手机号验证
        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}