|
|
@@ -0,0 +1,2660 @@
|
|
|
+<template>
|
|
|
+ <div class="course-exam">
|
|
|
+ <Header></Header>
|
|
|
+ <section class="section">
|
|
|
+ <div class="container">
|
|
|
+ <div class="section__header">
|
|
|
+ <!-- <el-breadcrumb separator="/">
|
|
|
+ <el-breadcrumb-item
|
|
|
+ v-for="(item, index) in $route.matched"
|
|
|
+ :key="index"
|
|
|
+ :to="{ path: item.path }"
|
|
|
+ >{{ item.name }}</el-breadcrumb-item
|
|
|
+ >
|
|
|
+ </el-breadcrumb> -->
|
|
|
+ </div>
|
|
|
+ <div class="section__body">
|
|
|
+ <div class="explain-record">
|
|
|
+ <div class="explain-record__body">
|
|
|
+ <div class="left-box">
|
|
|
+ <div class="left-box__header">
|
|
|
+ <el-progress
|
|
|
+ class="progress"
|
|
|
+ :text-inside="true"
|
|
|
+ :stroke-width="26"
|
|
|
+ :percentage="
|
|
|
+ toFixed(
|
|
|
+ (questionOverNum(true) / questionList.length) * 100
|
|
|
+ ) || 0
|
|
|
+ "
|
|
|
+ ></el-progress>
|
|
|
+ <div class="text">
|
|
|
+ 已完成<span>{{ questionOverNum(true) }}</span
|
|
|
+ >/{{ questionList.length }}道题
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="left-box__body">
|
|
|
+ <template v-for="(question, questionIndex) in questionList">
|
|
|
+ <div
|
|
|
+ class="question"
|
|
|
+ v-if="question.type == 1 && current == questionIndex"
|
|
|
+ :key="questionIndex"
|
|
|
+ >
|
|
|
+ <div class="question__title">
|
|
|
+ {{ questionIndex + 1 }}、单选题
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question__desc"
|
|
|
+ v-html="question.content"
|
|
|
+ ></div>
|
|
|
+ <div class="question__content">
|
|
|
+ <div class="question-list" v-if="!question.ques">
|
|
|
+ <div
|
|
|
+ class="radio"
|
|
|
+ v-for="(item, index) in question.jsonStr"
|
|
|
+ :key="index"
|
|
|
+ @click="
|
|
|
+ radioSelect(
|
|
|
+ question,
|
|
|
+ questionIndex,
|
|
|
+ item.optionsId
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div>{{ ast[index] }}. {{ item.content }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="question-list" v-if="question.ques">
|
|
|
+ <div
|
|
|
+ class="radio"
|
|
|
+ :class="{
|
|
|
+ right:
|
|
|
+ item.optionsId == question.ques ||
|
|
|
+ item.optionsId == question.ans,
|
|
|
+ wrong:
|
|
|
+ item.optionsId == question.ques &&
|
|
|
+ question.ques != question.ans,
|
|
|
+ }"
|
|
|
+ v-for="(item, index) in question.jsonStr"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div>{{ ast[index] }}. {{ item.content }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="answer-list" v-if="question.ques">
|
|
|
+ <div class="answer-list__left">
|
|
|
+ 正确答案：{{ ast[question.ans - 1] }}
|
|
|
+ </div>
|
|
|
+ <div class="answer-list__left">
|
|
|
+ 我的答案：{{ ast[question.ques - 1] }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="explain-list" v-if="question.ques">
|
|
|
+ <div class="explain-list__header">答案解析：</div>
|
|
|
+ <div
|
|
|
+ class="explain-list__body"
|
|
|
+ v-html="question.analysisContent"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="question__btns">
|
|
|
+ <div class="collect" @click="collect">收藏本题</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question"
|
|
|
+ v-if="question.type == 2 && current == questionIndex"
|
|
|
+ :key="questionIndex"
|
|
|
+ >
|
|
|
+ <div class="question__title">
|
|
|
+ {{ questionIndex + 1 }}、多选题
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question__desc"
|
|
|
+ v-html="question.content"
|
|
|
+ ></div>
|
|
|
+ <div class="question__content">
|
|
|
+ <div class="question-list" v-if="!question.ques">
|
|
|
+ <el-checkbox
|
|
|
+ class="checkbox"
|
|
|
+ v-for="(item, index) in question.jsonStr"
|
|
|
+ :key="index"
|
|
|
+ :label="item.optionsId"
|
|
|
+ v-model="item.checked"
|
|
|
+ >
|
|
|
+ <div>{{ ast[index] }}. {{ item.content }}</div>
|
|
|
+ </el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="question-list" v-if="question.ques">
|
|
|
+ <el-checkbox
|
|
|
+ disabled
|
|
|
+ class="checkbox"
|
|
|
+ :class="{
|
|
|
+ right:
|
|
|
+ question.ques.indexOf(item.optionsId) != -1 ||
|
|
|
+ question.ans.indexOf(item.optionsId) != -1,
|
|
|
+ wrong:
|
|
|
+ question.ques.indexOf(item.optionsId) != -1 &&
|
|
|
+ question.ans.indexOf(item.optionsId) == -1,
|
|
|
+ }"
|
|
|
+ v-for="(item, index) in question.jsonStr"
|
|
|
+ :key="index"
|
|
|
+ :label="item.optionsId"
|
|
|
+ v-model="item.checked"
|
|
|
+ >
|
|
|
+ <div>{{ ast[index] }}. {{ item.content }}</div>
|
|
|
+ </el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="answer-list" v-if="question.ques">
|
|
|
+ <div class="answer-list__left">
|
|
|
+ 正确答案：
|
|
|
+ <template v-for="ansItem in question.ans">{{
|
|
|
+ ast[ansItem - 1]
|
|
|
+ }}</template>
|
|
|
+ </div>
|
|
|
+ <div class="answer-list__left">
|
|
|
+ 我的答案：
|
|
|
+ <template v-for="quesItem in question.ques">{{
|
|
|
+ ast[quesItem - 1]
|
|
|
+ }}</template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="explain-list" v-if="question.ques">
|
|
|
+ <div class="explain-list__header">答案解析：</div>
|
|
|
+ <div
|
|
|
+ class="explain-list__body"
|
|
|
+ v-if="question.analysisContent"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="question__btns">
|
|
|
+ <div
|
|
|
+ v-if="!question.ques"
|
|
|
+ class="submit"
|
|
|
+ @click="checkboxSubmit(question, questionIndex)"
|
|
|
+ >
|
|
|
+ 确认答案
|
|
|
+ </div>
|
|
|
+ <div class="collect" @click="collect">收藏本题</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question"
|
|
|
+ v-if="question.type == 3 && current == questionIndex"
|
|
|
+ :key="questionIndex"
|
|
|
+ >
|
|
|
+ <div class="question__title">
|
|
|
+ {{ questionIndex + 1 }}、判断题
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question__desc"
|
|
|
+ v-html="question.content"
|
|
|
+ ></div>
|
|
|
+ <div class="question__content">
|
|
|
+ <div class="question-list" v-if="!question.ques">
|
|
|
+ <div
|
|
|
+ class="radio"
|
|
|
+ v-for="(item, index) in judge"
|
|
|
+ :key="index"
|
|
|
+ @click="judgeSelect(question, questionIndex, index)"
|
|
|
+ >
|
|
|
+ <div>{{ ast[index] }}. {{ item }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="question-list" v-if="question.ques">
|
|
|
+ <div
|
|
|
+ class="radio"
|
|
|
+ :class="{
|
|
|
+ right:
|
|
|
+ index == question.ques || index == question.ans,
|
|
|
+ wrong:
|
|
|
+ index == question.ques &&
|
|
|
+ question.ques != question.ans,
|
|
|
+ }"
|
|
|
+ v-for="(item, index) in judge"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div>{{ ast[index] }}. {{ item }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="answer-list" v-if="question.ques">
|
|
|
+ <div class="answer-list__left">
|
|
|
+ 正确答案：{{ ast[question.ans] }}
|
|
|
+ </div>
|
|
|
+ <div class="answer-list__left">
|
|
|
+ 我的答案：{{ ast[question.ques] }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="explain-list" v-if="question.ques">
|
|
|
+ <div class="explain-list__header">答案解析：</div>
|
|
|
+ <div
|
|
|
+ class="explain-list__body"
|
|
|
+ v-html="question.analysisContent"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="question__btns">
|
|
|
+ <div class="collect" @click="collect">收藏本题</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question"
|
|
|
+ v-if="question.type == 4 && current == questionIndex"
|
|
|
+ :key="questionIndex"
|
|
|
+ >
|
|
|
+ <div class="question__title">
|
|
|
+ {{ questionIndex + 1 }}、案例题
|
|
|
+ </div>
|
|
|
+ <div class="question__content">
|
|
|
+ <el-tabs v-model="question.tabIndex">
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="(json, jsonIndex) in question.jsonStr"
|
|
|
+ :label="'问题' + (jsonIndex + 1)"
|
|
|
+ :name="jsonIndex + ''"
|
|
|
+ :key="jsonIndex"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="question"
|
|
|
+ v-if="json.type == 1"
|
|
|
+ :key="questionIndex"
|
|
|
+ >
|
|
|
+ <div class="question__title">
|
|
|
+ {{ jsonIndex + 1 }}、单选题
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question__desc"
|
|
|
+ v-html="json.content"
|
|
|
+ ></div>
|
|
|
+ <div class="question__content">
|
|
|
+ <div
|
|
|
+ class="question-list"
|
|
|
+ v-if="!question.ques[jsonIndex]"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="radio"
|
|
|
+ v-for="(item, index) in json.optionsList"
|
|
|
+ :key="index"
|
|
|
+ @click="
|
|
|
+ radioSelectChild(
|
|
|
+ questionIndex,
|
|
|
+ jsonIndex,
|
|
|
+ item.optionsId
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ {{ ast[index] }}. {{ item.content }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question-list"
|
|
|
+ v-if="question.ques[jsonIndex]"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="radio"
|
|
|
+ :class="{
|
|
|
+ right:
|
|
|
+ item.optionsId ==
|
|
|
+ question.ques[jsonIndex] ||
|
|
|
+ item.optionsId ==
|
|
|
+ question.ans[jsonIndex],
|
|
|
+ wrong:
|
|
|
+ item.optionsId ==
|
|
|
+ question.ques[jsonIndex] &&
|
|
|
+ question.ques[jsonIndex] !=
|
|
|
+ question.ans[jsonIndex],
|
|
|
+ }"
|
|
|
+ v-for="(item, index) in json.optionsList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ {{ ast[index] }}. {{ item.content }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="answer-list"
|
|
|
+ v-if="question.ques[jsonIndex]"
|
|
|
+ >
|
|
|
+ <div class="answer-list__left">
|
|
|
+ 正确答案：{{
|
|
|
+ ast[question.ans[jsonIndex] - 1]
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ <div class="answer-list__left">
|
|
|
+ 我的答案：{{
|
|
|
+ ast[question.ques[jsonIndex] - 1]
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="explain-list"
|
|
|
+ v-if="question.ques[jsonIndex]"
|
|
|
+ >
|
|
|
+ <div class="explain-list__header">
|
|
|
+ 答案解析：
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="explain-list__body"
|
|
|
+ v-html="json.analysisContent"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="question__btns"></div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question"
|
|
|
+ v-if="json.type == 2"
|
|
|
+ :key="jsonIndex"
|
|
|
+ >
|
|
|
+ <div class="question__title">
|
|
|
+ {{ jsonIndex + 1 }}、多选题
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question__desc"
|
|
|
+ v-html="json.content"
|
|
|
+ ></div>
|
|
|
+ <div class="question__content">
|
|
|
+ <div
|
|
|
+ class="question-list"
|
|
|
+ v-if="!question.ques[jsonIndex]"
|
|
|
+ >
|
|
|
+ <el-checkbox
|
|
|
+ class="checkbox"
|
|
|
+ v-for="(item, index) in json.optionsList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.optionsId"
|
|
|
+ v-model="item.checked"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ {{ ast[index] }}. {{ item.content }}
|
|
|
+ </div>
|
|
|
+ </el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question-list"
|
|
|
+ v-if="question.ques[jsonIndex]"
|
|
|
+ >
|
|
|
+ <el-checkbox
|
|
|
+ disabled
|
|
|
+ class="checkbox"
|
|
|
+ :class="{
|
|
|
+ right:
|
|
|
+ question.ques[jsonIndex].indexOf(
|
|
|
+ item.optionsId
|
|
|
+ ) != -1 ||
|
|
|
+ question.ans[jsonIndex].indexOf(
|
|
|
+ item.optionsId
|
|
|
+ ) != -1,
|
|
|
+ wrong:
|
|
|
+ question.ques[jsonIndex].indexOf(
|
|
|
+ item.optionsId
|
|
|
+ ) != -1 &&
|
|
|
+ question.ans[jsonIndex].indexOf(
|
|
|
+ item.optionsId
|
|
|
+ ) == -1,
|
|
|
+ }"
|
|
|
+ v-for="(item, index) in json.optionsList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.optionsId"
|
|
|
+ v-model="item.checked"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ {{ ast[index] }}. {{ item.content }}
|
|
|
+ </div>
|
|
|
+ </el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="answer-list"
|
|
|
+ v-if="question.ques[jsonIndex]"
|
|
|
+ >
|
|
|
+ <div class="answer-list__left">
|
|
|
+ 正确答案：
|
|
|
+ <template
|
|
|
+ v-for="ansItem in question.ans[jsonIndex]"
|
|
|
+ >{{ ast[ansItem - 1] }}</template
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="answer-list__left">
|
|
|
+ 我的答案：
|
|
|
+ <template
|
|
|
+ v-for="quesItem in question.ques[
|
|
|
+ jsonIndex
|
|
|
+ ]"
|
|
|
+ >{{ ast[quesItem - 1] }}</template
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="explain-list"
|
|
|
+ v-if="question.ques[jsonIndex]"
|
|
|
+ >
|
|
|
+ <div class="explain-list__header">
|
|
|
+ 答案解析：
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="explain-list__body"
|
|
|
+ v-html="json.analysisContent"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="question__btns">
|
|
|
+ <div
|
|
|
+ v-if="!question.ques[jsonIndex]"
|
|
|
+ class="submit"
|
|
|
+ @click="
|
|
|
+ checkboxSubmitChild(
|
|
|
+ questionIndex,
|
|
|
+ jsonIndex
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 确认答案
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question"
|
|
|
+ v-if="json.type == 3"
|
|
|
+ :key="jsonIndex"
|
|
|
+ >
|
|
|
+ <div class="question__title">
|
|
|
+ {{ jsonIndex + 1 }}、判断题
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question__desc"
|
|
|
+ v-html="json.content"
|
|
|
+ ></div>
|
|
|
+ <div class="question__content">
|
|
|
+ <div
|
|
|
+ class="question-list"
|
|
|
+ v-if="!question.ques[jsonIndex]"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="radio"
|
|
|
+ v-for="(item, index) in judge"
|
|
|
+ :key="index"
|
|
|
+ @click="
|
|
|
+ judgeSelectChild(
|
|
|
+ questionIndex,
|
|
|
+ jsonIndex,
|
|
|
+ index
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div>{{ ast[index] }}. {{ item }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question-list"
|
|
|
+ v-if="question.ques[jsonIndex]"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="radio"
|
|
|
+ :class="{
|
|
|
+ right:
|
|
|
+ index == question.ques[jsonIndex] ||
|
|
|
+ index == question.ans[jsonIndex],
|
|
|
+ wrong:
|
|
|
+ index == question.ques[jsonIndex] &&
|
|
|
+ question.ques[jsonIndex] !=
|
|
|
+ question.ans[jsonIndex],
|
|
|
+ }"
|
|
|
+ v-for="(item, index) in judge"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div>{{ ast[index] }}. {{ item }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="answer-list"
|
|
|
+ v-if="question.ques[jsonIndex]"
|
|
|
+ >
|
|
|
+ <div class="answer-list__left">
|
|
|
+ 正确答案：{{ ast[question.ans[jsonIndex]] }}
|
|
|
+ </div>
|
|
|
+ <div class="answer-list__left">
|
|
|
+ 我的答案：{{
|
|
|
+ ast[question.ques[jsonIndex]]
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="explain-list"
|
|
|
+ v-if="question.ques[jsonIndex]"
|
|
|
+ >
|
|
|
+ <div class="explain-list__header">
|
|
|
+ 答案解析：
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="explain-list__body"
|
|
|
+ v-html="json.analysisContent"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="question__btns"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="question"
|
|
|
+ v-if="json.type == 5"
|
|
|
+ :key="jsonIndex"
|
|
|
+ >
|
|
|
+ <div class="question__title">
|
|
|
+ {{ jsonIndex }}、简答题
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question__desc"
|
|
|
+ v-html="json.content"
|
|
|
+ ></div>
|
|
|
+ <div class="question__content">
|
|
|
+ <div
|
|
|
+ class="question-list textarea"
|
|
|
+ v-if="
|
|
|
+ !(
|
|
|
+ question.ques[jsonIndex] &&
|
|
|
+ (question.ques[jsonIndex].imageList
|
|
|
+ .length ||
|
|
|
+ question.ques[jsonIndex].text)
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ rows="5"
|
|
|
+ v-model="json.ansText.text"
|
|
|
+ resize="none"
|
|
|
+ ></el-input>
|
|
|
+ <div class="upload clearfix">
|
|
|
+ <div
|
|
|
+ class="upload__imgs"
|
|
|
+ v-for="(img, imgIndex) in json.ansText
|
|
|
+ .imageList"
|
|
|
+ :key="imgIndex"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="$tools.splitImgHost(img, true)"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="upload__btn">
|
|
|
+ <i class="el-icon-plus icon"></i>
|
|
|
+ <p>上传图片</p>
|
|
|
+ <input
|
|
|
+ @change="
|
|
|
+ uploadImgChild(
|
|
|
+ $event,
|
|
|
+ questionIndex,
|
|
|
+ jsonIndex
|
|
|
+ )
|
|
|
+ "
|
|
|
+ type="file"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="explain-list"
|
|
|
+ v-if="
|
|
|
+ question.ques[jsonIndex] &&
|
|
|
+ (question.ques[jsonIndex].imageList
|
|
|
+ .length ||
|
|
|
+ question.ques[jsonIndex].text)
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="explain-list__header">
|
|
|
+ 我的答案:
|
|
|
+ </div>
|
|
|
+ <div class="explain-list__body">
|
|
|
+ <div>
|
|
|
+ {{ question.ques[jsonIndex].text }}
|
|
|
+ </div>
|
|
|
+ <div class="upload clearfix">
|
|
|
+ <div
|
|
|
+ class="upload__imgs"
|
|
|
+ v-for="(img, imgIndex) in question.ques[
|
|
|
+ jsonIndex
|
|
|
+ ].imageList"
|
|
|
+ :key="imgIndex"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="$tools.splitImgHost(img, true)"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="explain-list__header">
|
|
|
+ 答案解析：
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="explain-list__body"
|
|
|
+ v-html="question.analysisContent"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="question__btns">
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ !(
|
|
|
+ question.ques[jsonIndex] &&
|
|
|
+ (question.ques[jsonIndex].imageList
|
|
|
+ .length ||
|
|
|
+ question.ques[jsonIndex].text)
|
|
|
+ )
|
|
|
+ "
|
|
|
+ class="submit"
|
|
|
+ @click="
|
|
|
+ ansSubmitChild(
|
|
|
+ question,
|
|
|
+ questionIndex,
|
|
|
+ jsonIndex
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 确认答案
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <div class="question__btns">
|
|
|
+ <div class="collect" @click="collect">收藏本题</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question"
|
|
|
+ v-if="question.type == 5 && current == questionIndex"
|
|
|
+ :key="questionIndex"
|
|
|
+ >
|
|
|
+ <div class="question__title">
|
|
|
+ {{ questionIndex }}、简答题
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="question__desc"
|
|
|
+ v-html="question.content"
|
|
|
+ ></div>
|
|
|
+ <div class="question__content">
|
|
|
+ <div
|
|
|
+ class="question-list textarea"
|
|
|
+ v-if="
|
|
|
+ !question.ques.imageList.length &&
|
|
|
+ !question.ques.text
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ rows="5"
|
|
|
+ v-model="question.ansText.text"
|
|
|
+ resize="none"
|
|
|
+ ></el-input>
|
|
|
+ <div class="upload clearfix">
|
|
|
+ <div
|
|
|
+ class="upload__imgs"
|
|
|
+ v-for="(img, imgIndex) in question.ansText
|
|
|
+ .imageList"
|
|
|
+ :key="imgIndex"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="$tools.splitImgHost(img, true)"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="upload__btn">
|
|
|
+ <i class="el-icon-plus icon"></i>
|
|
|
+ <p>上传图片</p>
|
|
|
+ <input
|
|
|
+ @change="
|
|
|
+ uploadImg($event, question, questionIndex)
|
|
|
+ "
|
|
|
+ type="file"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="explain-list"
|
|
|
+ v-if="
|
|
|
+ question.ques.imageList.length || question.ques.text
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="explain-list__header">我的答案:</div>
|
|
|
+ <div class="explain-list__body">
|
|
|
+ <div>{{ question.ques.text }}</div>
|
|
|
+ <div class="upload clearfix">
|
|
|
+ <div
|
|
|
+ class="upload__imgs"
|
|
|
+ v-for="(img, imgIndex) in question.ques
|
|
|
+ .imageList"
|
|
|
+ :key="imgIndex"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="$tools.splitImgHost(img, true)"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="explain-list__header">答案解析：</div>
|
|
|
+ <div
|
|
|
+ class="explain-list__body"
|
|
|
+ v-html="question.analysisContent"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="question__btns">
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ !question.ques.imageList.length &&
|
|
|
+ !question.ques.text
|
|
|
+ "
|
|
|
+ class="submit"
|
|
|
+ @click="ansSubmit(question, questionIndex)"
|
|
|
+ >
|
|
|
+ 确认答案
|
|
|
+ </div>
|
|
|
+ <div class="collect" @click="collect">收藏本题</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="left-box__footer">
|
|
|
+ <div class="btn" @click="prevQuestion">上一题</div>
|
|
|
+ <div class="btn" @click="nextQuestion">下一题</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-box">
|
|
|
+ <div class="right-box__header">答题卡</div>
|
|
|
+ <div class="right-box__body">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card__note">
|
|
|
+ <div class="item">
|
|
|
+ <div class="box green"></div>
|
|
|
+ 正确
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="box red"></div>
|
|
|
+ 错误
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="box blue"></div>
|
|
|
+ 已做未评改
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="box white"></div>
|
|
|
+ 未做
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card__content">
|
|
|
+ <ul class="list">
|
|
|
+ <li
|
|
|
+ class="item white"
|
|
|
+ v-for="(item, index) in questionList"
|
|
|
+ :key="index"
|
|
|
+ :class="{
|
|
|
+ green: isRight(item, index),
|
|
|
+ red: isWrong(item, index),
|
|
|
+ blue: isOver(item, index),
|
|
|
+ }"
|
|
|
+ @click="changeIndex(index)"
|
|
|
+ >
|
|
|
+ {{ index + 1 }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-box__footer">
|
|
|
+ <div class="submit" @click="submit">交卷</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <ToolBar></ToolBar>
|
|
|
+ <Footer></Footer>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ width="800px"
|
|
|
+ class="take-photo"
|
|
|
+ :visible.sync="takePhotoModal"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :show-close="false"
|
|
|
+ >
|
|
|
+ <div class="take-photo__content">
|
|
|
+ <!-- <div class="take-photo__close" @click="takePhotoModal = false">X</div> -->
|
|
|
+ <div class="take-photo__header">人脸验证</div>
|
|
|
+ <div class="take-photo__body clearfix">
|
|
|
+ <div class="left-box">
|
|
|
+ <div class="title">重要提示：</div>
|
|
|
+ <div class="content">
|
|
|
+ <p>1、请保证摄像头正对自己，避免头像偏左或者偏右。</p>
|
|
|
+ <p>
|
|
|
+ 2、请保证拍照环境光线充足（照片太暗或曝光会降低验证通过率）。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 3、请保证整个头像在人脸识别区域内，脸部无遮挡装饰物（佩戴眼镜会降低通过率）。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 4、如果下面视频中出现黑屏，摄像头可能被其他进程占用，请关闭其他调用摄像头的程序，重新刷新当前页面重新拍照识别。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-box">
|
|
|
+ <img v-show="!isTaking" :src="faceUrl" alt="" />
|
|
|
+ <video v-show="isTaking" id="video" :src="stream"></video>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="take-photo__footer">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ v-if="isTaking"
|
|
|
+ class="take"
|
|
|
+ @click="onPhoto"
|
|
|
+ >拍照</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ v-if="!isTaking"
|
|
|
+ class="take"
|
|
|
+ @click="reTake"
|
|
|
+ >重拍</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ v-if="!isTaking"
|
|
|
+ class="take"
|
|
|
+ @click="takeOk"
|
|
|
+ >确认</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Footer from "@/components/footer/index";
|
|
|
+import Header from "@/components/header/index";
|
|
|
+import ToolBar from "@/components/toolbar/index";
|
|
|
+import { mapMutations } from "vuex";
|
|
|
+export default {
|
|
|
+ name: "BankExplain",
|
|
|
+ components: {
|
|
|
+ Footer,
|
|
|
+ Header,
|
|
|
+ ToolBar,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ hasTake: false,
|
|
|
+ recordId: 0,
|
|
|
+ tabIndex: "1",
|
|
|
+ textarea: "",
|
|
|
+ questionIndex: 0,
|
|
|
+ checked: false,
|
|
|
+ activeName: "1",
|
|
|
+ questionList: [],
|
|
|
+ goodsExamConfig: [],
|
|
|
+ goodsDetail: {},
|
|
|
+ bankList: [],
|
|
|
+ judge: ["错误", "正确"],
|
|
|
+ ast: ["A", "B", "C", "D", "E", "F", "G"],
|
|
|
+ needPhoto: false,
|
|
|
+ lastTime: 0, //剩余考试时长
|
|
|
+ allTimes: 0, //总考试时长
|
|
|
+ lastCount: 0,
|
|
|
+ examId: 0,
|
|
|
+ goodsId: 0,
|
|
|
+ courseId: 0,
|
|
|
+ gradeId: 0,
|
|
|
+ moduleId: 0,
|
|
|
+ chapterId: 0,
|
|
|
+ faceUrl: "",
|
|
|
+ stream: null,
|
|
|
+ ossAvatarUrl: "",
|
|
|
+ orderGoodsId: 0,
|
|
|
+ current: 0,
|
|
|
+ timer: null,
|
|
|
+ takePhotoModal: false,
|
|
|
+ isTaking: true, //是否正在拍照
|
|
|
+ stream: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ this.goodsId = this.$route.params.goodsId;
|
|
|
+ this.examId = this.$route.query.examId;
|
|
|
+ this.courseId = this.$route.query.courseId;
|
|
|
+ this.gradeId = this.$route.query.gradeId;
|
|
|
+ this.moduleId = this.$route.query.moduleId;
|
|
|
+ this.chapterId = this.$route.query.chapterId;
|
|
|
+ this.orderGoodsId = this.$route.query.orderGoodsId;
|
|
|
+ await this.getGoodsDetail();
|
|
|
+ this.goodsQuestionList();
|
|
|
+ this.bankExam();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations(["setExamResult"]),
|
|
|
+ toFixed(num) {
|
|
|
+ if (num) {
|
|
|
+ let str = String(num).indexOf(".");
|
|
|
+
|
|
|
+ if (str != -1) {
|
|
|
+ return +num.toFixed(2);
|
|
|
+ } else {
|
|
|
+ return num;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getGoodsDetail() {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ let self = this;
|
|
|
+ this.$request.goodsDetail(this.goodsId).then((res) => {
|
|
|
+ self.goodsDetail = res.data;
|
|
|
+ if (self.goodsDetail.goodsPhotoExamConfig) {
|
|
|
+ let goodsPhotoExamConfig = JSON.parse(
|
|
|
+ self.goodsDetail.goodsPhotoExamConfig
|
|
|
+ );
|
|
|
+ if (goodsPhotoExamConfig.photograph > 0) {
|
|
|
+ self.needPhoto = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 请求题目列表
|
|
|
+ */
|
|
|
+ goodsQuestionList() {
|
|
|
+ this.$request
|
|
|
+ .goodsQuestionList({
|
|
|
+ examId: this.examId,
|
|
|
+ })
|
|
|
+ .then(async (res) => {
|
|
|
+ if (!res.data.length) {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "该试卷暂无题目",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.allTimes = res.data[0].answerTime * 60;
|
|
|
+ this.lastTime = res.data[0].answerTime && res.data[0].answerTime * 60;
|
|
|
+
|
|
|
+ res.data.forEach((item, index) => {
|
|
|
+ if (typeof item.jsonStr == "string") {
|
|
|
+ item.jsonStr = JSON.parse(item.jsonStr);
|
|
|
+
|
|
|
+ if (item.type == 2) {
|
|
|
+ //多选
|
|
|
+ item.jsonStr.forEach((str) => {
|
|
|
+ str.optionsId = "" + str.optionsId;
|
|
|
+ });
|
|
|
+ let arr = item.answerQuestion.split(",");
|
|
|
+ arr.forEach((a, i) => {
|
|
|
+ arr[i] = "" + a;
|
|
|
+ });
|
|
|
+ item.ans = arr;
|
|
|
+ item.quesSelect = [];
|
|
|
+ item.analysisContent &&
|
|
|
+ (item.analysisContent = item.analysisContent.replace(
|
|
|
+ /<img/gi,
|
|
|
+ '<img style="max-width:100%;"'
|
|
|
+ ));
|
|
|
+ item.content &&
|
|
|
+ (item.content = item.content.replace(
|
|
|
+ /<img/gi,
|
|
|
+ '<img style="max-width:100%;"'
|
|
|
+ ));
|
|
|
+ return;
|
|
|
+ } else if (item.type == 5) {
|
|
|
+ //简答题
|
|
|
+ item.ansText = {
|
|
|
+ text: "",
|
|
|
+ imageList: [],
|
|
|
+ };
|
|
|
+ item.ques = {
|
|
|
+ text: "",
|
|
|
+ imageList: [],
|
|
|
+ };
|
|
|
+ item.analysisContent &&
|
|
|
+ (item.analysisContent = item.analysisContent.replace(
|
|
|
+ /<img/gi,
|
|
|
+ '<img style="max-width:100%;"'
|
|
|
+ ));
|
|
|
+ item.content &&
|
|
|
+ (item.content = item.content.replace(
|
|
|
+ /<img/gi,
|
|
|
+ '<img style="max-width:100%;"'
|
|
|
+ ));
|
|
|
+
|
|
|
+ return;
|
|
|
+ } else if (item.type == 4) {
|
|
|
+ //案例题
|
|
|
+ console.log(item.jsonStr);
|
|
|
+ item.ques = [];
|
|
|
+ item.tabIndex = "0";
|
|
|
+ let ansArr = [];
|
|
|
+ item.jsonStr.forEach((json, index) => {
|
|
|
+ if (json.type == 1) {
|
|
|
+ ansArr[index] = json.answerQuestion;
|
|
|
+ json.content &&
|
|
|
+ (json.content = json.content.replace(
|
|
|
+ /<img/gi,
|
|
|
+ '<img style="max-width:100%;"'
|
|
|
+ ));
|
|
|
+ } else if (json.type == 2) {
|
|
|
+ json.optionsList.forEach((str) => {
|
|
|
+ str.optionsId = "" + str.optionsId;
|
|
|
+ });
|
|
|
+ let arr = json.answerQuestion.split(",");
|
|
|
+ arr.forEach((a, i) => {
|
|
|
+ arr[i] = "" + a;
|
|
|
+ });
|
|
|
+ ansArr[index] = arr;
|
|
|
+ json.content &&
|
|
|
+ (json.content = json.content.replace(
|
|
|
+ /<img/gi,
|
|
|
+ '<img style="max-width:100%;"'
|
|
|
+ ));
|
|
|
+ } else if (json.type == 3) {
|
|
|
+ ansArr[index] = json.answerQuestion;
|
|
|
+ json.content &&
|
|
|
+ (json.content = json.content.replace(
|
|
|
+ /<img/gi,
|
|
|
+ '<img style="max-width:100%;"'
|
|
|
+ ));
|
|
|
+ } else if (json.type == 5) {
|
|
|
+ ansArr[index] = {
|
|
|
+ text: "",
|
|
|
+ imageList: [],
|
|
|
+ };
|
|
|
+ json.ansText = {
|
|
|
+ text: "",
|
|
|
+ imageList: [],
|
|
|
+ };
|
|
|
+ json.ques = {
|
|
|
+ text: "",
|
|
|
+ imageList: [],
|
|
|
+ };
|
|
|
+ json.content &&
|
|
|
+ (json.content = json.content.replace(
|
|
|
+ /<img/gi,
|
|
|
+ '<img style="max-width:100%;"'
|
|
|
+ ));
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ item.ans = ansArr;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ item.analysisContent &&
|
|
|
+ (item.analysisContent = item.analysisContent.replace(
|
|
|
+ /<img/gi,
|
|
|
+ '<img style="max-width:100%;"'
|
|
|
+ ));
|
|
|
+ item.content &&
|
|
|
+ (item.content = item.content.replace(
|
|
|
+ /<img/gi,
|
|
|
+ '<img style="max-width:100%;"'
|
|
|
+ ));
|
|
|
+ item.ques = "";
|
|
|
+ item.ans = item.answerQuestion;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.questionList = res.data;
|
|
|
+ this.lastCount = this.questionList.length;
|
|
|
+
|
|
|
+ await this.examRecord();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ //拍照
|
|
|
+ openPhoto() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (
|
|
|
+ window.navigator.mediaDevices.getUserMedia ||
|
|
|
+ window.navigator.getUserMedia ||
|
|
|
+ window.navigator.webkitGetUserMedia ||
|
|
|
+ window.navigator.mozGetUserMedia
|
|
|
+ ) {
|
|
|
+ console.log(this.getUserMedia, "getUserMedia");
|
|
|
+ // 调用用户媒体设备, 访问摄像头
|
|
|
+ this.getUserMedia(
|
|
|
+ {
|
|
|
+ video: {
|
|
|
+ width: 400,
|
|
|
+ height: 300,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ this.photographSuccess,
|
|
|
+ this.photographError
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ alert("不支持访问用户媒体");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ async takeOk() {
|
|
|
+ let compareFaceData = await this.faceRecognition();
|
|
|
+
|
|
|
+ if (compareFaceData == 0) {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "人脸匹配不通过，请重新拍照上传",
|
|
|
+ });
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ this.reTake();
|
|
|
+ }, 2000);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (compareFaceData >= 80) {
|
|
|
+ const waitYS = await this.imageInfos();
|
|
|
+ this.postCoursePhotoRecord()
|
|
|
+ .then((res) => {
|
|
|
+ this.postStudyRecord(); //提交记录
|
|
|
+ //恢复播放
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err, "err");
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "上传接口报错，请重新拍照上传",
|
|
|
+ });
|
|
|
+ this.reTake();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "拍照成功",
|
|
|
+ });
|
|
|
+ this.takePhotoModal = false;
|
|
|
+ this.isTaking = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ postStudyRecord() {
|
|
|
+ let self = this;
|
|
|
+ let data = {
|
|
|
+ photo: self.ossAvatarUrl,
|
|
|
+ recordId: self.recordId,
|
|
|
+ };
|
|
|
+ console.log(data, "拍照提交");
|
|
|
+ this.$request
|
|
|
+ .studyExamPhotoRecord(data)
|
|
|
+ .then((res) => {
|
|
|
+ this.hasTake = true;
|
|
|
+ console.log(res, "拍照提交结果");
|
|
|
+ self.ossAvatarUrl = "";
|
|
|
+ //拍照
|
|
|
+ if (this.lastTime) {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ if (this.lastTime <= 0) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.$confirm("考试时间已到，系统将自动交卷", "提示", {
|
|
|
+ showConfirmButton: false,
|
|
|
+ closeOnClickModal: false,
|
|
|
+ showCancelButton: false,
|
|
|
+ closeOnPressEscape: false,
|
|
|
+ distinguishCancelAndClose: false,
|
|
|
+ showClose: false,
|
|
|
+ });
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ this.examSubmit();
|
|
|
+ }, 5000);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.lastTime--;
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: err.msg,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ imageInfos() {
|
|
|
+ var self = this;
|
|
|
+ return new Promise(async (resolve, reject) => {
|
|
|
+ const waitUpload = await self.uploadFile(self.faceUrl, 0);
|
|
|
+ resolve(waitUpload);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ uploadFile(options, int) {
|
|
|
+ var self = this;
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ var data = {
|
|
|
+ imageStatus: int,
|
|
|
+ gradeId: this.gradeId,
|
|
|
+ };
|
|
|
+ self.$request
|
|
|
+ .getPolicy(data)
|
|
|
+ .then((res) => {
|
|
|
+ var ossToken = res.data.resultContent;
|
|
|
+ if (ossToken.host == null || ossToken.host == undefined) {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "上传路径报错" + JSON.stringify(res.data),
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ let data = this.$tools.convertBase64UrlToBlob(this.faceUrl);
|
|
|
+
|
|
|
+ this.$upload
|
|
|
+ .upload(data, 0)
|
|
|
+ .then((res) => {
|
|
|
+ this.ossAvatarUrl = res;
|
|
|
+ resolve(res);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "上传接口报错，请重新拍照上传",
|
|
|
+ });
|
|
|
+ this.reTake();
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "签名错误" + JSON.stringify(err.data),
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ faceRecognition() {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ this.$request
|
|
|
+ .faceCertificationCompareFace({
|
|
|
+ imageA: this.faceUrl,
|
|
|
+ orderGoodsId: this.orderGoodsId,
|
|
|
+ gradeId: this.gradeId,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res, "res");
|
|
|
+ resolve(res.data);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 点击重拍
|
|
|
+ */
|
|
|
+ reTake() {
|
|
|
+ this.faceUrl = "";
|
|
|
+ this.isTaking = true;
|
|
|
+ this.getUserMedia({
|
|
|
+ video: {
|
|
|
+ width: 400,
|
|
|
+ height: 300,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 点击拍照按钮
|
|
|
+ onPhoto() {
|
|
|
+ // if (this.isIE) {
|
|
|
+ // window.webcam.capture();
|
|
|
+ // } else {
|
|
|
+ const canvas = document.createElement("canvas");
|
|
|
+ canvas.width = 400;
|
|
|
+ canvas.height = 300;
|
|
|
+ const context = canvas.getContext("2d");
|
|
|
+ const video = document.getElementById("video");
|
|
|
+ context.drawImage(video, 0, 0, 400, 300);
|
|
|
+ this.faceUrl = canvas.toDataURL("image/png");
|
|
|
+ this.isTaking = false;
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ getUserMedia(constraints, success, error) {
|
|
|
+ if (window.navigator.mediaDevices.getUserMedia) {
|
|
|
+ // 最新的标准API
|
|
|
+ window.navigator.mediaDevices
|
|
|
+ .getUserMedia(constraints)
|
|
|
+ .then(success)
|
|
|
+ .catch(error);
|
|
|
+ } else if (window.navigator.webkitGetUserMedia) {
|
|
|
+ // webkit核心浏览器
|
|
|
+ window.navigator.webkitGetUserMedia(constraints, success, error);
|
|
|
+ } else if (window.navigator.mozGetUserMedia) {
|
|
|
+ // firfox浏览器
|
|
|
+ window.navigator.mozGetUserMedia(constraints, success, error);
|
|
|
+ } else if (window.navigator.getUserMedia) {
|
|
|
+ // 旧版API
|
|
|
+ window.navigator.getUserMedia(constraints, success, error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ photographSuccess(stream) {
|
|
|
+ // 兼容webkit核心浏览器
|
|
|
+
|
|
|
+ this.isTaking = true;
|
|
|
+ this.takePhotoModal = true;
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const video = document.getElementById("video");
|
|
|
+ // 将视频流设置为video元素的源
|
|
|
+ console.dir(video);
|
|
|
+ video.srcObject = stream;
|
|
|
+ this.mediaStreamTrack =
|
|
|
+ typeof stream.stop === "function" ? stream : stream.getTracks()[0];
|
|
|
+ video.play();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ photographError(err) {
|
|
|
+ this.$confirm(
|
|
|
+ "课程学习需要开启摄像头进行拍照，经检测您的设备无摄像头可使用，请检测环境是否支持。",
|
|
|
+ "提示",
|
|
|
+ {
|
|
|
+ showConfirmButton: false,
|
|
|
+ closeOnClickModal: false,
|
|
|
+ showCancelButton: false,
|
|
|
+ closeOnPressEscape: false,
|
|
|
+ distinguishCancelAndClose: false,
|
|
|
+ showClose: false,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 记录总题数,获取recordId
|
|
|
+ * hasSpecial (是否包含简答和案例) true 包含 false 不包含
|
|
|
+ */
|
|
|
+ examRecord(hasSpecial) {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ let self = this;
|
|
|
+ let questionList = 0;
|
|
|
+ // if(!hasSpecial) {
|
|
|
+ this.questionList.forEach((item, index) => {
|
|
|
+ if (item.type == 1 || item.type == 2 || item.type == 3) {
|
|
|
+ questionList++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // } else {
|
|
|
+ // questionList = this.questionList.length;
|
|
|
+ // }
|
|
|
+
|
|
|
+ this.$request
|
|
|
+ .bankRecord({
|
|
|
+ chapterExamId: this.chapterId || 0,
|
|
|
+ moduleExamId: this.moduleId || 0,
|
|
|
+ examId: this.examId,
|
|
|
+ goodsId: this.goodsId,
|
|
|
+ gradeId: this.gradeId,
|
|
|
+ totalQuestionNum: questionList,
|
|
|
+ allQuestionNum: this.questionList.length,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.recordId = res.data;
|
|
|
+
|
|
|
+ if (self.needPhoto) {
|
|
|
+ this.openPhoto();
|
|
|
+ } else {
|
|
|
+ if (this.lastTime) {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ if (this.lastTime <= 0) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.$confirm("考试时间已到，系统将自动交卷", "提示", {
|
|
|
+ showConfirmButton: false,
|
|
|
+ closeOnClickModal: false,
|
|
|
+ showCancelButton: false,
|
|
|
+ closeOnPressEscape: false,
|
|
|
+ distinguishCancelAndClose: false,
|
|
|
+ showClose: false,
|
|
|
+ });
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ this.examSubmit();
|
|
|
+ }, 2000);
|
|
|
+
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.lastTime--;
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+
|
|
|
+ resolve();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取试卷类型2考试,1练习
|
|
|
+ */
|
|
|
+ bankExam() {
|
|
|
+ this.$request.bankExam(this.examId).then((res) => {
|
|
|
+ this.bankType = res.data.doType;
|
|
|
+ if (this.bankType == 2) {
|
|
|
+ this.needBack = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @param {Object}
|
|
|
+ * 单选点击确认
|
|
|
+ */
|
|
|
+ radioSelect(question, questionIndex, optionsId) {
|
|
|
+ if (this.questionList[questionIndex].ques) return;
|
|
|
+ this.$set(this.questionList[questionIndex], "ques", optionsId);
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @param {Object}
|
|
|
+ * 案例单选点击
|
|
|
+ */
|
|
|
+ radioSelectChild(questionIndex, jsonIndex, optionsId) {
|
|
|
+ if (this.questionList[questionIndex].ques[jsonIndex]) return;
|
|
|
+ this.$set(this.questionList[questionIndex].ques, jsonIndex, optionsId);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 多选点击确认
|
|
|
+ */
|
|
|
+ checkboxSubmit(question, questionIndex) {
|
|
|
+ if (this.questionList[questionIndex].ques) return;
|
|
|
+ let arr = [];
|
|
|
+ this.questionList[questionIndex].jsonStr.forEach((item) => {
|
|
|
+ if (item.checked) {
|
|
|
+ arr.push(item.optionsId);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (!arr.length) {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "请选择答案",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$set(this.questionList[questionIndex], "ques", arr);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @param {Object}
|
|
|
+ * 案例多选确认
|
|
|
+ */
|
|
|
+ checkboxSubmitChild(questionIndex, ansIndex) {
|
|
|
+ if (this.questionList[questionIndex].ques[ansIndex]) return;
|
|
|
+ let arr = [];
|
|
|
+ this.questionList[questionIndex].jsonStr[ansIndex].optionsList.forEach(
|
|
|
+ (item) => {
|
|
|
+ if (item.checked) {
|
|
|
+ arr.push(item.optionsId);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ if (!arr.length) {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "请选择答案",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$set(this.questionList[questionIndex].ques, ansIndex, arr);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 判断点击确认
|
|
|
+ */
|
|
|
+ judgeSelect(question, questionIndex, index) {
|
|
|
+ if (question.ques) return;
|
|
|
+ this.$set(this.questionList[questionIndex], "ques", index + "");
|
|
|
+ },
|
|
|
+ judgeSelectChild(questionIndex, jsonIndex, index) {
|
|
|
+ console.log(this.questionList[questionIndex].ques[jsonIndex]);
|
|
|
+ if (this.questionList[questionIndex].ques[jsonIndex]) return;
|
|
|
+ this.$set(this.questionList[questionIndex].ques, jsonIndex, index + "");
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 上传图片
|
|
|
+ */
|
|
|
+ uploadImg(e, question, questionIndex) {
|
|
|
+ var file = e.target.files[0];
|
|
|
+ if (file.size > 2 * 1024 * 1024) {
|
|
|
+ this.$message.warn("图片不得大于2000kb");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var type = e.target.value.toLowerCase().split(".").splice(-1);
|
|
|
+ if (
|
|
|
+ type[0] != "jpg" &&
|
|
|
+ type[0] != "png" &&
|
|
|
+ type[0] != "jpeg" &&
|
|
|
+ type[0] != "gif"
|
|
|
+ ) {
|
|
|
+ this.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
|
|
|
+ e.target.value = "";
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$upload.upload(file, 0).then((res) => {
|
|
|
+ question.ansText.imageList.push(res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 案例上传图片
|
|
|
+ */
|
|
|
+ uploadImgChild(e, questionIndex, jsonIndex) {
|
|
|
+ var file = e.target.files[0];
|
|
|
+ if (file.size > 2 * 1024 * 1024) {
|
|
|
+ this.$message.warn("图片不得大于2000kb");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var type = e.target.value.toLowerCase().split(".").splice(-1);
|
|
|
+ if (
|
|
|
+ type[0] != "jpg" &&
|
|
|
+ type[0] != "png" &&
|
|
|
+ type[0] != "jpeg" &&
|
|
|
+ type[0] != "gif"
|
|
|
+ ) {
|
|
|
+ this.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
|
|
|
+ e.target.value = "";
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$upload.upload(file, 0).then((res) => {
|
|
|
+ this.questionList[questionIndex].jsonStr[
|
|
|
+ jsonIndex
|
|
|
+ ].ansText.imageList.push(res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ isOver(item, index) {
|
|
|
+ if (this.questionList[index].ques) {
|
|
|
+ if (item.type == 4) {
|
|
|
+ //案例题
|
|
|
+ let isOver = item.jsonStr.every((jsonItem, indexs) => {
|
|
|
+ if (
|
|
|
+ jsonItem.type == 1 ||
|
|
|
+ jsonItem.type == 2 ||
|
|
|
+ jsonItem.type == 3
|
|
|
+ ) {
|
|
|
+ if (item.ques[indexs]) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ } else if (jsonItem.type == 5) {
|
|
|
+ if (
|
|
|
+ item.ques[indexs] &&
|
|
|
+ (item.ques[indexs].text || item.ques[indexs].imageList.length)
|
|
|
+ ) {
|
|
|
+ console.log("chil");
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (isOver) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ } else if (item.type == 5) {
|
|
|
+ //简答题
|
|
|
+ //每一项都相等
|
|
|
+ if (item.ques && (item.ques.imageList.length || item.ques.text)) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ //判断
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ansSubmit(question, questionIndex) {
|
|
|
+ if (!question.ansText.text && !question.ansText.imageList.length) {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "请输入内容或上传图片",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ question.ques.imageList = question.ansText.imageList;
|
|
|
+ question.ques.text = question.ansText.text;
|
|
|
+
|
|
|
+ console.log(question.ques);
|
|
|
+ },
|
|
|
+ ansSubmitChild(question, questionIndex, jsonIndex) {
|
|
|
+ if (
|
|
|
+ !this.questionList[questionIndex].jsonStr[jsonIndex].ansText.text &&
|
|
|
+ !this.questionList[questionIndex].jsonStr[jsonIndex].ansText.imageList
|
|
|
+ .length
|
|
|
+ ) {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "请输入内容或上传图片",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$set(this.questionList[questionIndex].ques, jsonIndex, {
|
|
|
+ imageList:
|
|
|
+ this.questionList[questionIndex].jsonStr[jsonIndex].ansText
|
|
|
+ .imageList || [],
|
|
|
+ text:
|
|
|
+ this.questionList[questionIndex].jsonStr[jsonIndex].ansText.text ||
|
|
|
+ "",
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ changeIndex(index) {
|
|
|
+ this.current = index;
|
|
|
+ },
|
|
|
+ nextQuestion() {
|
|
|
+ if (this.current >= this.questionList.length - 1) {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "已经是最后一题了！",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.current++;
|
|
|
+ },
|
|
|
+ prevQuestion() {
|
|
|
+ if (this.current == 0) {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "已经是第一题了！",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ this.current--;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isRight(item, index) {
|
|
|
+ //单选
|
|
|
+ if (this.questionList[index].ques) {
|
|
|
+ if (item.type == 1) {
|
|
|
+ console.log(
|
|
|
+ this.questionList[index].ques == this.questionList[index].ans
|
|
|
+ );
|
|
|
+ return this.questionList[index].ques == this.questionList[index].ans;
|
|
|
+ //多选
|
|
|
+ } else if (item.type == 2) {
|
|
|
+ //每一项都相等
|
|
|
+ return this.questionList[index].ans.every((item, i) => {
|
|
|
+ return item == this.questionList[index].ques[i];
|
|
|
+ });
|
|
|
+ //判断
|
|
|
+ } else if (item.type == 3) {
|
|
|
+ return this.questionList[index].ques == this.questionList[index].ans;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ isWrong(item, index) {
|
|
|
+ if (this.questionList[index].ques) {
|
|
|
+ //单选
|
|
|
+ if (item.type == 1) {
|
|
|
+ return this.questionList[index].ques != this.questionList[index].ans;
|
|
|
+ //多选
|
|
|
+ } else if (item.type == 2) {
|
|
|
+ //每一项都相等
|
|
|
+ return this.questionList[index].ans.some((item, i) => {
|
|
|
+ return item != this.questionList[index].ques[i];
|
|
|
+ });
|
|
|
+ //判断
|
|
|
+ } else if (item.type == 3) {
|
|
|
+ return this.questionList[index].ques != this.questionList[index].ans;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ right(bankIndex, ansIndex, option) {
|
|
|
+ if (
|
|
|
+ this.questionList[bankIndex].ques[ansIndex] &&
|
|
|
+ this.questionList[bankIndex].ans[ansIndex]
|
|
|
+ ) {
|
|
|
+ if (
|
|
|
+ this.questionList[bankIndex].ques[ansIndex].indexOf(
|
|
|
+ option.optionsId
|
|
|
+ ) != -1 ||
|
|
|
+ this.questionList[bankIndex].ans[ansIndex].indexOf(
|
|
|
+ option.optionsId
|
|
|
+ ) != -1
|
|
|
+ ) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ wrong(bankIndex, ansIndex, option) {
|
|
|
+ if (
|
|
|
+ this.questionList[bankIndex].ques[ansIndex] &&
|
|
|
+ this.questionList[bankIndex].ans[ansIndex]
|
|
|
+ ) {
|
|
|
+ if (
|
|
|
+ this.questionList[bankIndex].ques[ansIndex].indexOf(
|
|
|
+ option.optionsId
|
|
|
+ ) != -1 &&
|
|
|
+ this.questionList[bankIndex].ans[ansIndex].indexOf(
|
|
|
+ option.optionsId
|
|
|
+ ) == -1
|
|
|
+ ) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取已经回答的题目数
|
|
|
+ * hasSpecail (是否包含简答和案例)
|
|
|
+ */
|
|
|
+ questionOverNum(hasSpecail) {
|
|
|
+ let count = 0;
|
|
|
+ this.questionList.forEach((item) => {
|
|
|
+ if (item.type == 1 || item.type == 2 || item.type == 3) {
|
|
|
+ if (item.ques) {
|
|
|
+ count++;
|
|
|
+ }
|
|
|
+ } else if (item.type == 4) {
|
|
|
+ //案例题
|
|
|
+ if (hasSpecail) {
|
|
|
+ let isOver = item.jsonStr.every((jsonItem, index) => {
|
|
|
+ if (
|
|
|
+ jsonItem.type == 1 ||
|
|
|
+ jsonItem.type == 2 ||
|
|
|
+ jsonItem.type == 3
|
|
|
+ ) {
|
|
|
+ if (item.ques[index]) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ } else if (jsonItem.type == 5) {
|
|
|
+ if (
|
|
|
+ item.ques[index] &&
|
|
|
+ (item.ques[index].text || item.ques[index].imageList.length)
|
|
|
+ ) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (isOver) {
|
|
|
+ count++;
|
|
|
+ console.log(item, 444);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (item.type == 5) {
|
|
|
+ //简答题
|
|
|
+ if (hasSpecail) {
|
|
|
+ if (item.ques && (item.ques.text || item.ques.imageList.length)) {
|
|
|
+ console.log(5, item);
|
|
|
+ count++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ return count;
|
|
|
+ },
|
|
|
+
|
|
|
+ collect() {
|
|
|
+ this.$message({
|
|
|
+ message: "试做题目，不支持收藏~",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ let ansCount = this.questionOverNum(true); //已答题数
|
|
|
+ this.lastCount = this.questionList.length - ansCount; //统计未答完的题数
|
|
|
+ //没有答完
|
|
|
+ if (this.lastCount !== 0) {
|
|
|
+ this.$confirm(
|
|
|
+ `您还有${this.lastCount}道题未作答， 现在继续作答，还是下次继续？`,
|
|
|
+ "提示",
|
|
|
+ {
|
|
|
+ confirmButtonText: "立即交卷",
|
|
|
+ cancelButtonText: "继续做题",
|
|
|
+ closeOnClickModal: false,
|
|
|
+ closeOnPressEscape: false,
|
|
|
+ distinguishCancelAndClose: false,
|
|
|
+ showClose: false,
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then((_) => {
|
|
|
+ this.examSubmit();
|
|
|
+ })
|
|
|
+ .catch((_) => {});
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.bankType == 2) {
|
|
|
+ if (this.lastTime > 0) {
|
|
|
+ let lastTime = this.countdown(this.lastTime);
|
|
|
+ this.$confirm(`时间还剩余${lastTime},确定交卷吗?`, "提示", {
|
|
|
+ confirmButtonText: "交卷",
|
|
|
+ cancelButtonText: "继续答题",
|
|
|
+ closeOnClickModal: false,
|
|
|
+ closeOnPressEscape: false,
|
|
|
+ distinguishCancelAndClose: false,
|
|
|
+ showClose: false,
|
|
|
+ })
|
|
|
+ .then((_) => {
|
|
|
+ this.examSubmit();
|
|
|
+ })
|
|
|
+ .catch((_) => {});
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.examSubmit();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @param {Object} second倒计时过滤器
|
|
|
+ */
|
|
|
+ countdown(second) {
|
|
|
+ if (second) {
|
|
|
+ let h = parseInt((second / 60 / 60) % 24); // 计算小时
|
|
|
+ let m = parseInt((second / 60) % 60); // 计算分数
|
|
|
+ let s = parseInt(second % 60); // 计算当前秒数
|
|
|
+
|
|
|
+ if (h < 10) h = "0" + h;
|
|
|
+ if (m < 10) m = "0" + m;
|
|
|
+ if (s < 10) s = "0" + s;
|
|
|
+
|
|
|
+ return h + ":" + m + ":" + s;
|
|
|
+ } else {
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ examSubmit() {
|
|
|
+ if (this.needPhoto && !this.hasTake) {
|
|
|
+ this.$confirm("未拍照成功不能交卷", "提示", {
|
|
|
+ closeOnClickModal: false,
|
|
|
+ showCancelButton: false,
|
|
|
+ closeOnPressEscape: false,
|
|
|
+ distinguishCancelAndClose: false,
|
|
|
+ showClose: false,
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let score = 0; //计算总分
|
|
|
+ let reportStatus = 0;
|
|
|
+ let number = 0; //做对的题目数量
|
|
|
+ let doQuestionNum = 0; //做过的题目数量
|
|
|
+ let allScore = 0; //总分
|
|
|
+ let passScore = 0;
|
|
|
+ let doWrongQuestionIds = []; //错题和未做题id(客观题)
|
|
|
+ let doQuestionIds = []; //做过的题目id
|
|
|
+ let rightQuestionIds = []; //做对的题目id
|
|
|
+ this.questionList.forEach((item, index) => {
|
|
|
+ passScore = item.passScore;
|
|
|
+ if (item.type == 1) {
|
|
|
+ //正确
|
|
|
+ if (item.ques == item.ans) {
|
|
|
+ item.scoreResult = item.score;
|
|
|
+ score += item.score;
|
|
|
+ number++;
|
|
|
+ rightQuestionIds.push(item.questionId);
|
|
|
+ } else {
|
|
|
+ //错误
|
|
|
+ item.scoreResult = 0;
|
|
|
+ doWrongQuestionIds.push(item.questionId);
|
|
|
+ }
|
|
|
+ allScore += item.score;
|
|
|
+ if (item.ques) {
|
|
|
+ doQuestionNum++;
|
|
|
+ doQuestionIds.push(item.questionId);
|
|
|
+ }
|
|
|
+ } else if (item.type == 2) {
|
|
|
+ let isRight =
|
|
|
+ item.ans &&
|
|
|
+ item.ans.every((quesItem, quesIndex) => {
|
|
|
+ if (item.ques) {
|
|
|
+ return item.ques[quesIndex] == item.ans[quesIndex];
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (isRight) {
|
|
|
+ score += item.score;
|
|
|
+ number++;
|
|
|
+ item.scoreResult = item.score;
|
|
|
+ rightQuestionIds.push(item.questionId);
|
|
|
+ } else {
|
|
|
+ let checkboxScore = item.score; //获取单题总分数
|
|
|
+ item.ques &&
|
|
|
+ item.ques.forEach((ques, quesIndex) => {
|
|
|
+ //选错一个全扣
|
|
|
+ if (item.ques) {
|
|
|
+ if (item.ans.indexOf(item.ques[quesIndex]) == -1) {
|
|
|
+ checkboxScore = 0;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ checkboxScore = 0;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log(checkboxScore);
|
|
|
+
|
|
|
+ //没选错
|
|
|
+ if (checkboxScore) {
|
|
|
+ item.ans.forEach((ans, quesIndex) => {
|
|
|
+ //漏选扣一部分
|
|
|
+ if (item.ques) {
|
|
|
+ if (item.ques.indexOf(item.ans[quesIndex]) == -1) {
|
|
|
+ checkboxScore = item.partScore;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ checkboxScore = 0;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ if (checkboxScore <= 0) {
|
|
|
+ //0分
|
|
|
+ item.scoreResult = 0;
|
|
|
+ doWrongQuestionIds.push(item.questionId);
|
|
|
+ } else {
|
|
|
+ //部分分
|
|
|
+ // number++;
|
|
|
+ doWrongQuestionIds.push(item.questionId);
|
|
|
+ item.scoreResult = checkboxScore;
|
|
|
+ score += checkboxScore;
|
|
|
+ // rightQuestionIds.push(item.questionId)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ allScore += item.score;
|
|
|
+ if (item.ques && item.ques.length) {
|
|
|
+ doQuestionNum++;
|
|
|
+ doQuestionIds.push(item.questionId);
|
|
|
+ }
|
|
|
+ } else if (item.type == 3) {
|
|
|
+ if (item.ques == item.ans) {
|
|
|
+ item.scoreResult = item.score;
|
|
|
+ score += item.score;
|
|
|
+ number++;
|
|
|
+ rightQuestionIds.push(item.questionId);
|
|
|
+ } else {
|
|
|
+ item.scoreResult = 0;
|
|
|
+ doWrongQuestionIds.push(item.questionId);
|
|
|
+ }
|
|
|
+ allScore += item.score;
|
|
|
+ if (item.ques) {
|
|
|
+ doQuestionNum++;
|
|
|
+ doQuestionIds.push(item.questionId);
|
|
|
+ }
|
|
|
+ } else if (item.type == 4) {
|
|
|
+ allScore += item.score;
|
|
|
+ if (item.ques && item.ques.length) {
|
|
|
+ doQuestionNum++;
|
|
|
+ doQuestionIds.push(item.questionId);
|
|
|
+ }
|
|
|
+ } else if (item.type == 5) {
|
|
|
+ allScore += item.score;
|
|
|
+ if (item.ques && (item.ques.imageList || item.ques.text)) {
|
|
|
+ doQuestionNum++;
|
|
|
+ doQuestionIds.push(item.questionId);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ //大于分及格
|
|
|
+ if (score >= passScore) {
|
|
|
+ reportStatus = 1;
|
|
|
+ } else {
|
|
|
+ reportStatus = 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ clearInterval(this.timer);
|
|
|
+ //交卷
|
|
|
+ this.$request
|
|
|
+ .bankRecordEdit({
|
|
|
+ moduleId: this.moduleId || 0,
|
|
|
+ chapterId: this.chapterId || 0,
|
|
|
+ gradeId: this.gradeId,
|
|
|
+ examId: this.examId,
|
|
|
+ goodsId: this.goodsId,
|
|
|
+ reportStatus: reportStatus,
|
|
|
+ recordId: this.recordId,
|
|
|
+ courseId: this.courseId,
|
|
|
+ rightQuestionNum: number,
|
|
|
+ status: 1,
|
|
|
+ doQuestionIds: doQuestionIds.join(","),
|
|
|
+ // rightQuestionIds:rightQuestionIds.join(','),
|
|
|
+ // doQuestionNum: doQuestionNum,
|
|
|
+ performance: score,
|
|
|
+ totalScore: allScore,
|
|
|
+ // examTime: parseInt(this.allTimes),
|
|
|
+ // doTime: parseInt(this.allTimes) - parseInt(this.lastTime),
|
|
|
+ // historyExamJson: JSON.stringify(this.questionList)
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.isSubmit = true;
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "交卷成功",
|
|
|
+ });
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ let result = {
|
|
|
+ rightQuestionNum: number,
|
|
|
+ doWrongQuestionNum: doWrongQuestionIds.length,
|
|
|
+ score: score,
|
|
|
+ totalScore: allScore,
|
|
|
+ reportStatus: reportStatus,
|
|
|
+ };
|
|
|
+
|
|
|
+ this.setExamResult(result);
|
|
|
+ this.$router.replace({
|
|
|
+ path: "/bank-report",
|
|
|
+ });
|
|
|
+ }, 1000);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err, "err");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
+<style scoped lang="scss">
|
|
|
+.course-exam {
|
|
|
+ .section {
|
|
|
+ overflow: hidden;
|
|
|
+ &__header {
|
|
|
+ height: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__body {
|
|
|
+ .explain-record {
|
|
|
+ &__header {
|
|
|
+ }
|
|
|
+
|
|
|
+ &__body {
|
|
|
+ height: 800px;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ .left-box {
|
|
|
+ float: left;
|
|
|
+ width: 970px;
|
|
|
+ border-right: 1px solid #eee;
|
|
|
+
|
|
|
+ &__header {
|
|
|
+ height: 40px;
|
|
|
+ padding-left: 12px;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .progress {
|
|
|
+ width: 636px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ margin-left: 15px;
|
|
|
+ font-size: 16px;
|
|
|
+ span {
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3f8dfd;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__body {
|
|
|
+ height: 720px;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+
|
|
|
+ .question {
|
|
|
+ padding: 12px 0 0 12px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ &__title {
|
|
|
+ padding-left: 12px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__desc {
|
|
|
+ padding-left: 12px;
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__content {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: scroll;
|
|
|
+
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ background-color: #fff;
|
|
|
+ -webkit-border-radius: 2em;
|
|
|
+ -moz-border-radius: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #eeeeee;
|
|
|
+ -webkit-border-radius: 2em;
|
|
|
+ -moz-border-radius: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-tabs__item {
|
|
|
+ padding: 0 20px !important;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .question__content {
|
|
|
+ height: auto;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .question-list {
|
|
|
+ padding: 24px 0 0 24px;
|
|
|
+ .checkbox,
|
|
|
+ .radio {
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 24px;
|
|
|
+ padding: 0 24px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 2px;
|
|
|
+ min-height: 40px;
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ background: #f5f9ff;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &.right {
|
|
|
+ background: #37c65b;
|
|
|
+ }
|
|
|
+ &.wrong {
|
|
|
+ background: #ff3a30;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.textarea {
|
|
|
+ margin-right: 12px;
|
|
|
+
|
|
|
+ .upload {
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ &__imgs {
|
|
|
+ margin-right: 10px;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #eeeeee;
|
|
|
+ border-radius: 4px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ float: left;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &__btn {
|
|
|
+ margin-right: 10px;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #eeeeee;
|
|
|
+ border-radius: 4px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ float: left;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #3f8dfd;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ input {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-checkbox {
|
|
|
+ white-space: pre-wrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .answer-list {
|
|
|
+ height: 40px;
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ margin-top: 24px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 24px;
|
|
|
+
|
|
|
+ &__left {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__right {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .explain-list {
|
|
|
+ padding: 12px 24px;
|
|
|
+
|
|
|
+ &__header {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__body {
|
|
|
+ margin-top: 12px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload {
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ &__imgs {
|
|
|
+ margin-right: 10px;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #eeeeee;
|
|
|
+ border-radius: 4px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ float: left;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__btns {
|
|
|
+ position: relative;
|
|
|
+ height: 32px;
|
|
|
+ .submit {
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 140px;
|
|
|
+ height: 32px;
|
|
|
+ background: #3f8dfd;
|
|
|
+ box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 16px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 32px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .collect {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #3f8dfd;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__footer {
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 140px;
|
|
|
+ height: 32px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #3f8dfd;
|
|
|
+ border-radius: 16px;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ color: #3f8dfd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-box {
|
|
|
+ float: right;
|
|
|
+ width: 300px;
|
|
|
+
|
|
|
+ &__header {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__body {
|
|
|
+ height: 720px;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+
|
|
|
+ .card {
|
|
|
+ &__note {
|
|
|
+ display: flex;
|
|
|
+ height: 40px;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 10px;
|
|
|
+
|
|
|
+ .box {
|
|
|
+ margin-right: 5px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ &.white {
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #eeeeee;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.green {
|
|
|
+ background: #37c65b;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.red {
|
|
|
+ background: #ff3a30;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.blue {
|
|
|
+ background: #3f8dfd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__content {
|
|
|
+ height: 410px;
|
|
|
+ overflow-y: scroll;
|
|
|
+
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ background-color: #fff;
|
|
|
+ -webkit-border-radius: 2em;
|
|
|
+ -moz-border-radius: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #eeeeee;
|
|
|
+ -webkit-border-radius: 2em;
|
|
|
+ -moz-border-radius: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 10px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ margin-left: 16px;
|
|
|
+ margin-top: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &.white {
|
|
|
+ line-height: 38px;
|
|
|
+ color: #333333;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #eeeeee;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.green {
|
|
|
+ color: #fff;
|
|
|
+ background: #37c65b;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.red {
|
|
|
+ color: #fff;
|
|
|
+ background: #ff3a30;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.blue {
|
|
|
+ border: 1rpx solid #eeeeee;
|
|
|
+ color: #fff;
|
|
|
+ background: #3f8dfd;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.disabled {
|
|
|
+ cursor: not-allowed;
|
|
|
+ line-height: 38px;
|
|
|
+ color: #eeeeee;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #eeeeee;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__footer {
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .submit {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 140px;
|
|
|
+ height: 32px;
|
|
|
+ background: #3f8dfd;
|
|
|
+ box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 16px;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .take-photo {
|
|
|
+ /deep/ .el-dialog__header {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ /deep/ .el-dialog__body {
|
|
|
+ padding: 0;
|
|
|
+ overflow: unset;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__close {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: -28px;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ color: #eee;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__header {
|
|
|
+ height: 40px;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ padding-left: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__body {
|
|
|
+ height: 400px;
|
|
|
+ padding: 40px 24px;
|
|
|
+ .left-box {
|
|
|
+ width: 336px;
|
|
|
+ float: left;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ff3b30;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 28px;
|
|
|
+ margin-top: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-box {
|
|
|
+ float: right;
|
|
|
+ width: 400px;
|
|
|
+ height: 300px;
|
|
|
+
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__footer {
|
|
|
+ height: 90px;
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ text-align: center;
|
|
|
+ .take {
|
|
|
+ display: inline-block;
|
|
|
+ width: 200px;
|
|
|
+ height: 40px;
|
|
|
+ padding: 0;
|
|
|
+ border-radius: 20px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ margin: 24px auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
chenxiong