videoApp/src/renderer/components/Login.vue

<!--登录界面-->
<template>
    <div class="login" :style="{backgroundColor: `#${loginJson[0].BrackgroupStr.slice(3)}`}">
        <section class="login-content"
           :style="{
            width: loginJson[0].Width + 'px',
            height: loginJson[0].Height + 'px',
            left:loginJson[0].Left + 'px',
            top:loginJson[0].Top + 'px',
            zIndex: loginJson[0].ZIndex,
            border: `1px solid #${loginJson[0].BorderStr.slice(3)}`,
            backgroundColor: `#${loginJson[0].ForegroundStr.slice(3)}`}"
        >
            <h2>用户登录</h2>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="55px" class="login-form">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="ruleForm.username" prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button :style="{backgroundColor: `#${loginJson[0].BTNForegroundStr.slice(3)}`}" type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button :style="{backgroundColor: `#${loginJson[0].BTNForegroundStr.slice(3)}`}" type="primary" @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </section>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {reqLogin} from "../api"
    import storageUtils from "../../utils/storageUtils"

    export default {
        data() {
            const checkUsername = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('用户名不能为空'))
                }
            }
            const validatePasswrod = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'))
                }
            }
            return {
                ruleForm: {
                    username: '',
                    password: '',
                },
                rules: {
                    username: [
                        { validator: checkUsername, trigger: 'blur' }
                    ],
                    password: [
                        { validator: validatePasswrod, trigger: 'blur' }
                    ]
                }
            }
        },

        computed: {
            ...mapState(['loginJson'])
        },

        methods: {
            async submitForm() {
                const {username,password} = this.ruleForm
                if(username === '' || password === ''){
                    this.$message.warning('请输入用户名和密码！')
                    return
                }
                const userInfo = {name:username,password}

                // 模拟登录
                /*if(username === 'admin' && password === '123'){
                    // 将user保存到vuex的state，同时保存到本地
                    this.$store.dispatch('saveUser', userInfo)
                    // 跳转到管理界面
                    this.$router.replace('/admin')
                }else {
                    this.$message.error('用户名或密码错误！')
                }*/

                // 请求登录
                const res = await reqLogin(userInfo)
                if(res.token){
                    // 将user保存到vuex的state，同时保存到本地
                    this.$store.dispatch('saveUser', userInfo)
                    // 将token保存到会议存储
                    storageUtils.saveToken(res.token)
                    // 跳转到管理界面
                    this.$router.replace('/admin')
                }else {
                    this.$message.error('用户名或密码错误！')
                }
            },

            resetForm(formName) {
                this.$refs[formName].resetFields()
            }
        }
    }
</script>

<style lang="less">
    html,body {
        margin:0;
        padding:0;

        .login {
            width:100vw;
            height: 100vh;
            background-size: 100% 100%;
            position: relative;

            .login-content {
                position: absolute;
                h2 {
                    text-align: center;
                    font-weight:bold;
                    margin-bottom: 20px;
                }
                .el-input {
                    width:90%;
                }
                .login-form {
                    .login-form-button {
                        width: 100%;
                    }
                }
            }
        }
    }
</style>