mallplus/mallplusui-web-admin/src/views/login/index.vue

<template>
	<div>
		<el-card class="login-form-layout">
			<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
				<div style="text-align: center"><img src="../../assets/img/logo.png" width="140px"/></div>
				<h2 class="login-title color-main">汇融云链管理后台</h2>
				<el-form-item prop="username">
					<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入用户名">
						<span slot="prefix"><svg-icon icon-class="user" class="color-main"></svg-icon></span>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" placeholder="请输入密码">
						<span slot="prefix"><svg-icon icon-class="password" class="color-main"></svg-icon></span>
						<span slot="suffix" @click="showPwd"><svg-icon icon-class="eye" class="color-main"></svg-icon></span>
					</el-input>
				</el-form-item>
				<el-form-item style="margin-bottom: 60px">
					<el-button style="width: 100%" type="primary" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
				</el-form-item>

				<!-- <el-form-item style="margin-bottom: 10px">
          <el-button style="width: 100%" type="primary"  @click.native.prevent="handleStore">
            商家入驻
          </el-button>
        </el-form-item> -->
			</el-form>
		</el-card>
		<img :src="login_center_bg" class="login-center-layout" />
		<!-- <el-dialog title="下载地址" :visible.sync="dialogVisible" width="40%">
			<el-form ref="brandFrom" label-width="150px">
				<div class="table-layout">
					<el-row>
						<el-col :span="6" class="table-cell-title">平台账户</el-col>
						<el-col :span="6" class="table-cell-title">商家账户</el-col>
						<el-col :span="6" class="table-cell-title">店员账户</el-col>
					</el-row>
					<el-row>
						<el-col :span="6" class="table-cell">admin/123456</el-col>
						<el-col :span="6" class="table-cell">shangjia/123456</el-col>
						<el-col :span="6" class="table-cell">dianyuan/123456</el-col>
					</el-row>
				</div>
				<el-form-item style="margin-bottom: 10px"><el-button style="width: 100%" type="primary" @click.native.prevent="handleGit">下载地址</el-button></el-form-item>
			</el-form>
		</el-dialog> -->
	</div>
</template>

<script>
import { isvalidUsername } from '@/utils/validate';
import login_center_bg from '@/assets/images/login_center_bg.png';

export default {
	name: 'login',
	data() {
		const validateUsername = (rule, value, callback) => {
			if (!isvalidUsername(value)) {
				callback(new Error('请输入正确的用户名'));
			} else {
				callback();
			}
		};
		const validatePass = (rule, value, callback) => {
			if (value.length < 3) {
				callback(new Error('密码不能小于3位'));
			} else {
				callback();
			}
		};
		return {
			loginForm: {
				username: 'admin',
				password: '123456'
			},
			loginRules: {
				username: [{ required: true, trigger: 'blur', validator: validateUsername }],
				password: [{ required: true, trigger: 'blur', validator: validatePass }]
			},
			loading: false,
			dialogVisible: true,
			pwdType: 'password',
			login_center_bg
		};
	},
	methods: {
		showPwd() {
			if (this.pwdType === 'password') {
				this.pwdType = '';
			} else {
				this.pwdType = 'password';
			}
		},
		handleReg() {
			this.$router.push({ path: '/reg' });
		},
		handleStore() {
			this.$router.push({ path: '/acceptStore' });
		},
		handleGit() {
			window.location.href = 'https://gitee.com/zscat/mallplus';
		},
		handleLogin() {
			this.$refs.loginForm.validate(valid => {
				if (valid) {
					console.log('login');
					this.loading = true;
					this.$store
						.dispatch('Login', this.loginForm)
						.then(res => {
							console.log(res);
							this.loading = false;
							this.$router.push({ path: '/' });
						})
						.catch(e => {
							console.log(e);
							this.loading = false;
						});
				} else {
					console.log('参数验证不合法！');
					return false;
				}
			});
		}
	}
};
</script>

<style scoped>
.login-form-layout {
	position: absolute;
	left: 0;
	right: 0;
	width: 560px;
	margin: 140px auto;
	border-top: 10px solid #409eff;
}

.login-title {
	text-align: center;
}

.login-center-layout {
	background: #409eff;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin-top: 200px;
}
</style>