<template>
|
<div class="login-container">
|
<div v-title :data-title="titleName" class="main"/>
|
<div class="left-container">
|
<div class="login_title"></div>
|
<div v-if="action==='login'" class="login-component">
|
<login-form
|
@on-success-valid="handleLogin"
|
ref="getdata"
|
/>
|
</div>
|
</div>
|
|
<el-dialog
|
title="账户到期提醒"
|
:visible.sync="dialogTip"
|
:close-on-click-modal="false"
|
width="45%"
|
top="28vh"
|
:show-close="false"
|
center>
|
<div class="dateTip">
|
<div v-if="isOverTime">尊敬的烟花爆竹生产、经营厂家，您的账户免费使用权限已过期(<span>截止到：{{deadline}}</span>)，为不影响您的正常使用，请尽快缴（续）费，过期未缴费期间您的账户将不能继续登录使用。</div>
|
<div v-else>尊敬的烟花爆竹生产、经营厂家，您的账户免费使用权限即将过期，为不影响您的正常使用，请于<span>{{ deadline }}</span>之前缴（续）费，逾期未缴费您的账户将不能继续登录使用。</div>
|
<div style="margin-bottom: 10px">系统年度技术服务费人民币<span class="money">1800</span>元，点击下方“去缴费”即可进行缴（续）费操作。</div>
|
<div>感谢您的配合！</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="holdOn()">再等等</el-button>
|
<el-button type="primary" @click="toPay()">去缴费</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog
|
title="缴（续）费须知"
|
:visible.sync="dialogPay"
|
:close-on-click-modal="false"
|
width="45%"
|
top="23vh"
|
@closed="isLogin()"
|
center>
|
<div class="payTip">
|
<div>
|
<h2>付款方式：</h2>
|
<span>苏州国科鸿宇智能科技有限公司</span>
|
<div><span>纳税人识别号：</span><span>91320594MA1YCQQ60E</span></div>
|
<div><span>开户行：</span><span>中国银行股份有限公司苏州独墅湖支行</span></div>
|
<div><span>账号：</span><span>517073268476</span></div>
|
<div><span>地址：</span><span>苏州工业园区若水路398号D0313</span></div>
|
<div><span>联系电话：</span><span>0512-62872586</span></div>
|
</div>
|
<div class="payInfo">
|
<h3>提醒：</h3>
|
请您在完成付款之后，联系<br/>田老师 18796814417<br/>为您的账户进行续期，为您开具发票。
|
</div>
|
</div>
|
</el-dialog>
|
<div class="bottom-container">
|
<span class="bottom-container_title">中国科学院苏州纳米技术与纳米仿生研究所监制</span>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { loginByUsername } from '@/api/login'
|
import { checkcheck } from '@/api/enterprise'
|
import { getToken, setToken, removeToken } from '@/utils/auth'
|
import Cookies from 'js-cookie'
|
import { initRouter } from '@/utils/router'
|
|
import { parseError } from '@/utils/messageDialog'
|
import { createUser } from '@/api/user'
|
import LoginForm from './components/login-form'
|
import Vue from 'vue'
|
export default {
|
name: 'Login',
|
components: { LoginForm },
|
data() {
|
return {
|
websocket:'',
|
url: process.env.BASE_API.replace("http","ws").replace("https","wss"),
|
action: 'login',
|
screenWidth: '',
|
screenHeight: '',
|
logincontainer: 'login-container',
|
isSafe: process.env.isSafe,
|
titleName: '新疆维吾尔自治区烟花爆竹流向管理信息实名登记系统',
|
safeLoginTitle: '新疆维吾尔自治区烟花爆竹流向管理信息实名登记系统',
|
dialogTip: false,
|
dialogPay: false,
|
deadline: '',
|
isOverTime: true
|
}
|
},
|
watch: {
|
$route: {
|
handler: function(route) {
|
this.redirect = route.query && route.query.redirect
|
},
|
immediate: true
|
}
|
},
|
created() {
|
// window.addEventListener('hashchange', this.afterQRScan)
|
this.screenWidth = window.innerWidth
|
this.screenHeight = window.innerHeight
|
this.setSize()
|
window.onresize = () => {
|
this.screenWidth = window.innerWidth
|
this.screenHeight = window.innerHeight
|
this.setSize()
|
}
|
},
|
destroyed() {
|
// window.removeEventListener('hashchange', this.afterQRScan)
|
},
|
methods: {
|
setSize: function() {
|
if (this.screenWidth <= 1200) {
|
this.logincontainer = 'login-container-1'
|
} else {
|
this.logincontainer = 'login-container'
|
}
|
},
|
holdOn(){
|
const t = this
|
if(!t.isOverTime){
|
// 加载菜单
|
initRouter(t)
|
t.$router.replace('/enterprise/basic')
|
}
|
t.dialogTip = false
|
},
|
toPay(){
|
this.dialogTip = false
|
this.dialogPay = true
|
},
|
isLogin(){
|
const t = this
|
if(!t.isOverTime){
|
// 加载菜单
|
initRouter(t)
|
t.$router.replace('/enterprise/basic')
|
}
|
},
|
handleLogin(loginForm) {
|
const _this = this
|
_this.$refs.getdata.submitLoading = false
|
_this.loading = true
|
loginByUsername(loginForm)
|
.then((response) => {
|
const res = response.data
|
_this.$refs.getdata.submitLoading = false
|
if (res.code == 200) {
|
_this.loading = false
|
const data = res.result
|
if(data.deadline && data.deadline != null){
|
_this.deadline = data.deadline;
|
const date = new Date(_this.deadline);
|
if(date.getTime() < Date.now()){
|
_this.isOverTime = true
|
_this.dialogTip = true
|
return
|
}else{
|
_this.isOverTime = false
|
if (data.type != 1 && data.type != 2) {
|
if (!data.roles || data.roles.length == 0) {
|
// 验证返回的roles是否是一个非空数组
|
_this.$store.commit('SET_ROLES', [])
|
parseError({
|
error: '该用户没有权限登录，请联系所配置管理员分配角色',
|
vm: _this
|
})
|
// reject('用户未分配角色，没有权限登录')
|
return
|
}
|
}
|
this._initConnect(data.id)
|
_this.$store.commit('SET_ROLES', data.roles)
|
Cookies.set('roles', JSON.stringify(data.roles))
|
setToken(data.token)
|
Cookies.set('roleType',data.roleType)
|
Cookies.set('isSupervision',data.companyid)
|
Cookies.set('company',data.company)
|
Cookies.set('userName', data.username)
|
Cookies.set('name', data.username)
|
Cookies.set('userId', data.id)
|
Cookies.set('token_expired_at', data.tokenexpired)
|
_this.$store.commit('SET_NAME', data.username)
|
_this.$store.commit('SET_USER_TYPE', data.type)
|
const nTime = date.getTime() - Date.now();
|
console.log('还剩' + Math.floor(nTime / 86400000))
|
if(Math.floor(nTime / 86400000)>30){
|
// 加载菜单
|
initRouter(_this)
|
_this.$router.replace('/enterprise/basic')
|
}else{
|
this.dialogTip = true
|
}
|
}
|
}else{
|
if (data.type != 1 && data.type != 2) {
|
if (!data.roles || data.roles.length == 0) {
|
// 验证返回的roles是否是一个非空数组
|
_this.$store.commit('SET_ROLES', [])
|
parseError({
|
error: '该用户没有权限登录，请联系所配置管理员分配角色',
|
vm: _this
|
})
|
// reject('用户未分配角色，没有权限登录')
|
return
|
}
|
}
|
this._initConnect(data.id)
|
_this.$store.commit('SET_ROLES', data.roles)
|
Cookies.set('roles', JSON.stringify(data.roles))
|
setToken(data.token)
|
Cookies.set('roleType',data.roleType)
|
Cookies.set('isSupervision',data.companyid)
|
Cookies.set('company',data.company)
|
Cookies.set('userName', data.username)
|
Cookies.set('name', data.username)
|
Cookies.set('userId', data.id)
|
Cookies.set('token_expired_at', data.tokenexpired)
|
_this.$store.commit('SET_NAME', data.username)
|
_this.$store.commit('SET_USER_TYPE', data.type)
|
// 加载菜单
|
initRouter(_this)
|
_this.$router.replace('/enterprise/basic')
|
}
|
} else {
|
_this.$message({
|
showClose: true,
|
message: res.message,
|
type: 'error'
|
})
|
_this.loading = false
|
}
|
})
|
.catch((error) => {
|
_this.loading = false
|
_this.$refs.getdata.submitLoading = false
|
_this.$alert({
|
confirmButtonText: '确认',
|
showClose: true,
|
message: error,
|
type: 'error'
|
})
|
})
|
},
|
handleChangeToLogin() {
|
this.action = 'login'
|
},
|
async _initConnect(uid){
|
if ('WebSocket' in window) {
|
this.websocket = new WebSocket(this.url+'/push/' + uid)
|
this.initWebSocket()
|
} else {
|
alert('当前浏览器 不支持')
|
}
|
},
|
initWebSocket(){
|
// 连接错误
|
this.websocket.onerror = this.setErrorMessage
|
|
// 连接成功
|
this.websocket.onopen = this.setOnopenMessage
|
|
// 收到消息的回调
|
this.websocket.onmessage = this.setOnmessageMessage
|
|
// 连接关闭的回调
|
this.websocket.onclose = this.setOncloseMessage
|
|
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
|
window.onbeforeunload = this.onbeforeunload
|
|
},
|
setErrorMessage () {
|
console.log('连接发生错误 状态码：' + this.websocket.readyState)
|
},
|
setOnopenMessage () {
|
console.log('连接成功 状态码：' + this.websocket.readyState)
|
//发送一个请求 去执行检查，传过去一个userid 用来给自己发送信息
|
checkcheck()
|
|
},
|
setOnmessageMessage (event) {
|
// 根据服务器推送的消息做自己的业务处理
|
let jsonMsg = JSON.parse(event.data)
|
let _this = this
|
console.log(jsonMsg)
|
if (jsonMsg.type === 'notify') {
|
_this.$notify.warning({
|
message: jsonMsg.message,
|
duration:0,
|
title: '提示',
|
onClick:function() {
|
if (jsonMsg.supervision && jsonMsg.contentType === 'info' ) {
|
_this.$undone({
|
unDoneFormVisible:true
|
})
|
}
|
if (jsonMsg.supervision && jsonMsg.contentType === 'license'){
|
_this.$expired({
|
expiredFormVisible:true
|
})
|
}
|
|
}
|
});
|
}
|
|
},
|
setOncloseMessage () {
|
console.log('连接关闭 状态码：' + this.websocket.readyState)
|
},
|
onbeforeunload () {
|
this.closeWebSocket()
|
},
|
closeWebSocket () {
|
this.websocket.close()
|
}
|
}
|
}
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss">
|
.login-container {
|
min-height: 100%;
|
width: 100%;
|
background: url("../../assets/bg2.png") center no-repeat;
|
//background-size: auto 100%;
|
background-size: cover;
|
background-position: center;
|
position: relative;
|
background-color: #fff;
|
// background-color: #2d3a4b;
|
overflow: hidden;
|
.login-logo {
|
position: relative;
|
color: #fff;
|
text-align: center;
|
padding: 0 35px 0 35px;
|
margin: 0 auto;
|
margin-top: 25%;
|
margin-left: -100px;
|
}
|
.login-font {
|
position: relative;
|
text-align: center;
|
margin-left: -10%;
|
}
|
|
.login-font span {
|
display: inline-block;
|
width: 600px;
|
height: 72px;
|
font-size: 45px;
|
font-family: PingFangSC-Semibold;
|
font-weight: 600;
|
color: white;
|
line-height: 60px;
|
vertical-align: middle;
|
margin-top:50px;
|
//padding: 20px 0; /* 撑开高度 */
|
}
|
.login-logo span {
|
display: inline-block;
|
width: 500px;
|
height: 72px;
|
font-size: 45px;
|
font-family: PingFangSC-Semibold;
|
font-weight: 600;
|
color: rgba(51, 51, 51, 1);
|
line-height: 60px;
|
vertical-align: middle;
|
margin-top: 50px;
|
//padding: 20px 0; /* 撑开高度 */
|
}
|
//使用图片来替换
|
//before属性中的content文本是用来占位的,必须有
|
//可以设置字体大小来确定大小
|
//使用visibility: hidden;来隐藏文字
|
.el-icon-logo {
|
background: url("../../assets/logo.png") center no-repeat;
|
background-size: cover;
|
height: 128px;
|
width: 128px;
|
color: #fff;
|
vertical-align: middle;
|
}
|
.el-icon-logo:before {
|
content: "替";
|
font-size: 25px;
|
visibility: hidden;
|
}
|
.login_title{
|
background: url("../../assets/title@2x.png") center no-repeat;
|
width:747px;
|
height:300px;
|
margin:auto;
|
|
}
|
.left-container {
|
margin: 0 auto;
|
margin-top:3%;
|
.login-component {
|
max-width: 100%;
|
margin: 0 auto;
|
overflow: hidden;
|
width: 820px;
|
height: 480px;
|
background: #FFFFFF;
|
border-radius: 10px;
|
opacity: 0.65;
|
}
|
.register-component {
|
position: relative;
|
width: 600px;
|
max-width: 100%;
|
padding: 40px 35px 0 35px;
|
margin: 0 auto;
|
overflow: hidden;
|
background-color: #fff;
|
}
|
}
|
.bottom-container{
|
margin-top:3%;
|
text-align: center;
|
.bottom-container_title{
|
width: 527px;
|
height: 20px;
|
font-size: 14px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
line-height: 20px;
|
}
|
}
|
|
.dateTip{
|
text-indent: 36px;
|
line-height: 1.5;
|
font-size:18px;
|
|
&>div{
|
margin-bottom: 10px;
|
|
&:last-of-type{
|
margin-bottom: 0;
|
}
|
|
span{
|
color: #ff0000;
|
margin: 0 6px;
|
}
|
|
.money{
|
font-size: 22px;
|
font-weight: bolder;
|
color: #034ea2;
|
}
|
}
|
}
|
|
.payTip{
|
&>div{
|
line-height: 1.5;
|
font-size: 18px;
|
h2{
|
margin-top: 0;
|
margin-bottom: 6px;
|
}
|
&>span{
|
font-size: 22px;
|
font-weight: bolder;
|
display: block;
|
color: #034ea2;
|
margin-bottom: 6px;
|
}
|
div{
|
display: flex;
|
align-items: center;
|
|
&>span{
|
&:first-child{
|
width: 25%;
|
text-align: justify;
|
margin-right: 20px;
|
}
|
&:last-of-type{
|
width: calc(75% - 20px);
|
text-align: left;
|
}
|
}
|
}
|
}
|
.payInfo{
|
line-height: 1.8;
|
margin-top: 15px;
|
width: 100%;
|
padding: 2% 4%;
|
box-sizing: border-box;
|
background: #ffebb2;
|
border-radius: 8px;
|
h3{
|
margin-top: 0;
|
margin-bottom: 6px;
|
}
|
}
|
}
|
}
|
|
.login-container-1 {
|
min-height: 100%;
|
width: 100%;
|
background: url("../../assets/login-bg-1.png") center no-repeat;
|
//background-size: auto 100%;
|
background-size: cover;
|
background-position: center;
|
position: relative;
|
background-color: #fff;
|
// background-color: #2d3a4b;
|
overflow: hidden;
|
.login-logo {
|
position: relative;
|
color: #fff;
|
margin-top: 5%;
|
}
|
.login-font {
|
position: relative;
|
margin-top: -15%;
|
text-align: center;
|
}
|
|
.login-font span {
|
display: inline-block;
|
width: 700px;
|
height: 72px;
|
font-size: 30px;
|
font-family: PingFangSC-Semibold;
|
font-weight: 600;
|
color: white;
|
line-height: 60px;
|
vertical-align: middle;
|
//padding: 20px 0; /* 撑开高度 */
|
}
|
.login-logo span {
|
display: inline-block;
|
width: 500px;
|
height: 72px;
|
font-size: 45px;
|
font-family: PingFangSC-Semibold;
|
font-weight: 600;
|
color: rgba(51, 51, 51, 1);
|
line-height: 60px;
|
vertical-align: middle;
|
margin-top: 50px;
|
//padding: 20px 0; /* 撑开高度 */
|
}
|
//使用图片来替换
|
//before属性中的content文本是用来占位的,必须有
|
//可以设置字体大小来确定大小
|
//使用visibility: hidden;来隐藏文字
|
.el-icon-logo {
|
background: url("../../assets/logo.png") center no-repeat;
|
background-size: cover;
|
height: 128px;
|
width: 128px;
|
color: #fff;
|
vertical-align: middle;
|
}
|
.el-icon-logo:before {
|
content: "替";
|
font-size: 25px;
|
visibility: hidden;
|
}
|
.left-container {
|
margin: 0 auto;
|
.login-component {
|
background-color: white;
|
position: relative;
|
width: 500px;
|
max-width: 100%;
|
padding: 15px 35px 0 30px;
|
margin: 0 auto;
|
}
|
.register-component {
|
position: relative;
|
width: 600px;
|
max-width: 100%;
|
padding: 40px 35px 0 35px;
|
margin: 0 auto;
|
overflow: hidden;
|
background-color: #fff;
|
}
|
}
|
.bottom-container{
|
position: absolute;
|
bottom: 0;
|
left: 20%;
|
}
|
}
|
.login_main{
|
margin:auto;
|
}
|
</style>
|
