app-govern/pages/user/login.vue

<template>
    <Cn-page :loading="loading">
        <view slot="body">
            <view class="login">
                <view class="login-title">登录</view>
                <view class="login-des">{{ companyName }}</view>
                <view class="login-box">
                    <!-- <image class="login-box-logo" mode="widthFix" src="/static/logo.png"></image> -->
                    <image class="login-box-logo" mode="widthFix" src="/static/logo.png"></image>
                    <template v-if="loginType == 'yzm'">
                        <view class="login-box-input mt100">
                            <input class="login-box-input-main" v-model="yzmForm.phone" placeholder="请输入手机号" />
                        </view>
                        <!-- <view class="login-box-input mt40">
                            <input class="login-box-input-main" v-model="yzmForm.imgCode" placeholder="图形验证码" />
                            <view class="login-box-input-img"></view>
                        </view> -->
                        <view class="login-box-input mt40">
                            <input class="login-box-input-main" v-model="yzmForm.code" placeholder="手机验证码" />
                            <view class="ml40" style="font-size: 28rpx; color: #666; width: 200rpx; text-align: center"
                                v-if="waitTime > 0">{{ waitTime + 's后重新获取' }}</view>
                            <button class="login-box-input-btn" v-else @click="getCode" size="mini">获取验证码</button>
                        </view>
                    </template>
                    <template v-else>
                        <view class="login-box-input mt100">
                            <input class="login-box-input-main" v-model="pwdForm.account" placeholder="请输入账号" />
                        </view>
                        <view class="login-box-input mt40">
                            <input type="password" class="login-box-input-main" v-model="pwdForm.pwd"
                                placeholder="请输入密码" />
                        </view>
                        <!-- <view class="login-box-input mt40">
                            <view class="login-box-input-icon"></view>
                            <input class="login-box-input-main" v-model="pwdForm.imgCode" placeholder="图形验证码" />
                            <view class="login-box-input-img"></view>
                        </view> -->
                    </template>
                    <view class="login-box-btn" @click="login"> 登录 </view>
                    <view class="login-box-footer">
                        <view @click="loginType = 'pwd'" v-if="loginType == 'yzm'">账号密码登录</view>
                        <view @click="loginType = 'yzm'" v-else>短信验证码登录</view>
                        <view style="flex:1"></view>
                        <navigator url="/pages/user/forget" hover-class="none">忘记密码</navigator>
                        <view style="margin:0 10px;color:#999">|</view>
                        <navigator url="/pages/user/register" hover-class="none">快速注册</navigator>
                    </view>
                    <view class="login-box-tips">
                        <view style="color:#999">点击登录即表示同意</view>
                        <navigator url="/pages/mine/agreement" hover-class="none">《用户协议》</navigator>
                        <navigator url="/pages/mine/policy" hover-class="none">《个人信息保护政策》</navigator>
                    </view>
                </view>
            </view>
        </view>
    </Cn-page>
</template>
<script>
export default {
    data () {
        return {
            loading: false,
            loginType: 'pwd',
            pwdForm: {
                account: '',
                pwd: '',
                imgCode: '',
            },
            yzmForm: {
                phone: '',
                code: '',
                imgCode: '',
            },
            waitTime: 0,
            tenantId: '',
            companyName: '',

        }
    },
    components: {},
    methods: {
        getCode () {
            this.waitTime = 60
            this.inter = setInterval(() => {
                if (this.waitTime == 0) {
                    clearInterval(this.inter)
                } else {
                    this.waitTime--
                }
            }, 1000)
        },
        login () {
            if (this.loginType == 'pwd') {
                this.pwdLogin()
            } else {
                this.yzmLogin()
            }
        },
        pwdLogin () {
            if (!this.pwdForm.account && !this.pwdForm.pwd) {
                return this.$util.toast('请填写登录信息！')
            }
            uni.reLaunch({
                url: '/pages/index/index',
            })
        },
        yzmLogin () {
            if (!this.yzmForm.phone && !this.yzmForm.code) {
                return this.$util.toast('请填写登录信息！')
            }
            uni.reLaunch({
                url: '/pages/index/index',
            })
        },
    },
    onLoad (o) {

    },
}
</script>
<style lang='scss'>
.login {
    .login-title {
        padding-left: 64rpx;
        padding-top: 48rpx;
        font-size: 56rpx;
        font-weight: 600;
        color: #111;
    }

    .login-des {
        padding-left: 64rpx;
        margin-top: 12rpx;
        font-size: 28rpx;
        color: #999;
    }

    .login-box {
        display: flex;
        flex-direction: column;
        margin: 60rpx auto 0;
        box-sizing: border-box;
        width: 680rpx;
        padding: 100rpx 40rpx;
        border-radius: 40rpx;
        background: $uni-theme-white;
        overflow: hidden;

        .login-box-logo {
            background: $uni-theme-blue;
            height: 100rpx;
            width: 100rpx;
            margin: 0 auto;
        }

        .login-box-input {
            height: 110rpx;
            display: flex;
            align-items: center;
            border-bottom: 1rpx solid #f0f0f0;

            .login-box-input-icon {
                width: 40rpx;
                margin-right: 40rpx;
            }

            .login-box-input-main {
                font-size: 28rpx;
                flex: 1;
                height: 100rpx;
                line-height: 100rpx;
            }

            .login-box-input-btn {
                width: 200rpx;
                margin-left: 40rpx;
                background: $uni-theme-blue;
                color: #fff;
            }

            .login-box-input-img {
                margin-left: 40rpx;
                background: skyblue;
                height: 80rpx;
                width: 200rpx;
            }
        }

        .login-box-switch {
            margin-top: 60rpx;
            color: $uni-theme-blue;
            font-size: 28rpx;
            text-align: center;
        }

        .login-box-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 80rpx;
            width: 100%;
            background: $uni-theme-blue;
            color: #fff;
            height: 80rpx;
            border-radius: 12rpx;
        }

        .login-box-footer {
            display: flex;
            margin-top: 40rpx;
            font-size: 28rpx;
            color: $uni-theme-blue;
        }

        .login-box-tips {
            margin-top: 60rpx;
            display: flex;
            justify-content: center;
            font-size: 20rpx;
        }
    }
}
</style>