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 @@
"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/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