iview 常用登陆页面

<template>
    <div class="login" :style="{ height: height }">
       
        <div class="card" :padding="30">
            <img style="width:auto;height:70px;display:block;margin:0 auto" src="./logo1.png" alt="logo">
            <div style="font-size: 14px;color: #808695;text-align:center;padding:20px">企业级中台前端/设计解决方案</div>
            <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="0">
                <FormItem prop="username">
                    <Input size="large" placeholder="请输入账号" v-model="formItem.username"  >
                    <Icon type="ios-contact" slot="prefix" />
                    </Input>
                </FormItem>
                <FormItem prop="password">
                    <Input size="large"  placeholder="请输入密码" v-model="formItem.password" type="password">
                    <Icon type="ios-lock"  slot="prefix"/>
                    </Input>
                </FormItem>
            </Form>
           
            <div class="flexBetween">
                <Checkbox size="large"  v-model="single">自动登录</Checkbox>
                <Button size="large"   type="text">忘记密码</Button>
            </div>
    
            
            <Button type="primary" size="large"  @click="handleSubmit('formItem')" class="loginButton">登录</Button>
        </div>
        <div class="footer">
            Copyright ©2017,All Rights Resvered
            <span class="blue">鲁 I 备12995号-2</span>
        </div>
    </div>
</template>

<script>
/*
 *@description:登录组件
 *@author: 刘浩
 *@date: 2020-08-24 14:19:21
 */
import {
    mapActions
} from "vuex";
// 引入滑动拼图插件
import dragVerifyImg from "vue-drag-verify-img";
import img from "../../assets/images/login/loginBackground.jpg";
export default {
    name: "Login",
    components: {
        dragVerifyImg,
    },
    data() {
        return {
            //登录界面高度
            height: "",
            // 滑动组件插件使用的图片
            img: "",
            // 是否滑动通过
            isPassing: false,
            single:false,
            // 表单
            formItem: {
                username: "",
                password: "",
            },
            // 校验规则
            ruleValidate: {
                username: [{
                    required: true,
                    message: "输入用户名",
                    trigger: "blur",
                }, ],
                password: [{
                    required: true,
                    message: "输入密码",
                    trigger: "blur",
                }, ],
            },
        };
    },
    mounted() {
        var that = this;
        // 初始化页面高度
        that.height = window.innerHeight + "px";
        // window.onresize = function () {
        //     that.height = window.innerHeight + "px";
        // };
        that.onresizeFnArr.push(() => {
            that.height = window.innerHeight + "px";
        });
        that.img = img;
    },
    methods: {
        ...mapActions(["setUserInfo"]),
       

        // 提交表单
        handleSubmit(name) {
            var that = this;
           
                // 校验表单数据
                that.$refs[name].validate((valid) => {
                    if (valid) {
                        // 校验成功 发起请求
                        that
                            .ajax({
                                method: "post",
                                url: that.apis.pc.login.login,
                                data: that.formItem,
                            })
                            .then((res) => {
                                let code = res.data.code;
                                let msg = res.data.msg;
                                let data = res.data.data;
                                if (code === 200) {
                                    that.$Message.success("Success!");

                                    //保存到vuex中，方便其他组件调用
                                    that.setUserInfo(data);

                                    //保存一份到缓存中，以便页面刷新时获取用户数据
                                    that.utils.storeTool.localstorageSet("userInfo", data);

                                    //如果登录成功进行转
                                    that.$router.push("/welcome/index");
                                } else {
                                    // todo 登录失败处理
                                    that.$Message.error(msg);
                                }
                            })
                            .catch(function() {
                                //todo 接口访问异常处理
                                that.$Message.error("Fail!");
                            });
                    } else {
                        that.$Message.error("Fail!");
                    }
                });
            
        },

        // 重置表单
        handleReset(name) {
            this.$refs[name].resetFields();
        },
    },
};
</script>

<style scoped>
.loginButton {
    width: 100%;
}

.card {
    width: 320px;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
}

.login {
    height: 100%;
    width: 100%;
    background:  url("./bodybackground.svg") no-repeat center;
    background-size: 100% 100%;
    min-width: 540px;
    min-height: 618px;
   
}

.footer {
    width: 100%;
    position: absolute;
    bottom: 20px;
    left: 0;
    color: #fff;
    text-align: center;
}

.blue {}
</style>