happyjob_dk/src/view/login/index.vue

<template>
    <div class="login">
        <van-row>
            <van-col span="24">
                <div class="dk-banner"></div>
            </van-col>
        </van-row>
        <div>
            <van-cell-group style="margin-top: 60px;" :border="false">
                <!-- 输入手机号，调起手机号键盘 -->
                <van-row type="flex" justify="center">
                    <van-col span="20">
                        <van-field
                                class="dk-border"
                                v-model="phone"
                                center
                                clearable
                                type="tel"
                                left-icon="smile-o"
                                placeholder="请输入手机号"
                        ></van-field>
                    </van-col>
                </van-row>

                <!-- 允许输入整数，调起数字键盘 -->
                <van-row type="flex" justify="center" align="center" style="margin-top: 40px">
                    <van-col span="20">
                        <van-field
                                v-model="code"
                                maxlength="6"
                                type="digit"
                                left-icon="smile-o"
                                placeholder="请输入验证码"
                                class="dk-border">
                            <van-button
                                    :disabled="state.smsSendBtn"
                                    slot="button"
                                    size="small"
                                    type="default"
                                    @click="sendCode"
                                    style="border:none"
                                    class="dk-button "
                                    :class="state.smsSendBtn&&'dk-color'">
                                {{!state.smsSendBtn && '获取验证码' || ('重发 '+state.time+' s')}}
                            </van-button>
                        </van-field>
                    </van-col>

                </van-row>
            </van-cell-group>
            <van-row type="flex" justify="center">
                <van-col span="20">
                    <van-button
                            :loading="loading"
                            type="small"
                            size="large"
                            :color="!phone||!code?'#DDDDDD':'#0177FF'"
                            @cick="login"
                            text="登录"
                            style="height:47px;margin-top: 65px;border-radius: 47px;font-size: 16px;border-width: 0">

                    </van-button>
                </van-col>
            </van-row>
            <van-row type="flex" justify="center" style="margin-top: 10px">
                <span class="dk-join" @click="join">企业入驻 >>></span>
            </van-row>
        </div>

        <van-row>
            <van-col span="24">
                <div class="dk-qrcode"></div>
            </van-col>
        </van-row>
    </div>
</template>

<script>
    // import {postAction} from '@/api/manage'
    import {Button, Cell, CellGroup, Field, Toast, Col, Row} from 'vant';
    import {setStore, getStore} from "@/utils/storage";

    export default {
        name: "index",
        components: {
            [Button.name]: Button,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [Field.name]: Field,
            [Col.name]: Col,
            [Row.name]: Row,
        },
        data() {
            return {
                loading: false,
                text: "登录",
                phone: '',
                code: '',
                state: {
                    time: 60,
                    smsSendBtn: false,
                },
                url: {
                    getSmsCaptcha: '/f/api/login/getAuthCode',
                }
            };
        },

        created() {
            //企业已登录，跳转企业首页
            if (getStore('login')) {
                this.$router.replace({name: 'user', params: {enterprise_id: 123}});
            }
        },
        methods: {
            login() {
                this.loading = true;
                //登录成功，缓存用户信息，跳转相应页面
                setStore('login', "123");
                this.$router.replace('goods');
            },
            //获取验证码
            sendCode() {
                if (!this.phone) {
                    Toast('请输入手机号~');
                    return;
                }
                this.state.smsSendBtn = true;
                let interval = window.setInterval(() => {
                    if (this.state.time-- <= 0) {
                        this.state.time = 60;
                        this.state.smsSendBtn = false;
                        window.clearInterval(interval);
                    }
                }, 1000);
                let smsParams = {};
                smsParams.phone = this.phone;
                // postAction(this.url.getSmsCaptcha, smsParams)
                //     .then(() => {
                //         setTimeout(Toast('验证码发送中~'), 500);
                //     })
                //     .catch(() => {
                //         setTimeout(Toast('验证码发送失败~'), 500);
                //         clearInterval(interval);
                //         this.state.time = 60;
                //         this.state.smsSendBtn = false;
                //     });
            },
            join() {
                this.$router.push({name: 'join'})
            }
        }
    }
</script>

<style scoped>
    .login {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .dk-banner {
        height: 160px;
        background: #ccc;
    }

    .dk-border {
        font-size: 14px;
        border: 1px solid #0177FF;
        border-radius: 47px;
        box-sizing: border-box;
    }

    .dk-button {
        height: auto;
        width: auto;
        font-size: 14px;
        color: #999999;
        opacity: 1;
    }

    .dk-color {
        color: #0177FF;
    }

    .dk-join {
        font-size: 12px;
        color: #0177FF;
    }

    .dk-qrcode {
        margin-top: 90px;
        height: 135px;
        background: #ccc;
    }
</style>