|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | 天诚科技 [ 刘海东 17600099397赋能开发者，助力企业发展 ] -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Licensed 该系统并不是自由软件，未经许可不能去掉相关版权 -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Author:甘肃天诚志信电子商务有限公司 刘海东 联系电话维系17600099397 -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
{extend name="public/container"}
|
|
|
{block name="title"}考试结果{/block}
|
|
|
{block name="head"}
|
|
|
<style>
|
|
|
.circle-container {
|
|
|
margin-top: .8rem;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.circle-container p {
|
|
|
font-size: .22rem;
|
|
|
color: #999;
|
|
|
}
|
|
|
|
|
|
.percent-text {
|
|
|
color: #2c8eff;
|
|
|
}
|
|
|
|
|
|
.certificate-image {
|
|
|
position: fixed;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
z-index: 56;
|
|
|
width: 6rem;
|
|
|
-webkit-transform: translate(-50%, -50%);
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
</style>
|
|
|
{/block}
|
|
|
{block name="content"}
|
|
|
<div v-cloak id="app">
|
|
|
<div class="question-result-page">
|
|
|
<div class="circle-container">
|
|
|
<vue-circle-progress
|
|
|
ref="circle"
|
|
|
id="circle"
|
|
|
:progress="0"
|
|
|
:size="133"
|
|
|
:reverse="false"
|
|
|
line-cap="round"
|
|
|
:fill="fill"
|
|
|
empty-fill="rgba(213, 224, 236, 0.6)"
|
|
|
:animation-start-value="0.0"
|
|
|
:start-angle="Math.PI / 2"
|
|
|
insert-mode="append"
|
|
|
:thickness="5"
|
|
|
inner-text="正确率"
|
|
|
:show-percent="true"
|
|
|
><p>正确率</p></vue-circle-progress>
|
|
|
</div>
|
|
|
<div class="title">{{ result.title }}</div>
|
|
|
<ul v-if="result.is_score" class="score">
|
|
|
<li>
|
|
|
<div><img src="{__WAP_PATH}zsff/images/result01.png"><span>本次得分</span></div>
|
|
|
<div>{{ result.score }}</div>
|
|
|
</li>
|
|
|
<li v-if="result.grade">
|
|
|
<div><img src="{__WAP_PATH}zsff/images/result02.png"><span>评分标准</span></div>
|
|
|
<div>{{ result.grade }}</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<ul class="basic">
|
|
|
<li>
|
|
|
<div>题目数</div>
|
|
|
<div>{{ result.test_paper_question.length }}</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div>错题数</div>
|
|
|
<div>{{ result.wrong_question }}</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div>未答数</div>
|
|
|
<div>{{ result.not_questions }}</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div>本次用时</div>
|
|
|
<div>{{ result.duration_time }}</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<div class="result">
|
|
|
<div class="result-hd">
|
|
|
<div>答题情况</div>
|
|
|
<ul>
|
|
|
<li><span></span><span>正确</span></li>
|
|
|
<li><span></span><span>错误</span></li>
|
|
|
<li><span></span><span>未答</span></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="result-bd">
|
|
|
<a v-for="(item, index) in result.test_paper_question" :class="{ no: item.is_correct === 1, ok: item.is_correct === 2 }" href="javascript:">{{ index + 1 }}</a>
|
|
|
</div>
|
|
|
<div v-if="!footerHidden" class="result-ft">
|
|
|
<a :href="'{:url('topic/question_sheet')}?is_analysis=1&test_id=' + test_id + '&record_id=' + result.id">查看解析</a>
|
|
|
<a :href="'{:url('special/question_index')}?id=' + test_id">再考一次</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div :class="{ mask: imgSrc }" @touchmove.prevent @click="imgSrc = ''"></div>
|
|
|
<img v-if="imgSrc" :src="imgSrc" class="certificate-image">
|
|
|
</div>
|
|
|
<quick-menu></quick-menu>
|
|
|
</div>
|
|
|
<script>
|
|
|
require([
|
|
|
'vue',
|
|
|
'helper',
|
|
|
'store',
|
|
|
'vue-circle-progress',
|
|
|
'axios',
|
|
|
'layer',
|
|
|
'moment',
|
|
|
'quick'
|
|
|
], function (Vue, $h, $http, VueCircle, axios, layer, moment) {
|
|
|
var vm = new Vue({
|
|
|
el: '#app',
|
|
|
components: {
|
|
|
'vue-circle-progress': VueCircle
|
|
|
},
|
|
|
data: {
|
|
|
test_id: 0,
|
|
|
result: {
|
|
|
title: '--',
|
|
|
score: 0,
|
|
|
grade: '--',
|
|
|
test_paper_question: [],
|
|
|
wrong_question: 0,
|
|
|
duration_time: '00:00:00'
|
|
|
},
|
|
|
fill : { gradient: ["rgba(44, 142, 255, 1)", "rgba(44, 142, 255, 0.05)"] },
|
|
|
footerHidden: false,
|
|
|
imgSrc: ''
|
|
|
},
|
|
|
created: function () {
|
|
|
this.test_id = $h.getParmas('test_id');
|
|
|
this.footerHidden = $h.getParmas('from') === 'question_user';
|
|
|
this.getResult();
|
|
|
|
|
|
$h.delCookie('exam_time');
|
|
|
},
|
|
|
methods: {
|
|
|
// 获取答题结果
|
|
|
getResult: function () {
|
|
|
$h.loadFFF();
|
|
|
return $http.baseGet($h.U({
|
|
|
c: 'topic',
|
|
|
a: 'examinationResults',
|
|
|
q: {
|
|
|
test_id: this.test_id,
|
|
|
type: 2
|
|
|
}
|
|
|
}), function (res) {
|
|
|
var result = res.data.data;
|
|
|
var questions = result.test_paper_question;
|
|
|
|
|
|
var duration = result.duration
|
|
|
var hours = Math.floor(duration / 3600000);
|
|
|
var minutes = Math.floor((duration - hours * 3600000) / 60000);
|
|
|
var seconds = Math.floor((duration - hours * 3600000 - minutes * 60000) / 1000);
|
|
|
if (hours < 10) {
|
|
|
hours = '0' + hours;
|
|
|
}
|
|
|
if (minutes < 10) {
|
|
|
minutes = '0' + minutes;
|
|
|
}
|
|
|
if (seconds < 10) {
|
|
|
seconds = '0' + seconds;
|
|
|
}
|
|
|
result.duration_time = hours + ':' + minutes + ':' + seconds;
|
|
|
|
|
|
for (var i = questions.length; i--;) {
|
|
|
if (!Array.isArray(questions[i].userAnswer)) {
|
|
|
Object.assign(questions[i], questions[i].userAnswer);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
vm.$refs.circle.updateProgress(parseInt(result.accuracy));
|
|
|
vm.result = result;
|
|
|
$h.loadClear();
|
|
|
|
|
|
vm.getInspect();
|
|
|
}, function () {
|
|
|
window.location.replace($h.U({
|
|
|
c: 'topic',
|
|
|
a: 'question_user'
|
|
|
}));
|
|
|
});
|
|
|
},
|
|
|
// 是否可以发放证书
|
|
|
getInspect: function () {
|
|
|
$h.loadFFF();
|
|
|
axios.get($h.U({
|
|
|
c: 'topic',
|
|
|
a: 'inspect',
|
|
|
q: {
|
|
|
test_id: this.test_id
|
|
|
}
|
|
|
})).then(function (res) {
|
|
|
$h.loadClear();
|
|
|
if (200 === res.data.code) {
|
|
|
layer.confirm('恭喜您已达到证书发放标准，是否领取?', {
|
|
|
title: false,
|
|
|
closeBtn: 0,
|
|
|
btn: ['领取', '取消']
|
|
|
}, function (index) {
|
|
|
vm.getCertificate();
|
|
|
layer.close(index);
|
|
|
});
|
|
|
}
|
|
|
}).catch(function () {
|
|
|
$h.loadClear();
|
|
|
});
|
|
|
},
|
|
|
// 领取证书
|
|
|
getCertificate: function () {
|
|
|
$h.loadFFF();
|
|
|
$http.baseGet($h.U({
|
|
|
c: 'topic',
|
|
|
a: 'getTheCertificate',
|
|
|
q: {
|
|
|
test_id: this.test_id
|
|
|
}
|
|
|
}), function (res) {
|
|
|
$h.loadClear();
|
|
|
layer.msg('领取成功<br>证书正在生成…', {
|
|
|
anim: 0
|
|
|
}, function () {
|
|
|
vm.getCertificateInfo(res.data.msg);
|
|
|
});
|
|
|
}, function (err) {
|
|
|
$h.loadClear();
|
|
|
console.error(err);
|
|
|
});
|
|
|
},
|
|
|
// 获取证书信息
|
|
|
getCertificateInfo: function (id) {
|
|
|
$h.loadFFF();
|
|
|
$http.baseGet($h.U({
|
|
|
c: 'topic',
|
|
|
a: 'viewCertificate',
|
|
|
q: {
|
|
|
id: id,
|
|
|
obtain: 2
|
|
|
}
|
|
|
}), function (res) {
|
|
|
$h.loadClear();
|
|
|
vm.createCertificate(res.data.data);
|
|
|
}, function (err) {
|
|
|
$h.loadClear();
|
|
|
console.error(err);
|
|
|
});
|
|
|
},
|
|
|
// 加载图片
|
|
|
loadImage: function (path) {
|
|
|
return new Promise(function (resolve, reject) {
|
|
|
var image = new Image();
|
|
|
image.crossOrigin = 'anonymous';
|
|
|
image.onload = function () {
|
|
|
resolve(image);
|
|
|
};
|
|
|
image.onerror = function () {
|
|
|
reject('error-image');
|
|
|
};
|
|
|
image.src = path + '?' + new Date().getTime();
|
|
|
});
|
|
|
},
|
|
|
// 生成证书图片
|
|
|
createCertificate: function (certificate) {
|
|
|
$h.loadFFF();
|
|
|
Promise.all([
|
|
|
this.loadImage(certificate.certificate.background),
|
|
|
this.loadImage(certificate.certificate.qr_code)
|
|
|
]).then(function (images) {
|
|
|
var canvas = document.createElement('canvas');
|
|
|
var context = canvas.getContext('2d');
|
|
|
|
|
|
canvas.width = images[0].width;
|
|
|
canvas.height = images[0].height;
|
|
|
|
|
|
context.drawImage(images[0], 0, 0);
|
|
|
context.drawImage(images[1], 220, 557, 160, 160);
|
|
|
|
|
|
context.fillStyle = 'rgba(255, 255, 255, 1)';
|
|
|
context.fillRect(220, 724, 160, 36);
|
|
|
|
|
|
context.font = '20px sans-serif';
|
|
|
context.textAlign = 'center';
|
|
|
context.fillStyle = '#666666';
|
|
|
context.fillText('长按二维码查看', 300, 748);
|
|
|
|
|
|
context.font = 'bold 34px sans-serif';
|
|
|
context.fillStyle = '#29466D';
|
|
|
context.fillText(certificate.nickname, 300, 296);
|
|
|
|
|
|
context.font = '24px sans-serif';
|
|
|
context.fillText('颁发时间：' + moment(certificate.add_time * 1000).format('YYYY.MM.DD'), 300, 481);
|
|
|
|
|
|
context.font = '28px sans-serif';
|
|
|
context.textAlign = 'start';
|
|
|
context.fillStyle = '#333333';
|
|
|
|
|
|
for (var i = Math.ceil(certificate.certificate.explain.length % 16); i--;) {
|
|
|
context.fillText(certificate.certificate.explain.substr(i * 16, 16), 83, i * 40 + 370);
|
|
|
}
|
|
|
|
|
|
vm.imgSrc = canvas.toDataURL('image/jpeg');
|
|
|
canvas = null;
|
|
|
$h.loadClear();
|
|
|
}).catch(function (error) {
|
|
|
$h.loadClear();
|
|
|
console.error(error);
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
{/block}
|
|
|
|
