Skip to content

M
mt-education-mobile
Commit 59557465 authored by wangjiankun's avatar wangjiankun
Browse files
Options

bug修改 

音频控件 重组 支持禁用
优化培训附件的加载样式与时间 优化报错信息
积分显示条件补充 外链显示配置时的图标、图片
评论支持 回车与空格 但无法高亮被回复的人
parent 35b3d1e5
Hide whitespace changes
Inline Side-by-side
Showing with 299 additions and 107 deletions
src/assets/images/play.svg 0 → 100644
View file @ 59557465
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1574069367505" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2233" data-spm-anchor-id="a313x.7781069.0.i1" width="25" height="25" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M844.704269 475.730473L222.284513 116.380385a43.342807 43.342807 0 0 0-65.025048 37.548353v718.692951a43.335582 43.335582 0 0 0 65.025048 37.541128l622.412531-359.342864a43.357257 43.357257 0 0 0 0.007225-75.08948z" fill="#ffffff" p-id="2234" data-spm-anchor-id="a313x.7781069.0.i2" class="selected"></path></svg>
\ No newline at end of file
src/assets/images/suspend.svg 0 → 100644
View file @ 59557465
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1574069451506" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3902" width="25" height="25" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M128 0h253.155556v1024H128V0z m512 0h256v1024h-256V0z" fill="#ffffff" p-id="3903"></path></svg>
\ No newline at end of file
src/components/CourseDiscuss/DiscusssingleReply.vue
View file @ 59557465
......@@ -40,8 +40,9 @@
</div>
</div>
</div>
<div style="text-align: left;font-size: 14px;font-family: PingFang-SC-Regular;word-break: break-all">
{{replyData.replyToId === '' ? '':replyData.studentName + '回复:'}} <span style="color: #4098f0" v-if="replyData.replyToId !== '' ">@{{replyData.replyToName}}</span> {{replyData.content.replace(/ /g,'&nbsp;').replace(/↵/g," \n ")}}
<div style="text-align: left;font-size: 14px;font-family: PingFang-SC-Regular;word-break: break-all"
v-html="(replyData.replyToId === '' ? '':replyData.studentName + '：回复@'+replyData.replyToName+'：')+replyData.content.replace(/ /g,'&nbsp;').replace(formatAscal, '<br/>')">
<!-- {{}} <span style="color: #4098f0" v-if="replyData.replyToId !== '' ">@{{replyData.replyToName}}</span> {{replyData.content.replace(/ /g,'&nbsp;').replace(/\n/g,'<br>')}}-->
</div>
</div>
</div>
......@@ -66,7 +67,7 @@ export default {
},
data() {
return {
formatAscal: new RegExp('\n', 'g')
}
},
methods: {
......
src/components/Home/curriculum.vue
View file @ 59557465
......@@ -3,7 +3,7 @@
<div class="curriculum">
<span
class="integral"
v-if="data.valueConsume !== 'undefined' && data.valueConsume !== undefined && data.valueConsume !== '' && data.valueConsume !== 0"
v-if="data.valueConsume !== 'undefined' && data.valueConsume !== undefined && data.valueConsume !== '' && data.valueConsume !== '0'"
>{{ data.valueConsume }}积分</span>
<img
class="con-img"
......
src/components/MtAudio.vue
View file @ 59557465
......@@ -2,37 +2,49 @@
<div class="edu-audio">
<!-- <canvas id="audio_canvas"></canvas> -->
<div class="audio-wrap">
<img
class="audio-logo"
src="~@assets/images/icon_audio.png"
>
</div>
<div class="audio-wrapper">
<audio
id="edu_audio"
autoplay="autoplay"
:src="audioSrc"
>
您的浏览器不支持 audio 元素。
</audio>
<button
@click="playAudio"
class="play-btn"
>
<img
v-if="!audioPlay"
src="~@assets/images/play-audio.png"
<img src="@/assets/images/icon_audio.png" style="width: 40px;height: 40px">
<div class="audio-wrapper">
<audio
id="edu_audio"
autoplay="autoplay"
:src="audioSrc"
>
<img
src="~@assets/images/suspend-audio.png"
v-else
您的浏览器不支持 audio 元素。
</audio>
<button
@click="playAudio"
class="play-btn"
>
</button>
<span id="currentTime" />
<span>/</span>
<span id="totalTime" />
<div class="progress-bg">
<div class="progress-bar" />
<img
src="@/assets/images/play.svg"
v-if="!audioPlay"
style="width: 12px;height: 18px;display: inline-block"
>
<img
src="@/assets/images/suspend.svg"
style="width: 12px;height: 18px;display: inline-block"
v-else
>
</button>
<span id="currentTime"/>
<span>/</span>
<span
id="totalTime"
style="margin-right: 10px;position: relative;top: 1px"
/>
<!-- <div class="progress-bg" id="progressContainer" @click="conso" style="display: none">-->
<!-- <div class="dragCircle" id="dragCircle"></div>-->
<!-- <div class="progress-bar"></div>-->
<!-- </div>-->
<van-slider
:step="0.1"
:disabled="isDisabled"
v-model="time"
:min="0"
:max="maxTime"
@change="changeTime"
/>
</div>
</div>
</div>
......@@ -43,18 +55,28 @@ export default {
return {
oAudio: null,
mtAudio: null,
audioPlay: false
audioPlay: false,
dragCircle: null,
time: 0,
maxTime: 100,
isDisabled: false
// audioSlider: 0
}
},
props: ['audioSrc', 'startTime'],
mounted() {
// this.dragCircle = document.getElementById('dragCircle')
const audio = document.getElementById('edu_audio')
console.log('audio:', audio)
this.mtAudio = document.getElementById('edu_audio')
// this.audioSlider = audio.volume * 100
// console.log(this.audioSlider)
audio.addEventListener('loadedmetadata', () => {
this.$emit('loaded', audio.duration)
this.audioPlay = true
this.maxTime = audio.duration
audio.currentTime = this.startTime
this.audioPlay = true
this.time = this.startTime
document.getElementById('currentTime').innerText = this.resolveSecond(audio.currentTime)
document.getElementById('totalTime').innerText = this.resolveSecond(audio.duration)
})
......@@ -64,12 +86,38 @@ export default {
document.getElementById('currentTime').innerText = this.resolveSecond(audio.currentTime)
document.getElementById('totalTime').innerText = this.resolveSecond(audio.duration)
console.log('progress:', value)
document.getElementsByClassName('progress-bar')[0].style.width = value * 100 + '%'
this.time = audio.currentTime
// document.getElementsByClassName('progress-bar')[0].style.width = value * 100 + '%';
// document.getElementById('dragCircle').style.left = value * 100 + '%';
if (audio.currentTime === audio.duration) {
this.audioPlay = false
}
}, false)
},
destroyed() {
},
methods: {
changeTime(key) {
this.mtAudio.currentTime = key
this.mtAudio.play()
this.audioPlay = true
},
// conso(event){
// // 获取进度条元素
// const progressBar = document.getElementById('progressContainer')
// // 获取 滚动条做偏移量
// const srocll = document.documentElement.scrollLeft + document.body.scrollLeft
// // 获取 鼠标相对于进度条的相对偏移量
// const mouseX = event.clientX + srocll - progressBar.offsetLeft -270
// // 计算 音频时间
// const place = (mouseX)/progressBar.offsetWidth*this.mtAudio.duration
// // 赋值
// this.mtAudio.currentTime = place
// },
// volumeChange () {
// document.getElementById('edu_audio').volume = this.audioSlider/100
// },
resolveSecond(time) {
var sec = Math.floor(time % 60)
if (sec < 10) {
......@@ -94,9 +142,11 @@ export default {
this.audioPlay = false
}
},
pauseAudio() {
this.mtAudio.pause()
this.audioPlay = false
canDrag() {
this.isDisabled = false
},
notDrag() {
this.isDisabled = true
}
}
}
......@@ -110,7 +160,9 @@ export default {
}
.play-btn {
width: 42px;
height: 100%;
height: 39px;
background-color: transparent ;
border-color: transparent;
}
#audio_canvas {
display: block;
......@@ -119,46 +171,48 @@ export default {
/* background: linear-gradient(135deg, rgb(142, 13, 133) 0%, rgb(230, 132, 110) 100%); */
}
.audio-wrap {
position: relative;
overflow: hidden;
background-color: #4498f0;
display: flex;
flex: 1;
background: #4498f0;
flex-direction: column;
align-items: center;
justify-content: center;
}
.audio-logo {
width: 33px;
height: 35px;
.svg-icon.audio-logo {
width: 92px;
height: 63px;
}
#edu_audio {
width: 100%;
}
.audio-wrapper {
height: 39px;
line-height: 39px;
color: #ffffff;
font-size: 15px;
background-color: rgba(43, 51, 63, 0.7);
}
/*.audio-wrapper button .icon-play:before{
font-size: 18px;
content: "\F101";
}*/
.audio-wrapper .progress-bg {
display: inline-block;
height: 5px;
width: 70%;
background: rgba(115, 133, 159, 0.5);
vertical-align: middle;
}
.audio-wrapper .progress-bar {
display: inline-block;
height: 5px;
background-color: #2483d5;
vertical-align: top;
width: 100%;
position: absolute;
bottom: 0;
text-align: start;height: 39px;
line-height: 39px;color: #ffffff;font-size: 15px;
display: flex;
align-items: center;
flex-direction: row;background-color: rgba(43, 51, 63, 0.3);
}
#currentTime, #totalTime{
padding: 0 5px;
#currentTime, #totalTime{
padding: 0 5px;
}
</style>
<style lang="less">
.edu-audio{
.van-slider{
display: inline-block;
width: 100%;
margin-right: 5px;
.van-slider__button{
width: 12px;
height: 12px;
}
}
}
</style>
src/components/MtPdf.vue
View file @ 59557465
......@@ -50,7 +50,7 @@
</div>
</div>
<loading
v-else
v-else-if="loading && showLoading"
type="spinner"
color="#1989fa"
/>
......@@ -92,7 +92,20 @@ export default {
}
}
},
props: ['pdfSrc', 'startPage'],
props: {
pdfSrc: {
type: String,
required: true
},
startPage: {
type: Number,
default: 0
},
showLoading: {
type: Boolean,
default: true
}
},
methods: {
// handleInput(e){
// this.page=parseInt(e.target.value.replace(/[^\d]/g,''));
......
src/components/MtPdfPpt.vue
View file @ 59557465
......@@ -50,7 +50,7 @@
</div>
</div>
<loading
v-else
v-else-if="loading && showLoading"
type="spinner"
color="#1989fa"
/>
......@@ -92,7 +92,20 @@ export default {
}
}
},
props: ['pdfSrc', 'startPage'],
props: {
pdfSrc: {
type: String,
required: true
},
startPage: {
type: Number,
default: 0
},
showLoading: {
type: Boolean,
default: true
}
},
methods: {
// handleInput(e){
// this.page=parseInt(e.target.value.replace(/[^\d]/g,''));
......
src/components/MtPpt.vue
View file @ 59557465
......@@ -44,7 +44,7 @@
>
</div> -->
<loading
v-else
v-else-if="loading && showLoading"
type="spinner"
color="#1989fa"
/>
......@@ -88,7 +88,20 @@ export default {
}
}
},
props: ['pdfSrc', 'startPage'],
props: {
pdfSrc: {
type: String,
required: true
},
startPage: {
type: Number,
default: 0
},
showLoading: {
type: Boolean,
default: true
}
},
methods: {
toPage() {
const newPage = parseInt(this.pageInput)
......
src/components/MtWord.vue
View file @ 59557465
......@@ -16,7 +16,7 @@
ng-pattern="/[^a-zA-Z]/"
v-model="page"
>-->
<span>{{page}} /&nbsp;{{ numPages }}</span>
<span>{{ page }} /&nbsp;{{ numPages }}</span>
<img
class="resize small"
@click="toLittle"
......@@ -50,7 +50,7 @@
</div>
</div>
<loading
v-else
v-else-if="loading && showLoading"
type="spinner"
color="#1989fa"
/>
......@@ -92,7 +92,20 @@ export default {
}
}
},
props: ['pdfSrc', 'startPage'],
props: {
pdfSrc: {
type: String,
required: true
},
startPage: {
type: Number,
default: 0
},
showLoading: {
type: Boolean,
default: true
}
},
methods: {
// handleInput(e){
// this.page=parseInt(e.target.value.replace(/[^\d]/g,''));
......
src/main.js
View file @ 59557465
......@@ -6,7 +6,7 @@ import Storage from 'vue-ls'
import {sessionOptions, localOptions} from './config/vue-ls.config'
import * as _ from 'lodash'
import 'vant/lib/icon/local.css'
import { Overlay, PullRefresh, Field, Image, Toast, Dialog} from 'vant'
import {Loading, Slider, Overlay, PullRefresh, Field, Image, Toast, Dialog} from 'vant'
import wnsdk from '@tjmt/wnsdk'
import {curriculumTrainRouter, setgoindex} from './utils'
import './assets/style/resetui.less'
......@@ -28,6 +28,8 @@ Vue.use(Image)
Vue.use(Field)
Vue.use(PullRefresh)
Vue.use(Overlay)
Vue.use(Slider)
Vue.use(Loading)
Vue.config.productionTip = false
// 定义线上课程 线下培训 跳转方法
Vue.prototype.$curriculumTrainRouter = curriculumTrainRouter
......
src/views/CourseDetail/index.vue
View file @ 59557465
......@@ -49,6 +49,7 @@
:playsinline="true"
/>
<mt-audio
ref="mtAudio"
v-else-if="currentSection.isTest==='1'"
class="pdf-previewer"
@timeupdate="onAudioTimeupdate"
......@@ -90,7 +91,7 @@
:pdf-src="currentSection.fileUrl"
/>
<mt-word
v-else-if="currentSection.isTest==='4' && upLoad"
v-else-if="currentSection.isTest==='4' && upLoad"
class="pdf-previewer"
@loaded="onPdfLoaded"
@pageChange="onPdfChange"
......@@ -183,7 +184,7 @@
class="section"
v-for="(sec, key2) in chap.childList"
:class="{select: currentSection.businessId == sec.businessId}"
@click="sectionClick(sec, chap.sort)"
@click="sectionClick(sec, chap.sort, key1, key2)"
:key="key2"
>
<em>{{ ways[sec.isTest] }}</em>
......@@ -327,8 +328,12 @@
v-if="shareIsShow"
class="share-text-box"
>
<p @click="internalShareClick">内部分享</p>
<p @click="externalShareClick">外部分享</p>
<p @click="internalShareClick">
内部分享
</p>
<p @click="externalShareClick">
外部分享
</p>
</div>
</nav-bar-view>
</template>
......@@ -338,7 +343,7 @@ import NavBarView from '@layouts/NavBarView'
import MtPdf from '@comp/MtPdf'
import MtPdfPpt from '@comp/MtPdfPpt'
import MtWord from '@comp/MtWord'
import MtAudio from '@comp/EduAudio'
import MtAudio from '@/components/MtAudio'
// import {Button} from 'vant'
import {videoPlayer} from 'mt-video-player'
import {getChapters, getFileUrl, updateProgress, addLearnLesson, cancleFollow, toFollow} from '@/api/test'
......@@ -479,7 +484,9 @@ export default {
discussLoading: false, // 下拉刷新
buttonShow: false,
shareIsShow: false,
upLoad: false
upLoad: false,
unitIndex: 0,
unitPartIndex: 0
}
},
computed: {
......@@ -691,9 +698,9 @@ export default {
lessonId,
maxPosition: current > duration ? duration : current // 已看视频时间 后台已加判断 只有当传值大于数据库存值时 该最大进度才会被改变
}
updateProgress(params).then(() => {
updateProgress(params).then((res) => {
if (callback) {
callback()
callback(res)
}
})
},
......@@ -720,11 +727,22 @@ export default {
that.course.isCollect = true
}
}
if (res.data.currentChapter) {
for (let i = 0, l = res.data.chapterList.length; i < l; i++) {
for (let k = 0, m = res.data.chapterList[i].childList.length; k < m; k++) {
if (res.data.currentChapter.businessId === res.data.chapterList[i].childList[k].businessId) {
this.unitIndex = i
this.unitPartIndex = k
break
}
}
}
}
const array = []
that.chapterList = res.data.chapterList.length === 0 ? array : res.data.chapterList
const curChapter = res.data.currentChapter
if (that.chapterList.length > 0 && that.chapterList[0].childList.length > 0) {
that.sectionClick(curChapter || that.chapterList[0].childList[0], curChapter ? curChapter.psort : 1)
that.sectionClick(curChapter || that.chapterList[0].childList[0], curChapter ? curChapter.psort : 1,this.unitIndex, this.unitPartIndex)
}
}).catch(e => {
if (e.code === 400 && e.data) {
......@@ -760,7 +778,7 @@ export default {
* @param section 点击的当前节信息对象 (Object)
* @param chapterIndex 点击的当前章的排序 (String)
*/
sectionClick(section, chapterIndex) {
sectionClick(section, chapterIndex, uIndex, pIndex) {
// 先判断章节的sort排序值是否正确，有误则结束执行以下代码。
if ((chapterIndex - 1) < 0 || chapterIndex > this.chapterList.length) {
this.$dialog.alert({
......@@ -815,7 +833,10 @@ export default {
this.loading = true
this.upLoad = false
if (all) {
this.updateProgress(this.currentSection.businessId, this.course.businessId, currentLoc, all, () => {
this.updateProgress(this.currentSection.businessId, this.course.businessId, currentLoc, all, (res) => {
that.chapterList[that.unitIndex].childList[that.unitPartIndex].progress = res.data.currentProgress
that.unitIndex = uIndex
that.unitPartIndex = pIndex
that.switchNewSection(section, chapterIndex)
})
} else {
......@@ -913,11 +934,22 @@ export default {
},
onAudioTimeupdate(time) {
this.currentPlayTime = time
const maxPosition = time
maxPosition > this.maxPosition ? this.maxPosition = time : this.maxPosition
if (this.currentPlayTime === this.allPlayTime && (this.currentSection.progress === '' || parseInt(Number(this.currentSection.progress.split('%')[0])) < 100)) {
const current = this.currentPlayTime,
all = this.allPlayTime
this.updateProgress(this.currentSection.businessId, this.course.businessId, current, all, (res) => {
this.chapterList[this.unitIndex].childList[this.unitPartIndex].progress = '100.0%'
this.$refs.mtAudio.canDrag()
})
}
},
onAudioLoaded(all) {
this.allPlayTime = all
if (this.currentSection.progress && parseInt(Number(this.currentSection.progress.split('%')[0])) >= 100) {
this.$refs.mtAudio.canDrag()
} else {
this.$refs.mtAudio.notDrag()
}
},
onPdfLoaded(pages) {
this.allPage = pages
......
src/views/Home/index.vue
View file @ 59557465
......@@ -83,7 +83,7 @@
:to="{name: 'Zcdsh', params:{url: item.url, title: item.menuName}}"
>
<div>
<img src="~@assets/images/index/01_03.png">
<img :src="item.mobileLogo" style="width: 50px;height: 50px;border-radius: 50%" >
<span>{{ item.menuName }}</span>
</div>
</router-link>
......
src/views/TrainDetail/index.vue
View file @ 59557465
......@@ -572,10 +572,20 @@
v-if="loading"
/>
<transition name="fade-hide">
<div style="width: 100%;height: 100%;position: fixed;top:0;left: 0;background-color: rgba(0, 0, 0, 0.7);z-index: 19999" v-if="priviewShow" @click="cancelPreview">
<div
style="width: 100%;height: 100%;position: fixed;top:0;left: 0;background-color: rgba(0, 0, 0, 0.7);z-index: 19999"
v-if="priviewShow"
@click="cancelPreview"
>
<div
class="picture-wrapper"
>
<van-loading
v-if="previewType === ''"
size="24px"
>
文件加载中...
</van-loading>
<van-image
v-if="previewType === 'photo'"
:src="priviewPicture"
......@@ -584,14 +594,17 @@
<mt-pdf-ppt
v-if="previewType === 'ppt'"
:pdf-src="priviewPicture"
:show-loading="false"
/>
<mt-word
v-if="previewType === 'doc'"
:pdf-src="priviewPicture"
:show-loading="false"
/>
<mt-pdf
v-if="previewType === 'pdf'"
:pdf-src="priviewPicture"
:show-loading="false"
/>
</div>
</div>
......@@ -794,6 +807,7 @@ export default {
this.previewType = 'photo'
this.priviewShow = true
} else if (file.type === '2') {
this.priviewShow = true
// ppt 文件预览
const temp = {
videoUrl: decodeURIComponent(file.videoUrl),
......@@ -801,18 +815,30 @@ export default {
lessonId: this.$route.query.id
}
get.getReadyUrl(temp).then((res) => {
this.priviewPicture = decodeURIComponent(res.data.data)
this.previewType = 'ppt'
this.priviewShow = true
if (res.data.code === 200) {
setTimeout(() => {
this.priviewPicture = decodeURIComponent(res.data.data)
this.previewType = 'ppt'
}, 2000)
} else {
this.priviewShow = false
this.$toast({
type: 'fail',
message: res.data.message,
icon: 'close'
})
}
}).catch((err) => {
this.priviewShow = false
console.log(err)
this.$toast({
type: 'fail',
message: '无法预览',
message: err.message || '无法预览',
icon: 'close'
})
})
} else if (file.type === '4') {
this.priviewShow = true
// word文档预览
const temp = {
videoUrl: decodeURIComponent(file.videoUrl),
......@@ -820,17 +846,30 @@ export default {
lessonId: this.$route.query.id
}
get.getReadyUrl(temp).then((res) => {
this.priviewPicture = decodeURIComponent(res.data.data)
this.previewType = 'doc'
this.priviewShow = true
if (res.data.code === 200) {
setTimeout(() => {
this.priviewPicture = decodeURIComponent(res.data.data)
this.previewType = 'doc'
}, 2000)
} else {
this.priviewShow = false
this.$toast({
type: 'fail',
message: res.data.message,
icon: 'close'
})
}
}).catch((err) => {
console.log(err, 'sssssssssssssssssssssss')
this.priviewShow = false
this.$toast({
type: 'fail',
message: '无法预览',
message: err.message || '无法预览',
icon: 'close'
})
})
} else if (file.type === '3' || file.type === '6') {
this.priviewShow = true
// pdf txt 文件预览
const temp = {
videoUrl: decodeURIComponent(file.videoUrl),
......@@ -838,13 +877,24 @@ export default {
lessonId: this.$route.query.id
}
get.getReadyUrl(temp).then((res) => {
this.priviewPicture = decodeURIComponent(res.data.data)
this.previewType = 'pdf'
this.priviewShow = true
if (res.data.code === 200) {
setTimeout(() => {
this.priviewPicture = decodeURIComponent(res.data.data)
this.previewType = 'pdf'
}, 2000)
} else {
this.priviewShow = false
this.$toast({
type: 'fail',
message: res.data.message,
icon: 'close'
})
}
}).catch((err) => {
this.priviewShow = false
this.$toast({
type: 'fail',
message: '无法预览',
message: err.message || '无法预览',
icon: 'close'
})
})
......@@ -1600,7 +1650,6 @@ export default {
background-color: rbga(0,0,0,0.7);
.pdf-container{
background-color: rgba(0,0,0,0.7) !important;
padding-top: 92px;
.pdf::-webkit-scrollbar{
width: 0;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment