index.vue 3.9 KB
<template>
    <view>
        <view class="lz-status_bar">
            <view class="lz-top_view"></view>
        </view>
        <view class="login">
            <view class="login-title">用户登录</view>
            <view class="login-content">
                <view class="login-row">
                    <view class="login-flex">
                        <view class="iconfont icon-person"></view>
                        <m-input type="text" v-model='account' placeholder="请输入账号"></m-input>
                    </view>
                    <a href=""></a>
                </view>
                <view class="login-row">
                    <view class="iconfont icon-suo"></view>
                    <m-input type="password" displayable v-model="password" placeholder="请输入密码" style="flex: 1;"></m-input>
                </view>
                <view class="login-button">
                    <button @tap="login()" type="primary" class="primary">登录</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {mapState} from 'vuex'
    import mInput from '@/components/m-input.vue';

    export default {
        data() {
            return {
                account: '',
                password: '',
                id: 0,
            }
        },
        computed: {
            ...mapState(['userInfo', 'loginInfo']),
        },
        components: {
            mInput
        },
        onLoad(opts) {
            if (opts.id != undefined) {
                this.id = opts.id
            }
            if (this.loginInfo.account != undefined) {
                this.account = this.loginInfo.account
                this.password = this.loginInfo.password
            }
        },
        methods: {
            async login() {
                let that = this
                let res = await this.$lib.$http.post({
                    url: this.$lib.$urlMap.login,
                    data: {
                        account: this.account,
                        password: this.password
                    },
                    needLogin: false
                })
                if (res.code == 1) {
                    let info = res.data.userinfo,
                        loginInfo = {
                            account: this.account,
                            password: this.password
                        };
                    this.$lib.$store.commit('setUserInfo', res.data.userinfo)
                    this.$lib.$store.commit('setLoginStatus', 1)
                    uni.showToast({
                        title: '登录成功',
                        icon: 'success',
                        duration: 1500
                    })
                    setTimeout(function () {
                        uni.switchTab({
                            url: '/pages/xunjian/list'
                        })
                    }, 1500)
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none',
                        duration: 1500
                    })
                }
            },

        }
    }
</script>

<style>
    .login {
        width: 89%;
        margin: 0 auto;
    }

    .login-button {
        padding-top: 24px;
    }

    .login-button .primary {
        background: #4d72ff !important;
        box-shadow: 0 2px 11px rgb(0 56 216 / 15%);
        color: #fff !important;
        border-radius: 30px;
        font-size: 18px;
        padding: 2px;
    }

    .login-title {
        color: #5d5d5d;
        font-size: 22px;
        padding: 20px 0 12px;
        font-weight: bold;
    }

    .login-row {
        display: flex;
        align-items: center;
        margin: 10px 0 0;
        border-bottom: solid 1px #f3f3f3;
    }

    .login-flex {
        display: flex;
        align-items: center;
        flex: 1;
    }

    .login-row .iconfont {
        font-size: 19px;
        color: #6d6d6d;
    }
</style>