From 117da08d652db513d8889924ea12b13aed68fba2 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期二, 16 七月 2024 14:59:09 +0800 Subject: [PATCH] 提交 --- pages/tabBar/wearhouse/questions.vue | 576 ++++++++++++++++++++++++++++++--------------------------- 1 files changed, 305 insertions(+), 271 deletions(-) diff --git a/pages/tabBar/wearhouse/questions.vue b/pages/tabBar/wearhouse/questions.vue index 0ae1e90..3d1e42e 100644 --- a/pages/tabBar/wearhouse/questions.vue +++ b/pages/tabBar/wearhouse/questions.vue @@ -7,109 +7,120 @@ <!-- 真正的导航栏内容 --> <view style="display: flex; flex-direction: column;"> <view class="navBar"> - <u-icon name="arrow-left" color="black" size="17" style="margin-left: 8px;" @click="goBack" /> - <view class="barText">信息详情</view> + <u-icon name="arrow-left" color="black" size="17" style="margin-left: 8px;" @click="goBack"/> + <view class="barText">题目内容</view> <!-- <view > <u-button type="text" @click="loginOut" style="color: blue;margin-right: 5px;">退出</u-button> </view> --> </view> </view> </view> -<!-- <video-player ref="playerRef" @update-time="handleUpdateTime"></video-player>--> - <view class="videoWrap"> - <video ref="videoRef" id="myVideo" :poster="videoCover" style="width: 100%" :src="videoUrl" @timeupdate="handleTimeChange" :initial-time="initTime" :play-strategy="2" @pause="handlePause" controls> - - </video> -<!-- <view class="videoBox">--> -<!-- <template v-if="!videoPause">--> -<!-- <view class="masterPic">--> -<!-- <image class="img" :src="videoCover" mode="scaleToFill"></image>--> -<!-- </view>--> -<!-- <image class="startIcon" src="/static/image/bofang.png" mode="scaleToFill" @click="startFirstVideo"></image>--> -<!-- </template>--> -<!-- <template v-else>--> -<!-- <view class="video-js" ref="video" style="width: 100%;height: 100%;"></view>--> -<!-- </template>--> -<!-- </view>--> - <view class="viden-info" v-if="showDetail"> - <view class="viden-info-t">{{detail.name}}</view> - <view class="viden-info-i">创建时间:{{detail.createTime}}</view> - </view> - </view> - <view class="m-p-15"> - <view class="chapterList"> - <view class="chapterItem" v-for="(item,index) in courseList" :key="index"> - <view class="chapterName">{{item.chapterName }}</view> - <view class="courseList"> - <view class="courseItem" :class="{ selected: i.periodId === selectedPeriodId }" v-for="(i,idx) in item.studentStudyPeriodVOList" :key="idx" @click="getCourseDetail(item.chapterId,item.courseId,i.periodId,i.resourceId)"> - <view class="c-i-l"> - <u-icon name="play-circle" :color="i.periodId == selectedPeriodId?'#fff':'#007aff'" size="24" style="margin-left: 0"></u-icon> - <view>{{i.periodName}}</view> - </view> - <view class="c-i-r"> - <u-line-progress style="width: 45px" height="10" :percentage="i.progress" activeColor="#19be6b"></u-line-progress> - <span>{{secondsToHms(i.period)}}</span> - </view> + <view class="m-p-15" v-if="idList && idList.length>0"> + <u-divider + :text="'第'+ (currentIndex+1) +'题'" + textColor="#2979ff" + lineColor="#2979ff" + textSize="16" + style="margin: 40px 0" + ></u-divider> + <view class="questions"> + <view class="title"> + <span>【{{currentQ.questionType == 1?'单选题':currentQ.questionType == 2?'多选题':'判断题'}}】</span> + {{currentQ.title}} + </view> + <view class="content"> + <u-checkbox-group + v-if="currentQ.questionType==2" + v-model="currentQ.exExerciseAnswer.answer" + placement="column" + iconPlacement="right" + @change="checkboxChange" + :disabled="type==3?true:false" + > + <u-checkbox + :customStyle="{marginBottom: '15px'}" + v-for="(item, index) in currentQ.content.items" + :key="index" + :label="item.prefix +':'+ item.content" + :name="item.prefix" + > + </u-checkbox> + </u-checkbox-group> + <u-radio-group v-model="currentQ.exExerciseAnswer.answer" iconPlacement="right" placement="column" @change="groupChange" v-if="currentQ.questionType==1||currentQ.questionType==3" :disabled="type==3?true:false"> + <u-radio + :customStyle="{marginBottom: '15px'}" + v-for="(item, index) in currentQ.content.items" + :key="index" + shape="square" + :label="item.prefix +':'+ item.content" + :name="item.prefix" + @change="radioChange" + > + </u-radio> + </u-radio-group> + <u-button style="width: 80%;margin: 30px auto" v-if="currentQ.exExerciseAnswer && currentQ.exExerciseAnswer.answer && type !== 3" type="primary" shape="circle" text="确认答案" @click="confirmAnswer"></u-button> + <view class="answers" v-if="currentQ.exExerciseAnswer && (currentQ.exExerciseAnswer.passed==0||currentQ.exExerciseAnswer.passed==1)"> + <view>你的答案: + <span v-if="currentQ.questionType==2" :class="currentQ.answer == currentQ.exExerciseAnswer.answer.join(',')?'right':'wrong'">{{currentQ.exExerciseAnswer.answer.join(',')}}</span> + <span v-else :class="currentQ.answer == currentQ.exExerciseAnswer.answer?'right':'wrong'">{{currentQ.exExerciseAnswer.answer}}</span> </view> + <view>正确答案:<span class="right">{{currentQ.answer}}</span></view> </view> </view> </view> + </view> + <view class="btns" v-if="idList && idList.length>0"> + <u-button style="width: 30%" type="error" shape="circle" size="small" text="上一题" @click="prevQ"></u-button> +<!-- <u-button style="width: 30%" type="error" shape="circle" plain size="small" text="查看答案" @click="showA"></u-button>--> + <u-button v-if="currentIndex<questionList.length - 1" style="width: 30%" type="error" shape="circle" size="small" text="下一题" @click="nextQ"></u-button> + <u-button v-if="currentIndex==questionList.length - 1" style="width: 30%" type="primary" shape="circle" size="small" text="退出" @click="goBack"></u-button> + </view> + <view v-else> + <u-empty + mode="list" + icon="http://cdn.uviewui.com/uview/empty/list.png" + > + </u-empty> </view> </view> </template> <script> -import cover from '../../../static/defaultCover.jpg' -import {getClassList} from "../../../api"; -import {getCourseDetail, getLessonDetail, postNewStudy, postUpdateStudy} from "../../../api/current"; -import videoPlayer from "./video"; +import {getQuestionIdList,getQuestionByIds,postExerciseAnswer,getErrorsIdList} from '../../../api/wearhouse.js' + export default { components: { - videoPlayer, + }, data() { return { - videoContext: null, - videoCover: cover, - showDetail: false, - phaseId: null, - currentTime: null, - selectedChapterId: null, - selectedCourseId: null, - selectedPeriodId: null, - selectedResourceId: null, - initTime: 0, - courseList: [], - course: {}, - detail: {}, - videoBaseUrl: 'http://192.168.2.16:9000/trainexam/', - videoUrl: '', - status: false, - beforeAudio: true, - duration: 0, - progress: 0, - xpjAudio: null, - videoPause: false, - removeArea:{ - x: 0, - y: 0, - }, statusBarHeight: 0, - }; + bank: {}, + idList: [], + questionList: [], + currentIndex: 0, + currentQ: {}, + type: '' + } }, onReady(){ - // this.videoContext = uni.createVideoContext('myVideo') }, onLoad(e) { - this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; - this.phaseId = e.phase_id && JSON.parse(decodeURIComponent(e.phase_id)); - + this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'] + this.bank = e.bank && JSON.parse(decodeURIComponent(e.bank)) + this.type = e.type && JSON.parse(decodeURIComponent(e.type)) + if(this.type == '1' || this.type == '2'){ + this.currentIndex = this.bank.exerciseCount + this.getQuestionIds(this.bank.id) + }else{ + this.getErrorIds(this.bank.id) + } }, onShow(){ }, mounted() { - this.getData(); + }, computed: { @@ -123,137 +134,161 @@ }, methods: { - videoErrorCallback: function(e) { - uni.showModal({ - content: e.target.errMsg, - showCancel: false - }) - }, - handleTimeChange(e){ - this.currentTime = e.target.currentTime - }, - handlePause(){ - const data = { - id: this.studyId, - periodId: this.selectedPeriodId, - phaseId: this.phaseId, - resourceId: this.selectedResourceId, - chapterId: this.selectedChapterId, - courseId: this.selectedCourseId, - studentId: uni.getStorageSync('uid'), - currentDuration: this.currentTime + async getQuestionIds(id){ + const res = await getQuestionIdList({bankId: id}) + if(res.code == 200){ + let list = res.data || [] + if(list.length>0){ + this.idList = list + getQuestionByIds({questionIds: list.map(i=>i.id)}).then(re=>{ + if(re.code == 200){ + this.questionList = re.data.map(i=>{ + i.content = JSON.parse(i.content) + if(i.questionType == 2){ + if(i.exExerciseAnswer.answer){ + i.exExerciseAnswer.answer = i.exExerciseAnswer.answer.split(',') + } + } + return i + }) + this.currentQ = this.questionList[this.currentIndex] + }else{ + uni.$u.toast(res.message) + } + }) + }else{ + this.idList = [] + uni.showToast({ + title: '本题库暂无题目', + duration: 1000 + }); + } + }else{ + uni.$u.toast(res.message) } - postUpdateStudy(data).then(res=>{ + }, + + async getErrorIds(id){ + const res = await getErrorsIdList({bankId: id}) + if(res.code == 200){ + let list = res.data || [] + if(list.length>0){ + this.idList = list + getQuestionByIds({questionIds: list}).then(re=>{ + if(re.code == 200){ + this.questionList = re.data.map(i=>{ + i.content = JSON.parse(i.content) + if(i.questionType == 2){ + if(i.exExerciseAnswer.answer){ + i.exExerciseAnswer.answer = i.exExerciseAnswer.answer.split(',') + } + } + return i + }) + this.currentQ = this.questionList[0] + }else{ + uni.$u.toast(res.message) + } + }) + }else{ + this.idList = [] + uni.showToast({ + title: '本题库暂无错题', + duration: 1000 + }); + } + }else{ + uni.$u.toast(res.message) + } + }, + + checkboxChange(n) { + console.log('change', n); + }, + groupChange(n) { + console.log('groupChange', n); + }, + radioChange(n) { + console.log('radioChange', n); + }, + + confirmAnswer(){ + const data = { + answer: this.currentQ.questionType==2?this.currentQ.exExerciseAnswer.answer.join(','):this.currentQ.exExerciseAnswer.answer, + bankId: this.bank.id, + questionId: this.currentQ.id + } + postExerciseAnswer(data).then(res=>{ if(res.code == 200){ - console.log('上报成功') + this.currentQ.exExerciseAnswer.passed = res.data.passed + uni.$u.toast('答案已提交') }else{ uni.$u.toast(res.message) } }) }, - getData(){ - getCourseDetail({phaseStudentId: this.phaseId}).then(res => { - if(res.code == 200) { - if(res.data && res.data.length > 0){ - this.courseList = res.data - let chapterId = this.courseList[0].chapterId - let courseId = this.courseList[0].courseId - let id = this.courseList[0].studentStudyPeriodVOList[0].periodId - let resourceId = this.courseList[0].studentStudyPeriodVOList[0].resourceId - if(id){ - this.getCourseDetail(chapterId,courseId,id,resourceId) - } - }else { - this.courseList = [] + + prevQ(){ + if(this.currentIndex - 1>=0){ + this.currentIndex-- + this.currentQ = this.questionList[this.currentIndex] + }else{ + uni.showToast({ + title: '已经是第一题了', + duration: 1000 + }); + } + console.log(this.currentQ,'current') + }, + + nextQ(){ + if(this.currentQ.exExerciseAnswer.passed==null){ + uni.$u.toast('请先完成当前题目') + return + } + if(this.currentIndex + 1<this.questionList.length){ + this.currentIndex++ + this.currentQ = this.questionList[this.currentIndex] + }else{ + uni.showToast({ + title: '已经是最后一题了', + duration: 1000 + }); + } + console.log(this.currentQ,'current') + }, + + showA(){ + uni.showModal({ + title: '正确答案', + content: this.currentQ.answer, + showCancel: false, + success: function (res) { + if (res.confirm) { + console.log('用户点击确定'); } - }else{ - uni.$u.toast(res.message) } - }) - }, - - getCourseDetail(chapterId,courseId,id,resourceId){ - // if(this.videoContext.src){ - // this.videoContext.stop() - // this.videoContext.src = '' - // } - this.selectedChapterId = chapterId - this.selectedCourseId = courseId - this.selectedPeriodId = id; - this.selectedResourceId = resourceId - getLessonDetail({periodId: id}).then(res => { - if(res.code == 200) { - if(res.data){ - this.detail = res.data - this.showDetail = true - this.$nextTick(() => { - this.videoContext = uni.createVideoContext('myVideo') - this.videoUrl = this.videoBaseUrl + this.detail.resourcePath - // this.videoContext.src = this.videoBaseUrl + this.detail.resourcePath - // this.initTime = 0 - // this.$refs.videoRef.src = this.videoBaseUrl + this.detail.resourcePath - // videoRef - // this.videoContext.play(); - // this.videoContext.pause(); - }); - const data = { - chapterId: chapterId, - courseId: courseId, - periodId: id, - phaseId: this.phaseId, - studentId: uni.getStorageSync('uid') - } - postNewStudy(data).then(re=>{ - if(re.code == 200){ - this.studyId = re.data - console.log('新建记录成功',this.studyId) - }else{ - uni.$u.toast(res.message) - } - }) - } - }else{ - uni.$u.toast(res.message) - } - }) - - }, - - goBack(){ - uni.navigateBack({ - delta: 1 }); }, - handleUpdateTime(time) { - console.log("当前播放时间:", time); - - // 你可以在这里处理传递过来的播放时间 - }, - - secondsToHms(seconds) { - seconds = Number(seconds); - const h = Math.floor(seconds / 3600); - const m = Math.floor(seconds % 3600 / 60); - const s = Math.floor(seconds % 3600 % 60); - - const hDisplay = h > 0 ? String(h).padStart(2, '0') : '00'; - const mDisplay = m > 0 ? String(m).padStart(2, '0') : '00'; - const sDisplay = s > 0 ? String(s).padStart(2, '0') : '00'; - return `${hDisplay}:${mDisplay}:${sDisplay}`; - }, - - changeSwiper() { - this.isVideoPlay = false; - }, - formatTime(num) { - num = Math.floor(num) - let second = num % 60; - if (second < 10) second = '0' + second; - let min = Math.floor(num / 60); - if (min < 10) min = '0' + min; - return min + ":" + second; - }, + goBack(){ + const url = uni.getStorageSync("prevPage"); + if(url){ + if(url == '/pages/tabBar/wearhouse/wearhouse'){ + uni.reLaunch({ + url:'/pages/tabBar/wearhouse/wearhouse' + }); + }else{ + uni.navigateTo({ + url: url + }) + } + } else{ + uni.reLaunch({ + url: '/pages/tabBar/wearhouse/wearhouse' + }) + } + } } }; </script> @@ -283,98 +318,97 @@ height: 82rpx; margin-right: 10rpx; } -.videoWrap { - background: #fff; - .videoBox { - width: 100%; - height: 260px; - position: relative; - } - - .viden-info{ - padding: 15px; - box-sizing: border-box; - - .viden-info-t{ - font-size: 28rpx; - font-weight: bold; - color: #007aff; - margin-bottom: 10px; - } - - .viden-info-i{ - color: #999; - } - } -} .m-p-15{ width: 100%; padding: 0 15px; box-sizing: border-box; -} -.chapterList{ - width: 100%; - background: #fff; - border-radius: 8px; - margin: 20px 0; - padding: 15px; - box-sizing: border-box; - .chapterItem{ - padding-bottom: 15px; - margin-bottom: 15px; - border-bottom: 1px solid #f0f0f0; - box-sizing: border-box; - &:last-of-type{ - margin-bottom: 0; - padding-bottom: 0; - border-bottom: none; + .top{ + text-align: center; + margin: 20rpx 0; + font-weight: bolder; + } + + .questions{ + width: 100%; + margin-top: 40px; + .title{ + font-size: 16px; + margin-bottom: 20px; } + .content{ + padding-left: 10rpx; - .chapterName{ - font-size: 32rpx; - font-weight: bolder; - margin-bottom: 30rpx; - } - - .courseList{ - - .courseItem{ - height: 44rpx; + .answers{ + background: #ecf5ff; padding: 10px; - background: #f5f5f5; - border-radius: 4rpx; - margin-bottom: 10px; - display: flex; - align-items: center; - justify-content: space-between; + &>view{ + margin-bottom: 5px; + } - .c-i-l{ - display: flex; - align-items: center; - view{ - font-size: 28rpx; - line-height: 44rpx; - margin-left: 10px; - } + span{ + font-weight: bolder; } - .c-i-r{ - height: 100%; - display: flex; - justify-content: right; - align-items: center; - span{ - font-size: 13px; - margin-left: 10px; - } + .right{ + color: #3c9cff } - } - .selected{ - background: #007aff; - color: #fff; + .wrong{ + color: #e45656 + } } } } } -</style> +.btns{ + width: 100%; + position: fixed; + display: flex; + align-items: center; + justify-content: space-around; + z-index: 99; + bottom: 60px; + left: 0; +} + +/deep/ .u-checkbox{ + background: #fff; + padding: 10px; + box-sizing: border-box; + border-radius: 8px; +} + +/deep/ .u-radio,.u-checkbox{ + padding: 12px 10px; + box-sizing: border-box; + border-radius: 8px; + background: #f5f7fa; + border: 1px solid #fff; + box-shadow: 7px 7px 15px rgba(55, 84, 170, .15), + -7px -7px 20px rgba(255, 255, 255, 1), + inset 0px 0px 4px rgba(255, 255, 255, .2), + inset 7px 7px 15px rgba(55, 84, 170, 0), + inset -7px -7px 20px rgba(255, 255, 255, 0), + 0px 0px 4px rgba(255, 255, 255, 0) !important; + transition: box-shadow .25s ease !important; +} + +/deep/ .u-checkbox:active { + box-shadow: 7px 7px 15px rgba(55, 84, 170, .15), + -7px -7px 20px rgba(255, 255, 255, 1), + inset 0px 0px 4px rgba(255, 255, 255, 0), + inset 7px 7px 15px rgba(55, 84, 170, .15), + inset -7px -7px 20px rgba(255, 255, 255, 1), + 0px 0px 4px rgba(255, 255, 255, .2) !important; +} + +/deep/ .u-radio:active { + box-shadow: 7px 7px 15px rgba(55, 84, 170, .15), + -7px -7px 20px rgba(255, 255, 255, 1), + inset 0px 0px 4px rgba(255, 255, 255, 0), + inset 7px 7px 15px rgba(55, 84, 170, .15), + inset -7px -7px 20px rgba(255, 255, 255, 1), + 0px 0px 4px rgba(255, 255, 255, .2) !important; +} + +</style> \ No newline at end of file -- Gitblit v1.9.2