初始项目
This commit is contained in:
liupopo
151
mallplusui-web-admin/src/views/login/index.vue
Normal file
151
mallplusui-web-admin/src/views/login/index.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<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"><svg-icon icon-class="login-mall" style="width: 56px;height: 56px;color: #409EFF"></svg-icon></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: 360px;
|
||||
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>
|
||||
Reference in New Issue
Block a user