zhixinlian
/
fontend-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实现重新练习、倒计时、提交等 页面操作

Browse Source
master
unclekh 5 years ago
parent e56e782709
commit a3222d7762
4 changed files with 358 additions and 76 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 21
      src/api/yyyf.js
  2. 285
      src/components/common/header.vue
  3. 64
      src/pages/entry.vue
  4. 64
      src/pages/yyyflogin.vue

21
src/api/yyyf.js
Unescape View File

@ -31,3 +31,24 @@ export function getExamDetails(data) {
params: data, params: data,
}); });
} }
export function getUserTimeMoneyDto() {
return request({
method: 'get',
url: Host + 'exam/getUserTimeMoneyDto',
});
}
export function submit() {
return request({
method: 'get',
url: Host + 'exam/submit',
});
}
export function reStart() {
return request({
method: 'get',
url: Host + 'exam/reStart',
});
}

285
src/components/common/header.vue
Unescape View File

@ -21,8 +21,15 @@
</ul> </ul>
</div> </div>
<div class="centerNav"> <div class="centerNav">
<el-button type="success">提交</el-button> <el-button
<el-button type="danger">重新开始</el-button> type="success"
v-if="reqType != 2 && !isSubmit"
@click="submitExam"
>提交</el-button
>
<el-button type="danger" v-if="reqType == 1" @click="reStartTest"
>重新开始</el-button
>
</div> </div>
<!-- 右侧 nav --> <!-- 右侧 nav -->
<div class="rightNav" :style="{width: rightNavWidth}"> <div class="rightNav" :style="{width: rightNavWidth}">
@ -195,6 +202,7 @@
class="counting" class="counting"
@click="showCounting = !showCounting" @click="showCounting = !showCounting"
:style="{width: showCounting ? '150px' : '30px'}" :style="{width: showCounting ? '150px' : '30px'}"
v-if="reqType == 0"
> >
<p> <p>
考试进行中 考试进行中
@ -202,7 +210,11 @@
<i class="el-icon-d-arrow-left" v-else></i> <i class="el-icon-d-arrow-left" v-else></i>
</p> </p>
<br /> <br />
<p v-if="showCounting">00:12:25</p> <p v-if="showCounting">
<span>{{ hour }}</span
>&nbsp;:&nbsp;<span>{{ mins }}</span
>&nbsp;:&nbsp;<span>{{ sec }}</span>
</p>
</div> </div>
</div> </div>
</template> </template>
@ -213,6 +225,8 @@ import {getExchangeRateCookie, setExchangeRateCookie} from '@/utils/auth';
import {logOut} from '@/api/user'; import {logOut} from '@/api/user';
import Cookie from '@/common/cookie'; import Cookie from '@/common/cookie';
import {FILE_URL} from '@/api/app'; import {FILE_URL} from '@/api/app';
import {submit, reStart} from '@/api/yyyf';
import {signUp, signIn} from '@/api/user';
const Menu = { const Menu = {
icon: [{t: 'nav.menu_name', link: '/'}], icon: [{t: 'nav.menu_name', link: '/'}],
@ -282,6 +296,16 @@ export default {
perUrl: 'personal', perUrl: 'personal',
file: '', file: '',
showCounting: true, showCounting: true,
//0 考试 1 练习 2 不计分
reqType: 2,
//剩余时间
remainingTime: 0,
//防止重复提交
isSubmit: false,
hour: 0,
mins: 0,
sec: 0,
setIntervalInt: 0,
}; };
}, },
@ -297,6 +321,7 @@ export default {
created() { created() {
let yyyfToken = localStorage.getItem('yyyfToken'); let yyyfToken = localStorage.getItem('yyyfToken');
this.isSubmit = localStorage.getItem('isSubmit') == 'true' ? true : false;
if (yyyfToken == '' || yyyfToken == undefined) { if (yyyfToken == '' || yyyfToken == undefined) {
this.$alert('未从以渔有方登录，点击确定关闭浏览器', '提示', { this.$alert('未从以渔有方登录，点击确定关闭浏览器', '提示', {
type: 'error', type: 'error',
@ -307,43 +332,196 @@ export default {
this.closeWindow(); this.closeWindow();
}, },
}); });
} } else {
this.file = FILE_URL; //请求类型
this.perUrl = window.location.pathname.split('/')[1]; this.reqType = localStorage.getItem('reqType');
// console.log(this.perUrl); //如果考试
if (this.reqType == 0) {
// this.userData = Cookie.get('userData'); //获取考试剩余时间
this.userData = localStorage.getItem('userData'); this.remainingTime = localStorage.getItem('remainingTime');
//启动倒计时
if (this.userData != '' && this.userData != undefined) { this.setIntervalInt = setInterval(this.showTime, 1000);
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;
} }
} this.file = FILE_URL;
// console.log(this.headerImg); this.perUrl = window.location.pathname.split('/')[1];
// console.log(this.perUrl);
// this.userData = Cookie.get('userData');
this.userData = localStorage.getItem('userData');
const currentLang = getCurrentLanguage(); if (this.userData != '' && this.userData != undefined) {
for (let item of this.lang.list) { this.userData = JSON.parse(localStorage.getItem('userData'));
if (item.lang === currentLang) { // console.log(this.userData);
this.lang.current = item; if (this.userData.avatar != null) {
break; this.headerImg = this.file + this.userData.avatar;
} else {
this.headerImg = this.userData.avatar;
}
} }
} // console.log(this.headerImg);
const currentrate = getExchangeRateCookie();
for (let item of this.exRate.list) { const currentLang = getCurrentLanguage();
if (item.id === currentrate) { for (let item of this.lang.list) {
this.exRate.current = item; if (item.lang === currentLang) {
// setExchangeRateCookie(currentrate); this.lang.current = item;
break; break;
}
}
const currentrate = getExchangeRateCookie();
for (let item of this.exRate.list) {
if (item.id === currentrate) {
this.exRate.current = item;
// setExchangeRateCookie(currentrate);
break;
}
} }
} }
}, },
methods: { 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() { closeWindow: function() {
if ( if (
navigator.userAgent.indexOf('Firefox') != -1 || navigator.userAgent.indexOf('Firefox') != -1 ||
@ -392,7 +570,7 @@ export default {
location.href = '/personal?perUrl=' + this.perUrl + '#/' + command; location.href = '/personal?perUrl=' + this.perUrl + '#/' + command;
} }
}, },
exit() { exit(params) {
logOut().then(res => { logOut().then(res => {
if (res.data.code === 200 || res.data.code === 202) { if (res.data.code === 200 || res.data.code === 202) {
// Cookie.set('userData', ''); // Cookie.set('userData', '');
@ -400,7 +578,10 @@ export default {
localStorage.removeItem('userpass'); localStorage.removeItem('userpass');
localStorage.removeItem('userdate'); localStorage.removeItem('userdate');
localStorage.removeItem('nowPassNOValue'); localStorage.removeItem('nowPassNOValue');
window.location.href = '/'; if (params == undefined) {
//window.location.href = '/';
this.closeWindow();
}
// let pathName = window.location.pathname.split('/')[1]; // let pathName = window.location.pathname.split('/')[1];
// console.log(pathName); // console.log(pathName);
@ -442,6 +623,7 @@ export default {
align-items: center; align-items: center;
// margin-left: 12.6%; // margin-left: 12.6%;
margin-right: 7.9%; margin-right: 7.9%;
img { img {
width: 45px; width: 45px;
height: 45px; height: 45px;
@ -465,15 +647,20 @@ export default {
flex: 1; flex: 1;
display: flex; display: flex;
margin-left: 2%; margin-left: 2%;
.nav-menu { .nav-menu {
width: 60%; width: 60%;
} }
.menu-item { .menu-item {
margin-right: 3%; margin-right: 3%;
} }
} }
.centerNav { .centerNav {
flex: 1; //flex: 1;
width: 230px;
.el-button { .el-button {
color: #ffffff; color: #ffffff;
} }
@ -512,10 +699,12 @@ export default {
> a { > a {
// color: $local-menu-text-color; // color: $local-menu-text-color;
color: #545663; color: #545663;
&.is-active { &.is-active {
color: white; color: white;
} }
} }
span { span {
color: #545663; color: #545663;
} }
@ -531,6 +720,7 @@ export default {
// padding: 0 10px; // padding: 0 10px;
} }
} }
.nav-menuRight { .nav-menuRight {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -541,6 +731,7 @@ export default {
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
color: $local-menu-text-color; color: $local-menu-text-color;
&.no-padding { &.no-padding {
padding: 0; padding: 0;
} }
@ -548,10 +739,12 @@ export default {
> a { > a {
// color: $local-menu-text-color; // color: $local-menu-text-color;
color: #545663; color: #545663;
&.is-active { &.is-active {
color: white; color: white;
} }
} }
span { span {
color: #545663; color: #545663;
} }
@ -571,6 +764,7 @@ export default {
.navColor { .navColor {
color: #e8494a !important; color: #e8494a !important;
position: relative; position: relative;
&::after { &::after {
content: ''; content: '';
width: 100%; width: 100%;
@ -586,6 +780,7 @@ export default {
/* logo area */ /* logo area */
.nav-logo-area { .nav-logo-area {
padding: 0; padding: 0;
.logo_text { .logo_text {
font-size: 26px; font-size: 26px;
color: #ffffff; color: #ffffff;
@ -625,10 +820,12 @@ export default {
&:not(.is-disabled):hover { &:not(.is-disabled):hover {
background-color: #d3dae2; background-color: #d3dae2;
} }
.is-active { .is-active {
color: #666 !important; color: #666 !important;
} }
} }
.dropdown-menu-item-inner { .dropdown-menu-item-inner {
color: #666; color: #666;
} }
@ -641,12 +838,15 @@ export default {
.langDropdown { .langDropdown {
left: -50% !important; left: -50% !important;
} }
.userDropdown { .userDropdown {
left: -5% !important; left: -5% !important;
width: 110px; width: 110px;
.el-dropdown-menu__item { .el-dropdown-menu__item {
padding: 0; padding: 0;
} }
.dropdown-menu-item-inner { .dropdown-menu-item-inner {
text-align: center; text-align: center;
} }
@ -697,16 +897,20 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
span { span {
color: #fff !important; color: #fff !important;
} }
&:hover { &:hover {
background-color: #fff; background-color: #fff;
span { span {
color: #e8494a !important; color: #e8494a !important;
} }
} }
} }
// .userAvatar { // .userAvatar {
// width: 40px; // width: 40px;
// height: 40px; // height: 40px;
@ -721,10 +925,7 @@ export default {
// } // }
// } // }
} }
.btn-self-style {
background: #f56c6c !important;
color: #fff !important;
}
.main-nav { .main-nav {
.counting { .counting {
position: fixed; position: fixed;
@ -742,10 +943,16 @@ export default {
height: 200px; height: 200px;
z-index: 999; z-index: 999;
cursor: pointer; cursor: pointer;
p { p {
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
} }
} }
.btn-self-style {
background: #f56c6c !important;
color: #fff !important;
}
</style> </style>

64
src/pages/entry.vue
Unescape View File

@ -2,27 +2,46 @@
<div> <div>
<nav-header border-style="full"></nav-header> <nav-header border-style="full"></nav-header>
<div class="usdList"> <div class="usdList">
<div <div class="usdItem" element-loading-background="rgba(0, 0, 0, 0.2)">
class="usdItem"
v-for="(item, index) in [1, 2, 3]"
:key="index"
v-loading="loading"
element-loading-background="rgba(0, 0, 0, 0.2)"
>
<!-- 跳转到交易中心,携带交易对 --> <!-- 跳转到交易中心,携带交易对 -->
<a href="javascript:;"> <a href="javascript:;">
<p>微信 <i class="el-icon-star-off"></i></p> <p>微信 <i class="el-icon-star-off"></i></p>
<p>初始资金：100000000CNY</p> <p>初始资金：{{ userTimeMoneyDto.wxPayInit }}</p>
<p>余额：100000000CNY</p> <p>余额：{{ userTimeMoneyDto.wxPay }}CNY</p>
</a>
</div>
<div class="usdItem" element-loading-background="rgba(0, 0, 0, 0.2)">
<!-- 跳转到交易中心,携带交易对 -->
<a href="javascript:;">
<p>支付宝 <i class="el-icon-star-off"></i></p>
<p>初始资金：{{ userTimeMoneyDto.aliPayInit }}</p>
<p>余额：{{ userTimeMoneyDto.aliPay }}CNY</p>
</a>
</div>
<div class="usdItem" element-loading-background="rgba(0, 0, 0, 0.2)">
<!-- 跳转到交易中心,携带交易对 -->
<a href="javascript:;">
<p>银行卡 <i class="el-icon-star-off"></i></p>
<p>初始资金：{{ userTimeMoneyDto.bankCardInit }}</p>
<p>余额：{{ userTimeMoneyDto.bankCard }}CNY</p>
</a> </a>
</div> </div>
</div> </div>
<div class="usdList tabs"> <div class="usdList tabs">
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName">
<el-tab-pane label="BTC" name="BTC">余额：1</el-tab-pane> <el-tab-pane label="BTC" name="BTC"
<el-tab-pane label="USDT" name="USDT">余额：20</el-tab-pane> >余额：{{ userTimeMoneyDto.btc }}</el-tab-pane
<el-tab-pane label="EOS" name="EOS">余额：30</el-tab-pane> >
<el-tab-pane label="ETH" name="ETH">余额：40</el-tab-pane> <el-tab-pane label="USDT" name="USDT"
>余额：{{ userTimeMoneyDto.usdt }}</el-tab-pane
>
<el-tab-pane label="EOS" name="EOS"
>余额：{{ userTimeMoneyDto.eos }}</el-tab-pane
>
<el-tab-pane label="ETH" name="ETH"
>余额：{{ userTimeMoneyDto.eth }}</el-tab-pane
>
</el-tabs> </el-tabs>
</div> </div>
<Footer /> <Footer />
@ -32,18 +51,33 @@
<script> <script>
import NavHeader from '@/components/common/header'; import NavHeader from '@/components/common/header';
import Footer from '@/components/common/footer'; import Footer from '@/components/common/footer';
import {getUserTimeMoneyDto} from '@/api/yyyf';
export default { export default {
name: 'entry', name: 'entry',
data() { data() {
return { return {
activeName: 'BTC', activeName: 'BTC',
userTimeMoneyDto: {},
}; };
}, },
components: { components: {
NavHeader, NavHeader,
Footer, Footer,
}, },
created() {
getUserTimeMoneyDto().then(res => {
if (res.data.code === 200) {
this.userTimeMoneyDto = res.data.data;
} else {
this.$message.warning({
message: res.data.msg,
onClose: function() {
this.closeWindow();
},
});
}
});
},
}; };
</script> </script>

64
src/pages/yyyflogin.vue
Unescape View File

@ -19,6 +19,8 @@ export default {
loading: null, loading: null,
tel: null, tel: null,
pass: null, pass: null,
//0 考试 1 练习 2 不计分
reqType: null,
}; };
}, },
@ -26,6 +28,7 @@ export default {
created() { created() {
this.startLoading(); this.startLoading();
let params = this.parseUrl(); let params = this.parseUrl();
this.reqType = params.reqType;
//判断是否来自以渔有方 //判断是否来自以渔有方
if ( if (
!$.isEmptyObject(params) && !$.isEmptyObject(params) &&
@ -112,7 +115,8 @@ export default {
//保存登录的token到cookie //保存登录的token到cookie
// Cookie.set('token', res.data.data.token); // Cookie.set('token', res.data.data.token);
localStorage.setItem('token', res.data.data.token); localStorage.setItem('token', res.data.data.token);
//重复提交标识
localStorage.setItem('isSubmit', JSON.stringify(false));
//保存登录的用户信息到cookie //保存登录的用户信息到cookie
// Cookie.set('userData', res.data.data); // Cookie.set('userData', res.data.data);
localStorage.setItem('userData', JSON.stringify(res.data.data)); localStorage.setItem('userData', JSON.stringify(res.data.data));
@ -125,43 +129,40 @@ export default {
// 保存邀请码信息 // 保存邀请码信息
localStorage.setItem('invitationCode', res.data.data.invitationCode); localStorage.setItem('invitationCode', res.data.data.invitationCode);
this.endLoading(); this.endLoading();
location.href = '/'; location.href = '/entry';
} else { } else {
this.$message.warning(res.data.msg); this.$message.warning(res.data.msg);
} }
}); });
}, },
loginFromYyyf: function(params) { loginFromYyyf: function(params) {
let self = this;
signInYyyf(params).then(res => { signInYyyf(params).then(res => {
if (res.data.code === 200) { if (res.data.code === 200) {
let status = res.data.data.status; let status = res.data.data.status;
localStorage.setItem('yyyfToken', res.data.data.yyyfUserToken);
//0 考试 1 练习 2 不计分
localStorage.setItem('reqType', self.reqType);
if (self.reqType == 0) {
//考试 保留考试剩余
localStorage.setItem('remainingTime', res.data.data.remainingTime);
}
if (status == 1) { if (status == 1) {
//保存登录的token到cookie //保存登录的token到cookie
// Cookie.set('token', res.data.data.token); // Cookie.set('token', res.data.data.token);
localStorage.setItem('yyyfToken', res.data.data.yyyfUserToken);
let code = res.data.data.code; self.dealLogin(res);
this.tel = res.data.data.tel;
this.pass = res.data.data.password;
//注册
if (code != undefined && code != '') {
let signParams = {
tel: this.tel,
nickName: res.data.data.nickName,
code: res.data.data.code,
password: this.pass,
internationalCode: null,
invitationCode: '',
};
this.sign(signParams);
} else {
this.login();
}
} else { } else {
this.$message.warning({ this.$message.warning({
message: res.data.data.msg, message: res.data.data.msg,
onClose: function() { onClose: function() {
this.closeWindow(); if (status == 3) {
self.dealLogin(res);
} else {
self.closeWindow();
}
}, },
}); });
} }
@ -169,12 +170,31 @@ export default {
this.$message.warning({ this.$message.warning({
message: res.data.msg, message: res.data.msg,
onClose: function() { onClose: function() {
this.closeWindow(); self.closeWindow();
}, },
}); });
} }
}); });
}, },
dealLogin: function(res) {
let code = res.data.data.code;
this.tel = res.data.data.tel;
this.pass = res.data.data.password;
//注册
if (code != undefined && code != '') {
let signParams = {
tel: this.tel,
nickName: res.data.data.nickName,
code: res.data.data.code,
password: this.pass,
internationalCode: null,
invitationCode: '',
};
this.sign(signParams);
} else {
this.login();
}
},
closeWindow: function() { closeWindow: function() {
if ( if (
navigator.userAgent.indexOf('Firefox') != -1 || navigator.userAgent.indexOf('Firefox') != -1 ||

Write Preview
Loading…
Cancel
Save