Skip to content

肖文锋 / micro-lecture

Go to a project
Commit f0637cb3 by xiaowenfeng
Options

1、新增华为云迁移修改

parent 4e11ae05
Inline Side-by-side
Showing with 643 additions and 252 deletions
package.json
......@@ -8,10 +8,10 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"ali-oss": "^6.11.2",
"axios": "^0.20.0",
"babel-plugin-import": "^1.13.0",
"core-js": "^3.6.5",
"esdk-obs-browserjs": "^3.20.7",
"js-audio-recorder": "^1.0.6",
"kim-vue-touch": "^1.1.5",
"lamejs": "^1.2.0",
......
src/App.vue
<!--
* @Author: your name
* @Date: 2020-08-18 14:52:43
* @LastEditTime: 2021-04-23 15:41:31
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /micro-lecture/src/App.vue
-->
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
// import VConsole from 'vconsole/dist/vconsole.min.js'
// const vConsole = new VConsole()
// console.log('vConsole:', vConsole)
export default {
}
</script>
<style lang="scss">
@import url("./css/common.css");
@import url('./css/common.css');
html {
font-size: 100px;
}
......
src/components/MicroEdit.vue
<template>
<div id="microBox">
<div class="micro-top">
<div class="micro-upload" v-if="pages.length === 0">
<div class="file-input-box" @click="uploadClick">
<div
class="micro-upload"
v-if="pages.length === 0"
>
<div
class="file-input-box"
@click="uploadClick"
>
<div class="file-input-select">
<i class="iconfont">&#xe654;&nbsp;上传课件</i>
</div>
......@@ -16,55 +22,110 @@
v-show="false"
/>
</div>
<div class="micro-img-preview" ref="imgPreview">
<div class="reveal">
<div class="slides" ref="slides">
<section
v-for="(item, index) in pages"
:key="index"
:data-transition="item.transitions.in + ' ' + item.transitions.out"
:style="{ backgroundImage: 'url(' + baseSourceUrl + item.imgUri + ')' }"
@click="edit(index)">
<p v-show="!!item.text">{{item.text}}</p>
</section>
</div>
<div
class="micro-img-preview"
ref="imgPreview"
>
<div class="reveal">
<div
class="slides"
ref="slides"
>
<section
v-for="(item, index) in pages"
:key="index"
:data-transition="item.transitions.in + ' ' + item.transitions.out"
:style="{ backgroundImage: 'url(' + baseSourceUrl + item.imgUri + ')' }"
@click="edit(index)"
>
<p v-show="!!item.text">{{item.text}}</p>
</section>
</div>
</div>
</div>
</div>
</div>
<transition name="slide-fade" mode="out-in">
<div class="micro-middle" v-show="!isEdit">
<swiper ref="swiperThumbs" class="gallery-thumbs" :options="swiperThumbs">
<swiper-slide
v-for="(item, index) in pages"
class="swiper-slide"
:style="{ backgroundImage: 'url(' + baseSourceUrl + item.imgUri + ')', opacity: activeIndex === index? '1':'0.4' }"
:key="index"
>
</swiper-slide>
</swiper>
<div class="swiper-button-next swiper-button-white" v-show="device.android ? false : device.ios ? false : true" @click="changPageIndex('down')"></div>
<div class="swiper-button-prev swiper-button-white" v-show="device.android ? false : device.ios ? false : true" @click="changPageIndex('up')"></div>
<transition
name="slide-fade"
mode="out-in"
>
<div
class="micro-middle"
v-show="!isEdit"
>
<swiper
ref="swiperThumbs"
class="gallery-thumbs"
:options="swiperThumbs"
>
<swiper-slide
v-for="(item, index) in pages"
class="swiper-slide"
:style="{ backgroundImage: 'url(' + baseSourceUrl + item.imgUri + ')', opacity: activeIndex === index? '1':'0.4' }"
:key="index"
>
</swiper-slide>
</swiper>
<div
class="swiper-button-next swiper-button-white"
v-show="device.android ? false : device.ios ? false : true"
@click="changPageIndex('down')"
></div>
<div
class="swiper-button-prev swiper-button-white"
v-show="device.android ? false : device.ios ? false : true"
@click="changPageIndex('up')"
></div>
</div>
</transition>
<transition name="slide-fade" mode="out-in">
<div class="micro-bottom" v-show="!isEdit">
<transition
name="slide-fade"
mode="out-in"
>
<div
class="micro-bottom"
v-show="!isEdit"
>
<button class="page-message">页码:{{activeIndex+1}}/{{pages.length}}</button>
<div class="page-button-wrap">
<!-- <button @click="publish" v-show="buildStatus.current === buildStatus.status.finish">发布</button>
<button @click="finish" v-show="buildStatus.current === buildStatus.status.parsingComplete">提交</button> -->
<button @click="preview" v-show="!token">预览</button>
<button
@click="preview"
v-show="!token"
>预览</button>
<button @click="closeEdit"><span>退出</span></button>
</div>
</div>
</transition>
<transition name="slide-fade" mode="out-in">
<div class="edit" v-show="isEdit">
<div class="editBottom" :style="{width: editBottomWith + 'px'}">
<transition
name="slide-fade"
mode="out-in"
>
<div
class="edit"
v-show="isEdit"
>
<div
class="editBottom"
:style="{width: editBottomWith + 'px'}"
>
<div class="editStatus">
<button @click="changeEditStatus(editStatus.playTime)" :class="currentEditStatus === editStatus.playTime ? 'button-active' : ''">时长</button>
<button @click="changeEditStatus(editStatus.editText)" :class="currentEditStatus === editStatus.editText ? 'button-active' : ''">字幕</button>
<button @click="changeEditStatus(editStatus.editToggle)" :class="currentEditStatus === editStatus.editToggle ? 'button-active' : ''">切换</button>
<button @click="changeEditStatus(editStatus.recorder)" :class="currentEditStatus === editStatus.recorder ? 'button-active' : ''">录音</button>
<button
@click="changeEditStatus(editStatus.playTime)"
:class="currentEditStatus === editStatus.playTime ? 'button-active' : ''"
>时长</button>
<button
@click="changeEditStatus(editStatus.editText)"
:class="currentEditStatus === editStatus.editText ? 'button-active' : ''"
>字幕</button>
<button
@click="changeEditStatus(editStatus.editToggle)"
:class="currentEditStatus === editStatus.editToggle ? 'button-active' : ''"
>切换</button>
<button
@click="changeEditStatus(editStatus.recorder)"
:class="currentEditStatus === editStatus.recorder ? 'button-active' : ''"
>录音</button>
</div>
<input
type="text"
......@@ -75,53 +136,176 @@
v-if="isEdit && currentEditStatus === editStatus.editText"
v-model="pages[editIndex].text"
maxlength="27"
placeholder="不多于27字" />
<div class="toggle" v-if="isEdit && currentEditStatus === editStatus.editToggle">
placeholder="不多于27字"
/>
<div
class="toggle"
v-if="isEdit && currentEditStatus === editStatus.editToggle"
>
<div class="toggleSelect">
<span>进入:</span>
<select v-model="pages[editIndex].transitions.in" @blur="selectBlure" >
<option :value ="item.in.type" v-for="(item, index) in transitions" :key="index">{{item.in.name}}</option>
<select
v-model="pages[editIndex].transitions.in"
@blur="selectBlure"
>
<option
:value="item.in.type"
v-for="(item, index) in transitions"
:key="index"
>{{item.in.name}}</option>
</select>
</div>
<div class="toggleSelect">
<span>离开:</span>
<select v-model="pages[editIndex].transitions.out" @blur="selectBlure" >
<option :value ="item.out.type" v-for="(item, index) in transitions" :key="index">{{item.out.name}}</option>
<select
v-model="pages[editIndex].transitions.out"
@blur="selectBlure"
>
<option
:value="item.out.type"
v-for="(item, index) in transitions"
:key="index"
>{{item.out.name}}</option>
</select>
</div>
</div>
<div class="recorder" v-show="isEdit && currentEditStatus === editStatus.recorder">
<div
class="recorder"
v-show="isEdit && currentEditStatus === editStatus.recorder"
>
<div class="recorderStatus">
<div class="timeRemaining">
<i v-show="!isRecording" class="iconfont">&#xe60e;</i>
<svg v-show="isRecording" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50" xml:space="preserve">
<rect x="0" y="9.22656" width="4" height="12.5469" fill="#909090">
<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<i
v-show="!isRecording"
class="iconfont"
>&#xe60e;</i>
<svg
v-show="isRecording"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%"
height="100%"
viewBox="0 0 24 30"
style="enable-background:new 0 0 50 50"
xml:space="preserve"
>
<rect
x="0"
y="9.22656"
width="4"
height="12.5469"
fill="#909090"
>
<animate
attributeName="height"
attributeType="XML"
values="5;21;5"
begin="0s"
dur="0.6s"
repeatCount="indefinite"
></animate>
<animate
attributeName="y"
attributeType="XML"
values="13; 5; 13"
begin="0s"
dur="0.6s"
repeatCount="indefinite"
></animate>
</rect>
<rect x="10" y="5.22656" width="4" height="20.5469" fill="#909090">
<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<rect
x="10"
y="5.22656"
width="4"
height="20.5469"
fill="#909090"
>
<animate
attributeName="height"
attributeType="XML"
values="5;21;5"
begin="0.15s"
dur="0.6s"
repeatCount="indefinite"
></animate>
<animate
attributeName="y"
attributeType="XML"
values="13; 5; 13"
begin="0.15s"
dur="0.6s"
repeatCount="indefinite"
></animate>
</rect>
<rect x="20" y="8.77344" width="4" height="13.4531" fill="#909090">
<animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<rect
x="20"
y="8.77344"
width="4"
height="13.4531"
fill="#909090"
>
<animate
attributeName="height"
attributeType="XML"
values="5;21;5"
begin="0.3s"
dur="0.6s"
repeatCount="indefinite"
></animate>
<animate
attributeName="y"
attributeType="XML"
values="13; 5; 13"
begin="0.3s"
dur="0.6s"
repeatCount="indefinite"
></animate>
</rect>
</svg>
</svg>
</div>
<div class="timeCompute">{{timeRemaining}}</div>
</div>
<button class="trialSeeding" v-show="isEdit && pages[editIndex].audioSrc" @click="testAudio">
<i v-show="!isPlaying" class="iconfont">&#xe77e;</i>
<i v-show="isPlaying" class="iconfont">&#xe60e;</i>
<button
class="trialSeeding"
v-show="isEdit && pages[editIndex].audioSrc"
@click="testAudio"
>
<i
v-show="!isPlaying"
class="iconfont"
>&#xe77e;</i>
<i
v-show="isPlaying"
class="iconfont"
>&#xe60e;</i>
</button>
<button class="ivu-btn ivu-btn-default" @click="recorderClick">
<i v-show="isRecording" class="iconfont">&#xe62e;</i>
<i v-show="!isRecording" class="iconfont">&#xe62f;</i>
<button
class="ivu-btn ivu-btn-default"
@click="recorderClick"
>
<i
v-show="isRecording"
class="iconfont"
>&#xe62e;</i>
<i
v-show="!isRecording"
class="iconfont"
>&#xe62f;</i>
</button>
<audio v-show="false" controls="controls" :src="isEdit ? baseSourceUrl + pages[editIndex].audioSrc : ''" ref="audioTest" @playing="playing" @ended="playEnded" @pause="playPause"></audio>
<audio
v-show="false"
controls="controls"
:src="isEdit ? baseSourceUrl + pages[editIndex].audioSrc : ''"
ref="audioTest"
@playing="playing"
@ended="playEnded"
@pause="playPause"
></audio>
</div>
<div class="playTime" v-if="isEdit && currentEditStatus === editStatus.playTime">
<div
class="playTime"
v-if="isEdit && currentEditStatus === editStatus.playTime"
>
<div class="playInput">
<input
type="text"
......@@ -133,48 +317,125 @@
:placeholder="'小于' + maxRecorderLength + '秒'"
:class="isInputFocus && (device.android || device.ios) ? 'playInputFixed' : 'playInputStatic'"
onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" />
<button @mouseup="mouseupButton('add')" @mousedown="mousedownButton('add')" @mouseleave="mouseleaveButton">+</button>
<button @mouseup="mouseupButton('decrease')" @mousedown="mousedownButton('decrease')" @mouseleave="mouseleaveButton">-</button>
onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
/>
<button
@mouseup="mouseupButton('add')"
@mousedown="mousedownButton('add')"
@mouseleave="mouseleaveButton"
>+</button>
<button
@mouseup="mouseupButton('decrease')"
@mousedown="mousedownButton('decrease')"
@mouseleave="mouseleaveButton"
>-</button>
</div>
<div class="playTimeUnit">/ 秒</div>
</div>
</div>
</div>
</transition>
<div class="micro-shadow" @click="inputBlur" v-show="isInputFocus && (device.android || device.ios)"></div>
<div class="no-micro-lecture" v-if="pages.length === 0">
<div class="no-micro-lecture-tips" v-show="currentUploadStatus === uploadStatus.normal"><i class="iconfont">&#xe602;&nbsp;</i>请先上传课程</div>
<div class="no-micro-lecture-uploading" v-show="currentUploadStatus === uploadStatus.upload">
<div class="no-micro-lecture-uploading-trance" :style="{width: uploadProgress}"></div>
<br/>
<div
class="micro-shadow"
@click="inputBlur"
v-show="isInputFocus && (device.android || device.ios)"
></div>
<div
class="no-micro-lecture"
v-if="pages.length === 0"
>
<div
class="no-micro-lecture-tips"
v-show="currentUploadStatus === uploadStatus.normal"
><i class="iconfont">&#xe602;&nbsp;</i>请先上传课程</div>
<div
class="no-micro-lecture-uploading"
v-show="currentUploadStatus === uploadStatus.upload"
>
<div
class="no-micro-lecture-uploading-trance"
:style="{width: uploadProgress}"
></div>
<br />
上传中&nbsp;({{uploadProgress}})···
</div>
<div class="no-micro-lecture-tips" v-show="currentUploadStatus === uploadStatus.transcoding">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve">
<path fill="#909090" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(275.098 25 25)">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
<div
class="no-micro-lecture-tips"
v-show="currentUploadStatus === uploadStatus.transcoding"
>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="30px"
height="30px"
viewBox="0 0 50 50"
style="enable-background:new 0 0 50 50"
xml:space="preserve"
>
<path
fill="#909090"
d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"
transform="rotate(275.098 25 25)"
>
<animateTransform
attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"
></animateTransform>
</path>
</svg>
<br/>
<br />
<span v-show="buildStatus.current === buildStatus.status.initial">等待解析</span>
<span v-show="buildStatus.current === buildStatus.status.parsing">正在解析</span>
<span v-show="buildStatus.current === buildStatus.status.parsingComplete">解析完成</span>
<span v-show="buildStatus.current === buildStatus.status.fail">解析失败，请重新上传</span>
</div>
</div>
<div class="loadingImg" v-show="isSubmit">
<img src="../assets/loading-icon.gif" alt="loading">
<div
class="loadingImg"
v-show="isSubmit"
>
<img
src="../assets/loading-icon.gif"
alt="loading"
>
</div>
<div class="initLoading" v-if="initStatus.isInit">
<div
class="initLoading"
v-if="initStatus.isInit"
>
<div v-show="!initStatus.isError">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve">
<path fill="#909090" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(275.098 25 25)">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="30px"
height="30px"
viewBox="0 0 50 50"
style="enable-background:new 0 0 50 50"
xml:space="preserve"
>
<path
fill="#909090"
d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"
transform="rotate(275.098 25 25)"
>
<animateTransform
attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"
></animateTransform>
</path>
</svg>
<br/>
<br/>
<br />
<br />
正在初始化···
</div>
<div v-show="initStatus.isError">
......@@ -183,18 +444,51 @@
</div>
<mt-popup
v-model="popupVisible"
position="bottom">
<mt-field label="课程名称" placeholder="请输入课程名称" :attr="{ maxlength: 100}" v-model="microLectureTitle"></mt-field>
<mt-field label="课程简介" placeholder="课程简介" type="textarea" rows="4" :attr="{ maxlength: 1000, style: 'resize: none' }" v-model="introduction"></mt-field>
<div class="hangdleBox" v-for="(item, index) in lectureClassify" :key="index">
<i-select style="width:200px" @on-change="selectClassify">
<i-option v-for="i in lectureClassify[index]" :value="i.value" :key="i.value" :label="i.label">{{ i.label }}</i-option>
</i-select>
</div>
<div class="hangdleBox">
<button v-show="!canPublish" class="ivu-btn ivu-btn-default" disabled><span>发布</span></button>
<button v-show="canPublish" class="ivu-btn ivu-btn-default" @click="lecturePublish"><span>发布</span></button>
</div>
position="bottom"
>
<mt-field
label="课程名称"
placeholder="请输入课程名称"
:attr="{ maxlength: 100}"
v-model="microLectureTitle"
></mt-field>
<mt-field
label="课程简介"
placeholder="课程简介"
type="textarea"
rows="4"
:attr="{ maxlength: 1000, style: 'resize: none' }"
v-model="introduction"
></mt-field>
<div
class="hangdleBox"
v-for="(item, index) in lectureClassify"
:key="index"
>
<i-select
style="width:200px"
@on-change="selectClassify"
>
<i-option
v-for="i in lectureClassify[index]"
:value="i.value"
:key="i.value"
:label="i.label"
>{{ i.label }}</i-option>
</i-select>
</div>
<div class="hangdleBox">
<button
v-show="!canPublish"
class="ivu-btn ivu-btn-default"
disabled
><span>发布</span></button>
<button
v-show="canPublish"
class="ivu-btn ivu-btn-default"
@click="lecturePublish"
><span>发布</span></button>
</div>
</mt-popup>
</div>
</template>
......@@ -210,7 +504,7 @@ import '../../node_modules/reveal.js/dist/theme/black.css'
import 'view-design/dist/styles/iview.css'
import convertToMp3 from '../lib/converToMp3'
import axios from 'axios'
import OSS from 'ali-oss'
import ObsClient from 'esdk-obs-browserjs'
import SparkMD5 from 'spark-md5'
import { Toast, MessageBox, Field, Popup } from 'mint-ui'
import { Select, Option, Button } from 'view-design'
......@@ -231,7 +525,7 @@ export default {
data () {
return {
pages: [], // 课程数据结构，或者可以成为课程描述文件
baseSourceUrl: 'https://res.qida.com/', // 图片、语音的域名
baseSourceUrl: 'https://course.qida.com.cn', // 图片、语音的域名
currentUploadStatus: 'normal', // 上传的状态
uploadStatus: {
upload: 'upload',
......@@ -486,7 +780,7 @@ export default {
})
},
getPages (coursewareDir, microId) {
const url = 'https://qida-videos.oss-cn-shenzhen.aliyuncs.com/' + coursewareDir + '/content.json'
const url = 'https://qida-course.obs.cn-south-1.myhuaweicloud.com/' + coursewareDir + '/content.json'
this.microId = microId
axios.get(url).then((res) => {
this.pageInit(res.data)
......@@ -650,7 +944,7 @@ export default {
setupWebViewJavascriptBridge (callback) {
if (this.device.ios) {
if (window.WebViewJavascriptBridge) {
// eslint-disable-next-line no-undef
// eslint-disable-next-line no-undef
return callback(WebViewJavascriptBridge)
}
if (window.WVJBCallbacks) {
......@@ -840,23 +1134,32 @@ export default {
loadNext(file)
},
getOssToken (data, file) {
this.compatibleApi(data, 'ossToken').then((res) => {
const client = new OSS(res.data)
const objectKey = res.data.audioPath
this.compatibleApi(data, 'ossToken').then((result) => {
const res = result.data
const obsClient = new ObsClient({
access_key_id: res.accessKeyId,
secret_access_key: res.accessKeySecret,
server: window.location.protocol + '//' + res.endpoint
})
obsClient.util.securityToken = res.securityToken
const params = new URLSearchParams()
params.append('id', this.microId)
params.append('pageNum', this.pages[this.editIndex].pageNum)
var that = this
async function multipartUpload () {
try {
const result = await client.multipartUpload(objectKey, file, {
progress: (p, checkpoint) => {
// console.log(p)
// console.log(checkpoint)
}
})
// console.log('result:', result)
if (result.res.status === 200) {
const that = this
obsClient.putObject({
Bucket: res.bucketName,
Key: res.audioPath,
SourceFile: file
}, (err, result) => {
if (err) {
params.append('fileStatus', 'F')
that.upLoadRecord(params)
MessageBox('提示', '保存失败！')
} else {
if (result.CommonMsg.Status === 200) {
params.append('fileStatus', 'S')
that.upLoadRecord(params)
} else {
......@@ -864,14 +1167,39 @@ export default {
that.upLoadRecord(params)
MessageBox('提示', '保存失败！')
}
} catch (e) {
params.append('fileStatus', 'F')
that.upLoadRecord(params)
MessageBox('提示', '保存失败！')
// console.log(e)
}
}
multipartUpload()
})
// const client = new OSS(res.data)
// const objectKey = res.data.audioPath
// const params = new URLSearchParams()
// params.append('id', this.microId)
// params.append('pageNum', this.pages[this.editIndex].pageNum)
// var that = this
// async function multipartUpload () {
// try {
// const result = await client.multipartUpload(objectKey, file, {
// progress: (p, checkpoint) => {
// // console.log(p)
// // console.log(checkpoint)
// }
// })
// // console.log('result:', result)
// if (result.res.status === 200) {
// params.append('fileStatus', 'S')
// that.upLoadRecord(params)
// } else {
// params.append('fileStatus', 'F')
// that.upLoadRecord(params)
// MessageBox('提示', '保存失败！')
// }
// } catch (e) {
// params.append('fileStatus', 'F')
// that.upLoadRecord(params)
// MessageBox('提示', '保存失败！')
// // console.log(e)
// }
// }
// multipartUpload()
})
},
upLoadRecord (data) {
......@@ -1077,7 +1405,7 @@ $borderColor: #5a5a5a;
body {
padding: 0;
margin: 0;
position:relative;
position: relative;
background: $backgroundColor !important;
}
......@@ -1089,7 +1417,7 @@ li {
position: fixed;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%, -50%, 0);
background-color: #fff;
width: 85%;
max-width: 500px;
......@@ -1099,11 +1427,11 @@ li {
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: .2s;
transition: 0.2s;
}
#microBox {
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-family: 'Source Sans Pro', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: $fontColor;
......@@ -1131,7 +1459,7 @@ li {
position: fixed;
height: 100vh;
width: 100vw;
background: rgba(0,0,0,0.3);
background: rgba(0, 0, 0, 0.3);
top: 0;
left: 0;
z-index: 1000;
......@@ -1144,7 +1472,7 @@ li {
transform: translate(-50%, -50%);
}
}
.no-micro-lecture{
.no-micro-lecture {
width: 100%;
height: 93.6%;
background: #000;
......@@ -1153,20 +1481,20 @@ li {
top: 6.4%;
text-align: center;
font-size: 0.16rem;
.no-micro-lecture-tips{
.no-micro-lecture-tips {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
}
.no-micro-lecture-uploading{
.no-micro-lecture-uploading {
width: 80%;
max-width: 500px;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
}
.no-micro-lecture-uploading-trance {
height: 50%;
......@@ -1194,12 +1522,13 @@ li {
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .3s ease;
transition: all 0.3s ease;
}
.slide-fade-leave-active {
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to {
.slide-fade-enter,
.slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
......@@ -1229,7 +1558,7 @@ li {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&:hover{
&:hover {
color: #5f5f5f;
}
}
......@@ -1259,18 +1588,18 @@ li {
max-height: 70px;
}
.swiper-button-white {
color: #ccc;
padding: 0 8px;
position: absolute;
margin: 0;
top: 50%;
transform: translateY(-50%);
z-index: 99;
border-radius: 5px;
&:hover{
color: #2b2b2b;
}
color: #ccc;
padding: 0 8px;
position: absolute;
margin: 0;
top: 50%;
transform: translateY(-50%);
z-index: 99;
border-radius: 5px;
&:hover {
color: #2b2b2b;
}
}
.swiper-container {
margin-left: auto;
margin-right: auto;
......@@ -1281,7 +1610,7 @@ li {
z-index: 1;
height: 100%;
background: $backgroundColor;
.swiper-slide{
.swiper-slide {
cursor: pointer;
flex-shrink: 0;
width: 20%;
......@@ -1327,7 +1656,7 @@ li {
background: #f6f6f6;
border-radius: 2px;
color: #444;
font-size: 0.12rem;
font-size: 0.12rem;
font-weight: bold;
padding: 0.05rem 0.1rem;
outline: none;
......@@ -1335,9 +1664,9 @@ li {
margin: 0 5px;
cursor: pointer;
}
button:active{
button:active {
background: rgb(78 110 242 / 0.5) !important;
color: #fff !important
color: #fff !important;
}
.page-message {
position: absolute;
......@@ -1350,37 +1679,41 @@ li {
/* revealjs样式修改 */
.reveal img {
margin: 0;
margin: 0;
}
section {
top: 330px;
display: block;
height: 100%;
padding: 0;
cursor: pointer;
border: 1px solid $borderColor;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
top: 330px;
display: block;
height: 100%;
padding: 0;
cursor: pointer;
border: 1px solid $borderColor;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.reveal .slides>section, .reveal .slides>section>section {
box-sizing: border-box;
display: none;
position: absolute;
width: 100%;
// padding: 0;
pointer-events: auto;
z-index: 10;
transform-style: flat;
transition: transform-origin .8s cubic-bezier(.26,.86,.44,.985),transform .8s cubic-bezier(.26,.86,.44,.985),visibility .8s cubic-bezier(.26,.86,.44,.985),opacity .8s cubic-bezier(.26,.86,.44,.985);
.reveal .slides > section,
.reveal .slides > section > section {
box-sizing: border-box;
display: none;
position: absolute;
width: 100%;
// padding: 0;
pointer-events: auto;
z-index: 10;
transform-style: flat;
transition: transform-origin 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985),
transform 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985),
visibility 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985),
opacity 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985);
}
.reveal p {
margin: 0;
line-height: 1.3;
position: absolute;
bottom: 0;
font-size: .12rem;
padding: 0.06rem .06rem;
font-size: 0.12rem;
padding: 0.06rem 0.06rem;
width: 100%;
background: rgb(0 0 0 / 0.6);
box-sizing: border-box;
......@@ -1396,9 +1729,9 @@ li {
font-size: 42px;
font-weight: normal;
color: #fff;
button:active{
background: rgb(78 110 242 / 0.5) !important;
color: #fff !important
button:active {
background: rgb(78 110 242 / 0.5) !important;
color: #fff !important;
}
.editTop {
height: 80%;
......@@ -1423,7 +1756,7 @@ li {
button {
font-size: 0.16rem;
@media screen and (max-width: 280px) {
font-size: 0.10rem;
font-size: 0.1rem;
}
line-height: initial;
background: #f6f6f6;
......@@ -1538,7 +1871,7 @@ li {
line-height: 30px;
height: 100%;
width: 50%;
background: #616161;;
background: #616161;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
text-align: center;
......@@ -1546,7 +1879,7 @@ li {
display: inline-block;
vertical-align: middle;
}
.timeCompute{
.timeCompute {
width: 50%;
font-size: 0.14rem;
height: 100%;
......@@ -1559,14 +1892,14 @@ li {
box-sizing: border-box;
}
}
.trialSeeding{
.trialSeeding {
width: 15%;
height: 32px;
line-height: 32px;
box-sizing: border-box;
border-radius: 2px;
cursor: pointer;
font-size: .14rem;
font-size: 0.14rem;
color: #000;
background: #fff;
text-align: center;
......@@ -1606,7 +1939,7 @@ li {
z-index: 99;
left: 50%;
transform: translateX(-50%);
width:100% !important;
width: 100% !important;
height: 32px;
padding: 0 10px;
box-sizing: border-box;
......@@ -1614,7 +1947,7 @@ li {
border-bottom-right-radius: 2px;
}
.playInputStatic {
position: static
position: static;
}
button {
display: inline-block;
......@@ -1642,7 +1975,7 @@ li {
cursor: pointer;
}
}
.playTimeUnit{
.playTimeUnit {
display: inline-block;
vertical-align: middle;
width: 30%;
......@@ -1670,10 +2003,15 @@ li {
right: auto;
bottom: 0;
left: 50%;
transform: translate3d(-50%,0,0);
transform: translate3d(-50%, 0, 0);
width: 100%;
.mint-cell-wrapper {
background-image: linear-gradient(180deg,#d9d9d9,#d9d9d9 50%,transparent 0);
background-image: linear-gradient(
180deg,
#d9d9d9,
#d9d9d9 50%,
transparent 0
);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: 0 0;
......@@ -1690,7 +2028,12 @@ li {
}
}
.hangdleBox {
background-image: linear-gradient(180deg,#d9d9d9,#d9d9d9 100%,transparent 0);
background-image: linear-gradient(
180deg,
#d9d9d9,
#d9d9d9 100%,
transparent 0
);
background-size: 100% 1px;
padding: 0 10px;
background-repeat: no-repeat;
......@@ -1705,7 +2048,7 @@ li {
max-width: 300px;
height: 41px;
}
.ivu-select-single{
.ivu-select-single {
width: 100% !important;
max-width: 300px;
}
......@@ -1713,7 +2056,8 @@ li {
height: 41px;
position: relative;
}
.ivu-select-single .ivu-select-selection .ivu-select-placeholder, .ivu-select-single .ivu-select-selection .ivu-select-selected-value {
.ivu-select-single .ivu-select-selection .ivu-select-placeholder,
.ivu-select-single .ivu-select-selection .ivu-select-selected-value {
display: block;
height: 41px;
line-height: 41px;
......@@ -1730,11 +2074,11 @@ li {
padding: 10.5px 16px;
clear: both;
color: #515a6e;
font-size: 14px!important;
font-size: 14px !important;
white-space: nowrap;
list-style: none;
cursor: pointer;
transition: background .2s ease-in-out;
transition: background 0.2s ease-in-out;
}
}
}
......
src/components/MicroLecturePlay.vue
<template>
<div id="mlplayBox">
<div class="starIcon" v-show="!isInit" @click="starPlay">
<div
class="starIcon"
v-show="!isInit"
@click="starPlay"
>
<div class="starTitle">
<i class="iconfont">&#xe653;</i>
<div class="loadingBox">
<div class="loadingTrace" :style="{width: initPercent}"></div>
<div
class="loadingTrace"
:style="{width: initPercent}"
></div>
</div>
<h2>{{!!microLectureTitle?microLectureTitle:'暂未设置标题'}}</h2>
<div>{{!!introduction?introduction:'暂未设置简介'}}</div>
</div>
</div>
<div class="pageNum goback" @click="goback" v-show="initPercent === '100%' && !!browserVersion && (browserVersion.ios || browserVersion.android)"><i class="iconfont">&#xe651;</i></div>
<div
class="pageNum goback"
@click="goback"
v-show="initPercent === '100%' && !!browserVersion && (browserVersion.ios || browserVersion.android)"
><i class="iconfont">&#xe651;</i></div>
<div class="pageNum">{{activeIndex + 1}} / {{pages.length}}</div>
<div class="playControl" @click="toggle">
<progress-circle
:completed-steps="pc_options.completedSteps"
:total-steps="pc_options.totalSteps"
:start-color="pc_options.startColor"
:stop-color="pc_options.stopColor"
:inner-color="pc_options.innerColor"
:circle-width="pc_options.circleWidth"
:diameter="pc_options.diameter"
:circle-color="pc_options.circleColor"
:animation-duration="pc_options.animationDuration"
:key="activeIndex"
></progress-circle>
<i class="iconfont" v-show="microIsplaying">&#xe67d;</i>
<i class="iconfont" v-show="!microIsplaying">&#xe653;</i>
</div>
<div
class="playControl"
@click="toggle"
>
<progress-circle
:completed-steps="pc_options.completedSteps"
:total-steps="pc_options.totalSteps"
:start-color="pc_options.startColor"
:stop-color="pc_options.stopColor"
:inner-color="pc_options.innerColor"
:circle-width="pc_options.circleWidth"
:diameter="pc_options.diameter"
:circle-color="pc_options.circleColor"
:animation-duration="pc_options.animationDuration"
:key="activeIndex"
></progress-circle>
<i
class="iconfont"
v-show="microIsplaying"
>&#xe67d;</i>
<i
class="iconfont"
v-show="!microIsplaying"
>&#xe653;</i>
</div>
<!-- 因为app调入来时已经有了一个加入自学，这里就不设置了 -->
<!-- <div class="addStudy" @click="appFavorite" v-if="browserVersion.mobile" v-show="isParticipate === false || isParticipate === 'false'"><i class="iconfont">&#xe654;&nbsp;加入自学</i></div> -->
<div class="reveal" ref="reveal" :style="revealBoxStyle">
<div class="slides" ref="slides">
<div
class="reveal"
ref="reveal"
:style="revealBoxStyle"
>
<div
class="slides"
ref="slides"
>
<section
v-for="(item, index) in pages"
:key="index"
......@@ -39,12 +66,15 @@
:style="{ backgroundImage: 'url(' + baseSourceUrl + item.imgUri + ')' }"
v-swipeup="(e)=>vueTouch('up',e)"
v-swipedown="(e)=>vueTouch('down',e)"
>
>
<p v-show="!!item.text">{{item.text}}</p>
</section>
</div>
</div>
<audio v-show="false" ref="audio"></audio>
<audio
v-show="false"
ref="audio"
></audio>
</div>
</template>
......@@ -69,7 +99,7 @@ export default {
data () {
return {
pages: [],
baseSourceUrl: 'https://res.qida.com/',
baseSourceUrl: 'https://course.qida.com.cn',
revealBoxStyle: {
width: 0,
height: 0,
......@@ -473,14 +503,16 @@ export default {
return params
},
appFinish () {
const params = new URLSearchParams()
params.set('crsId', this.crsId)
params.set('crsSource', this.crsSource)
// const params = new URLSearchParams()
const params = this.setBaseParams()
// params.set('crsId', this.crsId)
// params.set('crsSource', this.crsSource)
params.set('sessionTime', this.sessiontTime / 10)
params.set('lessonMode', this.lessonMode)
// params.set('lessonMode', this.lessonMode)
params.set('chapterId', this.itemId)
params.set('lessonLocation', this.activeIndex + 1)
params.set('attempId', this.attempId)
// params.set('attempId', this.attempId)
// params.set('taskId', this.taskId)
const percent = parseInt((this.activeIndex + 1) / this.pages.length * 100)
params.set('lessonProgress', percent)
const status = this.activeIndex + 1 >= this.pages.length ? 'completed' : 'incomplete'
......@@ -493,6 +525,7 @@ export default {
const params = new URLSearchParams()
params.append('id', this.crsId)
params.append('originType', this.crsSource)
params.append('taskId', this.taskId)
this.compatibleApi(params, 'courseDetail', 'pub').then((res) => {
// console.log(res)
const isParticipate = res.data.values.isParticipate
......@@ -504,7 +537,7 @@ export default {
setupWebViewJavascriptBridge (callback) {
if (this.browserVersion.ios) {
if (window.WebViewJavascriptBridge) {
// eslint-disable-next-line no-undef
// eslint-disable-next-line no-undef
return callback(WebViewJavascriptBridge)
}
if (window.WVJBCallbacks) {
......@@ -558,7 +591,7 @@ export default {
goback () {
if (!this.token && (this.browserVersion.ios || this.browserVersion.android)) {
window.history.back()
// eslint-disable-next-line no-extra-boolean-cast
// eslint-disable-next-line no-extra-boolean-cast
} else if (!!this.token) {
this.setupWebViewJavascriptBridge((bridge) => {
// console.log('goback:返回')
......@@ -651,7 +684,7 @@ export default {
})
},
getPages (coursewareDir, microId) {
const url = 'https://qida-videos.oss-cn-shenzhen.aliyuncs.com/' + coursewareDir + '/content.json'
const url = 'https://qida-course.obs.cn-south-1.myhuaweicloud.com/' + coursewareDir + '/content.json'
this.microId = microId
axios({
url: url,
......@@ -813,7 +846,7 @@ export default {
position: fixed;
right: 0;
bottom: 0;
color: #FFF;
color: #fff;
background-color: #59b8fb;
line-height: 1;
font-size: 1.07692308em;
......@@ -825,7 +858,7 @@ export default {
outline: 0;
}
.reveal img {
margin: 0;
margin: 0;
}
.playControl {
position: absolute;
......@@ -854,7 +887,7 @@ export default {
transform: translateZ(0);
text-align: center;
line-height: 35px;
font-size: .16rem;
font-size: 0.16rem;
color: rgb(251 251 251 / 60%);
border: 1px solid rgb(251 251 251 / 0.6);
}
......@@ -866,22 +899,22 @@ export default {
bottom: 0;
left: 0;
z-index: 10;
background-color: rgba(0,0,0,.2);
background-color: rgba(0, 0, 0, 0.2);
transform: translate3d(0, 0, 0);
}
section {
top: 330px;
display: block;
height: 100%;
padding: 0;
cursor: pointer;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
box-sizing: border-box;
// border: 1px solid red;
top: 0 !important;
left: 0 !important;
top: 330px;
display: block;
height: 100%;
padding: 0;
cursor: pointer;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
box-sizing: border-box;
// border: 1px solid red;
top: 0 !important;
left: 0 !important;
}
// .reveal.slide section {
// -webkit-backface-visibility: visible;
......@@ -898,16 +931,18 @@ export default {
// transform-style: flat;
// transition: transform-origin .8s cubic-bezier(.26,.86,.44,.985),transform .8s cubic-bezier(.26,.86,.44,.985),visibility .8s cubic-bezier(.26,.86,.44,.985),opacity .8s cubic-bezier(.26,.86,.44,.985);
// }
.reveal .slides>section[data-transition=convex].past, .reveal .slides>section[data-transition~=convex-out].past, .reveal.convex .slides>section:not([data-transition]).past {
transform: translate3d(-100%,0,0) rotateY(-90deg) translate3d(-100%,0,0);
.reveal .slides > section[data-transition='convex'].past,
.reveal .slides > section[data-transition~='convex-out'].past,
.reveal.convex .slides > section:not([data-transition]).past {
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
}
.reveal p {
margin: 0;
line-height: 1.3;
position: absolute;
bottom: 0;
font-size: .12rem;
padding: 0.06rem .06rem;
font-size: 0.12rem;
padding: 0.06rem 0.06rem;
width: 100%;
background: rgb(0 0 0 / 0.6);
box-sizing: border-box;
......@@ -961,7 +996,7 @@ export default {
}
h2 {
font-size: 0.16rem;
margin: 20px 0 15px 0
margin: 20px 0 15px 0;
}
div {
font-size: 0.12rem;
......@@ -970,5 +1005,4 @@ export default {
}
}
}
</style>
vue.config.js
/*
* @Author: xiaowf
* @Date: 2020-09-09 09:04:50
* @LastEditors: xiaowf
* @LastEditTime: 2020-12-22 14:24:29
* @Description: descript the file
*/
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
assetsDir: 'static',
......
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 sign in to comment