md
This commit is contained in:
linfso
parent
eed0cabdb7
commit
70d5aeb2fc
@ -21,6 +21,9 @@
|
||||
{{ item.label }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
<el-dropdown-menu v-else slot="dropdown">
|
||||
<div></div>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="quick-tool" style="line-height: 34px;">
|
||||
@ -37,8 +40,6 @@
|
||||
<i class="icon iconfont icon-icon_menhukuaijiecaidan" ></i>
|
||||
</span>
|
||||
</el-popover>
|
||||
|
||||
<!-- popper-class="table-field-operation-popover" -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -49,12 +49,6 @@ export const constantRoutes = [
|
||||
title:'系统登录'
|
||||
}
|
||||
},
|
||||
// 单点登录页面
|
||||
{
|
||||
path: '/loginBySSO',
|
||||
component: () => import('@/views/login_sso'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/tools',
|
||||
component: () => import('@/views/tools'),
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import defaultSettings from '@/settings'
|
||||
import { getZoneDomainConfig } from "@/api/common"
|
||||
|
||||
const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings
|
||||
|
||||
|
||||
@ -1,187 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- import CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<title>上传图片</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
|
||||
<el-row :gutter="2">
|
||||
<el-col :span="8">
|
||||
<div class="div-center-class">
|
||||
<div class="">
|
||||
<center><h3>传统上传</h3></center>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="#"
|
||||
drag
|
||||
:http-request="uploadHandle">
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
<div v-if="imgUrl">
|
||||
<img :src="imgUrl" style="width: 40px;height: 40px"></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="div-center-class">
|
||||
<div class="">
|
||||
<center><h3>前端formData直传</h3></center>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="#"
|
||||
drag
|
||||
:http-request="httpRequestHandle">
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
<div v-if="directUrl">
|
||||
<img :src="directUrl" style="width: 40px;height: 40px"></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="div-center-class">
|
||||
<div class="">
|
||||
<center><h3>前端Url直传</h3></center>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="#"
|
||||
drag
|
||||
:http-request="UrlUploadHandle">
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
<div v-if="uploadUrl">
|
||||
<img :src="uploadUrl" style="width: 40px;height: 40px"></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</body>
|
||||
<!-- import Vue before Element -->
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<!-- import JavaScript -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<!--import axios -->
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: function () {
|
||||
return {
|
||||
imgUrl: '',
|
||||
directUrl: '',
|
||||
uploadUrl: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
uploadHandle(options) {
|
||||
let {file} = options;
|
||||
this.traditionPost(file);
|
||||
},
|
||||
traditionPost(file) {
|
||||
_that = this
|
||||
const form = new FormData();
|
||||
form.append("fileName", file.name);
|
||||
form.append("file", file);
|
||||
this.axiosPost("post", "/upload", form).then(function (res) {
|
||||
if (res.status === 200) {
|
||||
_that.imgUrl = res.data.data
|
||||
} else {
|
||||
alert("上传失败！")
|
||||
}
|
||||
})
|
||||
},
|
||||
getpolicy(file) {
|
||||
_that = this
|
||||
axios.get('policy?fileName=' + file.name)
|
||||
.then(function (response) {
|
||||
let {xamzalgorithm, xamzcredential, policy, xamzsignature, xamzdate, host} = response.data.data;
|
||||
let formData = new FormData();
|
||||
formData.append("key", file.name);
|
||||
formData.append("x-amz-algorithm", xamzalgorithm); // 让服务端返回200，不设置则默认返回204。
|
||||
formData.append("x-amz-credential", xamzcredential);
|
||||
formData.append("policy", policy);
|
||||
formData.append("x-amz-signature", xamzsignature);
|
||||
formData.append("x-amz-date", xamzdate);
|
||||
formData.append("file", file);
|
||||
// 发送 POST 请求
|
||||
_that.axiosPost("post", host, formData).then(function (res) {
|
||||
if (res.status === 204) {
|
||||
axios.get('url?fileName=' + file.name).then(function (res) {
|
||||
_that.directUrl = res.data.data;
|
||||
})
|
||||
} else {
|
||||
alert("上传失败！")
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
httpRequestHandle(options) {
|
||||
let {file} = options;
|
||||
this.getpolicy(file);
|
||||
},
|
||||
|
||||
UrlUploadHandle(options) {
|
||||
let {file} = options;
|
||||
this.getUploadUrl(file);
|
||||
},
|
||||
getUploadUrl(file) {
|
||||
_that = this
|
||||
console.log(file)
|
||||
axios.get('uploadUrl?fileName=' + file.name)
|
||||
.then(function (response) {
|
||||
let url = response.data.data;
|
||||
// 发送 put 请求
|
||||
let config = {'Content-Type': file.type}
|
||||
_that.axiosPost("put", url, file, config).then(function (res) {
|
||||
if (res.status === 200) {
|
||||
axios.get('url?fileName=' + file.name).then(function (res) {
|
||||
_that.uploadUrl = res.data.data;
|
||||
})
|
||||
} else {
|
||||
alert("上传失败！")
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
//封装
|
||||
//axios封装post请求
|
||||
axiosPost(method, url, data, config) {
|
||||
let result = axios({
|
||||
method: method,
|
||||
url: url,
|
||||
data: data,
|
||||
headers: config
|
||||
}).then(resp => {
|
||||
return resp
|
||||
}).catch(error => {
|
||||
return "exception=" + error;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
.div-center-class {
|
||||
padding: 28% 0%;
|
||||
text-align: center;
|
||||
background: beige;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
@ -1,141 +0,0 @@
|
||||
<template>
|
||||
<div class="voucher-container">
|
||||
<!-- <div class="voucher_header">
|
||||
<div class="voucher_header_title">记账凭证</div>
|
||||
<div class="voucher_header_number">单据号: {{voucher.numberId}}</div>
|
||||
</div>
|
||||
<table class="voucher" cellpadding="0" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="voucher_summary">摘要</th>
|
||||
<th class="voucher_subject">会计科目</th>
|
||||
<th class="voucher_money">
|
||||
<strong class="voucher_title">借方金额</strong>
|
||||
<div class="voucher_column voucher_unit">
|
||||
<span>亿</span>
|
||||
<span>千</span>
|
||||
<span>百</span>
|
||||
<span>十</span>
|
||||
<span>万</span>
|
||||
<span>元</span>
|
||||
<span>角</span>
|
||||
<span class="voucher_last">分</span>
|
||||
</div>
|
||||
</th>
|
||||
<strong class="voucher_title">贷方金额</strong>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="voucher_item" v-for="(item) in voucher.items" :key="item.id">
|
||||
<td class="voucher_summary">{{item.summart}}</td>
|
||||
<td class="voucher_subject">{{item.subject}}</td>
|
||||
<td class="voucher_debite">
|
||||
<div class="voucher_number"><money-format :number="item.debite"></money-format></div>
|
||||
</td>
|
||||
<td class="voucher_credit">
|
||||
<div class="voucher_number"><money-format :number="item.credit"></money-format></div>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<td class="voucher_total" colspan="2">
|
||||
合计：
|
||||
<money-format :number="voucher.total" :chinese="true"></money-format>
|
||||
<div class="voucher_number"><money-format :number="voucher.debite" :colour="true"></money-format></div>
|
||||
<div class="voucher_number"><money-format :number="voucher.credit" :colour="true"></money-format></div>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div class="voucher_footer">制单人:{{voucher.bookkeeper}}</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MoneyFormat from './MoneyFormat';
|
||||
export default {
|
||||
name: 'Voucher',
|
||||
props: {
|
||||
voucher: {
|
||||
type: Object,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
MoneyFormat
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" rel="stylesheet/less">
|
||||
// .voucher-container {
|
||||
// height: 100%;
|
||||
// width: 100%;
|
||||
// overflow: hidden;
|
||||
// margin: 0.625rem;
|
||||
// padding: 0;
|
||||
// }
|
||||
// .voucher_header {
|
||||
// padding-top: 20px;
|
||||
// margin-bottom: 10px;
|
||||
// .voucher_header_title {
|
||||
// float: left;
|
||||
// display: inline;
|
||||
// margin: -20px 130px 0px 100px;
|
||||
// font: 28px/1.8 'Microsoft Yahei';
|
||||
// text-align: center;
|
||||
// text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
|
||||
// .voucher_header_number {
|
||||
// text-align: left;
|
||||
// margin-left: 120px;
|
||||
// .voucher_footer {
|
||||
// margin: 10px;
|
||||
// font-weight: bold;
|
||||
// .voucher {
|
||||
// border-collapse: collapse;
|
||||
// th,
|
||||
// td {
|
||||
// border: 1px solid #ccc;
|
||||
// height: 35px;
|
||||
// th {
|
||||
// height: 48px;
|
||||
// color: #555555;
|
||||
// font-size: 14px;
|
||||
// text-align: center;
|
||||
// font-weight: bold;
|
||||
// overflow: hidden;
|
||||
// .voucher_title {
|
||||
// display: block;
|
||||
// height: 25px;
|
||||
// line-height: 25px;
|
||||
// .voucher_last {
|
||||
// margin-right: 0;
|
||||
// width: 18px;
|
||||
// .voucher_money {
|
||||
// font-size: 12px;
|
||||
// min-width: 221px;
|
||||
// span {
|
||||
// float: left;
|
||||
// display: inline;
|
||||
// width: 19px;
|
||||
// height: 100%;
|
||||
// margin-right: 1px;
|
||||
// .voucher_column,
|
||||
// .voucher_credit,
|
||||
// .voucher_debite {
|
||||
// // background-image: url(../assets/image/money_column.png);
|
||||
// background-repeat: repeat-y;
|
||||
// .voucher_summary {
|
||||
// min-width: 6.25rem;
|
||||
// word-break: break-all;
|
||||
// word-wrap: break-word;
|
||||
// .voucher_subject {
|
||||
// .voucher_unit {
|
||||
// height: 22px;
|
||||
// line-height: 22px;
|
||||
// font-weight: normal;
|
||||
// border-top: 1px solid #dadada;
|
||||
// .voucher_total {
|
||||
// letter-spacing: 1px;
|
||||
// .voucher_number {
|
||||
// position: relative;
|
||||
// font-family: 'tahoma';
|
||||
// letter-spacing: 11px;
|
||||
// text-align: right;
|
||||
// right: -5px;
|
||||
// .voucher_item {
|
||||
// }
|
||||
</style>
|
||||
@ -63,7 +63,7 @@ export default {
|
||||
// 表单校验
|
||||
rules: {
|
||||
id: [
|
||||
{ required: true, message: "洲序号不能为空", trigger: "blur" }
|
||||
// { required: true, message: "洲序号不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
};
|
||||
|
||||
@ -30,43 +30,29 @@
|
||||
|
||||
<div class="head-container">
|
||||
<el-tree
|
||||
:data="continentIdsTree"
|
||||
:props="defaultProps"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree"
|
||||
default-expand-all
|
||||
node-key="id"
|
||||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
<div slot-scope="{ node, data }" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" style="width:100%">
|
||||
ref="tree"
|
||||
class="filter-tree tree"
|
||||
:data="continentIdsTree"
|
||||
:props="defaultProps"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<span slot-scope="{ node, data }"
|
||||
@mouseenter="mouseenter(data)"
|
||||
@mouseleave="mouseleave(data)"
|
||||
style="width:100%">
|
||||
<template>
|
||||
<svg-icon icon-class="dict" style="width:13px;color: #505050;margin-right:2px;"/>
|
||||
<span style="font-size:13px">{{ data.label }}</span>
|
||||
<span v-show="data.show" style="margin-left: 10px;">
|
||||
<el-button
|
||||
style="margin-left: 2px; width: 19px; padding: 0px"
|
||||
circle
|
||||
type="text"
|
||||
size="medium"
|
||||
:disabled="false"
|
||||
icon="el-icon-edit"
|
||||
@click="() => handleUpdateContinent(data)"
|
||||
>
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
circle
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
style="padding: 1px; width: 1px; margin-left: 5px"
|
||||
@click="() => handleDeleteContinent(data)"
|
||||
>
|
||||
</el-button>
|
||||
</span>
|
||||
<i @click="handleUpdateContinent" class="el-icon-edit"></i>
|
||||
<i @click="handleDeleteContinent" class="el-icon-delete"></i>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
|
||||
@ -419,13 +405,13 @@ export default {
|
||||
if (this.form.id != null) {
|
||||
updateEmisContinent(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.openc = false;
|
||||
this.openForm = false;
|
||||
this.getContinentList();
|
||||
});
|
||||
} else {
|
||||
addEmisContinent(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.openc = false;
|
||||
this.openForm = false;
|
||||
this.getContinentList();
|
||||
});
|
||||
}
|
||||
@ -552,11 +538,11 @@ export default {
|
||||
});
|
||||
},
|
||||
handleFormChanged(){
|
||||
this.openc = false;
|
||||
this.openForm = false;
|
||||
this.getContinentList();
|
||||
},
|
||||
cancelForm(){
|
||||
this.openc = false;
|
||||
this.openForm = false;
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
|
||||
@ -614,7 +614,9 @@ img { border: 0px; }
|
||||
.header-main:hover .header { border-bottom: none; }
|
||||
.header-logo { display: inline-block; position: relative; width: 130px; height: 80px; float: left; }
|
||||
.logo, .slogan-gif { position: absolute; }
|
||||
.logo { top: 0px; left: 0px; width: 900px; height: 100%; background: url("") left center no-repeat; }
|
||||
// .logo { top: 0px; left: 0px; width: 900px; height: 100%; background: url("") left center no-repeat; }
|
||||
|
||||
.logo { top: 0px; left: 0px; width: 900px; height: 100%;}
|
||||
.header .auto { overflow: visible; }
|
||||
.banner-engine .header-container { width: 100%; height: 0px; }
|
||||
.banner-box { height: 80px; }
|
||||
|
||||
@ -1,262 +0,0 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<div style="text-align: center;">
|
||||
<img src="/favicon2.png" height="80px">
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="title">系统登录</h3>
|
||||
</div>
|
||||
<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" v-if="captchaOnOff">
|
||||
<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" class="login-code-img"/>
|
||||
</div>
|
||||
</el-form-item> -->
|
||||
<el-form-item prop="isLock">
|
||||
<slider-verify-code v-model="loginForm.isLock" @change="handlerLock"></slider-verify-code>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</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>
|
||||
<div style="float: right;" v-if="register">
|
||||
<router-link class="link-type" :to="'/register'">立即注册</router-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 底部 -->
|
||||
<div class="el-login-footer">
|
||||
<span>Copyright © 2022 PADM All Rights Reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCodeImg } from "@/api/login";
|
||||
import sliderVerifyCode from '@/components/SlideUnlock/slider-verify-code.vue';
|
||||
|
||||
import Cookies from "js-cookie";
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
data() {
|
||||
const checkStatus = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error("请拖动滑块完成验证"));
|
||||
} else {
|
||||
if (this.loginForm.username == '' || this.loginForm.password == ''
|
||||
|| !this.loginForm.username || !this.loginForm.password) {
|
||||
setTimeout(() => {
|
||||
this.loginForm.isLock = false;
|
||||
this.$refs.loginForm.validateField('username');
|
||||
this.$refs.loginForm.validateField('password');
|
||||
return callback(new Error("验证未通过"));
|
||||
}, 1);
|
||||
}
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
codeUrl: "",
|
||||
loginForm: {
|
||||
username: "",
|
||||
password: "",
|
||||
rememberMe: false,
|
||||
code: "",
|
||||
uuid: ""
|
||||
},
|
||||
loginRules: {
|
||||
username: [
|
||||
{ required: true, trigger: "blur", message: "请输入您的账号" }
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", message: "请输入您的密码" }
|
||||
],
|
||||
isLock: [
|
||||
{validator: checkStatus, trigger: 'blur'},
|
||||
]
|
||||
// code: [{ required: true, trigger: "change", message: "请输入验证码" }]
|
||||
},
|
||||
loading: false,
|
||||
// 验证码开关
|
||||
captchaOnOff: true,
|
||||
// 注册开关
|
||||
register: false,
|
||||
redirect: undefined
|
||||
};
|
||||
},
|
||||
components: {
|
||||
'slider-verify-code': sliderVerifyCode,
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function(route) {
|
||||
this.redirect = route.query && route.query.redirect;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCode();
|
||||
this.getCookie();
|
||||
},
|
||||
methods: {
|
||||
getCode() {
|
||||
getCodeImg().then(res => {
|
||||
this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
|
||||
if (this.captchaOnOff) {
|
||||
this.codeUrl = "data:image/gif;base64," + res.img;
|
||||
this.loginForm.uuid = res.uuid;
|
||||
}
|
||||
});
|
||||
},
|
||||
getCookie() {
|
||||
const username = Cookies.get("username");
|
||||
const password = Cookies.get("password");
|
||||
const rememberMe = Cookies.get('rememberMe')
|
||||
this.loginForm = {
|
||||
username: username === undefined ? this.loginForm.username : username,
|
||||
password: password === undefined ? this.loginForm.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
||||
};
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
if (this.loginForm.rememberMe) {
|
||||
Cookies.set("username", this.loginForm.username, { expires: 30 });
|
||||
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
|
||||
} else {
|
||||
Cookies.remove("username");
|
||||
Cookies.remove("password");
|
||||
Cookies.remove('rememberMe');
|
||||
}
|
||||
this.$store.dispatch("Login", this.loginForm).then(() => {
|
||||
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
if (this.captchaOnOff) {
|
||||
this.getCode();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handlerLock(data) {
|
||||
if (data) {
|
||||
this.$refs.loginForm.validateField('isLock');
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.login {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background: url("../assets/images/loginbg2.jpg") no-repeat 50% fixed;
|
||||
// background-color: rgb(24, 144, 255);
|
||||
// background-image: linear-gradient(#2196F3, #03A9F4);
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
width: 400px;
|
||||
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%;
|
||||
height: 38px;
|
||||
float: right;
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.el-login-footer {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@ -1,262 +0,0 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<div style="text-align: center;">
|
||||
<img src="/favicon2.png" height="80px">
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="title">系统登录</h3>
|
||||
</div>
|
||||
<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" v-if="captchaOnOff">
|
||||
<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" class="login-code-img"/>
|
||||
</div>
|
||||
</el-form-item> -->
|
||||
<el-form-item prop="isLock">
|
||||
<slider-verify-code v-model="loginForm.isLock" @change="handlerLock"></slider-verify-code>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</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>
|
||||
<div style="float: right;" v-if="register">
|
||||
<router-link class="link-type" :to="'/register'">立即注册</router-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 底部 -->
|
||||
<div class="el-login-footer">
|
||||
<span>Copyright © 2022 PADM All Rights Reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCodeImg } from "@/api/login";
|
||||
import sliderVerifyCode from '@/components/SlideUnlock/slider-verify-code.vue';
|
||||
|
||||
import Cookies from "js-cookie";
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
data() {
|
||||
const checkStatus = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error("请拖动滑块完成验证"));
|
||||
} else {
|
||||
if (this.loginForm.username == '' || this.loginForm.password == ''
|
||||
|| !this.loginForm.username || !this.loginForm.password) {
|
||||
setTimeout(() => {
|
||||
this.loginForm.isLock = false;
|
||||
this.$refs.loginForm.validateField('username');
|
||||
this.$refs.loginForm.validateField('password');
|
||||
return callback(new Error("验证未通过"));
|
||||
}, 1);
|
||||
}
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
codeUrl: "",
|
||||
loginForm: {
|
||||
username: "",
|
||||
password: "",
|
||||
rememberMe: false,
|
||||
code: "",
|
||||
uuid: ""
|
||||
},
|
||||
loginRules: {
|
||||
username: [
|
||||
{ required: true, trigger: "blur", message: "请输入您的账号" }
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", message: "请输入您的密码" }
|
||||
],
|
||||
isLock: [
|
||||
{validator: checkStatus, trigger: 'blur'},
|
||||
]
|
||||
// code: [{ required: true, trigger: "change", message: "请输入验证码" }]
|
||||
},
|
||||
loading: false,
|
||||
// 验证码开关
|
||||
captchaOnOff: true,
|
||||
// 注册开关
|
||||
register: false,
|
||||
redirect: undefined
|
||||
};
|
||||
},
|
||||
components: {
|
||||
'slider-verify-code': sliderVerifyCode,
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function(route) {
|
||||
this.redirect = route.query && route.query.redirect;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCode();
|
||||
this.getCookie();
|
||||
},
|
||||
methods: {
|
||||
getCode() {
|
||||
getCodeImg().then(res => {
|
||||
this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
|
||||
if (this.captchaOnOff) {
|
||||
this.codeUrl = "data:image/gif;base64," + res.img;
|
||||
this.loginForm.uuid = res.uuid;
|
||||
}
|
||||
});
|
||||
},
|
||||
getCookie() {
|
||||
const username = Cookies.get("username");
|
||||
const password = Cookies.get("password");
|
||||
const rememberMe = Cookies.get('rememberMe')
|
||||
this.loginForm = {
|
||||
username: username === undefined ? this.loginForm.username : username,
|
||||
password: password === undefined ? this.loginForm.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
||||
};
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
if (this.loginForm.rememberMe) {
|
||||
Cookies.set("username", this.loginForm.username, { expires: 30 });
|
||||
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
|
||||
} else {
|
||||
Cookies.remove("username");
|
||||
Cookies.remove("password");
|
||||
Cookies.remove('rememberMe');
|
||||
}
|
||||
this.$store.dispatch("Login", this.loginForm).then(() => {
|
||||
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
if (this.captchaOnOff) {
|
||||
this.getCode();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handlerLock(data) {
|
||||
if (data) {
|
||||
this.$refs.loginForm.validateField('isLock');
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.login {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background: url("../assets/images/loginbg.jpg") no-repeat 50% fixed;
|
||||
// background-color: rgb(24, 144, 255);
|
||||
// background-image: linear-gradient(#2196F3, #03A9F4);
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
width: 400px;
|
||||
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%;
|
||||
height: 38px;
|
||||
float: right;
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.el-login-footer {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@ -1,267 +0,0 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-row>
|
||||
<el-col></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<div style="text-align: center;">
|
||||
<img src="/favicon2.png" height="80px">
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="title">系统登录</h3>
|
||||
</div>
|
||||
<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" v-if="captchaOnOff">
|
||||
<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" class="login-code-img"/>
|
||||
</div>
|
||||
</el-form-item> -->
|
||||
<el-form-item prop="isLock">
|
||||
<slider-verify-code v-model="loginForm.isLock" @change="handlerLock"></slider-verify-code>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</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>
|
||||
<div style="float: right;" v-if="register">
|
||||
<router-link class="link-type" :to="'/register'">立即注册</router-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<!-- 底部 -->
|
||||
<div class="el-login-footer">
|
||||
<span>Copyright © 2022 PADM All Rights Reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCodeImg } from "@/api/login";
|
||||
import sliderVerifyCode from '@/components/SlideUnlock/slider-verify-code.vue';
|
||||
|
||||
import Cookies from "js-cookie";
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
data() {
|
||||
const checkStatus = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error("请拖动滑块完成验证"));
|
||||
} else {
|
||||
if (this.loginForm.username == '' || this.loginForm.password == ''
|
||||
|| !this.loginForm.username || !this.loginForm.password) {
|
||||
setTimeout(() => {
|
||||
this.loginForm.isLock = false;
|
||||
this.$refs.loginForm.validateField('username');
|
||||
this.$refs.loginForm.validateField('password');
|
||||
return callback(new Error("验证未通过"));
|
||||
}, 1);
|
||||
}
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
codeUrl: "",
|
||||
loginForm: {
|
||||
username: "",
|
||||
password: "",
|
||||
rememberMe: false,
|
||||
code: "",
|
||||
uuid: ""
|
||||
},
|
||||
loginRules: {
|
||||
username: [
|
||||
{ required: true, trigger: "blur", message: "请输入您的账号" }
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", message: "请输入您的密码" }
|
||||
],
|
||||
isLock: [
|
||||
{validator: checkStatus, trigger: 'blur'},
|
||||
]
|
||||
// code: [{ required: true, trigger: "change", message: "请输入验证码" }]
|
||||
},
|
||||
loading: false,
|
||||
// 验证码开关
|
||||
captchaOnOff: true,
|
||||
// 注册开关
|
||||
register: false,
|
||||
redirect: undefined
|
||||
};
|
||||
},
|
||||
components: {
|
||||
'slider-verify-code': sliderVerifyCode,
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function(route) {
|
||||
this.redirect = route.query && route.query.redirect;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCode();
|
||||
this.getCookie();
|
||||
},
|
||||
methods: {
|
||||
getCode() {
|
||||
getCodeImg().then(res => {
|
||||
this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
|
||||
if (this.captchaOnOff) {
|
||||
this.codeUrl = "data:image/gif;base64," + res.img;
|
||||
this.loginForm.uuid = res.uuid;
|
||||
}
|
||||
});
|
||||
},
|
||||
getCookie() {
|
||||
const username = Cookies.get("username");
|
||||
const password = Cookies.get("password");
|
||||
const rememberMe = Cookies.get('rememberMe')
|
||||
this.loginForm = {
|
||||
username: username === undefined ? this.loginForm.username : username,
|
||||
password: password === undefined ? this.loginForm.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
||||
};
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
if (this.loginForm.rememberMe) {
|
||||
Cookies.set("username", this.loginForm.username, { expires: 30 });
|
||||
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
|
||||
} else {
|
||||
Cookies.remove("username");
|
||||
Cookies.remove("password");
|
||||
Cookies.remove('rememberMe');
|
||||
}
|
||||
this.$store.dispatch("Login", this.loginForm).then(() => {
|
||||
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
if (this.captchaOnOff) {
|
||||
this.getCode();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handlerLock(data) {
|
||||
if (data) {
|
||||
this.$refs.loginForm.validateField('isLock');
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.login {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background: url("../assets/images/loginbg2.jpg") no-repeat 50% fixed;
|
||||
// background-color: rgb(24, 144, 255);
|
||||
// background-image: linear-gradient(#2196F3, #03A9F4);
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
width: 400px;
|
||||
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%;
|
||||
height: 38px;
|
||||
float: right;
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.el-login-footer {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@ -1,498 +0,0 @@
|
||||
<template>
|
||||
<div class="main-bg" style="">
|
||||
<div class="header-container narrow-screen" style="background-color: rgba(61, 184, 243, 0.34);">
|
||||
<div class="banner-box">
|
||||
<div>
|
||||
<div class="header default-transition-fast">
|
||||
<div class="header-wrapper auto clearfix">
|
||||
<div class="header-left">
|
||||
<div class="header-logo">
|
||||
<a href="#" class="logo hide-text" style="background-image: url('http://oss.xdadan.com/static/2021-07-22/82263bb2c5774f69850f5b70f137a689-1418237008018223105.png');width: 400px"> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: right;padding: 3px;display: inline-flex">
|
||||
<div>
|
||||
<div style="text-align: center;line-height: 80px;margin-right: 20px;">
|
||||
<a href="http://www.xdadan.com">首页</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="text-align: center;line-height: 80px;margin-right: 20px;">
|
||||
<a href="http://doc.xdadan.com/doc/8d979d397331651d1175177133d3cb4f" target="_blank">打单API</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="text-align: center;line-height: 80px;margin-right: 20px;">
|
||||
<a href="http://doc.xdadan.com/doc/doclogin?docId=acd38d473eb186a93beca0fb0520b673" target="_blank">跨境电商API</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="text-align: center;position: relative;line-height: 80px" >
|
||||
<input type="hidden" id="kfqrImage" value="http://oss.xdadan.com/static/2021-07-23/a3e042da6e5d4783b151f3004f4ed51f-1418505788842545153.jpeg">
|
||||
<div style="text-align: center" onclick="javascript:openKfQr('http://oss.xdadan.com/static/2021-07-23/a3e042da6e5d4783b151f3004f4ed51f-1418505788842545153.jpeg')">联系客服</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- header end-->
|
||||
<div class="login-main-area">
|
||||
<div class="auto login-inner">
|
||||
<div class="clearfix">
|
||||
|
||||
<div class="login-desc">
|
||||
<h2>高效清关，智能协同</h2>
|
||||
<p>想打单跨境通，跨境清关最佳选择！</p>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div class="login-main pie-for-element">
|
||||
<el-row>
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<div>
|
||||
<h3 class="title">系统登录</h3>
|
||||
</div>
|
||||
<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="rememberMe" style="width:100%;margin-top: 0px;">
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 0px 0px;">记住密码</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item style="width:100%;margin-top: 5px;">
|
||||
<el-popover
|
||||
placement="left"
|
||||
width="375"
|
||||
trigger="click"
|
||||
ref="popoverRef"
|
||||
effect="light"
|
||||
:offset="120"
|
||||
:popper-options="{
|
||||
// modifiers: [{
|
||||
// name: 'offset',
|
||||
// options: {
|
||||
// offset: [0, 0]
|
||||
// }
|
||||
// }],
|
||||
// boundariesElement: 'viewport',
|
||||
// removeOnDestroy: true
|
||||
}"
|
||||
:show-arrow="false"
|
||||
popper-class="table-field-operation-popover"
|
||||
>
|
||||
<div style="display: inline-flex;line-height: 40px;">
|
||||
<div>请完成安全认证</div>
|
||||
<div >
|
||||
<button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closePop" >
|
||||
<i class="el-dialog__close el-icon el-icon-close"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<slide-verify
|
||||
ref="dialogopen"
|
||||
:l="42"
|
||||
:r="10"
|
||||
:w="catcha.w"
|
||||
:h="catcha.h"
|
||||
:blocky="catcha.blocky"
|
||||
:imgurl="catcha.imgurl"
|
||||
:miniimgurl="catcha.miniimgurl"
|
||||
:slider-text="catcha.text"
|
||||
@success="onSuccess"
|
||||
@fail="onFail"
|
||||
@refresh="onRefresh"
|
||||
/>
|
||||
<el-button
|
||||
:loading="loading"
|
||||
size="medium"
|
||||
type="primary"
|
||||
style="width:100%;"
|
||||
@click.native.prevent="handleLogin"
|
||||
slot="reference"
|
||||
>
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
</el-popover>
|
||||
|
||||
<div style="float: right;" v-if="register">
|
||||
<router-link class="link-type" :to="'/register'">立即注册</router-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 验证码弹框 -->
|
||||
<el-dialog width="390px" title="拖动下方滑块完成操作" append-to-body :visible.sync="dialogVisible" :show-close="true" :close-on-click-modal="true">
|
||||
<slide-verify
|
||||
ref="dialogopen"
|
||||
:l="42"
|
||||
:r="10"
|
||||
:w="catcha.w"
|
||||
:h="catcha.h"
|
||||
:blocky="catcha.blocky"
|
||||
:imgurl="catcha.imgurl"
|
||||
:miniimgurl="catcha.miniimgurl"
|
||||
:slider-text="catcha.text"
|
||||
@success="onSuccess"
|
||||
@fail="onFail"
|
||||
@refresh="onRefresh"
|
||||
/>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
<div class="signfooter">
|
||||
<div class="auto clearfix">
|
||||
<div class="footer-signfooter">
|
||||
<p>Powered by © 2020 Xdadan All Rights Reserved </p>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSlideCaptchaImage,checkSlideCaptchaImage } from "@/api/login";
|
||||
import SlideVerify from '@/components/SlideVerify/index.vue'
|
||||
import Cookies from "js-cookie";
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
data() {
|
||||
return {
|
||||
codeUrl: "",
|
||||
loginForm: {
|
||||
username: "",
|
||||
password: "",
|
||||
rememberMe: false,
|
||||
code: "",
|
||||
uuid: ""
|
||||
},
|
||||
loginRules: {
|
||||
username: [
|
||||
{ required: true, trigger: "blur", message: "请输入您的账号" }
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", message: "请输入您的密码" }
|
||||
],
|
||||
// isLock: [
|
||||
// {validator: checkStatus, trigger: 'blur'},
|
||||
// ]
|
||||
// code: [{ required: true, trigger: "change", message: "请输入验证码" }]
|
||||
},
|
||||
loading: false,
|
||||
// 验证码开关
|
||||
captchaOnOff: true,
|
||||
// 注册开关
|
||||
register: false,
|
||||
redirect: undefined,
|
||||
|
||||
capsTooltip: false,
|
||||
loading: false,
|
||||
showDialog: false,
|
||||
redirect: undefined,
|
||||
otherQuery: {},
|
||||
dialogVisible: false, // 验证码弹框
|
||||
catcha: {
|
||||
blocky: 0,
|
||||
imgurl: '',
|
||||
miniimgurl: '',
|
||||
text: '向右拖动滑块完成拼图',
|
||||
h: 200,
|
||||
w: 350,
|
||||
sh: 90,
|
||||
sw: 110,
|
||||
modifyImg: ''
|
||||
} // 图片验证码传值
|
||||
};
|
||||
},
|
||||
components: {
|
||||
'slide-verify':SlideVerify
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function(route) {
|
||||
this.redirect = route.query && route.query.redirect;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCookie();
|
||||
},
|
||||
methods: {
|
||||
getCookie() {
|
||||
const username = Cookies.get("username");
|
||||
const password = Cookies.get("password");
|
||||
const rememberMe = Cookies.get('rememberMe')
|
||||
this.loginForm = {
|
||||
username: username === undefined ? this.loginForm.username : username,
|
||||
password: password === undefined ? this.loginForm.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
||||
};
|
||||
},
|
||||
handleLogin() {
|
||||
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.getImageVerifyCode();
|
||||
// setTimeout(() => {
|
||||
// this.dialogVisible = true
|
||||
// }, 500)
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
closePop(){
|
||||
this.$refs.popoverRef.doClose()
|
||||
},
|
||||
toLoginBySlideVerify(){
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
if (this.loginForm.rememberMe) {
|
||||
Cookies.set("username", this.loginForm.username, { expires: 30 });
|
||||
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
|
||||
} else {
|
||||
Cookies.remove("username");
|
||||
Cookies.remove("password");
|
||||
Cookies.remove('rememberMe');
|
||||
}
|
||||
this.$store.dispatch("Login", this.loginForm).then(() => {
|
||||
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 获取图形验证码
|
||||
getImageVerifyCode() {
|
||||
getSlideCaptchaImage().then(res => {
|
||||
this.loginForm.uuid = res.uuid;
|
||||
this.catcha.blocky = res.puzzleYAxis
|
||||
this.catcha.imgurl = res.modifyImg
|
||||
this.catcha.miniimgurl = res.puzzleImg
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.dialogopen) {
|
||||
this.$refs.dialogopen.reset(res.puzzleYAxis)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onFail() {
|
||||
// console.log('fail')
|
||||
},
|
||||
onSuccess(moveX) {
|
||||
this.loginForm.distance = moveX
|
||||
// 验证是否成功checkSlideCaptchaImage是后台验证接口方法
|
||||
checkSlideCaptchaImage(this.loginForm.uuid,moveX).then(res => {
|
||||
if (res.code==200) {
|
||||
this.closePop();
|
||||
this.$refs.dialogopen.handleSuccess()
|
||||
setTimeout(() => {
|
||||
this.dialogVisible = false
|
||||
this.imgurl = ''
|
||||
this.miniimgurl = ''
|
||||
this.loginForm.distance = moveX
|
||||
this.toLoginBySlideVerify()
|
||||
}, 1000)
|
||||
} else {
|
||||
this.$refs.dialogopen.handleFail()
|
||||
setTimeout(() => {
|
||||
this.getImageVerifyCode();
|
||||
}, 500)
|
||||
}
|
||||
}).catch(() => {})
|
||||
},
|
||||
|
||||
// 刷新
|
||||
onRefresh() {
|
||||
this.imgurl = ''
|
||||
this.miniimgurl = ''
|
||||
this.getImageVerifyCode()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.login {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background: url("../assets/images/loginbg2.jpg") no-repeat 50% fixed;
|
||||
// background-color: rgb(24, 144, 255);
|
||||
// background-image: linear-gradient(#2196F3, #03A9F4);
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
margin: 0px auto 16px auto;
|
||||
text-align: left;
|
||||
color: #000000;
|
||||
padding: 10px 0px;
|
||||
border-bottom: 1px solid #f6f6f6;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
width: 330px;
|
||||
padding: 10px 15px;
|
||||
.el-input {
|
||||
height: 38px;
|
||||
input {
|
||||
height: 38px;
|
||||
};
|
||||
|
||||
}
|
||||
.el-form-item{
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
height: 39px;
|
||||
width: 14px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.login-tip {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
.login-code {
|
||||
width: 33%;
|
||||
height: 38px;
|
||||
float: right;
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.el-login-footer {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
img { border: none; }
|
||||
li { list-style: none; }
|
||||
pre { white-space: pre-wrap; overflow-wrap: break-word; }
|
||||
body {
|
||||
font: 14px "Microsoft Yahei","Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif;
|
||||
background-color: rgb(24, 144, 255);
|
||||
}
|
||||
hr { height: 1px; margin: 10px 0px; border: 0px; clear: both; }
|
||||
a {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: rgb(51, 51, 51); text-decoration: none;outline: 0px; }
|
||||
a:hover { color: rgb(119, 119, 119); }
|
||||
a:active, a:hover { outline: 0px; }
|
||||
a:visited {color: rgb(51, 51, 51); }
|
||||
* { margin: 0px; box-sizing: border-box; list-style: none; }
|
||||
|
||||
strong { font-weight: 400; }
|
||||
::selection { background: rgb(30, 172, 223); color: rgb(255, 255, 255); }
|
||||
img { border: 0px; }
|
||||
::-webkit-selection { background: rgb(30, 172, 223); color: rgb(255, 255, 255); }
|
||||
.auto, .autoWidth { margin: 0px auto; max-width: 1200px; }
|
||||
.clearfix::after, .clearfix::before { display: table; line-height: 0; content: ""; }
|
||||
.clearfix::after { clear: both; }
|
||||
|
||||
.header-left, .page_no a, .pull-left { float: left; }
|
||||
.header { height: 80px; border-bottom: 2px solid rgb(239, 239, 239); }
|
||||
.banner-engine .header { background-color: transparent; }
|
||||
.header, .header-main:hover .header { background-color: rgb(255, 255, 255); }
|
||||
.header-main:hover .header { border-bottom: none; }
|
||||
.header-logo { display: inline-block; position: relative; width: 130px; height: 80px; float: left; }
|
||||
.logo, .slogan-gif { position: absolute; }
|
||||
.logo { top: 0px; left: 0px; width: 900px; height: 100%; background: url("") left center no-repeat; }
|
||||
.header .auto { overflow: visible; }
|
||||
.banner-engine .header-container { width: 100%; height: 0px; }
|
||||
.banner-box { height: 80px; }
|
||||
.banner-engine .banner-box { height: 720px; position: relative; }
|
||||
.transparent-header .banner-box, .transparent-header .header-container { width: 100%; height: 0px; }
|
||||
.signfooter { text-align: center; background-color: rgb(255, 255, 255); padding: 10px 0px; position: fixed; left: 0px; bottom: 0px; width: 100%; max-height: 98px; }
|
||||
.footer-signfooter { width: 100%; padding: 5px 0px; }
|
||||
.footer-signfooter a, .footer-signfooter p { margin-top: 8px; font-size: 12px; color: #757575; }
|
||||
.login-desc { padding-left: 20px; padding-top: 70px; color: rgb(255, 255, 255); font-size: 16px; }
|
||||
.login-desc h2 { margin-bottom: 40px; font-size: 28px; }
|
||||
.login-desc p { height: 22px; line-height: 22px; margin-bottom: 24px; text-indent: 38px; }
|
||||
.login-main-area { position: relative;
|
||||
// background-image: url("../assets/images/loginbg3.jpg");
|
||||
/*background-position: center 0px; */
|
||||
/*background-repeat: no-repeat; */
|
||||
/*background-size: 100%; */
|
||||
min-height: 510px; text-align: left; padding-top: 20px; padding-bottom: 28px;
|
||||
// background-color: rgb(24, 144, 255);
|
||||
/*background-image: linear-gradient(#2196F3, #03A9F4);*/
|
||||
}
|
||||
|
||||
.main-bg{
|
||||
background-image: url("../assets/images/loginbg.jpg");
|
||||
background-position: center 0px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
// background-color: rgb(24, 144, 255);
|
||||
height:100%
|
||||
}
|
||||
.login-inner { position: relative; z-index: 20; }
|
||||
.login-main { position: absolute; right: 80px; top: 10%; z-index: 50; padding: 30px 30px 18px; min-height: 404px; background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px; border-radius: 5px; }
|
||||
|
||||
.login-form .el-input {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
::v-deep .login-form .el-input__inner {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getInfo} from "@/api/login";
|
||||
|
||||
export default {
|
||||
name: "loginBySSO",
|
||||
data() {
|
||||
return {
|
||||
loginRules: {},
|
||||
loading: false,
|
||||
//验证码开关
|
||||
captchaOnOff: true,
|
||||
//注册开关
|
||||
register: false,
|
||||
//重定向
|
||||
redirect: undefined
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
created() {
|
||||
//页面初始化时调单点登录方法
|
||||
this.loginBySSO();
|
||||
},
|
||||
methods: {
|
||||
loginBySSO(){
|
||||
//获取地址栏中的code
|
||||
const code = this.$route.query.code;
|
||||
console.log("code="+code)
|
||||
//调用登录的接口
|
||||
if(code==''||code==undefined||code==null){
|
||||
//请求中不带code，拦截为正常登录
|
||||
}else{
|
||||
this.loading = true;//开启过渡动画
|
||||
const loginInfo = {
|
||||
"code" : code
|
||||
};
|
||||
|
||||
//执行另一套登录操作
|
||||
//不是本系统的用户,去J平台登陆去
|
||||
this.$store.dispatch("loginBySSO", loginInfo).then(() => {
|
||||
this.$message.success("登录成功");
|
||||
this.loading = false;
|
||||
//判断当前角色
|
||||
getInfo().then((res) => {
|
||||
//获取角色名称
|
||||
var rolesName = res.roles[0];
|
||||
//获取所属场馆
|
||||
this.deptInfo = res.dept;
|
||||
sessionStorage.setItem("ssUserName", res.user.nickName);
|
||||
//处理登录
|
||||
this.$router.push({path: this.redirect || "/"}).catch(() => {});
|
||||
});
|
||||
}).catch(err=> {
|
||||
console.log("有异常信息",err);
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
|
||||
</style>
|
||||
@ -1,516 +0,0 @@
|
||||
<template>
|
||||
<div class="main-bg" style="">
|
||||
<div class="header-container narrow-screen" style="background-color: rgba(61, 184, 243, 0.34);">
|
||||
<div class="banner-box">
|
||||
<div>
|
||||
<div class="header default-transition-fast">
|
||||
<div class="header-wrapper auto clearfix">
|
||||
<div class="header-left">
|
||||
<div class="header-logo">
|
||||
<a href="#" class="logo hide-text" style="background-image: url('http://oss.xdadan.com/static/2021-07-22/82263bb2c5774f69850f5b70f137a689-1418237008018223105.png');width: 400px"> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: right;padding: 3px;display: inline-flex">
|
||||
<div>
|
||||
<div style="text-align: center;line-height: 80px;margin-right: 20px;">
|
||||
<a href="http://www.xdadan.com">首页</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="text-align: center;line-height: 80px;margin-right: 20px;">
|
||||
<a href="http://doc.xdadan.com/doc/8d979d397331651d1175177133d3cb4f" target="_blank">打单API</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="text-align: center;line-height: 80px;margin-right: 20px;">
|
||||
<a href="http://doc.xdadan.com/doc/doclogin?docId=acd38d473eb186a93beca0fb0520b673" target="_blank">跨境电商API</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="text-align: center;position: relative;line-height: 80px" >
|
||||
<input type="hidden" id="kfqrImage" value="http://oss.xdadan.com/static/2021-07-23/a3e042da6e5d4783b151f3004f4ed51f-1418505788842545153.jpeg">
|
||||
<div style="text-align: center" onclick="javascript:openKfQr('http://oss.xdadan.com/static/2021-07-23/a3e042da6e5d4783b151f3004f4ed51f-1418505788842545153.jpeg')">联系客服</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- header end-->
|
||||
<div class="login-main-area">
|
||||
<div class="auto login-inner">
|
||||
<div class="clearfix">
|
||||
|
||||
<div class="login-desc">
|
||||
<h2>高效清关，智能协同</h2>
|
||||
<p>想打单跨境通，跨境清关最佳选择！</p>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div class="login-main pie-for-element">
|
||||
<el-row>
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<div>
|
||||
<h3 class="title">系统登录</h3>
|
||||
</div>
|
||||
<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" v-if="captchaOnOff">
|
||||
<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" class="login-code-img"/>
|
||||
</div>
|
||||
</el-form-item> -->
|
||||
<!-- <el-form-item prop="isLock">
|
||||
<slider-verify-code v-model="loginForm.isLock" @change="handlerLock"></slider-verify-code>
|
||||
</el-form-item> -->
|
||||
<el-form-item prop="rememberMe" style="width:100%;margin-top: 5px;">
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 0px 0px;">记住密码</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item style="width:100%;margin-top: 10px;">
|
||||
<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>
|
||||
<div style="float: right;" v-if="register">
|
||||
<router-link class="link-type" :to="'/register'">立即注册</router-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 验证码弹框 -->
|
||||
<el-dialog width="390px" title="拖动下方滑块完成操作" append-to-body :visible.sync="dialogVisible" :show-close="true" :close-on-click-modal="true">
|
||||
<slide-verify
|
||||
ref="dialogopen"
|
||||
:l="42"
|
||||
:r="10"
|
||||
:w="catcha.w"
|
||||
:h="catcha.h"
|
||||
:blocky="catcha.blocky"
|
||||
:imgurl="catcha.imgurl"
|
||||
:miniimgurl="catcha.miniimgurl"
|
||||
:slider-text="catcha.text"
|
||||
@success="onSuccess"
|
||||
@fail="onFail"
|
||||
@refresh="onRefresh"
|
||||
/>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
<div class="signfooter">
|
||||
<div class="auto clearfix">
|
||||
<div class="footer-signfooter">
|
||||
<p>Powered by © 2020 Xdadan All Rights Reserved </p>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCodeImg,getSlideCaptchaImage,checkSlideCaptchaImage } from "@/api/login";
|
||||
import sliderVerifyCode from '@/components/SlideUnlock/slider-verify-code.vue';
|
||||
import SlideVerify from '@/components/SlideVerify/index.vue'
|
||||
import Cookies from "js-cookie";
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
data() {
|
||||
const checkStatus = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error("请拖动滑块完成验证"));
|
||||
} else {
|
||||
if (this.loginForm.username == '' || this.loginForm.password == ''
|
||||
|| !this.loginForm.username || !this.loginForm.password) {
|
||||
setTimeout(() => {
|
||||
this.loginForm.isLock = false;
|
||||
this.$refs.loginForm.validateField('username');
|
||||
this.$refs.loginForm.validateField('password');
|
||||
return callback(new Error("验证未通过"));
|
||||
}, 1);
|
||||
}
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
codeUrl: "",
|
||||
loginForm: {
|
||||
username: "",
|
||||
password: "",
|
||||
rememberMe: false,
|
||||
code: "",
|
||||
uuid: ""
|
||||
},
|
||||
loginRules: {
|
||||
username: [
|
||||
{ required: true, trigger: "blur", message: "请输入您的账号" }
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", message: "请输入您的密码" }
|
||||
],
|
||||
// isLock: [
|
||||
// {validator: checkStatus, trigger: 'blur'},
|
||||
// ]
|
||||
// code: [{ required: true, trigger: "change", message: "请输入验证码" }]
|
||||
},
|
||||
loading: false,
|
||||
// 验证码开关
|
||||
captchaOnOff: true,
|
||||
// 注册开关
|
||||
register: false,
|
||||
redirect: undefined,
|
||||
|
||||
capsTooltip: false,
|
||||
loading: false,
|
||||
showDialog: false,
|
||||
redirect: undefined,
|
||||
otherQuery: {},
|
||||
dialogVisible: false, // 验证码弹框
|
||||
catcha: {
|
||||
blocky: 0,
|
||||
imgurl: '',
|
||||
miniimgurl: '',
|
||||
text: '向右拖动滑块完成拼图',
|
||||
h: 200,
|
||||
w: 350,
|
||||
sh: 90,
|
||||
sw: 110,
|
||||
modifyImg: ''
|
||||
} // 图片验证码传值
|
||||
};
|
||||
},
|
||||
components: {
|
||||
'slider-verify-code': sliderVerifyCode,
|
||||
'slide-verify':SlideVerify
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function(route) {
|
||||
this.redirect = route.query && route.query.redirect;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCode();
|
||||
this.getCookie();
|
||||
},
|
||||
methods: {
|
||||
getCode() {
|
||||
getCodeImg().then(res => {
|
||||
this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
|
||||
if (this.captchaOnOff) {
|
||||
this.codeUrl = "data:image/gif;base64," + res.img;
|
||||
this.loginForm.uuid = res.uuid;
|
||||
}
|
||||
});
|
||||
},
|
||||
getCookie() {
|
||||
const username = Cookies.get("username");
|
||||
const password = Cookies.get("password");
|
||||
const rememberMe = Cookies.get('rememberMe')
|
||||
this.loginForm = {
|
||||
username: username === undefined ? this.loginForm.username : username,
|
||||
password: password === undefined ? this.loginForm.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
||||
};
|
||||
},
|
||||
handleLogin() {
|
||||
// 登陆错误超过三次
|
||||
this.getImageVerifyCode();
|
||||
setTimeout(() => {
|
||||
this.dialogVisible = true
|
||||
}, 500)
|
||||
},
|
||||
handleLogin1() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
if (this.loginForm.rememberMe) {
|
||||
Cookies.set("username", this.loginForm.username, { expires: 30 });
|
||||
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
|
||||
} else {
|
||||
Cookies.remove("username");
|
||||
Cookies.remove("password");
|
||||
Cookies.remove('rememberMe');
|
||||
}
|
||||
this.$store.dispatch("Login", this.loginForm).then(() => {
|
||||
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
if (this.captchaOnOff) {
|
||||
this.getCode();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
toLoginBySlideVerify(){
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
if (this.loginForm.rememberMe) {
|
||||
Cookies.set("username", this.loginForm.username, { expires: 30 });
|
||||
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
|
||||
} else {
|
||||
Cookies.remove("username");
|
||||
Cookies.remove("password");
|
||||
Cookies.remove('rememberMe');
|
||||
}
|
||||
this.$store.dispatch("Login", this.loginForm).then(() => {
|
||||
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
// if (this.captchaOnOff) {
|
||||
// this.getCode();
|
||||
// }
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handlerLock(data) {
|
||||
if (data) {
|
||||
this.$refs.loginForm.validateField('isLock');
|
||||
}
|
||||
},
|
||||
|
||||
// 获取图形验证码
|
||||
getImageVerifyCode() {
|
||||
getSlideCaptchaImage().then(res => {
|
||||
// console.log("res==>"+JSON.stringify(res));
|
||||
this.loginForm.uuid = res.uuid;
|
||||
this.catcha.blocky = res.puzzleYAxis
|
||||
this.catcha.imgurl = res.modifyImg
|
||||
this.catcha.miniimgurl = res.puzzleImg
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.dialogopen) {
|
||||
this.$refs.dialogopen.reset(res.puzzleYAxis)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onFail() {
|
||||
console.log('fail')
|
||||
},
|
||||
onSuccess(moveX) {
|
||||
this.loginForm.distance = moveX
|
||||
// 验证是否成功checkSlideCaptchaImage是后台验证接口方法
|
||||
checkSlideCaptchaImage(this.loginForm.uuid,moveX).then(res => {
|
||||
|
||||
if (res.code==200) {
|
||||
this.$refs.dialogopen.handleSuccess()
|
||||
setTimeout(() => {
|
||||
this.dialogVisible = false
|
||||
this.imgurl = ''
|
||||
this.miniimgurl = ''
|
||||
this.loginForm.distance = moveX
|
||||
this.toLoginBySlideVerify()
|
||||
}, 1000)
|
||||
} else {
|
||||
console.log("12321321=>"+JSON.stringify(res))
|
||||
this.$refs.dialogopen.handleFail()
|
||||
setTimeout(() => {
|
||||
this.getImageVerifyCode();
|
||||
}, 500)
|
||||
}
|
||||
}).catch(() => {})
|
||||
},
|
||||
|
||||
// 刷新
|
||||
onRefresh() {
|
||||
this.imgurl = ''
|
||||
this.miniimgurl = ''
|
||||
this.getImageVerifyCode()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.login {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background: url("../assets/images/loginbg2.jpg") no-repeat 50% fixed;
|
||||
// background-color: rgb(24, 144, 255);
|
||||
// background-image: linear-gradient(#2196F3, #03A9F4);
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
margin: 0px auto 16px auto;
|
||||
text-align: left;
|
||||
color: #000000;
|
||||
padding: 10px 0px;
|
||||
border-bottom: 1px solid #f6f6f6;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
width: 330px;
|
||||
padding: 10px 15px;
|
||||
.el-input {
|
||||
height: 38px;
|
||||
input {
|
||||
height: 38px;
|
||||
};
|
||||
|
||||
}
|
||||
.el-form-item{
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
height: 39px;
|
||||
width: 14px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.login-tip {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
.login-code {
|
||||
width: 33%;
|
||||
height: 38px;
|
||||
float: right;
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.el-login-footer {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
img { border: none; }
|
||||
li { list-style: none; }
|
||||
pre { white-space: pre-wrap; overflow-wrap: break-word; }
|
||||
body {
|
||||
font: 14px "Microsoft Yahei","Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif;
|
||||
background-color: rgb(24, 144, 255);
|
||||
}
|
||||
hr { height: 1px; margin: 10px 0px; border: 0px; clear: both; }
|
||||
a {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: rgb(51, 51, 51); text-decoration: none;outline: 0px; }
|
||||
a:hover { color: rgb(119, 119, 119); }
|
||||
a:active, a:hover { outline: 0px; }
|
||||
a:visited {color: rgb(51, 51, 51); }
|
||||
* { margin: 0px; box-sizing: border-box; list-style: none; }
|
||||
|
||||
strong { font-weight: 400; }
|
||||
::selection { background: rgb(30, 172, 223); color: rgb(255, 255, 255); }
|
||||
img { border: 0px; }
|
||||
::-webkit-selection { background: rgb(30, 172, 223); color: rgb(255, 255, 255); }
|
||||
.auto, .autoWidth { margin: 0px auto; max-width: 1200px; }
|
||||
.clearfix::after, .clearfix::before { display: table; line-height: 0; content: ""; }
|
||||
.clearfix::after { clear: both; }
|
||||
|
||||
.header-left, .page_no a, .pull-left { float: left; }
|
||||
.header { height: 80px; border-bottom: 2px solid rgb(239, 239, 239); }
|
||||
.banner-engine .header { background-color: transparent; }
|
||||
.header, .header-main:hover .header { background-color: rgb(255, 255, 255); }
|
||||
.header-main:hover .header { border-bottom: none; }
|
||||
.header-logo { display: inline-block; position: relative; width: 130px; height: 80px; float: left; }
|
||||
.logo, .slogan-gif { position: absolute; }
|
||||
.logo { top: 0px; left: 0px; width: 900px; height: 100%; background: url("") left center no-repeat; }
|
||||
.header .auto { overflow: visible; }
|
||||
.banner-engine .header-container { width: 100%; height: 0px; }
|
||||
.banner-box { height: 80px; }
|
||||
.banner-engine .banner-box { height: 720px; position: relative; }
|
||||
.transparent-header .banner-box, .transparent-header .header-container { width: 100%; height: 0px; }
|
||||
.signfooter { text-align: center; background-color: rgb(255, 255, 255); padding: 10px 0px; position: fixed; left: 0px; bottom: 0px; width: 100%; max-height: 98px; }
|
||||
.footer-signfooter { width: 100%; padding: 5px 0px; }
|
||||
.footer-signfooter a, .footer-signfooter p { margin-top: 8px; font-size: 12px; color: #000000; }
|
||||
.login-desc { padding-left: 20px; padding-top: 70px; color: rgb(255, 255, 255); font-size: 16px; }
|
||||
.login-desc h2 { margin-bottom: 40px; font-size: 28px; }
|
||||
.login-desc p { height: 22px; line-height: 22px; margin-bottom: 24px; text-indent: 38px; }
|
||||
.login-main-area { position: relative;
|
||||
// background-image: url("../assets/images/loginbg3.jpg");
|
||||
/*background-position: center 0px; */
|
||||
/*background-repeat: no-repeat; */
|
||||
/*background-size: 100%; */
|
||||
min-height: 510px; text-align: left; padding-top: 20px; padding-bottom: 28px;
|
||||
// background-color: rgb(24, 144, 255);
|
||||
/*background-image: linear-gradient(#2196F3, #03A9F4);*/
|
||||
}
|
||||
|
||||
.main-bg{
|
||||
background-image: url("../assets/images/loginbg.jpg");
|
||||
background-position: center 0px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
// background-color: rgb(24, 144, 255);
|
||||
height:100%
|
||||
}
|
||||
.login-inner { position: relative; z-index: 20; }
|
||||
.login-main { position: absolute; right: 80px; top: 10%; z-index: 50; padding: 30px 30px 18px; min-height: 404px; background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px; border-radius: 5px; }
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user