|
@@ -10,18 +10,18 @@
|
|
|
<div class="container">
|
|
|
<div class="articel" v-html="sanitizeHTML(data.article)"></div>
|
|
|
<div class="question-list">
|
|
|
- <div v-if="isAnswer">
|
|
|
+ <template v-if="isAnswer">
|
|
|
<component
|
|
|
:is="previewComponents[item.type]"
|
|
|
v-for="(item, i) in question_list"
|
|
|
:key="i"
|
|
|
+ ref="preview"
|
|
|
class="preview"
|
|
|
:data="item"
|
|
|
- :answer="answer.question_list[i]"
|
|
|
@change="changeAnswer(i, item.type, $event)"
|
|
|
/>
|
|
|
- </div>
|
|
|
- <div v-else>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
<component
|
|
|
:is="previewComponents[item.type]"
|
|
|
v-for="(item, i) in childPreviewData"
|
|
@@ -30,7 +30,7 @@
|
|
|
:data="item"
|
|
|
@change="changeAnswer(i, item.type, $event)"
|
|
|
/>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -77,8 +77,16 @@ export default {
|
|
|
isAnswer: {
|
|
|
handler(val) {
|
|
|
if (val) {
|
|
|
- this.data.question_list.forEach(({ id }, i) => {
|
|
|
- this.getQuestionInfo(id, i);
|
|
|
+ const promises = this.data.question_list.map(({ id }) => {
|
|
|
+ return GetQuestionInfo({ question_id: id });
|
|
|
+ });
|
|
|
+ Promise.all(promises).then((res) => {
|
|
|
+ this.question_list = res.map(({ question }) => {
|
|
|
+ let content = JSON.parse(question.content);
|
|
|
+ if (!question.content) return { answer_list: [] };
|
|
|
+ content.id = question.id;
|
|
|
+ return content;
|
|
|
+ });
|
|
|
});
|
|
|
}
|
|
|
},
|
|
@@ -96,16 +104,35 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
changeAnswer(i, type, { answer_list }) {
|
|
|
- this.data.question_list[i].answer_list = answer_list;
|
|
|
- this.data.question_list[i].type = type;
|
|
|
+ if (this.disabled) return;
|
|
|
+ this.answer.question_list[i].answer_list = answer_list;
|
|
|
+ this.answer.question_list[i].type = type;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 显示答案
|
|
|
+ * @param {Boolean} isJudgingRightWrong 是否判断对错
|
|
|
+ * @param {Boolean} isShowRightAnswer 是否显示正确答案
|
|
|
+ * @param {Object} userAnswer 用户答案
|
|
|
+ */
|
|
|
+ showAnswer(isJudgingRightWrong, isShowRightAnswer, userAnswer) {
|
|
|
+ this.isJudgingRightWrong = isJudgingRightWrong;
|
|
|
+ this.isShowRightAnswer = isShowRightAnswer;
|
|
|
+ if (userAnswer) this.answer = userAnswer;
|
|
|
+ if (this.question_list.length === this.answer.question_list.length) {
|
|
|
+ return this.fillAnswer(isJudgingRightWrong, isShowRightAnswer);
|
|
|
+ }
|
|
|
+ this.$watch('question_list', (val) => {
|
|
|
+ if (val.length !== this.answer.question_list.length) return;
|
|
|
+ this.fillAnswer(isJudgingRightWrong, isShowRightAnswer);
|
|
|
+ });
|
|
|
},
|
|
|
- getQuestionInfo(question_id, i) {
|
|
|
- GetQuestionInfo({ question_id })
|
|
|
- .then(({ question }) => {
|
|
|
- if (!question.content) return;
|
|
|
- this.$set(this.question_list, i, JSON.parse(question.content));
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
+ fillAnswer(isJudgingRightWrong, isShowRightAnswer) {
|
|
|
+ this.answer.question_list.forEach(({ id, answer_list }) => {
|
|
|
+ const index = this.question_list.findIndex((item) => item.id === id);
|
|
|
+ if (index !== -1) {
|
|
|
+ this.$refs.preview[index].showAnswer(isJudgingRightWrong, isShowRightAnswer, { answer_list });
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
},
|
|
|
};
|