|
@@ -0,0 +1,274 @@
|
|
|
+<template>
|
|
|
+ <div class="login-container">
|
|
|
+ <div class="title-container">
|
|
|
+ <h3 class="title">{{ title }}</h3>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <el-tabs :stretch="true">
|
|
|
+ <el-tab-pane label="账户登录">
|
|
|
+ <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on"
|
|
|
+ label-position="left">
|
|
|
+ <el-form-item prop="username">
|
|
|
+ <el-input class="username" ref="username" type="text" placeholder="账户/邮件账户" clearable
|
|
|
+ v-model="loginForm.username"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <el-input class="password" ref="password" placeholder="请输入密码" clearable
|
|
|
+ v-model="loginForm.password" show-password></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="vertification">
|
|
|
+ <el-input style="width: 140px;display: flex;" placeholder="请输入验证码"
|
|
|
+ v-model="loginForm.vertification"></el-input>
|
|
|
+ <identify :identifyCode="identifyCode" style="width: 90px; height: 40px;"></identify>
|
|
|
+ <el-button style="margin-left: 20px; width:50px;font-size: 14px;" type="text"
|
|
|
+ @click="refreshCode">看不清?</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="margin-top:30px;">
|
|
|
+ <el-button :loading="loading" type="primary" @click.native.prevent="handleLogin">登 录</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-checkbox style="display: block; float: left;" v-model="remeber">记住密码</el-checkbox>
|
|
|
+ <a style="margin-left: 150px;" href="">忘记密码?</a>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="手机登陆">
|
|
|
+ <el-form ref="loginForm2" :model="loginForm2" :rules="loginRules2" class="login-form" autocomplete="on">
|
|
|
+ <el-form-item prop="phone">
|
|
|
+ <el-input class="phone" placeholder="请输入手机号码" clearable v-model="loginForm2.phone"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="vertification">
|
|
|
+ <el-input style="width: 160px;display: flex;" placeholder="请输入验证码"
|
|
|
+ v-model="loginForm2.vertification"></el-input>
|
|
|
+ <el-button class="phone_vertification" type="primary" @click="getVetifiedCode">获取验证码</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="margin-top:60px">
|
|
|
+ <el-button :loading="loading" type="primary" @click.native.prevent="phoneHandleLogin">登
|
|
|
+ 录</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { validUsername } from '@/utils/validate';
|
|
|
+import identify from '@/components/Identify/index'
|
|
|
+export default {
|
|
|
+ components: { identify },
|
|
|
+ data() {
|
|
|
+ const validateUsername = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('用户名不能为空!'));
|
|
|
+ } else if (!validUsername(value)) {
|
|
|
+ callback(new Error('请输入正确的用户名!'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const validatePassword = (rule, value, callback) => {
|
|
|
+ if (value.length < 6) {
|
|
|
+ callback(new Error('密码长度不少于6位!'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const validatePhone = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('手机号不能为空!'));
|
|
|
+ } else if (!/^1\d{10}$/.test(value)) {
|
|
|
+ callback(new Error('手机号格式错误!'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ title: '智慧运营管理中心',
|
|
|
+ loginForm: {
|
|
|
+ username: 'admin',
|
|
|
+ password: '123456',
|
|
|
+ vertification: '',
|
|
|
+ },
|
|
|
+ loginForm2: {
|
|
|
+ phone: '',
|
|
|
+ vertification: ''
|
|
|
+ },
|
|
|
+ loginRules: {
|
|
|
+ username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
|
|
+ password: [{ required: true, trigger: 'blur', validator: validatePassword }]
|
|
|
+ },
|
|
|
+ loginRules2: {
|
|
|
+ phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
|
|
|
+
|
|
|
+ },
|
|
|
+ remeber: true,
|
|
|
+ loading: false,
|
|
|
+ identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',//随机串内容
|
|
|
+ identifyCode: '',
|
|
|
+ //redirect: undefined
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // watch: {
|
|
|
+ // $route: {
|
|
|
+ // handler: function (route) {
|
|
|
+ // const query = route.query;
|
|
|
+ // if (query) {
|
|
|
+ // this.redirect = query.redirect;
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // immediate: true
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ methods: {
|
|
|
+ handleLogin() {
|
|
|
+ if (this.loginForm.vertification.toLowerCase() != this.identifyCode.toLowerCase()) {
|
|
|
+ this.$message.error('请输入正确的验证码!');
|
|
|
+ this.refreshCode();
|
|
|
+ } else {
|
|
|
+ this.$refs.loginForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.loading = true;
|
|
|
+ this.$store.dispatch('user/login', this.loginForm).then(() => {
|
|
|
+ this.$router.push({ path: '/home' });
|
|
|
+ this.loading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ refreshCode() {
|
|
|
+ this.identifyCode = '';
|
|
|
+ this.makeCode(4);
|
|
|
+ },
|
|
|
+ makeCode(l) {
|
|
|
+ for (let i = 0; i < l; i++) {
|
|
|
+ this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ randomNum(min, max) {
|
|
|
+ return Math.floor(Math.random() * (max - min) + min);
|
|
|
+ },
|
|
|
+ getVetifiedCode(){
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (this.loginForm.username === '') {
|
|
|
+ this.$refs.username.focus();
|
|
|
+ } else if (this.loginForm.password === '') {
|
|
|
+ this.$refs.password.focus();
|
|
|
+ };
|
|
|
+
|
|
|
+ //初始化验证码
|
|
|
+ this.identifyCode = '';
|
|
|
+ this.makeCode(4);
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.login-container {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: fixed;
|
|
|
+ overflow: hidden;
|
|
|
+ background-image: url("../../assets/images/background@2x.png")
|
|
|
+}
|
|
|
+
|
|
|
+.title-container {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 48px;
|
|
|
+ float: left;
|
|
|
+ margin-top: 150px;
|
|
|
+ margin-left: 400px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ letter-spacing: 20px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ position: absolute;
|
|
|
+ top: 250px;
|
|
|
+ height: 400px;
|
|
|
+ right: 300px;
|
|
|
+ width: 400px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 2px 2px lightgrey;
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ width: 300px;
|
|
|
+ margin-left: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-tabs__content {
|
|
|
+ margin-top: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.username {
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ background: url('./images/username@2x.png') no-repeat 15px center;
|
|
|
+ background-size: 20px;
|
|
|
+ padding: 0 50px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.password {
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ background: url('./images/password@2x.png') no-repeat 15px center;
|
|
|
+ background-size: 20px;
|
|
|
+ padding: 0 50px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.phone {
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ background: url('./images/shouji@3x.png') no-repeat 15px center;
|
|
|
+ background-size: 20px;
|
|
|
+ padding: 0 50px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.vertification {
|
|
|
+ /deep/.el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.phone_vertification {
|
|
|
+ width: 130px !important;
|
|
|
+ font-size: 18px;
|
|
|
+ height: 40px;
|
|
|
+ margin-left: 10px;
|
|
|
+ padding: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-button {
|
|
|
+ width: 300px;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-checkbox {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-tabs__item {
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-tabs__nav-wrap {
|
|
|
+ padding: 15px 10px 0 10px;
|
|
|
+}
|
|
|
+</style>
|