From a73a6644319cac2b417cd220dc9b3978f597bf24 Mon Sep 17 00:00:00 2001 From: kalel ma Date: Sun, 26 Jul 2020 04:58:50 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/header.vue | 285 ++++++++++++++++++++++++++----- 1 file changed, 246 insertions(+), 39 deletions(-) diff --git a/src/components/common/header.vue b/src/components/common/header.vue index 92d7bda..21749f2 100644 --- a/src/components/common/header.vue +++ b/src/components/common/header.vue @@ -21,8 +21,15 @@
- 提交 - 重新开始 + 提交 + 重新开始
@@ -170,6 +177,7 @@ class="counting" @click="showCounting = !showCounting" :style="{width: showCounting ? '150px' : '30px'}" + v-if="reqType == 0" >

考试进行中 @@ -177,7 +185,11 @@


-

00:12:25

+

+ {{ hour }} : {{ mins }} : {{ sec }} +

@@ -187,6 +199,8 @@ import {getCurrentLanguage} from '@/common/i18n'; import {getExchangeRateCookie, setExchangeRateCookie} from '@/utils/auth'; import {logOut} from '@/api/user'; import {FILE_URL} from '@/api/app'; +import {submit, reStart} from '@/api/yyyf'; +import {signUp, signIn} from '@/api/user'; const Menu = { icon: [{t: 'nav.menu_name', link: '/'}], @@ -256,6 +270,16 @@ export default { perUrl: 'personal', file: '', showCounting: true, + //0 考试 1 练习 2 不计分 + reqType: 2, + //剩余时间 + remainingTime: 0, + //防止重复提交 + isSubmit: false, + hour: 0, + mins: 0, + sec: 0, + setIntervalInt: 0, }; }, @@ -271,6 +295,7 @@ export default { created() { let yyyfToken = localStorage.getItem('yyyfToken'); + this.isSubmit = localStorage.getItem('isSubmit') == 'true' ? true : false; if (yyyfToken == '' || yyyfToken == undefined) { this.$alert('未从以渔有方登录，点击确定关闭浏览器', '提示', { type: 'error', @@ -281,43 +306,196 @@ export default { this.closeWindow(); }, }); - } - this.file = FILE_URL; - this.perUrl = window.location.pathname.split('/')[1]; - // console.log(this.perUrl); - - // this.userData = Cookie.get('userData'); - this.userData = localStorage.getItem('userData'); - - if (this.userData != '' && this.userData != undefined) { - this.userData = JSON.parse(localStorage.getItem('userData')); - // console.log(this.userData); - if (this.userData.avatar != null) { - this.headerImg = this.file + this.userData.avatar; - } else { - this.headerImg = this.userData.avatar; + } else { + //请求类型 + this.reqType = localStorage.getItem('reqType'); + //如果考试 + if (this.reqType == 0) { + //获取考试剩余时间 + this.remainingTime = localStorage.getItem('remainingTime'); + //启动倒计时 + this.setIntervalInt = setInterval(this.showTime, 1000); } - } - // console.log(this.headerImg); + this.file = FILE_URL; + this.perUrl = window.location.pathname.split('/')[1]; + // console.log(this.perUrl); + + // this.userData = Cookie.get('userData'); + this.userData = localStorage.getItem('userData'); - const currentLang = getCurrentLanguage(); - for (let item of this.lang.list) { - if (item.lang === currentLang) { - this.lang.current = item; - break; + if (this.userData != '' && this.userData != undefined) { + this.userData = JSON.parse(localStorage.getItem('userData')); + // console.log(this.userData); + if (this.userData.avatar != null) { + this.headerImg = this.file + this.userData.avatar; + } else { + this.headerImg = this.userData.avatar; + } } - } - const currentrate = getExchangeRateCookie(); - for (let item of this.exRate.list) { - if (item.id === currentrate) { - this.exRate.current = item; - // setExchangeRateCookie(currentrate); - break; + // console.log(this.headerImg); + + const currentLang = getCurrentLanguage(); + for (let item of this.lang.list) { + if (item.lang === currentLang) { + this.lang.current = item; + break; + } + } + const currentrate = getExchangeRateCookie(); + for (let item of this.exRate.list) { + if (item.id === currentrate) { + this.exRate.current = item; + // setExchangeRateCookie(currentrate); + break; + } } } }, methods: { + showTime: function() { + let remainingTime = this.remainingTime; + remainingTime -= 1; + localStorage.setItem('remainingTime', remainingTime); + this.remainingTime = remainingTime; + let h = 0; + let m = 0; + let s = 0; + if (remainingTime > 0) { + h = Math.floor(remainingTime / 60 / 60); + m = Math.floor((remainingTime / 60) % 60); + s = Math.floor(remainingTime % 60); + } + if (h < 10) { + this.hour = this.format(h, 2); + } else { + this.hour = h; + } + this.mins = this.format(m, 2); + this.sec = this.format(s, 2); + if (h <= 0 && m <= 0 && s <= 0) { + if (!this.isSubmit) + this.$message.warning('考试时间到,系统将自动提交试卷'); + this.submitExam(); + } + }, + format: function(num, n) { + return (Array(n).join(0) + num).slice(-n); + }, + submitExam: function() { + let self = this; + //防止重复提交 + if (!self.isSubmit) { + self.isSubmit = true; + } else { + return false; + } + + submit().then(res => { + if (res.data.code === 200) { + this.$message.success({ + message: '提交成功', + onClose: function() { + if (self.reqType == 0) { + self.closeWindow(); + } else { + localStorage.setItem('isSubmit', JSON.stringify(true)); + self.isSubmit = false; + } + }, + }); + } else { + this.$message.warning({ + message: res.data.msg, + onClose: function() { + self.closeWindow(); + }, + }); + } + }); + }, + reStartTest: function() { + let self = this; + //防止重复提交 + if (!self.isSubmit) { + this.isSubmit = true; + } else { + return false; + } + //退出当前用户 + this.exit(1); + reStart().then(res => { + if (res.data.code === 200) { + this.$message.success({ + message: '重新开始成功', + onClose: function() { + let signParams = { + tel: res.data.data.tel, + nickName: res.data.data.nickName, + code: res.data.data.code, + password: res.data.data.password, + internationalCode: null, + invitationCode: '', + }; + self.sign(signParams); + }, + }); + } else { + this.$message.warning({ + message: res.data.msg, + onClose: function() { + self.closeWindow(); + }, + }); + } + }); + }, + sign(params) { + signUp(params).then(res => { + if (res.data.code === 200) { + this.login({ + tel: params.tel, + password: params.password, + }); + } else { + this.$message.warning(res.data.msg); + this.isSubmit = false; + } + }); + }, + login(params) { + signIn(params).then(res => { + // console.log(res); + if (res.data.code === 200) { + //判断是否保存自动登录 + // if( this.checked === true ){ + // Cookie.set('phoneNum',num) + // Cookie.set('password',pass) + // } + //保存登录的token到cookie + // Cookie.set('token', res.data.data.token); + localStorage.setItem('token', res.data.data.token); + //重复提交标识 + localStorage.setItem('isSubmit', JSON.stringify(false)); + //保存登录的用户信息到cookie + // Cookie.set('userData', res.data.data); + localStorage.setItem('userData', JSON.stringify(res.data.data)); + // console.log(JSON.parse(localStorage.getItem('userData'))); + + // 保存userID的信息到cookie + // Cookie.set('userID', res.data.data.id); + localStorage.setItem('userID', res.data.data.id); + + // 保存邀请码信息 + localStorage.setItem('invitationCode', res.data.data.invitationCode); + this.isSubmit = false; + location.href = '/entry'; + } else { + this.$message.warning(res.data.msg); + this.isSubmit = false; + } + }); + }, closeWindow: function() { if ( navigator.userAgent.indexOf('Firefox') != -1 || @@ -366,7 +544,7 @@ export default { location.href = '/personal?perUrl=' + this.perUrl + '#/' + command; } }, - exit() { + exit(params) { logOut().then(res => { if (res.data.code === 200 || res.data.code === 202) { // Cookie.set('userData', ''); @@ -374,7 +552,10 @@ export default { localStorage.removeItem('userpass'); localStorage.removeItem('userdate'); localStorage.removeItem('nowPassNOValue'); - window.location.href = '/'; + if (params == undefined) { + //window.location.href = '/'; + this.closeWindow(); + } // let pathName = window.location.pathname.split('/')[1]; // console.log(pathName); @@ -416,6 +597,7 @@ export default { align-items: center; // margin-left: 12.6%; margin-right: 7.9%; + img { width: 45px; height: 45px; @@ -439,15 +621,20 @@ export default { flex: 1; display: flex; margin-left: 2%; + .nav-menu { width: 60%; } + .menu-item { margin-right: 3%; } } + .centerNav { - flex: 1; + //flex: 1; + width: 230px; + .el-button { color: #ffffff; } @@ -486,10 +673,12 @@ export default { > a { // color: $local-menu-text-color; color: #545663; + &.is-active { color: white; } } + span { color: #545663; } @@ -505,6 +694,7 @@ export default { // padding: 0 10px; } } + .nav-menuRight { display: flex; flex-wrap: wrap; @@ -515,6 +705,7 @@ export default { align-items: center; font-size: 14px; color: $local-menu-text-color; + &.no-padding { padding: 0; } @@ -522,10 +713,12 @@ export default { > a { // color: $local-menu-text-color; color: #545663; + &.is-active { color: white; } } + span { color: #545663; } @@ -545,6 +738,7 @@ export default { .navColor { color: #e8494a !important; position: relative; + &::after { content: ''; width: 100%; @@ -560,6 +754,7 @@ export default { /* logo area */ .nav-logo-area { padding: 0; + .logo_text { font-size: 26px; color: #ffffff; @@ -599,10 +794,12 @@ export default { &:not(.is-disabled):hover { background-color: #d3dae2; } + .is-active { color: #666 !important; } } + .dropdown-menu-item-inner { color: #666; } @@ -615,12 +812,15 @@ export default { .langDropdown { left: -50% !important; } + .userDropdown { left: -5% !important; width: 110px; + .el-dropdown-menu__item { padding: 0; } + .dropdown-menu-item-inner { text-align: center; } @@ -671,16 +871,20 @@ export default { display: flex; justify-content: center; align-items: center; + span { color: #fff !important; } + &:hover { background-color: #fff; + span { color: #e8494a !important; } } } + // .userAvatar { // width: 40px; // height: 40px; @@ -695,10 +899,7 @@ export default { // } // } } -.btn-self-style { - background: #f56c6c !important; - color: #fff !important; -} + .main-nav { .counting { position: fixed; @@ -716,10 +917,16 @@ export default { height: 200px; z-index: 999; cursor: pointer; + p { width: 100%; text-align: center; } } } + +.btn-self-style { + background: #f56c6c !important; + color: #fff !important; +}