uniapp 登录实现记住密码

uniapp yekong 229℃
<template>
    <view class="content">
        <div class="logo">

        </div>
        <view class="list">
            <div class="listitem">
                <u-input :clearable='true' v-model="formdata.username" type='text' placeholder="请输入账号">
                </u-input>
            </div>
            <div class="listitem mt20">
                <u-input v-model="formdata.userpwd" type="password" placeholder="请输入密码">
                </u-input>
            </div>
        </view>
        <div class="butsr mt100" @tap="bindLogin()">
            登录
        </div>
        <div class="logininfo">
            <u-checkbox v-model="rememberpwd" shape="circle">记住密码</u-checkbox>
            <span>服务器设置</span>
        </div>
    </view>
</template>

<script>
    export default {
        mounted() {
            var that = this;
            const username = uni.getStorageSync('username');
            const userpwd = uni.getStorageSync('userpwd');
            if (username && userpwd) {
                that.formdata.username = username;
                that.formdata.userpwd = userpwd;
            } else {
                that.formdata.username = '';
                that.formdata.userpwd = '';
            }
        },
        data() {
            return {
                formdata: {
                    username: '',
                    userpwd: '',
                    version: '8.1.4',
                    imei: ''
                },
                rememberpwd: true
            };

        },
        methods: {
            rememberPassword() {
                if (this.rememberpwd) {
                    uni.setStorageSync('username', this.formdata.username);
                    uni.setStorageSync('userpwd', this.formdata.userpwd);
                } else {
                    uni.removeStorageSync('username');
                    uni.removeStorageSync('userpwd');
                }
            },
            bindLogin() {
                var that=this;
                if (this.formdata.username.length == 0) {
                    uni.showToast({
                        icon: 'none',
                        title: '请输用户名'
                    });
                    return;
                }
                if (this.formdata.userpwd.length == 0) {
                    uni.showToast({
                        icon: 'none',
                        title: '请输入密码'
                    });
                    return;
                }
                this.$u.api.Login(this.formdata).then(res => {
                    if (res.return == 1) {
                        uni.setStorageSync('gridcode', res.user.gridcode);
                        uni.setStorageSync('username', res.user.username);
                        uni.setStorageSync('collcode', res.user.collcode);
                        uni.setStorageSync('powerflag', res.user.powerflag);
                        that.rememberPassword();
                        uni.reLaunch({
                            url: '/pages/index/index'
                        });
                        uni.showToast({
                            title: '登录成功',
                            duration: 2000
                        });
                    }
                })
            },
        }
    };
</script>

<style lang="scss">
    .bg-set {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .content {
        display: flex;
        flex-direction: column;
        justify-content: center;

    }
    .list {
        display: flex;
        flex-direction: column;
        padding-top: 50rpx;
        margin-left: 30rpx;
        margin-right: 30rpx;
    }

    .butsr {
        width: 690rpx;
        height: 80rpx;
        margin: auto;
        border-radius: 20rpx;
        background: linear-gradient(90deg, #4BA5F8 0%, #4876FF 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        color: #fff;
        font-size: 30rpx;
    }

    .mt20 {
        margin-top: 20rpx;
    }

    .listitem {
        margin-top: 50rpx;
        border-bottom: 1rpx solid #EBEBEB;
    }

    .mt100 {
        margin-top: 100rpx;
    }

    .logo {
        height: 120rpx;
        width: 120rpx;
        background: #4876FF;
        border-radius: 50%;
        margin-bottom: 100rpx;
        margin: auto;
        margin-top: 100rpx;
    }

    .logininfo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        width: 690rpx;
        margin-left: 30rpx;
        margin-top: 50rpx;
        color: #666666;
    }
</style>

喜欢 (0)