Skip to content

肖文锋 / micro-lecture

Go to a project
Commit f0637cb3 by xiaowenfeng
Options

1、新增华为云迁移修改

parent 4e11ae05
Expand all
Inline Side-by-side
Showing with 106 additions and 59 deletions
package.json
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"ali-oss": "^6.11.2",
"axios": "^0.20.0", "axios": "^0.20.0",
"babel-plugin-import": "^1.13.0", "babel-plugin-import": "^1.13.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"esdk-obs-browserjs": "^3.20.7",
"js-audio-recorder": "^1.0.6", "js-audio-recorder": "^1.0.6",
"kim-vue-touch": "^1.1.5", "kim-vue-touch": "^1.1.5",
"lamejs": "^1.2.0", "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> <template>
<div id="app"> <div id="app">
<router-view></router-view> <router-view></router-view>
</div> </div>
</template> </template>
<script> <script>
// import VConsole from 'vconsole/dist/vconsole.min.js' // import VConsole from 'vconsole/dist/vconsole.min.js'
// const vConsole = new VConsole() // const vConsole = new VConsole()
// console.log('vConsole:', vConsole) // console.log('vConsole:', vConsole)
export default {
}
</script> </script>
<style lang="scss"> <style lang="scss">
@import url("./css/common.css"); @import url('./css/common.css');
html { html {
font-size: 100px; font-size: 100px;
} }
......
src/components/MicroLecturePlay.vue
<template> <template>
<div id="mlplayBox"> <div id="mlplayBox">
<div class="starIcon" v-show="!isInit" @click="starPlay"> <div
class="starIcon"
v-show="!isInit"
@click="starPlay"
>
<div class="starTitle"> <div class="starTitle">
<i class="iconfont">&#xe653;</i> <i class="iconfont">&#xe653;</i>
<div class="loadingBox"> <div class="loadingBox">
<div class="loadingTrace" :style="{width: initPercent}"></div> <div
class="loadingTrace"
:style="{width: initPercent}"
></div>
</div> </div>
<h2>{{!!microLectureTitle?microLectureTitle:'暂未设置标题'}}</h2> <h2>{{!!microLectureTitle?microLectureTitle:'暂未设置标题'}}</h2>
<div>{{!!introduction?introduction:'暂未设置简介'}}</div> <div>{{!!introduction?introduction:'暂未设置简介'}}</div>
</div> </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="pageNum">{{activeIndex + 1}} / {{pages.length}}</div>
<div class="playControl" @click="toggle"> <div
<progress-circle class="playControl"
:completed-steps="pc_options.completedSteps" @click="toggle"
:total-steps="pc_options.totalSteps" >
:start-color="pc_options.startColor" <progress-circle
:stop-color="pc_options.stopColor" :completed-steps="pc_options.completedSteps"
:inner-color="pc_options.innerColor" :total-steps="pc_options.totalSteps"
:circle-width="pc_options.circleWidth" :start-color="pc_options.startColor"
:diameter="pc_options.diameter" :stop-color="pc_options.stopColor"
:circle-color="pc_options.circleColor" :inner-color="pc_options.innerColor"
:animation-duration="pc_options.animationDuration" :circle-width="pc_options.circleWidth"
:key="activeIndex" :diameter="pc_options.diameter"
></progress-circle> :circle-color="pc_options.circleColor"
<i class="iconfont" v-show="microIsplaying">&#xe67d;</i> :animation-duration="pc_options.animationDuration"
<i class="iconfont" v-show="!microIsplaying">&#xe653;</i> :key="activeIndex"
</div> ></progress-circle>
<i
class="iconfont"
v-show="microIsplaying"
>&#xe67d;</i>
<i
class="iconfont"
v-show="!microIsplaying"
>&#xe653;</i>
</div>
<!-- 因为app调入来时已经有了一个加入自学，这里就不设置了 --> <!-- 因为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="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
<div class="slides" ref="slides"> class="reveal"
ref="reveal"
:style="revealBoxStyle"
>
<div
class="slides"
ref="slides"
>
<section <section
v-for="(item, index) in pages" v-for="(item, index) in pages"
:key="index" :key="index"
...@@ -39,12 +66,15 @@ ...@@ -39,12 +66,15 @@
:style="{ backgroundImage: 'url(' + baseSourceUrl + item.imgUri + ')' }" :style="{ backgroundImage: 'url(' + baseSourceUrl + item.imgUri + ')' }"
v-swipeup="(e)=>vueTouch('up',e)" v-swipeup="(e)=>vueTouch('up',e)"
v-swipedown="(e)=>vueTouch('down',e)" v-swipedown="(e)=>vueTouch('down',e)"
> >
<p v-show="!!item.text">{{item.text}}</p> <p v-show="!!item.text">{{item.text}}</p>
</section> </section>
</div> </div>
</div> </div>
<audio v-show="false" ref="audio"></audio> <audio
v-show="false"
ref="audio"
></audio>
</div> </div>
</template> </template>
...@@ -69,7 +99,7 @@ export default { ...@@ -69,7 +99,7 @@ export default {
data () { data () {
return { return {
pages: [], pages: [],
baseSourceUrl: 'https://res.qida.com/', baseSourceUrl: 'https://course.qida.com.cn',
revealBoxStyle: { revealBoxStyle: {
width: 0, width: 0,
height: 0, height: 0,
...@@ -473,14 +503,16 @@ export default { ...@@ -473,14 +503,16 @@ export default {
return params return params
}, },
appFinish () { appFinish () {
const params = new URLSearchParams() // const params = new URLSearchParams()
params.set('crsId', this.crsId) const params = this.setBaseParams()
params.set('crsSource', this.crsSource) // params.set('crsId', this.crsId)
// params.set('crsSource', this.crsSource)
params.set('sessionTime', this.sessiontTime / 10) params.set('sessionTime', this.sessiontTime / 10)
params.set('lessonMode', this.lessonMode) // params.set('lessonMode', this.lessonMode)
params.set('chapterId', this.itemId) params.set('chapterId', this.itemId)
params.set('lessonLocation', this.activeIndex + 1) 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) const percent = parseInt((this.activeIndex + 1) / this.pages.length * 100)
params.set('lessonProgress', percent) params.set('lessonProgress', percent)
const status = this.activeIndex + 1 >= this.pages.length ? 'completed' : 'incomplete' const status = this.activeIndex + 1 >= this.pages.length ? 'completed' : 'incomplete'
...@@ -493,6 +525,7 @@ export default { ...@@ -493,6 +525,7 @@ export default {
const params = new URLSearchParams() const params = new URLSearchParams()
params.append('id', this.crsId) params.append('id', this.crsId)
params.append('originType', this.crsSource) params.append('originType', this.crsSource)
params.append('taskId', this.taskId)
this.compatibleApi(params, 'courseDetail', 'pub').then((res) => { this.compatibleApi(params, 'courseDetail', 'pub').then((res) => {
// console.log(res) // console.log(res)
const isParticipate = res.data.values.isParticipate const isParticipate = res.data.values.isParticipate
...@@ -504,7 +537,7 @@ export default { ...@@ -504,7 +537,7 @@ export default {
setupWebViewJavascriptBridge (callback) { setupWebViewJavascriptBridge (callback) {
if (this.browserVersion.ios) { if (this.browserVersion.ios) {
if (window.WebViewJavascriptBridge) { if (window.WebViewJavascriptBridge) {
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
return callback(WebViewJavascriptBridge) return callback(WebViewJavascriptBridge)
} }
if (window.WVJBCallbacks) { if (window.WVJBCallbacks) {
...@@ -558,7 +591,7 @@ export default { ...@@ -558,7 +591,7 @@ export default {
goback () { goback () {
if (!this.token && (this.browserVersion.ios || this.browserVersion.android)) { if (!this.token && (this.browserVersion.ios || this.browserVersion.android)) {
window.history.back() window.history.back()
// eslint-disable-next-line no-extra-boolean-cast // eslint-disable-next-line no-extra-boolean-cast
} else if (!!this.token) { } else if (!!this.token) {
this.setupWebViewJavascriptBridge((bridge) => { this.setupWebViewJavascriptBridge((bridge) => {
// console.log('goback:返回') // console.log('goback:返回')
...@@ -651,7 +684,7 @@ export default { ...@@ -651,7 +684,7 @@ export default {
}) })
}, },
getPages (coursewareDir, microId) { 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 this.microId = microId
axios({ axios({
url: url, url: url,
...@@ -813,7 +846,7 @@ export default { ...@@ -813,7 +846,7 @@ export default {
position: fixed; position: fixed;
right: 0; right: 0;
bottom: 0; bottom: 0;
color: #FFF; color: #fff;
background-color: #59b8fb; background-color: #59b8fb;
line-height: 1; line-height: 1;
font-size: 1.07692308em; font-size: 1.07692308em;
...@@ -825,7 +858,7 @@ export default { ...@@ -825,7 +858,7 @@ export default {
outline: 0; outline: 0;
} }
.reveal img { .reveal img {
margin: 0; margin: 0;
} }
.playControl { .playControl {
position: absolute; position: absolute;
...@@ -854,7 +887,7 @@ export default { ...@@ -854,7 +887,7 @@ export default {
transform: translateZ(0); transform: translateZ(0);
text-align: center; text-align: center;
line-height: 35px; line-height: 35px;
font-size: .16rem; font-size: 0.16rem;
color: rgb(251 251 251 / 60%); color: rgb(251 251 251 / 60%);
border: 1px solid rgb(251 251 251 / 0.6); border: 1px solid rgb(251 251 251 / 0.6);
} }
...@@ -866,22 +899,22 @@ export default { ...@@ -866,22 +899,22 @@ export default {
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 10; z-index: 10;
background-color: rgba(0,0,0,.2); background-color: rgba(0, 0, 0, 0.2);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
section { section {
top: 330px; top: 330px;
display: block; display: block;
height: 100%; height: 100%;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
box-sizing: border-box; box-sizing: border-box;
// border: 1px solid red; // border: 1px solid red;
top: 0 !important; top: 0 !important;
left: 0 !important; left: 0 !important;
} }
// .reveal.slide section { // .reveal.slide section {
// -webkit-backface-visibility: visible; // -webkit-backface-visibility: visible;
...@@ -898,16 +931,18 @@ export default { ...@@ -898,16 +931,18 @@ export default {
// transform-style: flat; // 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); // 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 { .reveal .slides > section[data-transition='convex'].past,
transform: translate3d(-100%,0,0) rotateY(-90deg) translate3d(-100%,0,0); .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 { .reveal p {
margin: 0; margin: 0;
line-height: 1.3; line-height: 1.3;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
font-size: .12rem; font-size: 0.12rem;
padding: 0.06rem .06rem; padding: 0.06rem 0.06rem;
width: 100%; width: 100%;
background: rgb(0 0 0 / 0.6); background: rgb(0 0 0 / 0.6);
box-sizing: border-box; box-sizing: border-box;
...@@ -961,7 +996,7 @@ export default { ...@@ -961,7 +996,7 @@ export default {
} }
h2 { h2 {
font-size: 0.16rem; font-size: 0.16rem;
margin: 20px 0 15px 0 margin: 20px 0 15px 0;
} }
div { div {
font-size: 0.12rem; font-size: 0.12rem;
...@@ -970,5 +1005,4 @@ export default { ...@@ -970,5 +1005,4 @@ export default {
} }
} }
} }
</style> </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 = { module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/', publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
assetsDir: 'static', 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