|
|
@ -17,14 +17,14 @@ export default { |
|
|
statusCheckTimer: null |
|
|
statusCheckTimer: null |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
computed: { |
|
|
computed: { |
|
|
// // 监听登录状态 |
|
|
// // 监听登录状态 |
|
|
// isLoggedIn() { |
|
|
// isLoggedIn() { |
|
|
// return this.$store.getters.token && this.$store.getters.token !== '' |
|
|
// return this.$store.getters.token && this.$store.getters.token !== '' |
|
|
// } |
|
|
// } |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
watch: { |
|
|
watch: { |
|
|
// // 监听登录状态变化 |
|
|
// // 监听登录状态变化 |
|
|
// isLoggedIn(newVal, oldVal) { |
|
|
// isLoggedIn(newVal, oldVal) { |
|
|
@ -52,34 +52,34 @@ export default { |
|
|
immediate: true // 立即执行一次,这样在页面刷新时,如果已经有token,就会启动轮询 |
|
|
immediate: true // 立即执行一次,这样在页面刷新时,如果已经有token,就会启动轮询 |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mounted() { |
|
|
mounted() { |
|
|
// // 页面加载时检查当前登录状态 |
|
|
// // 页面加载时检查当前登录状态 |
|
|
// if (this.isLoggedIn) { |
|
|
// if (this.isLoggedIn) { |
|
|
// this.startStatusCheck() |
|
|
// this.startStatusCheck() |
|
|
// } |
|
|
// } |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
beforeDestroy() { |
|
|
beforeDestroy() { |
|
|
this.stopStatusCheck() |
|
|
this.stopStatusCheck() |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
methods: { |
|
|
methods: { |
|
|
startStatusCheck() { |
|
|
startStatusCheck() { |
|
|
// 先停止可能存在的定时器 |
|
|
// 先停止可能存在的定时器 |
|
|
this.stopStatusCheck() |
|
|
this.stopStatusCheck() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log('启动状态检查轮询') |
|
|
console.log('启动状态检查轮询') |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 立即执行一次检查 |
|
|
// 立即执行一次检查 |
|
|
this.checkStatusImmediate() |
|
|
this.checkStatusImmediate() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 设置定时器每秒检查一次 |
|
|
// 设置定时器每秒检查一次 |
|
|
this.statusCheckTimer = setInterval(() => { |
|
|
this.statusCheckTimer = setInterval(() => { |
|
|
this.checkStatus() |
|
|
this.checkStatus() |
|
|
}, 10000) |
|
|
}, 10000) |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
stopStatusCheck() { |
|
|
stopStatusCheck() { |
|
|
if (this.statusCheckTimer) { |
|
|
if (this.statusCheckTimer) { |
|
|
console.log('停止状态检查轮询') |
|
|
console.log('停止状态检查轮询') |
|
|
@ -87,12 +87,12 @@ export default { |
|
|
this.statusCheckTimer = null |
|
|
this.statusCheckTimer = null |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 立即检查(不等待) |
|
|
// 立即检查(不等待) |
|
|
async checkStatusImmediate() { |
|
|
async checkStatusImmediate() { |
|
|
await this.checkStatus() |
|
|
await this.checkStatus() |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 定时检查 |
|
|
// 定时检查 |
|
|
async checkStatus() { |
|
|
async checkStatus() { |
|
|
// 再次确认登录状态 |
|
|
// 再次确认登录状态 |
|
|
@ -100,14 +100,14 @@ export default { |
|
|
// this.stopStatusCheck() |
|
|
// this.stopStatusCheck() |
|
|
// return |
|
|
// return |
|
|
// } |
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
try { |
|
|
try { |
|
|
console.log('开始checkStatus') |
|
|
console.log('开始checkStatus') |
|
|
checkStatus().then(response => { |
|
|
checkStatus().then(response => { |
|
|
console.log(JSON.stringify(response)) |
|
|
console.log(JSON.stringify(response)) |
|
|
}).catch(err => { |
|
|
}).catch(err => { |
|
|
console.log(JSON.stringify(err)) |
|
|
console.log(JSON.stringify(err)) |
|
|
if(err==='无效的会话,或者会话已过期,请重新登录。'){ |
|
|
|
|
|
|
|
|
if (err === '无效的会话,或者会话已过期,请重新登录。') { |
|
|
this.stopStatusCheck() |
|
|
this.stopStatusCheck() |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
@ -125,18 +125,106 @@ export default { |
|
|
|
|
|
|
|
|
/*搜索区域样式 */ |
|
|
/*搜索区域样式 */ |
|
|
.search-area { |
|
|
.search-area { |
|
|
input{ |
|
|
|
|
|
|
|
|
input { |
|
|
width: 150px; |
|
|
width: 150px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/*详情 */ |
|
|
/*详情 */ |
|
|
.detail-container{ |
|
|
|
|
|
.header{ |
|
|
|
|
|
height: 40px; |
|
|
|
|
|
line-height: 40px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-items:flex-end; |
|
|
|
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04); |
|
|
|
|
|
|
|
|
.detail-container { |
|
|
|
|
|
background: #ffffff !important; |
|
|
|
|
|
margin: 10px 10px; |
|
|
|
|
|
|
|
|
|
|
|
.header { |
|
|
|
|
|
height: 50px; |
|
|
|
|
|
line-height: 50px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
padding: 0px 10px 0px 0px; |
|
|
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); |
|
|
|
|
|
|
|
|
|
|
|
.detail-cancel { |
|
|
|
|
|
width: 50px; |
|
|
|
|
|
padding-left: 10px; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.detail-title { |
|
|
|
|
|
line-height: 60px; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
margin-top: 10px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.content { |
|
|
|
|
|
margin-top: 10px; |
|
|
|
|
|
padding: 10px 10px; |
|
|
|
|
|
|
|
|
|
|
|
.content-title { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
background: #f9f9ff; |
|
|
|
|
|
font-size: 0.96rem; |
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
padding-left: 10px; |
|
|
|
|
|
height: 40px; |
|
|
|
|
|
line-height: 40px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: flex-start; |
|
|
|
|
|
text-align: left; |
|
|
|
|
|
|
|
|
|
|
|
.line { |
|
|
|
|
|
width: 2px; |
|
|
|
|
|
float: left; |
|
|
|
|
|
height: 16px; |
|
|
|
|
|
margin-top: 12px; |
|
|
|
|
|
margin-right: 8px; |
|
|
|
|
|
border-left: #3178ff 3px solid; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.subtitle { |
|
|
|
|
|
height: 40px; |
|
|
|
|
|
line-height: 40px; |
|
|
|
|
|
color: #464647 !important; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.pal { |
|
|
|
|
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
|
|
|
|
.left { |
|
|
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); |
|
|
|
|
|
margin: 20px 20px 20px 0px; |
|
|
|
|
|
width: 50%; |
|
|
|
|
|
padding: 10px 10px; |
|
|
|
|
|
border-radius: 5px 5px; |
|
|
|
|
|
|
|
|
|
|
|
.left-title { |
|
|
|
|
|
height: 40px; |
|
|
|
|
|
line-height: 40px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.right { |
|
|
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); |
|
|
|
|
|
margin: 20px 0px 20px 0px; |
|
|
|
|
|
width: 50%; |
|
|
|
|
|
padding: 10px 10px; |
|
|
|
|
|
border-radius: 5px 5px; |
|
|
|
|
|
|
|
|
|
|
|
.right-title { |
|
|
|
|
|
height: 40px; |
|
|
|
|
|
line-height: 40px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |