diff options
Diffstat (limited to 'UI source code/dns_mapping_ui-master/src/views/login.vue')
| -rw-r--r-- | UI source code/dns_mapping_ui-master/src/views/login.vue | 215 |
1 files changed, 215 insertions, 0 deletions
diff --git a/UI source code/dns_mapping_ui-master/src/views/login.vue b/UI source code/dns_mapping_ui-master/src/views/login.vue new file mode 100644 index 0000000..0622e3c --- /dev/null +++ b/UI source code/dns_mapping_ui-master/src/views/login.vue @@ -0,0 +1,215 @@ +<template> + <div class="login" :style="'background-image:url('+ Background +');'"> + <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form"> + <h3 class="title"> + DiamondV 后台管理系统 + </h3> + <el-form-item prop="username"> + <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"> + <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> + </el-input> + </el-form-item> + <el-form-item prop="password"> + <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin"> + <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> + </el-input> + </el-form-item> + <!-- <el-form-item prop="code"> + <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin"> + <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> + </el-input> + <div class="login-code"> + <img :src="codeUrl" @click="getCode"> + </div> + </el-form-item> --> + <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;"> + 记住我 + </el-checkbox> --> + <el-form-item style="width:100%;"> + <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin"> + <span v-if="!loading">登 录</span> + <span v-else>登 录 中...</span> + </el-button> + </el-form-item> + </el-form> + <!-- 底部 --> + <!-- <div v-if="$store.state.settings.showFooter" id="el-login-footer"> + <span v-html="$store.state.settings.footerTxt" /> + <span> ⋅ </span> + <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a> + </div> --> + </div> +</template> + +<script> +import { encrypt } from '@/utils/rsaEncrypt' +import Config from '@/settings' +import { getCodeImg } from '@/api/login' +import Cookies from 'js-cookie' +import qs from 'qs' +import Background from '@/assets/images/background.jpeg' +export default { + name: 'Login', + data() { + return { + Background: Background, + codeUrl: '', + cookiePass: '', + loginForm: { + username: 'admin', + password: '123456', + rememberMe: false, + code: '', + uuid: '' + }, + loginRules: { + username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }], + password: [{ required: true, trigger: 'blur', message: '密码不能为空' }], + code: [{ required: true, trigger: 'change', message: '验证码不能为空' }] + }, + loading: false, + redirect: undefined + } + }, + watch: { + $route: { + handler: function(route) { + const data = route.query + if (data && data.redirect) { + this.redirect = data.redirect + delete data.redirect + if (JSON.stringify(data) !== '{}') { + this.redirect = this.redirect + '&' + qs.stringify(data, { indices: false }) + } + } + }, + immediate: true + } + }, + created() { + // 获取验证码 + this.getCode() + // 获取用户名密码等Cookie + this.getCookie() + // token 过期提示 + this.point() + }, + methods: { + getCode() { + getCodeImg().then(res => { + this.codeUrl = res.img + this.loginForm.uuid = res.uuid + }) + }, + getCookie() { + const username = Cookies.get('username') + let password = Cookies.get('password') + const rememberMe = Cookies.get('rememberMe') + // 保存cookie里面的加密后的密码 + this.cookiePass = password === undefined ? '' : password + password = password === undefined ? this.loginForm.password : password + this.loginForm = { + username: username === undefined ? this.loginForm.username : username, + password: password, + rememberMe: rememberMe === undefined ? false : Boolean(rememberMe), + code: '' + } + }, + handleLogin() { + this.$refs.loginForm.validate(valid => { + const user = { + username: this.loginForm.username, + password: this.loginForm.password, + rememberMe: this.loginForm.rememberMe, + code: this.loginForm.code, + uuid: this.loginForm.uuid + } + if (user.password !== this.cookiePass) { + user.password = encrypt(user.password) + } + if (valid) { + this.loading = true + if (user.rememberMe) { + Cookies.set('username', user.username, { expires: Config.passCookieExpires }) + Cookies.set('password', user.password, { expires: Config.passCookieExpires }) + Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires }) + } else { + Cookies.remove('username') + Cookies.remove('password') + Cookies.remove('rememberMe') + } + this.$store.dispatch('Login', user).then(() => { + this.loading = false + this.$router.push({ path: this.redirect || '/' }) + }).catch(() => { + this.loading = false + this.getCode() + }) + } else { + console.log('error submit!!') + return false + } + }) + }, + point() { + const point = Cookies.get('point') !== undefined + if (point) { + this.$notify({ + title: '提示', + message: '当前登录状态已过期，请重新登录！', + type: 'warning', + duration: 5000 + }) + Cookies.remove('point') + } + } + } +} +</script> + +<style rel="stylesheet/scss" lang="scss"> + .login { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + background-size: cover; + } + .title { + margin: 0 auto 30px auto; + text-align: center; + color: #707070; + } + + .login-form { + border-radius: 6px; + background: #ffffff; + width: 385px; + padding: 25px 25px 5px 25px; + .el-input { + height: 38px; + input { + height: 38px; + } + } + .input-icon{ + height: 39px;width: 14px;margin-left: 2px; + } + } + .login-tip { + font-size: 13px; + text-align: center; + color: #bfbfbf; + } + .login-code { + width: 33%; + display: inline-block; + height: 38px; + float: right; + + img{ + cursor: pointer; + vertical-align:middle + } + } +</style> |