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">灿能物联</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" maxlength="11" 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.phone" 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>
import { apiGetYms, apiLogin, apiYsmLogin } from '@/common/api/user'
export default {
    data() {
        return {
            loading: false,
            loginType: 'pwd',
            pwdForm: {
                phone: '',
                pwd: '',
                imgCode: '',
            },
            yzmForm: {
                phone: '',
                code: '',
                imgCode: '',
            },
            waitTime: 0,
            tenantId: '',
            companyName: '',
        }
    },
    components: {},
    methods: {
        getCode() {
            if (!this.yzmForm.phone) {
                return this.$util.toast('请输入手机号！')
            }
            uni.showLoading({
                title: '请稍等',
            })
            apiGetYms({
                phone: this.yzmForm.phone,
                type: 0,
            })
                .then((res) => {
                    uni.hideLoading()
                    console.log(res)
                    this.waitTime = 60
                    this.inter = setInterval(() => {
                        if (this.waitTime == 0) {
                            clearInterval(this.inter)
                        } else {
                            this.waitTime--
                        }
                    }, 1000)
                })
                .catch((err) => {
                    uni.hideLoading()
                    console.log(err)
                })
        },
        login() {
            console.log(this.loginType)
            if (this.loginType == 'pwd') {
                this.pwdLogin()
            } else {
                this.yzmLogin()
            }
        },
        pwdLogin() {
            if (!this.pwdForm.phone && !this.pwdForm.pwd) {
                return this.$util.toast('请填写登录信息！')
            }
            apiLogin({
                phone: this.pwdForm.phone,
                key: this.pwdForm.pwd,
                type: 1,
            }).then((res) => {
                console.log(res)
                uni.setStorageSync('userInfo', res.data)
                uni.reLaunch({
                    url: '/pages/index/index',
                })
            })
        },
        yzmLogin() {
            if (!this.yzmForm.phone && !this.yzmForm.code) {
                return this.$util.toast('请填写登录信息！')
            }
            apiYsmLogin({
                phone: this.yzmForm.phone,
                smsCode: this.yzmForm.code,
            }).then((res) => {
                console.log(res)
                uni.setStorageSync('access_token', res.data.token_type + ' ' + res.data.access_token)
                uni.setStorageSync('refresh_token', res.data.refresh_token)
                let strings = res.data.access_token.split('.') //截取token，获取载体
                var userInfo = JSON.parse(decodeURIComponent(escape(window.atob(strings[1].replace(/-/g, '+').replace(/_/g, '/')))))
                userInfo.authorities = userInfo.authorities[0]
                uni.setStorageSync('userInfo', userInfo)
                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>