You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
376 lines
12 KiB
376 lines
12 KiB
12 months ago
|
{extend name="public/container" /}
|
||
|
|
{block name="title"}{$titles}{/block}
|
||
|
|
{block name="style"}
|
||
|
|
<style>
|
||
|
|
.question-index .panel {
|
||
|
|
width: 900px;
|
||
|
|
padding: 80px 0 20px;
|
||
|
|
border-top: 10px solid #2C8EFF;
|
||
|
|
border-radius: 4px;
|
||
|
|
margin: 70px auto 0;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .title {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 24px;
|
||
|
|
line-height: 31px;
|
||
|
|
color: #282828;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .message {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: flex-end;
|
||
|
|
padding-bottom: 35px;
|
||
|
|
margin: 20px -35px 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .message::after {
|
||
|
|
content: " ";
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 50%;
|
||
|
|
width: 50px;
|
||
|
|
height: 3px;
|
||
|
|
background-color: rgba(255, 107, 0, 0.3);
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .message .item {
|
||
|
|
margin-right: 35px;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 19px;
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .message .value {
|
||
|
|
display: inline-block;
|
||
|
|
margin-left: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .message .time .value,
|
||
|
|
.question-index .panel .message .total .value {
|
||
|
|
color: #2C8EFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .message .number {
|
||
|
|
margin-right: 3px;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 26px;
|
||
|
|
line-height: 35px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .message .degree {
|
||
|
|
padding-bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .message .degree .value {
|
||
|
|
margin-right: -5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .message .degree .iconfont {
|
||
|
|
margin-right: 5px;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #FFF0E5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .message .degree .active {
|
||
|
|
color: #FF6B00;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .message .surplus {
|
||
|
|
padding-bottom: 5px;
|
||
|
|
color: #FF6B00;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .message .people {
|
||
|
|
padding-bottom: 5px;
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .summary {
|
||
|
|
padding: 0 120px;
|
||
|
|
margin-top: 45px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .summary-head {
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 19px;
|
||
|
|
color: #282828;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .summary-body {
|
||
|
|
margin-top: 9px;
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 16px;
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .notice {
|
||
|
|
padding: 0 120px;
|
||
|
|
margin-top: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .notice-head {
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 19px;
|
||
|
|
color: #282828;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .notice-body {
|
||
|
|
margin-top: 9px;
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 16px;
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .button {
|
||
|
|
display: block;
|
||
|
|
width: 660px;
|
||
|
|
height: 60px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 30px;
|
||
|
|
margin: 34px auto 0;
|
||
|
|
background-color: #2C8EFF;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .button div {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .money {
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .money span {
|
||
|
|
font-size: 22px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .member {
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .back {
|
||
|
|
padding: 20px 0;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .back a {
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 19px;
|
||
|
|
color: #2C8EFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-index .panel .back .iconfont {
|
||
|
|
margin-left: 5px;
|
||
|
|
vertical-align: top;
|
||
|
|
font-size: 9px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
{/block}
|
||
|
|
{block name="app"}
|
||
|
|
<div v-cloak id="app" class="question-index">
|
||
|
|
<base-header :public-data="publicData" :user-info="userInfo"></base-header>
|
||
|
|
<div class="panel">
|
||
|
|
<div class="title">{{ paper.title }}</div>
|
||
|
|
<div class="message">
|
||
|
|
<div class="item time">
|
||
|
|
建议用时<div class="value"><span class="number">{{ paper.txamination_time }}</span>分钟</div>
|
||
|
|
</div>
|
||
|
|
<div class="item total">
|
||
|
|
试卷总分<div class="value"><span class="number">{{ paper.total_score }}</span>分</div>
|
||
|
|
</div>
|
||
|
|
<div class="item degree">
|
||
|
|
试题难度<div class="value"><i v-for="item in 5" :class="{ active: item <= paper.difficulty }" class="iconfont icondengji-shixin"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="paper.surplus != -1" class="item surplus">可答题{{ paper.surplus }}次</div>
|
||
|
|
<div class="item people">{{ paper.answer + paper.fake_sales }}人已答题</div>
|
||
|
|
</div>
|
||
|
|
<div class="summary">
|
||
|
|
<div class="summary-head">题型介绍</div>
|
||
|
|
<div class="summary-body">单项选择题（选项中只有1个正确答案)；多项选择题（选项中至少有2个正确答案)；判断题（选项中只有1个正确答案)。</div>
|
||
|
|
</div>
|
||
|
|
<div class="notice">
|
||
|
|
<div class="notice-head">考前必读</div>
|
||
|
|
<div class="notice-body">
|
||
|
|
<div>1.答题者准备好后，可点击“开始做题”按钮开始考试；</div>
|
||
|
|
<div>2.做题前可看题目后的标签，明白此题是单选、多选还是判断；</div>
|
||
|
|
<div>3.答题卡可查看该题是‘已答’或‘未答’状态；</div>
|
||
|
|
<div>4.作答完所有的题目点击“提交并查看结果”按钮，即可查看自己的考试结果。</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<template v-if="paper.isPay">
|
||
|
|
<button v-if="status == 0" class="button" @click="answer">开始答题</button>
|
||
|
|
<button v-if="status == 1" class="button" @click="answer">再次答题</button>
|
||
|
|
<button v-if="status == 2" class="button" @click="answer">继续答题</button>
|
||
|
|
</template>
|
||
|
|
<button v-else class="button" @click="payAnswer">支付答题<div class="money">￥<span>{{ paper.money }}</span></div>
|
||
|
|
<div class="member">（会员价：￥{{ paper.member_money }}）</div>
|
||
|
|
</button>
|
||
|
|
<div class="back">
|
||
|
|
<a :href="$router.question_category + '?type=2'">返回试题列表<i class="iconfont iconxiangyou"></i></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<base-login :public-data="publicData" :agree-content="agreeContent"></base-login>
|
||
|
|
<base-agree :agree-content="agreeContent"></base-agree>
|
||
|
|
</div>
|
||
|
|
{/block}
|
||
|
|
{block name="vm"}
|
||
|
|
<script>
|
||
|
|
require([
|
||
|
|
'vue',
|
||
|
|
'ELEMENT',
|
||
|
|
'components/base-header/index',
|
||
|
|
'components/base-footer/index',
|
||
|
|
'components/base-login/index',
|
||
|
|
'components/base-agree/index',
|
||
|
|
'mixins/base',
|
||
|
|
'router/index',
|
||
|
|
'store/index',
|
||
|
|
'api/topic',
|
||
|
|
'api/home',
|
||
|
|
], function (
|
||
|
|
Vue,
|
||
|
|
ELEMENT,
|
||
|
|
BaseHeader,
|
||
|
|
BaseFooter,
|
||
|
|
BaseLogin,
|
||
|
|
BaseAgree,
|
||
|
|
baseMixin,
|
||
|
|
router,
|
||
|
|
store,
|
||
|
|
topicApi,
|
||
|
|
homeApi,
|
||
|
|
) {
|
||
|
|
Vue.use(ELEMENT);
|
||
|
|
Vue.use(router);
|
||
|
|
var id = {$id};
|
||
|
|
new Vue({
|
||
|
|
el: '#app',
|
||
|
|
components: {
|
||
|
|
'base-header': BaseHeader,
|
||
|
|
'base-footer': BaseFooter,
|
||
|
|
'base-login': BaseLogin,
|
||
|
|
'base-agree': BaseAgree,
|
||
|
|
},
|
||
|
|
mixins: [baseMixin],
|
||
|
|
data: {
|
||
|
|
paper: {
|
||
|
|
surplus: -1,
|
||
|
|
answer: 0,
|
||
|
|
fake_sales: 0,
|
||
|
|
},
|
||
|
|
status: 0
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
userInfo: function (value) {
|
||
|
|
if (value) {
|
||
|
|
this.getPaper();
|
||
|
|
this.getStatus();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created: function () {
|
||
|
|
this.getPaper();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getPaper: function () {
|
||
|
|
var vm = this;
|
||
|
|
topicApi.testPaperDetails({
|
||
|
|
id: id
|
||
|
|
}).then(function (res) {
|
||
|
|
vm.paper = res.data;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getStatus: function () {
|
||
|
|
var vm = this;
|
||
|
|
topicApi.situationRecord({
|
||
|
|
id: id
|
||
|
|
}).then(function (res) {
|
||
|
|
vm.status = res.data;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 开始答题
|
||
|
|
getAnswer: function () {
|
||
|
|
var vm = this;
|
||
|
|
topicApi.userAnswer({
|
||
|
|
test_id: id,
|
||
|
|
type: 2
|
||
|
|
}).then(function (res) {
|
||
|
|
localStorage.setItem('record_id', res.data);
|
||
|
|
localStorage.setItem('test_id', id);
|
||
|
|
localStorage.removeItem('leftTime');
|
||
|
|
window.location.assign(vm.$router.question_detail + '?test_id=' + vm.paper.id);
|
||
|
|
}).catch(function (err) {
|
||
|
|
vm.$message(err.msg);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 再次答题
|
||
|
|
getAnswerAgain: function () {
|
||
|
|
var vm = this;
|
||
|
|
topicApi.takeTheTestAgain({
|
||
|
|
test_id: id,
|
||
|
|
type: 2
|
||
|
|
}).then(function (res) {
|
||
|
|
localStorage.setItem('record_id', res.data);
|
||
|
|
localStorage.setItem('test_id', id);
|
||
|
|
localStorage.removeItem('leftTime');
|
||
|
|
window.location.assign(vm.$router.question_detail + '?test_id=' + vm.paper.id);
|
||
|
|
}).catch(function (err) {
|
||
|
|
vm.$message(err.msg);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 继续答题
|
||
|
|
getAnswerContinue: function () {
|
||
|
|
var vm = this;
|
||
|
|
topicApi.continueAnswer({
|
||
|
|
test_id: id,
|
||
|
|
type: 2
|
||
|
|
}).then(function (res) {
|
||
|
|
localStorage.setItem('record_id', res.data);
|
||
|
|
localStorage.setItem('test_id', id);
|
||
|
|
window.location.assign(vm.$router.question_detail + '?test_id=' + vm.paper.id);
|
||
|
|
}).catch(function (err) {
|
||
|
|
vm.$message(err.msg);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 支付答题
|
||
|
|
payAnswer: function () {
|
||
|
|
var vm = this;
|
||
|
|
homeApi.user_login().then(function () {
|
||
|
|
localStorage.setItem('test_id', id);
|
||
|
|
window.location.assign(vm.$router.payment + '?type=5&id=' + vm.paper.id);
|
||
|
|
}).catch(function () {
|
||
|
|
store.setLoginAction(true);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
answer: function () {
|
||
|
|
var vm = this;
|
||
|
|
homeApi.user_login().then(function () {
|
||
|
|
switch (vm.status) {
|
||
|
|
case 0:
|
||
|
|
vm.getAnswer();
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
vm.getAnswerAgain();
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
vm.getAnswerContinue();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}).catch(function () {
|
||
|
|
store.setLoginAction(true);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{/block}
|