352 lines
11 KiB
HTML
352 lines
11 KiB
HTML
<!--#
|
|
layout("/mobile/platform.html"){
|
|
#-->
|
|
|
|
<style>
|
|
.container {
|
|
padding: 0;
|
|
}
|
|
|
|
.container .title {
|
|
text-align: center;
|
|
padding: 20px;
|
|
margin: 0 !important;
|
|
background: #ffffff;
|
|
color: var(--color-primary);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.container .score {
|
|
}
|
|
|
|
.container .card {
|
|
padding: 10px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.subject {
|
|
background: #fff;
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
}
|
|
|
|
.subject p {
|
|
font-size: 16px;
|
|
margin: 20px 0 10px 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.subject .tag {
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
.score-form {
|
|
background: #ffffff;
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
border-top: 1px solid #f1f1f1;
|
|
align-items: center;
|
|
}
|
|
|
|
.score-form-total {
|
|
flex: 1;
|
|
background: #fff;
|
|
display: flex;
|
|
padding: 10px 20px 10px 0;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.score-text-news {
|
|
flex: 1;
|
|
background: #fff;
|
|
}
|
|
|
|
.score-font-style {
|
|
font-size: 32px;
|
|
color: #ff6a00;
|
|
word-break: keep-all;
|
|
line-height: 38px;
|
|
min-width: 47px;
|
|
text-align: center;
|
|
}
|
|
|
|
.score-underline {
|
|
background: url(//image.wjx.cn/images/newimg/score-form/score-underline@2x.png) no-repeat center;
|
|
background-size: 47px 16px;
|
|
display: inline-block;
|
|
height: 16px;
|
|
width: 47px;
|
|
margin-top: 7px;
|
|
}
|
|
|
|
.van-checkbox__icon--checked .van-icon {
|
|
color: #fff !important;
|
|
background-color: var(--color-primary) !important;
|
|
border-color: var(--color-primary) !important;
|
|
}
|
|
|
|
.van-checkbox__icon--disabled .van-icon {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.answer-container {
|
|
padding: 16px;
|
|
}
|
|
.correct-answer {
|
|
color: green;
|
|
}
|
|
.incorrect-answer {
|
|
color: red;
|
|
}
|
|
|
|
.button-control {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 20px;
|
|
display: flex;
|
|
column-gap: 20px;
|
|
background: #fff;
|
|
}
|
|
|
|
.history-list {
|
|
background: #f1f1f1;
|
|
padding: 10px;
|
|
}
|
|
|
|
.history-item {
|
|
background: #ffffff;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
margin: 20px 10px;
|
|
box-shadow:
|
|
8px 8px 16px #d9d9d9,
|
|
-8px -8px 16px #ffffff;
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
.history-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.history-header span {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.history-header .tag {
|
|
margin-left: 8px;
|
|
color: #fff;
|
|
padding: 2px 5px;
|
|
}
|
|
|
|
.history-info {
|
|
font-size: 14px;
|
|
color: #555;
|
|
margin-bottom: 4px;
|
|
}
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
<van-nav-bar title="问卷调查" left-arrow @click-left="pjaxReplace('/mobile/index')" placeholder fixed></van-nav-bar>
|
|
<div class="container" :style="{'padding-bottom': answerRecord.isFinish ? 0 : '84px'}">
|
|
<van-sticky offset-top="46px">
|
|
<h2 class="title">{{ activity.title }}</h2>
|
|
<div class="score-form">
|
|
<div class="score-form-total">
|
|
<div class="score-font-style">{{totalScore}}</div>
|
|
<i class="score-underline"></i>
|
|
</div>
|
|
</div>
|
|
</van-sticky>
|
|
|
|
<div style="margin-top: 50px">
|
|
<div v-for="(subject, index) in subjects" :key="index" class="subject">
|
|
<p>{{index+1}}、{{ subject.title }}</p>
|
|
<div class="tag">
|
|
<van-tag v-if="subject.type === 'checkbox'" type="primary" size="large">多选</van-tag>
|
|
<van-tag v-if="subject.type === 'radio'" type="primary" size="large">单选</van-tag>
|
|
<van-tag v-if="subject.score" type="primary" size="large">{{subject.score}}分</van-tag>
|
|
</div>
|
|
|
|
<van-checkbox-group v-model="subject.userSelectOptionIds" :ref="'subject'+subject.id">
|
|
<van-cell-group>
|
|
<van-cell v-for="(option,index) in subject.options" clickable :key="option.id" :title="option.text">
|
|
<template #title>
|
|
<span :style="{color : option.isCorrect ? 'green' : ''}">{{option.text}}</span>
|
|
</template>
|
|
<template #icon>
|
|
<van-checkbox
|
|
:name="option.id"
|
|
:ref="'option'+option.id"
|
|
:disabled="answerRecord.isFinish"
|
|
style="margin-right: 10px"
|
|
></van-checkbox>
|
|
</template>
|
|
</van-cell>
|
|
</van-cell-group>
|
|
</van-checkbox-group>
|
|
|
|
<div class="answer-container">
|
|
<div v-if="answerRecord.extJson?.[subject.id]?.isCorrect" class="correct-answer">
|
|
<van-icon name="passed"></van-icon>
|
|
回答正确
|
|
</div>
|
|
<div v-else-if="answerRecord.extJson?.[subject.id]" class="incorrect-answer">
|
|
<van-icon name="close"></van-icon>
|
|
回答错误
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-control">
|
|
<van-button v-if="canAgainQuestion" type="primary" @click="againQuestion" block>重新答题</van-button>
|
|
<van-button type="primary" @click="openHistory" block>查看全部答题记录</van-button>
|
|
</div>
|
|
</div>
|
|
|
|
<van-action-sheet v-model="historyShow" title="历史记录" >
|
|
<div class="history-list">
|
|
<div v-for="item in historyList" class="history-item">
|
|
<div class="history-header">
|
|
<span>{{ item.date }}</span>
|
|
<van-tag v-if="item.isHighestScore" type="danger" class="tag">最高分</van-tag>
|
|
<van-tag v-if="item.isLatestScore" type="primary" class="tag">最新得分</van-tag>
|
|
</div>
|
|
<div class="history-info">答题分数：{{ item.totalScore }}</div>
|
|
<div class="history-info">答题用时：{{ item.answerTime | formatSeconds }}</div>
|
|
</div>
|
|
</div>
|
|
</van-action-sheet>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const vue = new Vue({
|
|
el: "#app",
|
|
data() {
|
|
return {
|
|
answerRecordId: GetQueryString("answerRecordId"),
|
|
answerRecord: {},
|
|
subjects: [],
|
|
activity: {},
|
|
list: [],
|
|
historyShow: false,
|
|
historyList: [],
|
|
|
|
canAgainQuestion: false
|
|
}
|
|
},
|
|
computed: {
|
|
totalScore() {
|
|
if (!this.answerRecord || !this.answerRecord.extJson) {
|
|
return 0
|
|
}
|
|
let totalScore = 0
|
|
for (const key in this.answerRecord.extJson) {
|
|
if (this.answerRecord.extJson.hasOwnProperty(key)) {
|
|
totalScore += this.answerRecord.extJson[key].score || 0
|
|
}
|
|
}
|
|
return totalScore
|
|
}
|
|
},
|
|
filters: {
|
|
formatSeconds(seconds) {
|
|
if (seconds) {
|
|
const minutes = Math.floor(seconds / 60) // 获取总分钟数
|
|
const remainingSeconds = seconds % 60 // 获取剩余秒数
|
|
// 格式化输出，确保秒数始终为两位数
|
|
return minutes + "分钟" + String(remainingSeconds).padStart(2, "0") + "秒"
|
|
}
|
|
return null
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 重新答题
|
|
*/
|
|
againQuestion() {
|
|
vant.Dialog.confirm({
|
|
title: '温馨提示',
|
|
message: '确定要重新答题吗？',
|
|
}).then(() => {
|
|
pjaxReplace('/platform/h5/qsv/quiz?id=' + this.activity.id)
|
|
}).catch(() => {
|
|
// on cancel
|
|
});
|
|
},
|
|
getAnswerResult() {
|
|
$.post("/platform/h5/qsv/quiz/answerResult", { answerRecordId: this.answerRecordId }).then((res) => {
|
|
if (res.code === 0) {
|
|
this.subjects = res.data.subjects
|
|
this.activity = res.data.activity
|
|
this.getAnswerRecord()
|
|
this.getHistoryQuestion()
|
|
}
|
|
})
|
|
},
|
|
|
|
//获取回答记录
|
|
getAnswerRecord() {
|
|
$.post("/platform/h5/qsv/quiz/answerRecord", { answerRecordId: this.answerRecordId }).then((res) => {
|
|
if (res.code === 0) {
|
|
this.answerRecord = res.data
|
|
this.initAnswer()
|
|
}
|
|
})
|
|
},
|
|
//答案回显
|
|
initAnswer() {
|
|
this.subjects.forEach((subject, subjectIndex) => {
|
|
const answer = this.answerRecord.extJson[subject.id]
|
|
if (["radio", "checkbox"].includes(subject.type)) {
|
|
this.$nextTick(() => {
|
|
this.$refs["subject" + subject.id][0].toggleAll(false)
|
|
})
|
|
answer?.optionIds.forEach((optionId) => {
|
|
this.$nextTick(() => {
|
|
this.$refs["option" + optionId][0].toggle()
|
|
})
|
|
})
|
|
} else if (subject.type === "text") {
|
|
subject.userFillContent = answer?.text
|
|
}
|
|
})
|
|
},
|
|
historyBack() {
|
|
pjaxReplace('/platform/h5/qsv')
|
|
},
|
|
openHistory() {
|
|
this.historyShow = true
|
|
},
|
|
getHistoryQuestion() {
|
|
$.post("/platform/h5/qsv/quiz/historyScore", { activityId: this.activity.id }).then((res) => {
|
|
if (res.code === 0) {
|
|
this.historyList = res.data
|
|
if (this.activity.maxAttempts > res.data.length) {
|
|
this.canAgainQuestion = true
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
created() {
|
|
this.getAnswerResult()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|