xiamen-sb-uniapp/pages/login/login.vue

<template>
    <view>
        <u-toast ref="uToast" />
        <view class="d-flex f-column a-center top">
            <image src="../../static/logo.png" mode=""></image>
            <text class="main-color-text f-weight-bold m2">欢迎使用设备管理系统！</text>
        </view>
        <view class="f-weight-bold name text-center">账号登录</view>
        <view class="input">
            <input type="text" v-model="userName" placeholder="请输入用户名" placeholder-class="placeholder-class" />
            <input type="password" v-model="passWord" placeholder="请输入密码" placeholder-class="placeholder-class" />
        </view>
        <view class="tip" @tap="forgetPass">
            忘记密码
            <text class="mx1">
                <u-icon name="question"></u-icon>
            </text>
        </view>
        <view class=" mui-input-row mui-checkbox ">
            <checkbox-group @change="checkboxChange">
                <checkbox id="chkRem" type="checkbox" :checked="rememberPsw" @tap="rememberPsw = !rememberPsw"
                    class="RememberCheck">
                    记住密码
                </checkbox>
            </checkbox-group>
        </view>
        <button class="main-color-bg text-color-white login" @tap="login">登录</button>
        <view class="wechat p-fixed left0 right0" style="bottom: 60rpx;">
            <button @click="quickLogin" class="d-flex j-center a-center">
                <image src="/static/images/weixin.png" mode=""></image>
            </button>
        </view>
    </view>
</template>

<script>
import { encryptPassword } from '@/utils/password';

export default {
    data() {
        return {
            userName: '', // 用户名
            passWord: '', // 密码
            rememberPsw: true // 记住密码
        };
    },
    // 页面初始加载
    mounted() {
        const that = this;

        // 缓存的账号
        const cache_userName = uni.getStorageSync('cache_userName');
        // 缓存的密码
        const cache_passWord = uni.getStorageSync('cache_passWord');
        // 有缓存就赋值给文本没有就清空
        if (cache_userName && cache_passWord) {
            that.userName = cache_userName;
            that.passWord = cache_passWord;
        } else {
            that.userName = '';
            that.passWord = '';
        }
    },
    onShow() {
        if (this.$BaseTool.Util.isDev()) {
            this.userName = 'superadmin'
            this.passWord = '123456'
        }
    },
    methods: {
        // 找回密码
        forgetPass() {
        },
        // 复选框
        checkboxChange: function (e) {
            if (e.detail.value.length == 1) {
                // 获取缓存的账号
                uni.getStorageSync('cache_userName', this.userName);
                uni.getStorageSync('cache_passWord', this.passWord);
            } else {
                uni.removeStorageSync('cache_userName');
                uni.removeStorageSync('cache_passWord');
            }
        },
        // 登录
        login() {
            if (!this.userName) {
                return this.$refs.uToast.show({
                    title: '请输入用户名',
                    type: 'default',
                    icon: false
                });
            } else if (!this.passWord) {
                return this.$refs.uToast.show({
                    title: '请输入密码',
                    type: 'default',
                    icon: false
                });
            }
            this.$Http
                .mobileLogin({
                    username: this.userName,
                    password: encryptPassword(this.passWord),
                    grant_type: 'password',
                    scope: 'server'
                })
                .then(res => {
                    // 缓存账号和密码
                    if (this.rememberPsw) {
                        uni.setStorageSync('cache_userName', this.userName);
                        uni.setStorageSync('cache_passWord', this.passWord);
                    } else {
                        uni.removeStorageSync('cache_userName');
                        uni.removeStorageSync('cache_passWord');
                    }
                    // 如果openId有，则绑定openId
                    const openId = uni.getStorageSync('openId', this.userName);
                    if (openId != null && openId !== '') {
                        this.$Http
                            .bindUserAndOpenId(openId)
                            .then(res => {
                                uni.removeStorageSync('openId');
                            });
                    }
                });
        },
        // 微信快捷登录
        quickLogin() {
            this.$Http.loginQuickly().then(res => {
                const url = res.data

                if (url !== '' && url !== null && url != undefined) {
                    // 请求用户授权
                    window.location.href = url
                }
            })
        }
    }
};
</script>

<style lang="scss" scoped>
.top {
    font-size: unit(28, rpx);
    padding-top: unit(90, rpx);

    image {
        width: unit(170, rpx);
        height: unit(123, rpx);
    }
}

.name {
    font-size: unit(42, rpx);
    color: #333333;
    margin: unit(80, rpx) 0 unit(80, rpx);
}

.input {
    width: unit(600, rpx);
    margin: 0 auto;

    input {
        border-bottom: unit(1, rpx) solid #e6e6e6;
        height: unit(100, rpx);
        line-height: unit(100, rpx);
    }
}

.login {
    width: unit(600, rpx);
    height: unit(100, rpx);
    margin: unit(100, rpx) auto 0;
    border-radius: unit(80, rpx);
}

.tip {
    width: unit(600, rpx);
    margin: unit(30, rpx) auto;
    text-align: right;
    font-size: unit(26, rpx);
    font-weight: 500;
}

.wechat {
    margin-top: unit(90, rpx);

    button {
        background-color: #FFFFFF;

        &::after {
            border: none;
        }

        image {
            width: unit(90, rpx);
            height: unit(90, rpx);
        }
    }
}

.mui-checkbox input[type='checkbox']:checked:before {
    color: #00bbb1;
}

.RememberPass {
    color: #adadad;
    margin-top: 5px;
}

.RememberCheck {
    margin-left: 30px;
    color: #adadad;
}
</style>