649 lines
16 KiB
Vue
649 lines
16 KiB
Vue
<template>
|
|
<view class="main_div max_page">
|
|
<nav-bar :is_seat="true"></nav-bar>
|
|
<view class="nav-div">
|
|
<view class="title ellipsis-text" @click="hand_in_paper_button_click()">
|
|
{{ paperData.name }}
|
|
</view>
|
|
<view class="back_div"></view>
|
|
</view>
|
|
<view class="countdown-and-question-number-div">
|
|
<view class="top">
|
|
<view class="countdown">
|
|
<text class="grey">答题进度</text>
|
|
<text class="bold">{{ questionNumber + 1 }}</text>
|
|
<text class="grey">/{{ storageTopicList.length }}</text>
|
|
</view>
|
|
<view class="question">
|
|
<view class="grey">剩余时间</view>
|
|
<uv-count-down :time="100 * 1000" format="HH:mm:ss"></uv-count-down>
|
|
</view>
|
|
</view>
|
|
<view class="progress">
|
|
<uv-line-progress
|
|
:percentage="progress"
|
|
:showText="false"
|
|
activeColor="#FFFFFF"
|
|
inactiveColor="#89B8FF"
|
|
:height="8"
|
|
></uv-line-progress>
|
|
</view>
|
|
</view>
|
|
<view class="scroll_div">
|
|
<swiper
|
|
class="swiper"
|
|
:indicator-dots="false"
|
|
@change="swiperChange"
|
|
:current="questionNumber"
|
|
easing-function="linear"
|
|
>
|
|
<swiper-item v-for="(item, index) in topicList">
|
|
<view class="content">
|
|
<view class="expose_shadow"></view>
|
|
<scroll-view :scroll-y="true" class="scroll-Y" :show-scrollbar="false" :refresher-threshold="0">
|
|
<Subject
|
|
:item="item"
|
|
:mode="mode"
|
|
:isPreview="item.isPreview"
|
|
:clearResult="item.clearResult"
|
|
@subject_click="subject_click"
|
|
v-model="item.my_answer"
|
|
></Subject>
|
|
<!-- <CharactersSubject :item="item" v-if="item.qnsTyp === 'ES'" :mode="mode"
|
|
:activeVoiceId="activeVoiceId" :voicePathValue="voicePathValue"
|
|
@subject_click="subject_click">
|
|
</CharactersSubject> -->
|
|
</scroll-view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="fixed-box font_pf" :style="{ marginBottom: popup_input_bottom }">
|
|
<view class="touch-btn-div" :class="{ show: showTouchBtn }">
|
|
<TouchBtn
|
|
class="talk-btns"
|
|
@submit="touchBtnSubmit"
|
|
loadingText="问题回答中，请在问题回答结束后重试！"
|
|
:isLoading="!answerIsOver"
|
|
:isDisabled="false"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<!-- 反馈组件 -->
|
|
<Feedback ref="feedbackRef"></Feedback>
|
|
<!-- 结尾弹出层 -->
|
|
<!-- <Dialog ref="dialogRef" :dialogConfiguration="dialogConfiguration" @button_click="result_click"></Dialog> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Feedback from '@/pages/examination/components/feedback.vue';
|
|
// import Dialog from './components/dialog.vue';
|
|
import Subject from '@/components/examination/subject.vue';
|
|
import CharactersSubject from '@/components/examination/characters-subject.vue';
|
|
import TouchBtn from '@/components/examination/touchBtn.vue';
|
|
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
import common from '@/common/common';
|
|
import { getPageCache } from '@/common/common';
|
|
import { commonUploadVoiceFile } from '@/api/common.js';
|
|
import { optionErrorIcon, examinationSheetIcon } from '@/common/imgSvg';
|
|
import { practiceAnswer,practiceCommit } from '@/api/practice.js';
|
|
const answerIsOver = ref(true);
|
|
const feedbackRef = ref(null);
|
|
const dialogRef = ref(null);
|
|
const popupRef = ref(null);
|
|
|
|
const mode = ref('practice'); // 考试 examination 练习practice
|
|
const paperData = reactive({
|
|
exrId: '',
|
|
crsId: '',
|
|
name: '' // 名称
|
|
}); // 试卷信息
|
|
const topicList = reactive([]); // 问题列表
|
|
const storageTopicList = ref([]); // 所有题列表
|
|
const popup_input_bottom = ref('0px');
|
|
const questionNumber = ref(0); // 题号
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
const showTouchBtn = computed(() => {
|
|
return topicList[questionNumber.value]['qnsTyp'] === 'ES';
|
|
});
|
|
|
|
const progress = computed(() => {
|
|
// 计算进度百分比（保留两位小数）
|
|
const total = storageTopicList.value.length;
|
|
if (total === 0) return 0;
|
|
const completed = questionNumber.value + 1;
|
|
return Math.min(Math.round((completed / total) * 10000) / 100, 100);
|
|
});
|
|
// 弹出框配置
|
|
const dialogConfiguration = reactive({});
|
|
|
|
const activeVoiceId = ref('');
|
|
|
|
const swiperChange = (item) => {
|
|
questionNumber.value = item.detail.current;
|
|
};
|
|
|
|
const subject_click = (type, params) => {
|
|
// 反馈
|
|
if (type === 'feedback') {
|
|
feedbackRef.value.open();
|
|
} else if (type === 'answer') {
|
|
console.log('answer', params);
|
|
} else if (type === 'choose') {
|
|
if (params.qnsTyp === 'SN') {
|
|
submitProblem(params.answer)
|
|
}
|
|
console.log('choose', params);
|
|
}
|
|
};
|
|
|
|
// 答单题
|
|
const submitProblem = (answer) => {
|
|
console.log('答单题');
|
|
const topic = topicList[questionNumber.value]
|
|
console.log(topic);
|
|
console.log(answer);
|
|
common.loading('答题中')
|
|
practiceAnswer({
|
|
exrId:paperData.exrId,
|
|
anserResult:answer.join(','),
|
|
ossKey:'',
|
|
qnsId:topic.qnsId
|
|
}).then(res => {
|
|
common.hideLoading()
|
|
const body = res.body
|
|
topic.isPreview = true // 不能在点击了，打开预览模式
|
|
topic.clearResult = false // 不清除正确答案了
|
|
// topic.correctFlag = body
|
|
|
|
console.log('答题结果', res);
|
|
})
|
|
}
|
|
const voicePathValue = ref('');
|
|
|
|
// 录音按钮提交
|
|
const touchBtnSubmit = (type, submitObj) => {
|
|
if (type === 'voice') {
|
|
uploadRecordNow(submitObj);
|
|
} else if (type === 'text') {
|
|
}
|
|
};
|
|
// 发送语音
|
|
const uploadRecordNow = (voicePath) => {
|
|
commonUploadVoiceFile(voicePath, '/traask/traAskchat/voiceTrans', {})
|
|
.then((res) => {
|
|
let _res = JSON.parse(res.data);
|
|
voicePathValue.value = voicePath;
|
|
console.log('_res', _res, voicePath);
|
|
if (_res.rtnCode === '0000') {
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
uni.showToast({
|
|
title: '系统异常，请联系管理员',
|
|
icon: 'none',
|
|
duration: 1000
|
|
});
|
|
});
|
|
};
|
|
|
|
// 发送文本
|
|
const submitAnswerNow = (val, cb = null) => {};
|
|
|
|
// 添加一道题
|
|
const addProblem = () => {
|
|
if (topicList.length >= storageTopicList.value.length) return false;
|
|
topicList.push(storageTopicList.value[topicList.length]);
|
|
return true;
|
|
};
|
|
// 初始化时检查
|
|
onLoad(() => {
|
|
const practice = getPageCache('practice');
|
|
if (!practice) {
|
|
common.navigateBack();
|
|
return;
|
|
}
|
|
paperData.crsId = practice.crsId;
|
|
paperData.name = practice.name;
|
|
paperData.exrId = practice.exrId;
|
|
storageTopicList.value = practice.qnsInfoVos.map((res) => ({
|
|
...res,
|
|
isPreview: false,
|
|
clearResult: true,
|
|
my_answer: []
|
|
}));
|
|
addProblem();
|
|
// #ifdef APP-PLUS
|
|
// 安全区域底部到屏幕底部的高度（即底部安全区域高度）
|
|
const safeAreaBottomHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom;
|
|
uni.onKeyboardHeightChange((res) => {
|
|
let keyboardHeight = res.height;
|
|
// 仅在iOS端补偿安全区域高度
|
|
if (systemInfo.platform === 'ios') {
|
|
keyboardHeight = Math.max(0, keyboardHeight - safeAreaBottomHeight); // 避免负数
|
|
}
|
|
popup_input_bottom.value = `${keyboardHeight}px`;
|
|
console.log('端补偿安全区域高度', popup_input_bottom.value);
|
|
});
|
|
// #endif
|
|
});
|
|
|
|
const result_click = ({ key }) => {
|
|
console.log('res', key);
|
|
if (key === 'hand_in_paper') {
|
|
// 现在交卷
|
|
hand_in_paper();
|
|
} else if (key === 'continue') {
|
|
// 继续考试
|
|
dialogRef.value.close();
|
|
}
|
|
};
|
|
|
|
// 交卷按钮点击，打开交卷确认框
|
|
const hand_in_paper_button_click = () => {
|
|
console.log('点击交卷', paperData);
|
|
// console.log('点击交卷topicList', topicList);
|
|
// return;
|
|
// 判断是否完成所有题目
|
|
const completeList = topicList
|
|
.filter((res) => !!(Array.isArray(res.my_answer) ? res.my_answer.length : res.my_answer))
|
|
.map((res) => ({
|
|
a: res.qnsId,
|
|
b: res.my_answer,
|
|
c: !!res.my_answer
|
|
}));
|
|
dialogConfiguration.title = '确认现在交卷吗?';
|
|
const style_button_1 = {
|
|
color: '#FFFFFF',
|
|
fontSize: '30rpx',
|
|
backgroundColor: '#0066FF',
|
|
borderRadius: '8rpx'
|
|
};
|
|
const style_button_2 = {
|
|
color: '#0066FF',
|
|
fontSize: '30rpx',
|
|
backgroundColor: '#E2EDFF',
|
|
borderRadius: '8rpx'
|
|
};
|
|
const incompleteNumber = topicList.length - completeList.length;
|
|
if (incompleteNumber === 0) {
|
|
// 完成
|
|
dialogConfiguration.type = 'complete';
|
|
dialogConfiguration.title = '确认现在交卷吗?';
|
|
dialogConfiguration.buttonList = [
|
|
{
|
|
key: 'hand_in_paper',
|
|
name: '现在交卷',
|
|
style: style_button_1
|
|
},
|
|
{
|
|
key: 'continue',
|
|
name: '继续考试',
|
|
style: style_button_2
|
|
}
|
|
];
|
|
} else {
|
|
dialogConfiguration.type = 'incomplete'; // 未完成
|
|
dialogConfiguration.html = `当前考试进度：<text style="color:#0066FF;font-weight:bold;">${completeList.length}/${topicList.length}</text> 题 还有<text style="color:#0066FF;font-weight:bold;">${incompleteNumber}</text>道题未作答，确认交卷吗？`;
|
|
dialogConfiguration.buttonList = [
|
|
{
|
|
key: 'continue',
|
|
name: '继续考试',
|
|
style: style_button_1
|
|
},
|
|
{
|
|
key: 'hand_in_paper',
|
|
name: '现在交卷',
|
|
style: style_button_2
|
|
}
|
|
];
|
|
}
|
|
dialogRef.value.open();
|
|
};
|
|
// 执行交卷
|
|
const hand_in_paper = () => {
|
|
const answerDtoList = topicList.map((res) => {
|
|
let answerItem = {
|
|
examId: paperData.examId,
|
|
papersId: paperData.papersId,
|
|
qnsId: res.qnsId,
|
|
ossKey: '',
|
|
anserResult: ''
|
|
};
|
|
if (res.qnsTyp === 'ES') {
|
|
// 问答题特殊处理
|
|
return {
|
|
...answerItem,
|
|
anserResult: ''
|
|
};
|
|
} else {
|
|
//其他题
|
|
return {
|
|
...answerItem,
|
|
anserResult: res.my_answer.join(',')
|
|
};
|
|
}
|
|
});
|
|
|
|
console.log('answerDtoList', answerDtoList);
|
|
dialogRef.value.close();
|
|
common.loading('正在提交');
|
|
commitPaperExam({
|
|
examId: paperData.examId,
|
|
execId: paperData.execId || '1',
|
|
examLenTm: 1200,
|
|
answerDtoStr: JSON.stringify(answerDtoList)
|
|
})
|
|
.then((res) => {
|
|
console.log('提交成功', res);
|
|
// 判断是否需要查分
|
|
if (res.body.flagQuery === 'Y') {
|
|
// 需要查分
|
|
const examLenTm = 678;
|
|
common.redirectTo(
|
|
`/pages/examination/result?execId=${res.body.execId}&examLenTm=${examLenTm}&papersName=${paperData.papersName}`
|
|
);
|
|
} else {
|
|
// todo 此处应该有个弹窗交代下结果
|
|
common.navigateBack();
|
|
}
|
|
})
|
|
.catch((res) => {
|
|
console.log('error', res);
|
|
})
|
|
.finally(() => {
|
|
common.hideLoading().body;
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$bg-margin-left: 30rpx;
|
|
|
|
.popup_title_text {
|
|
color: red;
|
|
}
|
|
|
|
.popup {
|
|
//答题卡
|
|
z-index: 1800;
|
|
padding: 0 38rpx;
|
|
|
|
.sheet_popup_div {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #ffffff;
|
|
padding: 10rpx 34rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-radius: 16rpx 16rpx 0px 0px;
|
|
position: relative;
|
|
|
|
.title_div {
|
|
width: 100%;
|
|
text-align: center;
|
|
padding: 30rpx 0;
|
|
font-family: PingFangSC;
|
|
font-weight: 600;
|
|
font-size: 34rpx;
|
|
color: #000000;
|
|
text-align: center;
|
|
font-style: normal;
|
|
border-bottom: 2rpx solid #efefef;
|
|
}
|
|
|
|
.popup_back_div {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
position: absolute;
|
|
top: 30rpx;
|
|
right: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.img {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
}
|
|
|
|
.sheet_table {
|
|
margin-top: 48rpx;
|
|
margin-bottom: 48rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: calc(100vw - 108rpx);
|
|
align-content: space-between;
|
|
|
|
.sheet_table_item {
|
|
width: calc((100vw - 108rpx) / 5 - 16rpx);
|
|
height: calc((100vw - 108rpx) / 5 - 16rpx);
|
|
margin: 8rpx;
|
|
border: 2rpx solid #e5e5e5;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.current {
|
|
background-color: rgba(0, 102, 255, 0.6);
|
|
border-color: #0066ff;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.completed {
|
|
// 已完成
|
|
background-color: rgba(0, 102, 255, 0.1);
|
|
border-color: #0066ff;
|
|
color: #0066ff;
|
|
}
|
|
|
|
.mark,
|
|
.completed.mark {
|
|
background-color: rgba(232, 181, 49, 0.1);
|
|
color: #e8b531;
|
|
border-color: #e8b531;
|
|
}
|
|
|
|
.current.mark {
|
|
// 已完成
|
|
background-color: rgba(0, 102, 255, 0.6);
|
|
color: #ffffff;
|
|
border-color: #e8b531;
|
|
}
|
|
}
|
|
|
|
.sheet_button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fixed-box {
|
|
position: fixed;
|
|
width: 100%;
|
|
left: 0;
|
|
bottom: 0;
|
|
border-radius: 16rpx 16rpx 0px 0px;
|
|
border: 2rpx solid #e5e5e5;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.touch-btn-div {
|
|
height: 0;
|
|
overflow: hidden;
|
|
transition: height 0.2s ease-out;
|
|
}
|
|
|
|
.touch-btn-div.show {
|
|
height: 150rpx;
|
|
}
|
|
|
|
.fixed-btn-box {
|
|
height: 154rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 20rpx 20rpx 20rpx;
|
|
|
|
.sheet_button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 0 70rpx;
|
|
|
|
.img {
|
|
width: 38rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.sheet_text {
|
|
margin-top: 8rpx;
|
|
font-family: PingFangSC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
}
|
|
}
|
|
|
|
.button_div {
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.button {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.scroll-Y {
|
|
max-height: calc(100vh - var(--status-bar-height) - 70rpx - 70rpx - 40rpx - 64rpx - 68rpx - 60rpx);
|
|
min-height: calc(100vh - var(--status-bar-height) - 70rpx - 70rpx - 40rpx - 64rpx - 68rpx - 60rpx - 380rpx);
|
|
// background-color: yellow;
|
|
}
|
|
|
|
.swiper {
|
|
// 状态栏 var(--status-bar-height)
|
|
// 标题栏 70rpx
|
|
// 进度时间栏 70rpx
|
|
// 进度时间栏上下间距 40rpx = 20rpx + 20rpx
|
|
// 正文上下间距 64rpx
|
|
height: calc(100vh - var(--status-bar-height) - 70rpx - 70rpx - 40rpx - 64rpx);
|
|
// background-color: red;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
margin: 32rpx $bg-margin-left;
|
|
border-radius: 16rpx;
|
|
padding: 34rpx 30rpx 34rpx 36rpx;
|
|
background-color: #fff;
|
|
|
|
.expose_shadow {
|
|
margin-left: 36rpx;
|
|
position: absolute;
|
|
bottom: -26rpx;
|
|
left: 0%;
|
|
width: calc(100% - 66rpx);
|
|
height: 28rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 0 0 14rpx 14rpx;
|
|
opacity: 0.4;
|
|
z-index: 0;
|
|
// background-color: red;
|
|
}
|
|
}
|
|
|
|
.countdown-and-question-number-div {
|
|
margin: 20rpx $bg-margin-left;
|
|
height: 70rpx;
|
|
// background-color: red;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
z-index: 10;
|
|
|
|
.top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-family: PingFangSC;
|
|
font-size: 26rpx;
|
|
color: #ffffff;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.question {
|
|
display: flex;
|
|
align-items: center;
|
|
// background-color: red;
|
|
width: 242rpx;
|
|
color: red;
|
|
|
|
.grey {
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
:deep(.uv-count-down__text) {
|
|
color: #ffffff !important;
|
|
font-weight: 600;
|
|
font-size: 26rpx !important;
|
|
}
|
|
}
|
|
|
|
.grey {
|
|
color: #b6e2ff;
|
|
}
|
|
|
|
.bold {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.nav-div {
|
|
position: relative;
|
|
|
|
.title {
|
|
// padding-top:var(--status-bar-height);
|
|
// padding: 0 30rpx;
|
|
margin: 0 calc($bg-margin-left + 70rpx);
|
|
height: 70rpx;
|
|
font-family: PingFangSC;
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
font-style: normal;
|
|
line-height: 70rpx;
|
|
}
|
|
|
|
.back_div {
|
|
position: absolute;
|
|
right: $bg-margin-left;
|
|
top: 0;
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
// background-color: red;
|
|
}
|
|
}
|
|
|
|
.main_div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: linear-gradient(to top, #3480ff, #0066ff);
|
|
/* 确保背景占满整个视口高度 */
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
}
|
|
</style>
|