From 206b4f7128d9f664e9084e6394810eef79329604 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期二, 16 七月 2024 14:56:26 +0800 Subject: [PATCH] init --- static/defaultCover.jpg | 0 static/login.jpg | 0 static/notice-sel.png | 0 static/wearhouse.png | 0 static/notice.png | 0 pages/tabBar/wearhouse/questions.vue | 380 +++++++++++++ pages/tabBar/current/video.vue | 95 +++ static/my_sel.png | 0 api/wearhouse.js | 49 + .idea/testApp.iml | 0 pages/tabBar/wearhouse/wearhouse.vue | 394 +++++++++++++ static/wearhouse_sel.png | 0 pages/tabBar/wearhouse/weather.vue | 0 static/login1.jpg | 0 pages/tabBar/firstPage/exam.vue | 322 +++++++++++ static/home/swiperPic.png | 0 static/my.png | 0 pages/tabBar/current/detail.vue | 418 ++++++++++++++ api/current.js | 33 + 19 files changed, 1,691 insertions(+), 0 deletions(-) diff --git a/.idea/responseApp.iml b/.idea/testApp.iml similarity index 100% rename from .idea/responseApp.iml rename to .idea/testApp.iml diff --git a/api/current.js b/api/current.js new file mode 100644 index 0000000..3ac260b --- /dev/null +++ b/api/current.js @@ -0,0 +1,33 @@ +import {service} from '../common/request.js'; + +export function login(data) { + return service({ + url: '/api/app/account/login', + method: 'POST', + data + }) +} + +export function getLastApp(data) { + return service({ + url: '/app/version/last', + method: 'POST', + data + }) +} + +export function getClassList(data) { + return service({ + url: '/api/app/phase-student/list', + method: 'GET', + data + }) +} + +export function getExamList(data) { + return service({ + url: '/api/app/paper-student/list', + method: 'GET', + data + }) +} \ No newline at end of file diff --git a/api/wearhouse.js b/api/wearhouse.js new file mode 100644 index 0000000..657aa3c --- /dev/null +++ b/api/wearhouse.js @@ -0,0 +1,49 @@ +import {service} from '../common/request.js'; + +export function getQuizHouse(data) { + return service({ + url: '/api/app/question-bank/list', + method: 'GET', + data + }) +} + +export function getCleanRecord(data) { + return service({ + url: '/api/app/question-bank/clearExerciseRecord', + method: 'GET', + data + }) +} + +export function getQuestionIdList(data) { + return service({ + url: '/api/app/question/getExerciseQuestionList', + method: 'GET', + data + }) +} + +export function getQuestionById(data) { + return service({ + url: '/api/app/question/getExerciseQuestionById', + method: 'GET', + data + }) +} + +export function getQuestionByIds(data) { + return service({ + url: '/api/app/question/getExerciseQuestionByIds', + method: 'GET', + data + }) +} + +export function postExerciseAnswer(data) { + return service({ + url: '/api/app/exercise-answer', + method: 'POST', + data + }) +} \ No newline at end of file diff --git a/pages/tabBar/current/detail.vue b/pages/tabBar/current/detail.vue new file mode 100644 index 0000000..1fd7dc8 --- /dev/null +++ b/pages/tabBar/current/detail.vue @@ -0,0 +1,418 @@ +<template> + <view class="wrap"> + <view class="top_head pr"> + <view class="t-head-l"></view> + <view style="text-align: center">课程</view> + <view class="t-head-r" @click="goBack">返回</view> + </view> + + <view class="videoWrap"> + <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="d-e-c p-0-20"> + <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(i.periodId)"> + <view> + <up-icon name="play-circle" :color="i.periodId == selectedPeriodId?'#fff':'#007aff'" size="24" style="margin-left: 0"></up-icon> + <view>{{i.periodName}}</view> + </view> + <span>{{secondsToHms(i.period)}}</span> + </view> + </view> + </view> + </view> + </view> + </view> +</template> + +<script> +import utils from '@/common/utils.js'; +import Videojs from 'video.js' +import 'video.js/dist/video-js.min.css' +import cover from '../../../static/image/index/swiperPic.png' +export default { + components: { + }, + data() { + return { + videoCover: cover, + showDetail: false, + section_id: null, + course_id: null, + phaseId: null, + selectedPeriodId: null, + courseList: [], + course: {}, + detail: {}, + videoBaseUrl: 'http://192.168.2.16:9000/trainexam/', + status: false, + beforeAudio: true, + duration: 0, + progress: 0, + xpjAudio: null, + videoPause: false, + removeArea:{ + x: 0, + y: 0, + } + }; + }, + onReady(){ + + }, + onLoad(e) { + this.phaseId = e.phase_id + this.getSystemInfo(); + + }, + onShow(){ + + }, + mounted() { + // this.getData(); + }, + computed: { + + }, + beforeUnmount() { + if (this.player) { + this.player.dispose() + } + }, + + beforeDestroy() { + if (this.player) { + this.player.dispose() + } + }, + + methods: { + getSystemInfo(){ + let self = this; + uni.getSystemInfo({ + success(res) { + self.removeArea.x = res.windowWidth - 70; + self.removeArea.y = res.windowHeight - 120; + } + }); + }, + + /*获取数据*/ + getData() { + let self = this; + uni.showLoading({ + title: '加载中' + }); + self._get( + '/api/app/phase-student/getPhaseStudentById', { + phaseStudentId: self.phaseId, + }, + function (res) { + self.courseList = res.data + let id = self.courseList[0].studentStudyPeriodVOList[0].periodId + if(id){ + self.getCourseDetail(id) + } + uni.hideLoading(); + }, + function (err) { + + } + ); + }, + + getCourseDetail(id){ + let self = this; + self.selectedPeriodId = id; + self.showDetail = true + uni.showLoading({ + title: '加载中' + }); + self._get( + '/api/app/resource/getResourceByPeriod', { + periodId: id, + }, + function (res) { + self.detail = res.data + let videoElement = document.getElementById('video'); + if (videoElement) { + videoElement.parentNode.removeChild(videoElement); + } + self.initVideo(self.videoBaseUrl + self.detail.resourcePath) + // self.startVideo(self.videoBaseUrl + self.detail.resourcePath) + uni.hideLoading(); + }, + function (err) { + + } + ); + }, + + goBack(){ + uni.navigateBack({ + delta: 1 + }); + }, + + initVideo(path){ + let video = document.createElement('video'); + video.id = 'video'; + video.style = 'width: 100%; height: 100%;'; + video.controls = true; + video.preload="auto" + video.setAttribute('playsinline', true) //IOS微信浏览器支持小窗内播放 + video.setAttribute('webkit-playsinline', true) //这个bai属性是ios 10中设置可以让视频在小du窗内播放,也就是不是全zhi屏播放的video标签的一个属性 + video.setAttribute('x5-video-player-type', 'h5') //安卓 声明启用同层H5播放器 可以在video上面加东西 + let source = document.createElement('source'); + source.src = path + // source.type = 'application/x-mpegURL'; + video.appendChild(source); + this.$refs.video.$el.appendChild(video); + let that = this; + that.player = Videojs('video', { + poster: '', // 视频封面图地址 + title:'4564564', + playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度 + autoDisable: true, + preload: 'none', //auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频 + language: 'zh-CN', + fluid: true, // 自适应宽高 + muted: false, // 是否静音 + aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3") + controls: true, //是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮 + autoplay: "muted", //如果true,浏览器准备好时开始回放。 autoplay: "muted", // //自动播放属性,muted:静音播放 + loop: true, // 导致视频一结束就重新开始。 视频播放结束后,是否循环播放 + screenshot:true, + controlBar: { + volumePanel: { //声音样式 + inline: false // 不使用水平方式 + }, + timeDivider: true, // 时间分割线 + durationDisplay: true, // 总时间 + progressControl: true, // 进度条 + remainingTimeDisplay: true, //当前以播放时间 + fullscreenToggle: true, //全屏按钮 + pictureInPictureToggle: true, //画中画 + } + }, function() { + this.on('error', function(err) { //请求数据时遇到错误 + console.log("请求数据时遇到错误",err) + }); + this.on('stalled', function(stalled) { //网速失速 + console.log("网速失速",stalled) + }); + this.on('play', function() { //开始播放 + console.log("开始播放") + }); + this.on('pause', function() { //暂停 + console.log("暂停") + }); + this.on('timeupdate', function(timeupdate) { + // console.log(timeupdate) + }) + }); + }, + + startVideo(videoPath){ + console.log(videoPath,'path') + this.player.src({ + src: videoPath, + type: 'application/x-mpegURL' + }) + // this.player.load() + }, + + startFirstVideo(){ + let id = this.courseList[0].studentStudyPeriodVOList[0].periodId + if(id){ + this.getCourseDetail(id) + }else{ + uni.$u.toast('暂无可播放视频内容') + } + }, + + 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; + }, + } +}; +</script> + +<style lang="scss" scoped> +.top_head { + height: 40px; + line-height: 40px; + position: sticky; + top: 0; + left: 0; + z-index: 100; + background: #fff; + display: flex; + align-items: center; + justify-content: space-between; + .t-head-l{ + width: 100px; + } + .t-head-r{ + width: 100px; + text-align: center; + height: 40px; + line-height: 40px; + color: #666; + margin: 0; + } +} + +.videoWrap { + background: #fff; + + .videoBox { + width: 100%; + height: 260px; + position: relative; + + .masterPic { + width: 100%; + height: 100%; + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + background: rgb(0, 0, 0, 0.45); + width: 100%; + height: 100%; + z-index: 1; + } + + .img { + width: 100%; + height: 100%; + } + } + + .startIcon { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 92rpx; + height: 92rpx; + z-index: 10; + } + .videoPlayer-dimensions.vjs-fluid:not(.vjs-audio-only-mode){ + padding: 0; + } + } + + .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; + } + } +} + +.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; + } + + .chapterName{ + font-size: 32rpx; + font-weight: bolder; + margin-bottom: 30rpx; + } + + .courseList{ + + .courseItem{ + height: 44rpx; + padding: 10px; + background: #f5f5f5; + border-radius: 4rpx; + margin-bottom: 10px; + display: flex; + align-items: center; + justify-content: space-between; + + &>view{ + display: flex; + align-items: center; + view{ + font-size: 28rpx; + line-height: 44rpx; + margin-left: 10px; + } + } + + } + .selected{ + background: #007aff; + color: #fff; + } + } + } +} +</style> diff --git a/pages/tabBar/current/video.vue b/pages/tabBar/current/video.vue new file mode 100644 index 0000000..6bf2376 --- /dev/null +++ b/pages/tabBar/current/video.vue @@ -0,0 +1,95 @@ +<template> + <view class="content"> + <view class="video-js" ref="video" style="width: 100%;height: 100%;"></view> + </view> +</template> +<script> +import Videojs from '!video.js' +export default { + data() { + return { + player: null, + path: '', + baseUrl: 'http://192.168.2.16:9000/trainexam/', + info: {} + } + }, + mounted() { + + }, + created() { + + }, + methods: { + initVideo(info){ + this.info = info + if (this.player) { + const currentTime = this.player.currentTime(); + this.$emit('update-time', currentTime); + this.player.dispose(); + this.player = null; + } + this.$refs.video.innerHTML = ''; + let video = document.createElement('video'); + video.id = 'video'; + video.style = 'width: 100%; height: 100%;'; + video.controls = true; + video.preload="auto" + video.setAttribute('playsinline', true) //IOS微信浏览器支持小窗内播放 + video.setAttribute('webkit-playsinline', true) //这个bai属性是ios 10中设置可以让视频在小du窗内播放,也就是不是全zhi屏播放的video标签的一个属性 + video.setAttribute('x5-video-player-type', 'h5') //安卓 声明启用同层H5播放器 可以在video上面加东西 + let source = document.createElement('source'); + source.src = this.baseUrl + info.resourcePath + source.type = 'application/x-mpegURL'; + video.appendChild(source); + this.$refs.video.$el.appendChild(video); + const that = this; + this.player = Videojs('video', { + poster: '', // 视频封面图地址 + title: info.name, + playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度 + autoDisable: true, + preload: 'none', //auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频 + language: 'zh-CN', + fluid: true, // 自适应宽高 + muted: false, // 是否静音 + aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3") + controls: true, //是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮 + autoplay: false, //如果true,浏览器准备好时开始回放。 autoplay: "muted", // //自动播放属性,muted:静音播放 + loop: false, // 导致视频一结束就重新开始。 视频播放结束后,是否循环播放 + screenshot:true, + controlBar: { + volumePanel: { //声音样式 + inline: false // 不使用水平方式 + }, + timeDivider: true, // 时间分割线 + durationDisplay: true, // 总时间 + progressControl: true, // 进度条 + remainingTimeDisplay: true, //当前以播放时间 + fullscreenToggle: true, //全屏按钮 + pictureInPictureToggle: true, //画中画 + } + }, function() { + this.on('error', function(err) { //请求数据时遇到错误 + console.log("请求数据时遇到错误",err) + }); + this.on('stalled', function(stalled) { //网速失速 + console.log("网速失速",stalled) + }); + this.on('play', function() { //开始播放 + console.log("开始播放") + }); + this.on('pause', function() { //暂停 + console.log("暂停") + const currentTime = this.currentTime(); + that.$emit('update-time', currentTime); // 传递当前播放时间给父组件 + console.log("暂停", currentTime); + }); + this.on('timeupdate', function(timeupdate) { + // console.log(timeupdate) + }) + }); + }, + } +} +</script> \ No newline at end of file diff --git a/pages/tabBar/firstPage/exam.vue b/pages/tabBar/firstPage/exam.vue new file mode 100644 index 0000000..347c1b8 --- /dev/null +++ b/pages/tabBar/firstPage/exam.vue @@ -0,0 +1,322 @@ +<template> + <view style="display: flex;flex-direction: column;height: 100%;"> + <!-- 自定义导航栏 --> + <view class="navBarBox"> + <!-- 状态栏占位 --> + <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view> + <!-- 真正的导航栏内容 --> + <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> + <!-- <view > + <u-button type="text" @click="loginOut" style="color: blue;margin-right: 5px;">退出</u-button> + </view> --> + </view> + </view> + </view> + <view class="m-p-15"> + <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" + @change="checkboxChange" + > + <u-checkbox + :customStyle="{marginBottom: '20px'}" + 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" placement="column" @change="groupChange" v-if="currentQ.questionType==1||currentQ.questionType==3" > + <u-radio + :customStyle="{marginBottom: '20px'}" + 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: 90%;margin: 30px auto" v-if="currentQ.exExerciseAnswer && currentQ.exExerciseAnswer.answer" type="primary" shape="circle" size="small" 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"> + <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> +</template> + +<script> +import {getQuestionIdList,getQuestionByIds,postExerciseAnswer} from '../../../api/wearhouse.js' + +export default { + components: { + + }, + data() { + return { + statusBarHeight: 0, + bank: {}, + idList: [], + questionList: [], + currentIndex: 0, + currentQ: {} + } + }, + onReady(){ + }, + onLoad(e) { + this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; + this.bank = e.bank && JSON.parse(decodeURIComponent(e.bank)); + this.currentIndex = this.bank.exerciseCount + console.log(this.bank,this.currentIndex,66) + this.getQuestionIds(this.bank.id) + }, + onShow(){ + + }, + mounted() { + + }, + computed: { + + }, + beforeUnmount() { + + }, + + beforeDestroy() { + + }, + + methods: { + 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] + // this.currentQ.content = JSON.parse(this.currentQ.content) + console.log(this.currentQ,'当前问题') + }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){ + this.currentQ.exExerciseAnswer.passed = res.data.passed + }else{ + uni.$u.toast(res.message) + } + }) + }, + + 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('用户点击确定'); + } + } + }); + }, + + 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> + +<style lang="scss" scoped> +.navBarBox .navBar { + background-color:#fff; + height: 50px; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + box-shadow: 0 3px 12px rgba(0,0,0,0.05); +} +.barText{ + margin-left: -20px; + flex: 1; + /* margin-left: 20px; */ + text-align: center; + width: 85%; + font-size: 16px; + /* text-align: center; */ + font-weight: 600; +} +.navBarBox .navBar .logo { + width: 82rpx; + height: 82rpx; + margin-right: 10rpx; +} + +.m-p-15{ + width: 100%; + padding: 0 15px; + box-sizing: border-box; + + .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; + + .answers{ + background: #ecf5ff; + padding: 5px 10px; + + span{ + font-weight: bolder; + } + .right{ + color: #3c9cff + } + .wrong{ + color: #e45656 + } + } + } + } +} +.btns{ + width: 100%; + position: fixed; + display: flex; + align-items: center; + justify-content: space-around; + z-index: 99; + bottom: 60px; + left: 0; +} +</style> diff --git a/pages/tabBar/wearhouse/questions.vue b/pages/tabBar/wearhouse/questions.vue new file mode 100644 index 0000000..0ae1e90 --- /dev/null +++ b/pages/tabBar/wearhouse/questions.vue @@ -0,0 +1,380 @@ +<template> + <view style="display: flex;flex-direction: column;height: 100%;"> + <!-- 自定义导航栏 --> + <view class="navBarBox"> + <!-- 状态栏占位 --> + <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view> + <!-- 真正的导航栏内容 --> + <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> + <!-- <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> + </view> + </view> + </view> + </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"; +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, + }; + }, + onReady(){ + // this.videoContext = uni.createVideoContext('myVideo') + }, + onLoad(e) { + this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; + this.phaseId = e.phase_id && JSON.parse(decodeURIComponent(e.phase_id)); + + }, + onShow(){ + + }, + mounted() { + this.getData(); + }, + computed: { + + }, + beforeUnmount() { + + }, + + beforeDestroy() { + + }, + + 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 + } + postUpdateStudy(data).then(res=>{ + if(res.code == 200){ + console.log('上报成功') + }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 = [] + } + }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; + }, + } +}; +</script> + +<style lang="scss" scoped> +.navBarBox .navBar { + background-color:#fff; + height: 50px; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + box-shadow: 0 3px 12px rgba(0,0,0,0.05); +} +.barText{ + margin-left: -20px; + flex: 1; + /* margin-left: 20px; */ + text-align: center; + width: 85%; + font-size: 16px; + /* text-align: center; */ + font-weight: 600; +} +.navBarBox .navBar .logo { + width: 82rpx; + 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; + } + + .chapterName{ + font-size: 32rpx; + font-weight: bolder; + margin-bottom: 30rpx; + } + + .courseList{ + + .courseItem{ + height: 44rpx; + padding: 10px; + background: #f5f5f5; + border-radius: 4rpx; + margin-bottom: 10px; + display: flex; + align-items: center; + justify-content: space-between; + + .c-i-l{ + display: flex; + align-items: center; + view{ + font-size: 28rpx; + line-height: 44rpx; + margin-left: 10px; + } + } + .c-i-r{ + height: 100%; + display: flex; + justify-content: right; + align-items: center; + span{ + font-size: 13px; + margin-left: 10px; + } + } + } + .selected{ + background: #007aff; + color: #fff; + } + } + } +} +</style> diff --git a/pages/tabBar/wearhouse/wearhouse.vue b/pages/tabBar/wearhouse/wearhouse.vue new file mode 100644 index 0000000..f2a3ed3 --- /dev/null +++ b/pages/tabBar/wearhouse/wearhouse.vue @@ -0,0 +1,394 @@ +<template> + <view class="box"> + <!-- 自定义导航栏 --> + <view class="navBarBox fix"> + <!-- 状态栏占位 --> + <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view> + <!-- 真正的导航栏内容 --> + <view class="navBar"> + <u-icon style=" margin-left: 13px;" name="arrow-left" color="black" size="17" @click="goBack"/> + <view class="barText">刷题</view> + <view > + <u-button type="text" @click="loginOut" style="color: #1890ff;margin-right: 5px;width: 65px;">退出</u-button> + </view> + </view> + </view> + <!-- 页面内容 --> + <view class="m-p-15"> + <view class="cardList"> + <scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" + @scrolltolower="lower" lower-threshold="150" @scroll="scrollView" style="height:100%"> + <view class="card-i" v-for="(item,index) in quizList" :key="index"> + <view class="card-i-l"> + <view>{{item.name}}</view> + <span style="display:block;color: #999;font-size: 12px;margin-bottom: 20px;">已刷{{item.exerciseCount}}/{{item.totalCount}}</span> + <span style="display:block;color: #999;font-size: 12px;">创建时间:{{item.createTime}}</span> + </view> + <view class="card-i-r"> + <u-button v-if="item.exerciseCount == 0" class="study-button" type="success" text="开始刷题" shape="circle" size="small" @click="getQuestionIds(item,1)"></u-button> + <u-button v-if="item.exerciseCount > 0" class="study-button" type="success" text="继续刷题" shape="circle" size="small" @click="getQuestionIds(item,2)"></u-button> + <u-button class="study-button" type="error" text="查看错题" shape="circle" size="small" @click="getQuestionIds(item.id,3)"></u-button> + <u-button class="study-button" text="重置" shape="circle" size="small" @click="reSet(item.id)"></u-button> + </view> + </view> + </scroll-view> + </view> + </view> + <tabBar :currentPagePath="page"></tabBar> + </view> +</template> + +<script> + import tabBar from '../tabBarIndex.vue' + import {getQuizHouse,getCleanRecord} from '../../../api/wearhouse.js' + import tebBar from '../tabBarIndex.vue' + import VUE_APP_BASE_URL from "../../../common/constant"; + export default { + components:{ + tabBar + }, + data() { + return { + page: 'pages/tabBar/wearhouse/wearhouse', + statusBarHeight: 0, + classParams: { + pageNum: 1, + pageSize: 10, + }, + quizList: [], + totalPage: 0 + } + }, + onLoad() { + // this.unitType = uni.getStorageSync('unittype') + 1; + //获取手机状态栏高度 + this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; + }, + onShow() { + // this.role = uni.getStorageSync('roleName'); + this.classParams.pageNum = 1 + + }, + mounted(){ + this.getQuizList() + }, + methods: { + loginOut() { + uni.clearStorageSync(); + uni.clearStorage(); + uni.navigateTo({ + url: '/pages/index/index' + }) + }, + goBack() { + uni.switchTab({ + url:'/pages/tabBar/firstPage/firstPage' + }); + }, + getQuizList(){ + getQuizHouse(this.classParams).then(res => { + if(res.code == 200) { + let list = res.data.list?res.data.list: []; + if (res.pageNum != 1) { + this.quizList = this.quizList.concat(list) + } else { + this.quizList = list + // this.$set(this, 'quizList', list) + } + this.totalPage = res.data.totalPage + }else{ + uni.$u.toast(res.message) + } + }) + }, + + async getQuestionIds(item,type){ + if(type == 1 && item.totalCount == 0){ + uni.$u.toast('该题库暂无题目') + return + } + if(type == 2 && item.totalCount == item.exerciseCount){ + uni.$u.toast('该题库所有题目已刷完') + return + } + uni.setStorageSync("prevPage", '/pages/tabBar/wearhouse/wearhouse'); + uni.navigateTo({ + url: `/pages/tabBar/wearhouse/questions?bank=` + encodeURIComponent(JSON.stringify(item)) + }) + }, + + reSet(id){ + const t = this + uni.showModal({ + title: '提示', + content: '是否重置所选题库的刷题记录?', + success: async function (res) { + if (res.confirm) { + const res = await getCleanRecord({bankId: id}) + if(res.code == 200){ + uni.showToast({ + title: '刷题记录已重置', + duration: 1000 + }); + + uni.reLaunch({ + url: '/pages/tabBar/wearhouse/wearhouse' + }) + }else{ + uni.showToast({ + title: '记录重置失败,请稍后再试', + duration: 1000 + }); + } + } else if (res.cancel) { + console.log('用户点击取消'); + } + } + }); + }, + upper(e) { + // console.log(e) + }, + lower(e) { + //并且让页码+1,调用获取数据的方法获取第二页数据 + this.classParams.pageNum++ + //此处调用自己获取数据列表的方法 + if (this.classParams.pageNum > this.totalPage){ + uni.$u.toast('已加载全部数据') + return + } + this.getQuizList() + }, + scrollView(e) { + // console.log(e) + } + } + } + +</script> + +<style lang="scss" scoped> +.box { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; +} +.fix{ + position: sticky; + top: 0; + left: 0; + right: 0; + width: 100%; + z-index: 1; +} +.navBarBox .navBar { + background-color:#fff; + height: 50px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + box-shadow: 0 3px 12px rgba(0,0,0,0.05); +} +.barText{ + margin-left: 55px; + text-align: center; + width: 85%; + font-size: 16px; + /* text-align: center; */ + font-weight: 600; +} +.statusBar{ + background-color:lightgrey; +} + +.controlBar{ + margin: 12px 12px 0; + padding: 12px; + height: 90px; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; + width: calc(100% - 24px); + background: #fff; + border-radius: 5px; + box-shadow: 0 3px 12px rgba(0,0,0,0.05); + + .buttonGroup{ + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 12px; + } + + .listHead{ + display: flex; + align-items: center; + justify-content: flex-end; + } +} +.buttonItem{ + width: calc(20% - 4px); + color: white; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + height: 30px; + border-radius: 5px; + &.active{ + border: 1px solid rgba(0,0,0,.4); + box-shadow: 0 1px 3px rgba(0,0,0,0.1); + } +} +.all { + background-color: rgb(17,204,33); + &.active{ + background-image: linear-gradient(#22992d,#12da23); + } +} +.active { + border: 1.5px solid #8d8d8d; +} +.red { + background-color: #ff5555; + &.active{ + background:linear-gradient(#dc2f2f, #ff5b5b); + } +} +.orange { + background-color: rgb(251, 158, 13); + &.active{ + background: linear-gradient(#e28e0c,#ffa90e); + } +} +.yellow { + background-color: rgb(255, 223, 37); + &.active{ + background: linear-gradient(#e6c921,#ffef28); + } +} +.blue { + background-color: #409EFF; + &.active{ + background: linear-gradient(#3a8ee6,#44a9ff); + } +} +.switchBtn{ + display: flex; + align-items: center; +} +.examineList{ + margin-top: 12px; + height: calc(100vh - 246px); + overflow: hidden; + overflow-y: scroll; +} +.listContent{ + display: flex; + flex-direction: column; + width: calc(100% - 24px); + margin: 0 12px; + // margin-bottom: 30px; + background: #fff; + border-radius: 5px; + box-shadow: 0 3px 12px rgba(0,0,0,0.05); + height: 100%; +} +.itemContent{ + color: #333; + font-size: 16px; + margin-top: 15px; + padding: 0 12px 10px; + border-bottom: 1px solid #ebebeb; +} +.content{ + .tit{ + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + .cont{ + width: 100%; + font-size: 14px; + color: #666; + display: block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + margin-bottom: 6px; + } + .btnGroup{ + width: 100%; + display: flex; + justify-content: space-between; + } +} +.buttonCo{ + margin-top: 5px; + margin-bottom: 10px; +} +.m-p-15{ + width: 100%; + box-sizing: border-box; + padding: 0 15px; +} +.cardList{ + width: 100%; + height: calc(100vh - 160px); + background: #fff; + border-radius: 8px; + margin: 20px 0; + padding: 15px; + box-sizing: border-box; + + .card-i{ + padding-bottom: 15px; + margin-bottom: 15px; + border-bottom: 1px solid #f0f0f0; + position: relative; + display: flex; + align-items: flex-start; + justify-content: space-between; + box-sizing: border-box; + &:last-of-type{ + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; + } + + .card-i-l{ + width: 70%; + view{ + width: 100%; + font-size: 32rpx; + margin-bottom: 10rpx; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + } + .card-i-r{ + width: 25%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + .study-button{ + width: 100%; + margin-bottom: 10rpx; + + &:last-of-type{ + margin-bottom: 0; + } + } + } + } +} + +</style> \ No newline at end of file diff --git a/pages/tabBar/weather/weather.vue b/pages/tabBar/wearhouse/weather.vue similarity index 100% rename from pages/tabBar/weather/weather.vue rename to pages/tabBar/wearhouse/weather.vue diff --git a/static/defaultCover.jpg b/static/defaultCover.jpg new file mode 100644 index 0000000..a0d2154 --- /dev/null +++ b/static/defaultCover.jpg Binary files differ diff --git a/static/home/swiperPic.png b/static/home/swiperPic.png new file mode 100644 index 0000000..a0d2154 --- /dev/null +++ b/static/home/swiperPic.png Binary files differ diff --git a/static/login.jpg b/static/login.jpg new file mode 100644 index 0000000..ff35a1f --- /dev/null +++ b/static/login.jpg Binary files differ diff --git a/static/login1.jpg b/static/login1.jpg new file mode 100644 index 0000000..9e7ffb2 --- /dev/null +++ b/static/login1.jpg Binary files differ diff --git a/static/my.png b/static/my.png new file mode 100644 index 0000000..5577b8f --- /dev/null +++ b/static/my.png Binary files differ diff --git a/static/my_sel.png b/static/my_sel.png new file mode 100644 index 0000000..8a00f22 --- /dev/null +++ b/static/my_sel.png Binary files differ diff --git a/static/notice-sel.png b/static/notice-sel.png new file mode 100644 index 0000000..b2b627e --- /dev/null +++ b/static/notice-sel.png Binary files differ diff --git a/static/notice.png b/static/notice.png new file mode 100644 index 0000000..3e9b1f7 --- /dev/null +++ b/static/notice.png Binary files differ diff --git a/static/wearhouse.png b/static/wearhouse.png new file mode 100644 index 0000000..00db88d --- /dev/null +++ b/static/wearhouse.png Binary files differ diff --git a/static/wearhouse_sel.png b/static/wearhouse_sel.png new file mode 100644 index 0000000..17a0681 --- /dev/null +++ b/static/wearhouse_sel.png Binary files differ -- Gitblit v1.9.2