Skip to content

A
admin-base
Commit 061ab7f9 authored by wangwei's avatar wangwei
Browse files
Options

Merge branch 'myBranch' into development

parents 20a390ee ff3d5c8c
Hide whitespace changes
Inline Side-by-side
Showing with 1521 additions and 1884 deletions
index.html
View file @ 061ab7f9
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="referrer" content="never"> <meta name="referrer" content="never">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_746649_bhids3f63a6.css"> <link rel="stylesheet" href="https:////at.alicdn.com/t/font_746649_x1rivf5f5.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.9/lib/theme-chalk/index.css"> <link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.9/lib/theme-chalk/index.css">
<title>唱唱启蒙-后台</title> <title>唱唱启蒙-后台</title>
</head> </head>
......
src/components/mould/baseBlock.vue 0 → 100644
View file @ 061ab7f9
<template>
<div>
<el-row :gutter="20">
<el-col :span="12">
<el-form ref="form" label-width="80px">
<el-form-item label="标题">
<el-input v-model="formData.title"/>
</el-form-item>
<el-form-item label="封面">
<el-upload
class="avatar-uploader"
:http-request="uploadFileImage"
action="https://jsonplaceholder.typicode.com/posts/"
:on-success="uploadImgSuccess"
:show-file-list="false">
<img v-if="formData.cover" :src="formData.cover" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import {uploadFileApi} from "../../service/api";
export default {
name: "baseBlock",
props:[
'formData'
],
data(){
return{
}
},
methods:{
uploadFileImage(a){
if( a.file.size < 200 * 1024) {
uploadFileApi({file:a.file,type:'local',obj:a}).then(res=>{
this.formData.cover = process.env.IMAGE_URL_HEAD + res.url;
this.$message({
type: 'success',
message: '上传成功!'
});
a.onSuccess('上传成功')
});
}else{
this.$message({
type: 'error',
message: '文件过大'
});
}
},
uploadImgSuccess(a,b,c){
}
}
}
</script>
<style scoped>
</style>
src/components/mould/funBlock.vue 0 → 100644
View file @ 061ab7f9
<template>
<div>
<el-row :gutter="40">
<el-col :span="12">
<div style="max-height: 800px;overflow: auto;max-width: 800px">
<video-upload :formData="formData.fun"/>
</div>
</el-col>
<el-col :span="12">
<div :style="{backgroundImage:`url(${background})`}" class="view">
<!--视频显示-->
<div class="view-content" v-if="!formData.fun.type && !type">
<img :src="luolaUrl" class="luola"/>
<img :src="luolaComing" class="luolacoming"/>
<div v-if="formData.fun.video[0]" class="video-block">
<video :src="formData.fun.video[0].url" controls></video>
</div>
<div class="tips-block" v-if="formData.fun.change">
<div class="active">视频教学</div>
<div @click="type=true">音频教学</div>
</div>
</div>
<!--音频显示-->
<div class="view-content" v-if="formData.fun.type || type">
<div v-if="formData.fun.audio[0]">
<img :src="formData.fun.audio[0].image" class="audio-img">
<audio :src="formData.fun.audio[0].url"></audio>
<div class="title-block">
<div class="title">
{{formData.fun.audio[0].title}}
</div>
<div class="tips">
{{formData.fun.audio[0].tips}}
</div>
</div>
<div class="range-block">
<input type="range" v-model="range" :style="{backgroundSize:`${range}% 100%`}"/>
<div>
<img :src="playAudio" class="play-btn"/>
</div>
</div>
</div>
<div class="tips-block" v-if="formData.play.change">
<div @click="type = false">视频教学</div>
<div class="active">音频教学</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import background from '../../assets/mould/funBlock.png'
import videoUpload from '../textarea/videoUpload'
import luolaUrl from '../../assets/mould/playLuola.png'
import luolaComing from '../../assets/mould/luoLacoming.png'
import playAudio from '../../assets/mould/playAudio.png'
export default {
name: "funBlock",
props:[
'formData'
],
data(){
return{
background:background,
luolaUrl:luolaUrl,
luolaComing:luolaComing,
playAudio:playAudio,
type:false,
range:0
}
},
components:{
videoUpload
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.view{
width: 335px;
height: 469px;
background-size: 100% 100%;
padding: 140px 20px 77px 20px;
margin: auto;
.view-content{
background: white;
padding: 10px;
width: 315px;
height: 459px;
overflow: auto;
border-radius: 8px;
.audio-img{
width: 188px;
height: 188px;
border-radius: 8px;
display: block;
margin: 40px auto 0 auto;
}
.range-block{
text-align: center;
width: 237px;
margin: auto;
margin-top: 11px;
.play-btn{
margin-top: 28px;
width: 40px;
}
input[type=range] {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-appearance: none;
background: -webkit-linear-gradient(#49E2A5, #49E2A5) no-repeat,#D8D8D8;
background-size: 75% 100%;/*设置左右宽度比例*/
display: flex;
width: 100%;
border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 4px;
border-radius: 2px ;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/
height: 12px;
width: 12px;
margin-top: -4px; /*使滑块超出轨道部分的偏移量相等*/
background: #49E2A5;
}
}
.title-block{
text-align: center;
margin-top: 24px;
.title{
font-size:16px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
line-height:22px;
}
.tips{
font-size:14px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
line-height:20px;
}
}
.luola{
width: 70px;
margin: 10px 0 0 20px;
}
.luolacoming{
width: 135px;
margin-left:42px ;
}
.video-block{
width: 303px;
padding: 8px;
margin: auto;
border: 1px solid #666666;
border-radius: 12px;
height: 171px;
video{
border-radius: 12px;
width: 100%;
}
}
.tips-block{
border-radius: 1000px;
width: 144px;
margin: 16px auto auto;
border: 1px solid #40A9FF;
height: 28px;
line-height: 28px;
&:after{
content: '';
display: block;
clear: both;
}
div{
float: left;
font-size:12px;
width: 50%;
text-align: center;
color: #cccccc;
&.active{
border-radius: 1000px;
background: #40A9FF;
color: #FFFFFF;
}
}
}
}
}
</style>
src/components/mould/lessonContent.vue 0 → 100644
View file @ 061ab7f9
<template>
<div>
<el-row :gutter="40">
<el-col :span="12">
<el-form ref="form" label-width="120px">
<el-form-item label="课程内容">
<el-input v-model="formData.content.tips.content"></el-input>
</el-form-item>
<el-form-item label="title1">
<el-input rows="4" v-model="formData.content.tips.title1"></el-input>
</el-form-item>
<el-form-item label="title1-内容">
<el-input rows="4" type="textarea" v-model="formData.content.tips.title1_content"></el-input>
</el-form-item>
<el-form-item label="title2">
<el-input rows="4" v-model="formData.content.tips.title2"></el-input>
</el-form-item>
<el-form-item label="title2-内容">
<el-input type="textarea" rows="4" v-model="formData.content.tips.title2_content"></el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<div class="view" :style="{backgroundImage:`url(${background})`}">
<div class="title">
{{formData.title}}
</div>
<div class="lessonContent">
{{formData.content.tips.content}}
</div>
<div class="tips title1">
{{formData.content.tips.title1}}
</div>
<div class="title-content">
<ul>
<li v-for="data in splitContent">{{data}}</li>
</ul>
</div>
<div class="tips title2">
{{formData.content.tips.title2}}
</div>
<div class="title-content title2">
{{formData.content.tips.title2_content}}
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import background from '../../assets/mould/lessonContentBGI.png'
export default {
name: "lessonContent",
props:[
'formData'
],
computed:{
splitContent(){
let arr = [];
if(this.formData.content.tips.title1_content){
arr = this.formData.content.tips.title1_content.split('\n');
}
return arr
},
},
data(){
return{
background:background
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.view{
width: 275px;
height: 447px;
background-size: 100% 100%;
padding: 97px 49px 93px 51px;
margin: auto;
.title{
width:219px;
font-size:24px;
margin: 36px auto 16px;
text-align: center;
font-family:Helvetica-Bold;
font-weight:bold;
color:rgba(255,255,255,1);
line-height:26px;
height: 52px;
overflow: hidden;
}
.lessonContent{
margin:8px auto;
font-size:16px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(255,255,255,1);
text-align: center;
line-height:22px;
width: 83px;
padding: 7px 5px;
background: rgba(51,51,51,0.2);
border-radius: 4px;
height: 22px;
}
.tips{
height:20px;
width: fit-content;
margin: 12px auto 10px auto;
font-size:16px;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(145,237,250,1);
line-height:22px;
display: block;
border-radius: 1000px;
padding: 3px 18px;
border: 2px solid #91EDFA;
&.title1{
margin-top: 55px;
}
}
.title-content{
word-break:break-all;
padding: 0 18px;
font-size:12px;
font-family:PingFang-SC-Regular;
font-weight:400;
color:rgba(136,136,136,1);
line-height:17px;
&.title2{
font-size:14px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
line-height:20px;
}
ul{
margin: 0;
padding: 0;
font-size:14px;
height:58px;
overflow: hidden;
margin-bottom: 14px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
line-height:20px;
list-style-type:none;
&:after{
content: '';
display: block;
clear: both;
}
li{
width: 50%;
float: left;
}
}
}
}
</style>
src/components/mould/lookBlock.vue 0 → 100644
View file @ 061ab7f9
<template>
<div>
<el-row :gutter="40">
<el-col :span="12">
<area-blcok :lookData="formData.look"/>
</el-col>
<el-col :span="12">
<div :style="{backgroundImage:`url(${background})`}" class="view">
<div v-html="formData.look.content" class="view-content">
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import AreaBlcok from '../textarea'
import background from '../../assets/mould/lookBlock.png'
export default {
name: "lookBlock",
props:[
'formData'
],
data(){
return {
background:background
}
},
components:{
AreaBlcok
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.view{
width: 335px;
height: 469px;
background-size: 100% 100%;
padding: 140px 20px 77px 20px;
margin: auto;
.view-content{
background: white;
padding: 10px;
width: 315px;
height: 459px;
overflow: auto;
border-radius: 8px;
}
}
</style>
src/components/mould/playBlock.vue 0 → 100644
View file @ 061ab7f9
<template>
<div>
<el-row :gutter="40">
<el-col :span="12">
<div style="max-height: 800px;overflow: auto;max-width: 800px">
<video-upload :formData="formData.play"/>
</div>
</el-col>
<el-col :span="12">
<div :style="{backgroundImage:`url(${background})`}" class="view">
<!--视频显示-->
<div class="view-content" v-if="!formData.play.type && !type && !age">
<img :src="luolaUrl" class="luola"/>
<img :src="luolaComing" class="luolacoming"/>
<div v-for="data in formData.play.video" class="video-block">
<video :src="data.url" controls></video>
</div>
<div class="btn-block">
<div class="change" v-if="formData.play.age" @click="age=true">
0-3岁
<i class="iconfont icon-zhankai1" style="font-size: 12px"></i>
</div>
<div class="tips-block" v-if="formData.play.change">
<div class="active">视频教学</div>
<div @click="type=true">音频教学</div>
</div>
</div>
</div>
<div class="view-content" v-if="!formData.play.type && !type && age">
<img :src="luolaUrl" class="luola"/>
<img :src="luolaComing" class="luolacoming"/>
<div v-for="data in formData.play.video2" class="video-block">
<video :src="data.url" controls></video>
</div>
<div class="btn-block">
<div class="change" v-if="formData.play.age" @click="age=false">
4-6岁
<i class="iconfont icon-zhankai1" style="font-size: 12px"></i>
</div>
<div class="tips-block" v-if="formData.play.change2">
<div class="active">视频教学</div>
<div @click="type=true">音频教学</div>
</div>
</div>
</div>
<!--音频显示-->
<div class="view-content" v-if="( formData.play.type || type )&& !age">
<div v-if="formData.play.audio[0]">
<img :src="formData.play.audio[0].image" class="audio-img">
<audio :src="formData.play.audio[0].url"></audio>
<div class="title-block">
<div class="title">
{{formData.play.audio[0].title}}
</div>
<div class="tips">
{{formData.play.audio[0].tips}}
</div>
</div>
<div class="range-block">
<input type="range" v-model="range" :style="{backgroundSize:`${range}% 100%`}"/>
<div class="btn-block">
<img :src="listUrl"/>
<img :src="lastUrl"/>
<img :src="playAudio" class="play-btn"/>
<img :src="nextUrl"/>
<img :src="refUrl"/>
</div>
</div>
</div>
<div class="tips-block" v-if="formData.play.change">
<div @click="type = false">视频教学</div>
<div class="active">音频教学</div>
</div>
</div>
<div class="view-content" v-if="( formData.play.type || type )&& age">
<div v-if="formData.play.audio2[0]">
<img :src="formData.play.audio2[0].image" class="audio-img">
<audio :src="formData.play.audio2[0].url"></audio>
<div class="title-block">
<div class="title">
{{formData.play.audio2[0].title}}
</div>
<div class="tips">
{{formData.play.audio2[0].tips}}
</div>
</div>
<div class="range-block">
<input type="range" v-model="range" :style="{backgroundSize:`${range}% 100%`}"/>
<div class="btn-block">
<img :src="listUrl"/>
<img :src="lastUrl"/>
<img :src="playAudio" class="play-btn"/>
<img :src="nextUrl"/>
<img :src="refUrl"/>
</div>
</div>
</div>
<div class="tips-block" v-if="formData.play.change">
<div @click="type = false">视频教学</div>
<div class="active">音频教学</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import luolaUrl from '../../assets/mould/playLuola.png'
import luolaComing from '../../assets/mould/luoLacoming.png'
import background from '../../assets/mould/playBlock.png'
import videoUpload from '../textarea/videoUpload'
import playAudio from '../../assets/mould/playAudio.png'
import lastUrl from '../../assets/mould/last.png'
import nextUrl from '../../assets/mould/next.png'
import listUrl from '../../assets/mould/list.png'
import refUrl from '../../assets/mould/ref.png'
export default {
props:[
'formData'
],
name: "playBlock",
data(){
return{
background:background,
lastUrl:lastUrl,
listUrl:listUrl,
refUrl:refUrl,
nextUrl:nextUrl,
luolaUrl:luolaUrl,
luolaComing:luolaComing,
playAudio:playAudio,
type:false,
range:0,
age:false,
}
},
components:{
videoUpload
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.view{
width: 335px;
height: 469px;
background-size: 100% 100%;
padding: 140px 20px 77px 20px;
margin: auto;
.view-content{
background: white;
padding: 10px;
width: 315px;
height: 459px;
overflow-y: auto;
overflow-x: hidden;
border-radius: 8px;
.audio-img{
width: 188px;
height: 188px;
border-radius: 8px;
display: block;
margin: 40px auto 0 auto;
}
.btn-block{
position: relative;
margin-top: 16px;
}
.change{
width: 72px;
height: 28px;
border-radius: 100px;
position: absolute;
text-align: center;
line-height: 28px;
font-size:12px;
top: 0;
left: 0;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
border: 1px solid #666666;
}
.range-block{
text-align: center;
width: 237px;
margin: auto;
margin-top: 11px;
.btn-block{
height: 40px;
margin-top: 28px;
line-height: 40px;
img{
width:16px ;
vertical-align: middle;
margin: 0 10px;
}
.play-btn{
width: 40px;
}
}
input[type=range] {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-appearance: none;
background: -webkit-linear-gradient(#49E2A5, #49E2A5) no-repeat,#D8D8D8;
background-size: 75% 100%;/*设置左右宽度比例*/
display: flex;
width: 100%;
border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 4px;
border-radius: 2px ;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/
height: 12px;
width: 12px;
margin-top: -4px; /*使滑块超出轨道部分的偏移量相等*/
background: #49E2A5;
}
}
.title-block{
text-align: center;
margin-top: 24px;
.title{
font-size:16px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
line-height:22px;
}
.tips{
font-size:14px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
line-height:20px;
}
}
.luola{
width: 70px;
margin: 10px 0 0 20px;
}
.luolacoming{
width: 135px;
margin-left:42px ;
}
.video-block{
width: 303px;
padding: 8px;
margin: auto;
border: 1px solid #666666;
border-radius: 12px;
height: 171px;
video{
border-radius: 12px;
width: 100%;
}
}
.tips-block{
border-radius: 1000px;
width: 144px;
margin: auto;
border: 1px solid #40A9FF;
height: 28px;
line-height: 28px;
&:after{
content: '';
display: block;
clear: both;
}
div{
float: left;
font-size:12px;
width: 50%;
text-align: center;
color: #cccccc;
&.active{
border-radius: 1000px;
background: #40A9FF;
color: #FFFFFF;
}
}
}
}
}
</style>
src/components/preview/audio1.vue deleted 100644 → 0
View file @ 20a390ee
<template>
<div class="radio1" :style="{backgroundImage:`url(${nowLesson.content.titleType === 0 ? imgUrl.bg:imgUrl.moerduoBg})`}">
<div class="bg-block" :style="{backgroundImage:`url('${imgUrl.contentBg}')`}">
<img :src="imgUrl.tabVideo" class="tab-video-img" @click="goNext(nowLesson.content.tabVideo.index)" v-if="nowLesson.content.tabVideo.type"/>
<div class="title">
<img :src="imgUrl.title" v-if="nowLesson.content.titleType === 0"/>
<img :src="imgUrl.moerduo" v-if="nowLesson.content.titleType === 1"/>
</div>
<div class="cd">
<img :src="imgUrl.CD"/>
</div>
<audio
ref="audio"
:src="nowLesson.content.radio[radioLenth].url"
@timeupdate="updateTime">
</audio>
<div class="name-block">
<div class="name">
<span v-if="nowLesson.content.radio[radioLenth]">{{nowLesson.content.radio[radioLenth].title}}</span>
</div>
<div class="ahtor">
<span v-if="nowLesson.content.radio[radioLenth]">{{nowLesson.content.radio[radioLenth].lable}}</span>
</div>
</div>
<div class="play-block">
<img :src="imgUrl.loading"/>
<div class="radius-icon" :style="{left:audioLeft}"></div>
</div>
<div class="btn-block">
<img :src="imgUrl.near" @click="dRadio()" v-if="nowLesson.content.radio && nowLesson.content.radio.length > 0"/>
<img :src="imgUrl.play" class="play" v-if="!playAudioType" @click="playAudio()"/>
<img :src="imgUrl.stop" class="play" v-if="playAudioType" @click="stopAudio()"/>
<img :src="imgUrl.next" @click="aRadio()" v-if="nowLesson.content.radio && nowLesson.content.radio.length > 0"/>
</div>
</div>
<div class="bottom-block" v-if="nowLesson.content.buttonType === 0">
<img :src="imgUrl.backLookBtn" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.showBtn" @click="goNext(nowLesson.content.nextIndex,true)"/>
</div>
<div class="bottom-block" v-if="nowLesson.content.buttonType === 1">
<img :src="imgUrl.backPlayBtn" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.finishBtn" @click="goNext(nowLesson.content.nextIndex,true)"/>
</div>
<div class="bottom-block" v-if="nowLesson.content.buttonType === 2">
<img :src="imgUrl.backLookBtn" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.finishBtn" @click="goNext(nowLesson.content.nextIndex,true)"/>
</div>
<div class="bottom-block" v-if="nowLesson.content.buttonType === 3">
<img :src="imgUrl.backPlayBtn" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.nextBtn" @click="goNext(nowLesson.content.nextIndex,true)"/>
</div>
</div>
</template>
<script>
import {radio1} from "../../util/imgUrl";
import {Toast} from 'mint-ui'
export default {
name: "audio1",
props: [
'nowLesson'
],
data() {
return {
imgUrl: radio1,
audioLeft:0,
radioLenth:0,
playAudioType:false,
}
},
methods:{
goNext(i,next){
this.$emit('goNext',{i:i,next:!!next})
},
// 切换音频+
aRadio(){
if(this.radioLenth < this.nowLesson.content.radio.length - 1){
this.radioLenth ++;
this.playAudioType = false;
this.audioLeft = 0;
}else{
Toast('已是最后一个')
}
},
updateTime(e){
let time = e.target.currentTime / e.target.duration * 72.5333333;
this.audioLeft = time + 'vw';
if(e.target.currentTime === e.target.duration ){
this.playAudioType = false
}
},
// 暂停音频
stopAudio(){
this.$refs.audio.pause();
this.playAudioType = false
},
// 切换音频-
dRadio(){
if(this.radioLenth>0){
this.radioLenth --;
this.playAudioType = false;
this.audioLeft = 0;
}else{
Toast('已是第一个')
}
},
// 播放音频
playAudio(){
this.$refs.audio.play();
this.playAudioType = true;
},
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.radio1{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
background-size: 100% 100%;
.bg-block{
background-color: transparent;
border: none;
width: 345 * @toVw;
top: 10 *@toVw;
height: 540 * @toVw;
padding: 10*@toVw;
box-shadow: none;
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
.tab-video-img{
position: absolute;
bottom: 15 * @toVw;
width: 24* @toVw;
right: 15 * @toVw;
}
.title{
text-align: center;
img{
width: 80%;
}
}
.cd{
text-align: center;
img{
width: 194 * @toVw;
}
}
.name-block{
text-align: center;
margin-top: 20 * @toVw;
font-family: PingFang-SC-Regular;
color: #333333;
.name{
height: 25 * @toVw;
line-height: 25 * @toVw;
font-size: 16 * @toVw;
}
.ahtor{
font-size: 12 * @toVw;
}
}
.play-block{
width: 272 * @toVw;
margin: 20 * @toVw auto auto auto;
position: relative;
img{
width: 272 * @toVw;
}
.radius-icon{
position: absolute;
width: 13 * @toVw;
top: 5*@toVw;
left: 0;
height: 13 * @toVw;
background: #80952B ;
border-radius: 50 * @toVw;
}
}
.btn-block{
line-height: 100 * @toVw;
text-align: center;
img{
vertical-align: middle;;
margin-right: 10 * @toVw;
width: 24 *@toVw;
&.play{
width: 36 *@toVw;
}
&:last-child{
margin-right: 0;
}
}
}
}
.bottom-block{
position: fixed;
width: 100%;
bottom: 10*@toVw;
text-align: center;
img{
width: 127 * @toVw;
}
img:first-child{
margin-right: 25 * @toVw;
}
}
}
</style>
src/components/preview/index.vue deleted 100644 → 0
View file @ 20a390ee
<template>
<div class="lesson">
<!--看一看1-->
<transition name="fade" v-if="nowLesson && nowLesson.key === 'look1'">
<look1-div :nowLesson="nowLesson" @goNext="goNext"></look1-div>
</transition>
<!--玩一玩1-->
<transition name="fade" v-if="nowLesson && nowLesson.key === 'play1'">
<video1-div :nowLesson="nowLesson" @goNext="goNext"></video1-div>
</transition>
<!--玩一玩音频-->
<transition name="fade" v-if="nowLesson && nowLesson.key === 'radio1'">
<audio1-div :nowLesson="nowLesson" @goNext="goNext"></audio1-div>
</transition>
<!--秀宝贝1-->
<transition name="fade" v-if="nowLesson && nowLesson.key === 'show1'">
<show1-div :nowLesson="nowLesson" @goNext="goNext"></show1-div>
</transition>
<!--加油包1-->
<transition name="fade" v-if="nowLesson && nowLesson.key === 'refueling1'">
<refueling1-div :nowLesson="nowLesson" @goNext="goNext"></refueling1-div>
</transition>
<!--加油包2-->
<transition name="fade" v-if="nowLesson && nowLesson.key === 'refueling2'">
<refueling2-div :nowLesson="nowLesson" @goNext="goNext"></refueling2-div>
</transition>
</div>
</template>
<script>
import {getElemenetDetailApi} from "../../service/api"
import look1Div from './look1'
import video1Div from './video1'
import audio1Div from './audio1'
import show1Div from './show1'
import refueling1Div from './refueling1'
import refueling2Div from './refueling2'
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI);
export default {
name: "index",
components:{
look1Div,
video1Div,
audio1Div,
show1Div,
refueling1Div,
refueling2Div
},
data(){
return{
elementId:this.$route.params.id,
lessonList:[],
nowLesson:null
}
},
mounted(){
this.initPage()
},
methods:{
initPage(){
getElemenetDetailApi(this.elementId).then(res=>{
this.lessonList = JSON.parse(res.content);
this.nowLesson = this.lessonList[0]
})
},
goNext(data) {
if(!this.lessonList[data.i]){
alert('没有此内容')
}else{
this.nowLesson = this.lessonList[data.i];
}
},
}
}
</script>
<style lang="less">
html,body,#app,.lesson{
height: 100%;
}
div{
margin: auto;
}
</style>
src/components/preview/look1.vue deleted 100644 → 0
View file @ 20a390ee
<template>
<div :style="{backgroundImage:`url(${imgUrl.bg})`}" class="look1">
<img :src="imgUrl.reqiqiu" class="reqiqiu"/>
<img :src="imgUrl.qiqiu" class="qiqiu"/>
<img :src="imgUrl.feiji" class="feiji"/>
<div class="content">
<div class="title">
<img :src="imgUrl.title1"/>
</div>
<audio ref="jiayouAudio" v-if="nowLesson.content.radio.length > 0" :src="nowLesson.content.radio[0].url" @ended="lookAudioType = 2" @play="lookAudioType = 1" preload="auto" autoplay ></audio>
<div class="radio">
<img :src="imgUrl.r1" class="r1">
<img :src="imgUrl.r2" class="r2" v-show="lookAudioType===2">
<img :src="imgUrl.playing" class="r2" v-show="lookAudioType===1">
<div class="r2 text" v-show="lookAudioType===0">
loading
<span>.</span>
<span>.</span>
<span>.</span>
</div>
<img :src="imgUrl.r3" class="r3">
<img :src="imgUrl.rp" class="rp" @click="playLook1Audio" v-if="lookAudioType!==1">
<img :src="imgUrl.rs" class="rs" @click="stopLook1Audio" v-if="lookAudioType===1">
</div>
<div class="today-block">
<img :src="imgUrl.tadayBg"/>
<div class="today-text">
<div v-html="formatBr(nowLesson.content.today)">
</div>
</div>
</div>
<div class="title2-block">
<img :src="imgUrl.title2" class="title2"/>
<div class="directory-text">
<div v-html="formatBr(nowLesson.content.directory)">
</div>
</div>
</div>
</div>
<div class="bottom-block">
<img :src="imgUrl.bank" @click="goNext('')"/>
<img :src="imgUrl.go" v-if="nowLesson.content.nextIndex !== -1" @click="goNext(nowLesson.content.nextIndex,true)" />
</div>
</div>
</template>
<script>
import {getwechatParam,get} from "../../service/api";
import {look1} from "../../util/imgUrl";
export default {
name: "look1",
props:[
'nowLesson'
],
data(){
return {
imgUrl:look1,
lookAudioType:0,
timeCheck:0,
}
},
mounted(){
this.initPage()
},
methods:{
timeS(){
if(this.timeCheck > 0){
this.timeCheck --;
setTimeout( ()=> {
this.timeS();
},1000)
}
},
// 播放看一看音频
playLook1Audio(){
this.$refs.jiayouAudio.play();
this.lookAudioType = 1
},
// 暂停看一看音频
stopLook1Audio(){
this.$refs.jiayouAudio.pause();
this.lookAudioType = 2
},
autoPlayAudio(){
let that = this;
let voice = this.$refs.jiayouAudio;
document.addEventListener("WeixinJSBridgeReady",function(){
voice.play();
},false);
wx.ready(function () {
that.$nextTick(()=> {
wx.ready(function () {
that.$nextTick(()=>{
if (typeof WeixinJSBridge === "object" && typeof WeixinJSBridge.invoke === "function") {
voice.play();
console.log(1)
} else {
//監聽客户端抛出事件"WeixinJSBridgeReady"
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", function(){
voice.play();
console.log(2)
}, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", function(){
voice.play();
console.log(3)
});
document.attachEvent("onWeixinJSBridgeReady", function(){
voice.play();
console.log(4)
});
}
}
wx.ready(()=>{
that.$refs.jiayouAudio.play();
console.log(123)
})
})
})
})
})
},
initPage(){
this.timeCheck = this.nowLesson.content.timeLang;
this.timeS();
getwechatParam({
api_list:'onMenuShareAppMessage',
url:window.location.href.split('#')[0]
}).then(res=>{
let that = this;
wx.config({
debug: false,
appId: res.appId,
timestamp: parseInt(res.timestamp),
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: res.jsApiList
});
let voice = this.$refs.jiayouAudio;
this.autoPlayAudio()
});
},
goNext(i,next){
this.$emit('goNext',{i:i,next:!!next})
},
formatBr(str){
str = str.replace(/\r\n/g,"<br/>");
str = str.replace(/\n/g,"<br/>");
str = str.replace(/\r/g,"<br/>");
return str
},
},
watch:{
'nowLesson'(){
this.autoPlayAudio
}
},
}
</script>
<style scoped lang="less">
@import "../../util/public";
.look1{
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-size: 100% 100%;
.bottom-block{
position: fixed;
width: 100%;
text-align: center;
bottom: 5 * @toVw;
z-index: 5;
margin-top: 15 * @toVw;
.timeout-block{
display: inline-block;
position: relative;
.time-check{
color: white;
position: absolute;
top: 7 * @toVw;
width: 2em;
text-align: right;
left: 73 * @toVw;
}
}
img{
width: 127 * @toVw;
}
img:first-child{
margin-right: 25 * @toVw;
}
}
.reqiqiu{
position: absolute;
left: -30/ 2 * @toVw;
width: 56 * @toVw;
z-index: 1;
}
.qiqiu{
position: absolute;
z-index: 1;
width: 42 *@toVw;
left: -30/ 2 * @toVw;
top: 700/ 2 * @toVw;
}
.feiji{
position: absolute;
z-index: 1;
width: 84 * @toVw;
right: -10 * @toVw;
top: 120 * @toVw;
}
.content{
left: 20 * @toVw;
right: 20 * @toVw;
top:15 * @toVw;
bottom: 45 * @toVw;
overflow: auto;
position: fixed;
background: white;
border-radius: 5px;
padding: 10 * @toVw;
.title{
img{
width: 100%;
}
}
.radio{
text-align: center;
position: relative;
height: 55 * @toVw;
.r1{
position: absolute;
bottom: 10 * @toVw;
width: 225.5 * @toVw;
right: 10 * @toVw;
}
.r2{
position: absolute;
right: 45 * @toVw;
width: 118*@toVw;
bottom: 13 * @toVw;
color: #666;
&.text{
height: 28 * @toVw;
line-height: 28 * @toVw;
span{
font-size: 20px;
-webkit-animation: load 1s ease infinite;
&:nth-child(1){
-webkit-animation-delay:1.2s;
}
&:nth-child(2){
-webkit-animation-delay:1.4s;
}
&:nth-child(3){
-webkit-animation-delay:1.6s;
}
}
}
}
.r3{
position: absolute;
left: 15 * @toVw;
bottom: 10 * @toVw;
width: 73 * @toVw;
}
.rs{
position: absolute;
right: 190 * @toVw;
bottom: 15 * @toVw;
width: 22 * @toVw;
}
.rp{
position: absolute;
right: 190 * @toVw;
bottom: 15 * @toVw;
width: 22 * @toVw;
}
}
.today-block{
position: relative;
img{
width: 100%;
}
.today-text{
position: absolute;
top: 35* @toVw;
left: 0;
bottom: 0;
right: 0;
font-size: 14* @toVw;
line-height: 35* @toVw;
text-align: left;
padding-left: 20* @toVw;
padding-right: 15* @toVw;
z-index: 3;
overflow: hidden;
.zhanwei1{
float: left;
clear: left;
width: 15* @toVw;
height: 35* @toVw;
}
.zhanwei2{
float: left;
clear: left;
width: 60* @toVw;
height: 35* @toVw;
}
.zhanwei3{
float: left;
clear: left;
width: 70* @toVw;
height: 35* @toVw;
}
}
}
.title2-block{
background: #FFFFFF;
border: 1px solid #2E2E2E;
border-radius: 4px;
position: relative;
margin-top: 10 * @toVw;
min-height: 183 * @toVw;
.directory-text{
margin-top: 20 * @toVw;
font-size: 28/ 2 * @toVw;
line-height: 50/ 2 * @toVw;
text-align: left;
padding-left: 40/ 2 * @toVw;
padding-right: 30/ 2 * @toVw;
}
.title2{
position: absolute;
width: 192 * @toVw;
top: -20 * @toVw;
left: 10 * @toVw;
}
.redM{
position: absolute;
width: 96 * @toVw;
top: -2 * @toVw;
right: -2 * @toVw;
}
.flour{
position: absolute;
bottom: 0;
width: 169 * @toVw;
right: 0;
}
}
}
}
@-webkit-keyframes load{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
</style>
src/components/preview/refueling1.vue deleted 100644 → 0
View file @ 20a390ee
<template>
<div class="refueling1" :style="{backgroundImage:`url(${imgUrl.bg})`}">
<div class="bg-block">
<img :src="imgUrl.title" class="title" >
<audio v-if="nowLesson.content.radio.length" :src="nowLesson.content.radio[0].url" autoplay ref="jiayouAudio"></audio>
<div class="content-img">
<img :src="nowLesson.content.banner[0].url" v-if="nowLesson.content.banner[0]" class="bg">
<img :src="imgUrl.radio" class="radio-icon" @click="playJiayou()">
</div>
</div>
<div class="bottom-block">
<img :src="imgUrl.backBtn" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.next" @click="goNext(nowLesson.content.nextIndex,true)"/>
</div>
</div>
</template>
<script>
import {refueling1} from "../../util/imgUrl";
export default {
name: "refueling1",
props:[
'nowLesson'
],
data(){
return{
imgUrl:refueling1
}
},
mounted(){
this.autoPlayAudio()
},
methods:{
goNext(i,next){
this.$emit('goNext',{i:i,next:!!next})
},
// 播放加油包音频
playJiayou(){
if(this.$refs.jiayouAudio.paused){
this.$refs.jiayouAudio.play()
}else{
this.$refs.jiayouAudio.pause()
}
},
autoPlayAudio(){
let voice = this.$refs.jiayouAudio;
let that = this;
wx.ready(function () {
that.$nextTick(()=> {
wx.ready(function () {
that.$nextTick(()=>{
if (typeof WeixinJSBridge === "object" && typeof WeixinJSBridge.invoke === "function") {
voice.play();
} else {
//監聽客户端抛出事件"WeixinJSBridgeReady"
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", function(){
voice.play();
}, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", function(){
voice.play();
});
document.attachEvent("onWeixinJSBridgeReady", function(){
voice.play();
});
}
}
wx.ready(()=>{
that.$refs.jiayouAudio.play()
})
})
})
})
})
}
},
watch:{
'nowLesson'(){
this.autoPlayAudio()
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.refueling1{
position: absolute;
overflow: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-size: 100% 100%;
height: 100%;
.bg-block{
width: 325 * @toVw;
background: white;
border-radius: 8 * @toVw;
padding: 10 * @toVw;
position: relative;
margin-top: 10 * @toVw;
text-align: center;
}
.title{
width: 280 * @toVw ;
}
.bottom-block{
margin-top: 10 * @toVw;
width: 100%;
text-align: center;
img{
width: 127 * @toVw;
&:first-child{
margin-right: 10*@toVw;
}
}
}
.pageNo{
position: absolute;
width: 100%;
color: #888888;
font-size: 12px;
left: 0;
display: inline-block;
text-align: center;
bottom:0;
}
.content-img{
position: relative;
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 20/ 2 * @toVw;
border-radius: 8/ 2 * @toVw;
.bg{
width: 100%;
}
.radio-icon{
position: absolute;
width: 40 * @toVw;
right: 20/ 2 * @toVw;
top: 20/ 2 * @toVw;
}
}
}
</style>
src/components/preview/refueling2.vue deleted 100644 → 0
View file @ 20a390ee
<template>
<div class="refueling2" :style="{backgroundImage:`url(${imgUrl.refueling1.bg})`}">
<div class="bg-block">
<img :src="imgUrl.refueling1.title" class="title" v-if="nowLesson.content.title === 0">
<img :src="imgUrl.refueling2.title2" class="title" v-if="nowLesson.content.title === 1"/>
<audio v-if="nowLesson.content.radio.length" :src="nowLesson.content.radio[0].url" autoplay ref="jiayouAudio"></audio>
<div class="content-img">
<img :src="nowLesson.content.banner[0].url" class="img" v-if="nowLesson.content.banner[0]">
<img :src="imgUrl.refueling2.radio" class="radio-icon" @click="playJiayou()">
<div class="changPage-block">
<img :src="imgUrl.refueling2.back" class="left-icon" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.refueling2.next" class="right-icon" @click="goNext(nowLesson.content.nextIndex,true)"/>
</div>
<span class="pageNo">-{{nowLesson.content.mouldIndex}}-</span>
</div>
</div>
<div class="bottom-block">
</div>
</div>
</template>
<script>
import {refueling1,refueling2} from "../../util/imgUrl";
export default {
name: "refueling2",
props:[
'nowLesson'
],
data(){
return{
imgUrl:{
refueling1:refueling1,
refueling2:refueling2
}
}
},
mounted(){
this.autoPlayAudio();
console.log(this.nowLesson)
},
methods:{
goNext(i,next){
this.$emit('goNext',{i:i,next:!!next})
},
// 播放加油包音频
playJiayou(){
if(this.$refs.jiayouAudio.paused){
this.$refs.jiayouAudio.play()
}else{
this.$refs.jiayouAudio.pause()
}
},
autoPlayAudio(){
let voice = this.$refs.jiayouAudio;
let that = this;
wx.ready(function () {
that.$nextTick(()=> {
wx.ready(function () {
that.$nextTick(()=>{
if (typeof WeixinJSBridge === "object" && typeof WeixinJSBridge.invoke === "function") {
voice.play();
} else {
//監聽客户端抛出事件"WeixinJSBridgeReady"
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", function(){
voice.play();
}, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", function(){
voice.play();
});
document.attachEvent("onWeixinJSBridgeReady", function(){
voice.play();
});
}
}
wx.ready(()=>{
that.$refs.jiayouAudio.play()
})
})
})
})
})
}
},
watch:{
'nowLesson'(){
this.autoPlayAudio()
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.refueling2{
height: 100%;
overflow-y: auto;
overflow-x: hidden;
width: 100%;
background-size: 100% 100%;
.bg-block{
width: 1154/2 * @toVw;
height: 690/2 * @toVw;
transform-origin: 355/2 * @toVw 370/2 * @toVw;
transform: rotate(90deg);
background: white;
text-align: center;
.title{
position: relative;
top: -30/2 * @toVw;
width: 560 / 2 * @toVw;
}
.content-img{
width: 1078/2 * @toVw;
height: 550/2 * @toVw;
margin: -40/2 * @toVw auto 0 auto;
position: relative;
border-radius: 8/2 * @toVw;
background-size: 100% 100%;
.img{
width: 100%;
border-radius: 4 * @toVw;
}
.pageNo{
color: white;
position: absolute;
bottom: 0;
right: 20 * @toVw;
}
.radio-icon{
width: 40 * @toVw;
position: absolute;
bottom: 20/2 * @toVw;
left: 20/2 * @toVw;
}
.changPage-block{
position: absolute;
bottom: 0;
left: 50%;
text-align: center;
margin-left: -25 * @toVw;
img{
width: 35 * @toVw;
&:first-child{
margin-right: 15 * @toVw;
}
}
}
}
}
}
@media screen and (orientation: landscape) {
.refueling2{
height: 100%;
overflow: hidden;
width: 100%;
background-size: 100% 100%;
.bg-block{
width: 300 * @toVw;
height: 160 * @toVw;
transform: rotate(0);
background: white;
text-align: center;
border-radius: 8 * @toVw;
margin-top: 10 * @toVw ;
.title{
position: relative;
top: -10 * @toVw;
width: 120* @toVw;
}
.content-img{
width: 270 * @toVw;
height: 270 * 275 /539 * @toVw;
margin: 0 * @toVw auto 0 auto;
background: black;
position: relative;
top: -22 *@toVw;
border-radius: 8 * @toVw;
background-size: 100% 100%;
.img{
width: 100%;
}
.pageNo{
color: white;
position: absolute;
bottom: 0;
right: 10 * @toVw;
}
.radio-icon{
width: 22 * @toVw;
position: absolute;
bottom: 5 * @toVw;
left: 5 * @toVw;
}
.changPage-block{
position: absolute;
left: 50%;
bottom: 0;
text-align: center;
img{
width: 18 * @toVw;
&:first-child{
margin-right: 15 * @toVw;
}
}
}
}
}
}
}
</style>
src/components/preview/show1.vue deleted 100644 → 0
View file @ 20a390ee
<template>
<div>
<div class="show1" :style="{backgroundImage:`url(${imgUrl.bg})`}" v-if="!showType">
<img :src="imgUrl.riji" class="riji"/>
<img :src="imgUrl.yeziyou" class="yeziyou"/>
<img :src="imgUrl.yezizuo" class="yezizuo"/>
<img :src="imgUrl.zhaopianqiang" class="zhaopianqiang"/>
<div class="bg-block" :style="{backgroundImage:`url(${imgUrl.contentBg})`}">
<div class="title-block">
<img :src="imgUrl.title"/>
</div>
<div class="textarea">
<div :contenteditable="true" class="text" id="text" ref="textareaDiv">
</div>
<div class="btn-block">
<input type="file" accept="image/*" class="input"/>
<img :src="imgUrl.imgIcon" />
</div>
</div>
<div class="text-block">
解释说明：
<div class="text-content">
各位爸爸妈妈，记得在每日完成学习后记录宝宝一天的学习过程哦！养成良好的学习习惯也是很重要的一环，记录并分享后更可以获得
<span style="color: #333">唱学加油包</span>哦！
</div>
</div>
<img :src="imgUrl.shareIcon" class="share-icon"/>
</div>
<div class="bottom-block">
<img :src="imgUrl.backBtn" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.jiayoubao" @click="subLog(nowLesson.content.nextIndex)"/>
</div>
</div>
</div>
</template>
<script>
import {show1,share} from "../../util/imgUrl";
import { Toast , Indicator } from 'mint-ui';
export default {
name: "show1",
props:[
'nowLesson',
],
data(){
function randomNum(min,max){
switch(arguments.length){
case 1:
return Math.floor(Math.random()*minNum+1);
break;
case 2:
return Math.floor(Math.random()*(max-min+1)+min);
break;
default:
return 0;
break;
}
}
return{
imgUrl:show1,
imgUrl2:share,
showType:false,
dataURL: '',
posterAvatar:'',
hasToImg:false,
num:randomNum(0,4),
pNum:randomNum(80,95),
watchLog:null,
user:null,
newUrl:null
}
},
mounted(){
},
methods:{
subLog(){
this.goNext(this.nowLesson.content.nextIndex,true);
},
goNext(i,next){
this.$emit('goNext',{i:i,next:!!next})
},
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.show1{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
overflow-x: hidden;
width: 100%;
background-size: 100% 100%;
&>img{
position: absolute;
z-index: 2;
&.haiou{
top: 390 * @toVw;
left: 70/ 2 * @toVw;
width: 81 * @toVw;
}
&.riji{
width:78*@toVw ;
top: 25 * @toVw;
left: 0;
}
&.yeziyou{
bottom: 0;
right: 0;
width: 258/2*@toVw;
}
&.yezizuo{
width: 238 / 2 *@toVw;
bottom: 0;
left: 0;
}
&.zhaopianqiang{
top: 400 * @toVw;
left: 80/ 2 * @toVw;
width: 234 / 2 * @toVw;
}
}
.bg-block{
position: relative;
width: 344 * @toVw;
background-size: 100%;
height: 552 * @toVw;
.zhuangshi{
bottom: 0;
}
.share-icon{
width: 90* @toVw;
position: absolute;
bottom: 30 * @toVw;
left: 100 * @toVw;
}
}
.title-block{
padding-top: 50 * @toVw;
text-align: center;
img{
width: 420 / 2 * @toVw;
}
}
.textarea{
background: #FDFDFD;
height: 352/ 2 * @toVw;
width: 626/ 2 * @toVw;
margin:10*@toVw auto 0 auto;
box-shadow: inset 1/ 2 * @toVw 1/ 2 * @toVw 3/ 2 * @toVw 1/ 2 * @toVw rgba(142,142,142,0.50);
border-radius: 8/ 2 * @toVw;
position: relative;
.text{
position: absolute;
top: 5px;
left: 5px;
overflow: auto;
outline: none;
bottom: 5px;
right: 5px;
}
.btn-block{
position: absolute;
bottom: 10/ 2 * @toVw;
right: 10/ 2 * @toVw;
.input{
opacity: 0;
width: 24 * @toVw;
position: absolute;
}
img{
width: 32 * @toVw;
margin-right: 10/ 2 * @toVw;
}
}
}
.text-block{
width: 600/ 2 * @toVw;
margin: auto;
padding-top: 20/ 2 * @toVw;
text-align: left;
font-family: PingFang-SC-Medium;
font-size: 28/ 2 * @toVw;
color: #666666;
line-height: 40/ 2 * @toVw;
.text-content{
font-family: PingFang-SC-Regular;
font-size: 24/ 2 * @toVw;
color: #999999;
}
}
.sub-block{
position: absolute;
width: 100%;
text-align: center;
bottom: 160/ 2 * @toVw;
img{
width: 88 * @toVw
}
}
.bottom-block{
width: 100%;
text-align: center;
position: fixed;
z-index: 5;
bottom: 10 * @toVw;
img{
width: 127 * @toVw;
&:first-child{
margin-right: 15 * @toVw;
}
}
}
}
.share{
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
bottom:0;
right: 0;
.tips{
position: absolute;
top: 8 * @toVw;
height: 66 * @toVw;
z-index: 0;
right: 31 * @toVw;
}
.back-show{
width: 30 * @toVw;
position: absolute;
top: 15 * @toVw;
left: 30 * @toVw;
}
.text-tips{
position: absolute;
color: white;
top: 550 * @toVw;
font-size: 12px;
z-index: 5;
width: 100%;
text-align: center;
}
img.content{
z-index: 3;
}
.contentImg{
width: 313 * @toVw;
height: 524 * @toVw;
position: absolute;
top:53 * @toVw;
left: 50%;
z-index: 3;
margin-left: -156 * @toVw;
}
.content{
transform-origin:0 0;
width: 626 * @toVw;
height: 1048 * @toVw;
background-size: 100% 100%;
position: absolute;
z-index: 2;
top:53 * @toVw;
left: 50%;
margin-left: -156 * @toVw;
.head{
border-radius: 1000px;
width: 64 * @toVw;
position: absolute;
top: 257 *2 * @toVw;
left: 40 *2 * @toVw;
}
#qrcode{
position: absolute;
bottom: 90 * @toVw;
right: 80 * @toVw;
}
.name{
width:140px;
height:40px;
font-size:28px;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
line-height:40px;
position: absolute;
top: 257 * 2 * @toVw;
left: 84 * 2 * @toVw;
}
.day{
font-size:40px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height:56px;
position: absolute;
top: 334*2 * @toVw;
right:243*2 * @toVw;
}
.num{
font-size:40px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height:56px;
position: absolute;
top: 334 * 2 * @toVw;
right: 167 * 2 * @toVw;
}
.time{
font-size:40px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height:56px;
position: absolute;
top: 334 * 2 * @toVw;
right: 63 * 2 * @toVw;
}
}
}
</style>
<style>
.mint-indicator-wrapper{
z-index: 10 !important;
}
</style>
src/components/preview/video1.vue deleted 100644 → 0
View file @ 20a390ee
<template>
<div style="height: 100%">
<div class="play-l" :style="{backgroundImage:`url(${imgUrl.bgL})`}">
<div class="content" :style="{backgroundImage:`url(${imgUrl.bgC})`}">
<img :src="imgUrl.title" class="title"/>
<div class="tips-block">
<span>温馨提示：为了获得更好的学习观看体验，请您将手机横竖屏锁定打开，并将手机横放。</span>
</div>
<img class="audio" :src="imgUrl.audio" v-if="nowLesson.content.tabRadio.type" @click="goNext(nowLesson.content.tabRadio.index)">
<img :src="imgUrl.b" class="b-img"/>
</div>
<div class="btn-block">
<img :src="imgUrl.backL" class="btn back" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.nextL" class="btn next" @click="goNext(nowLesson.content.nextIndex,true)"/>
</div>
</div>
<div class="video-block">
<div class="icon-class" v-if="playVideoType">
<img :src="imgUrl.play" @click="playVideo()"/>
</div>
<video
id="test_video"
ref="video"
v-if="nowLesson.content.videoUrl.length > 0"
:controls="!playVideoType"
controlsList="nodownload"
:poster="!!nowLesson.content.banner[0] ? nowLesson.content.banner[0].url : `${nowLesson.content.videoUrl[0].url}?vframe/jpg/offset/0` "
:src="nowLesson.content.videoUrl[0].url"></video>
</div>
<div class="play1" :style="{backgroundImage:`url(${imgUrl.bg})`}">
<div class="bg-block">
<img :src="imgUrl.radio" class="radio-img" v-if="nowLesson.content.tabRadio.type" @click="goNext(nowLesson.content.tabRadio.index)"/>
<span class="pageNo" v-if="nowLesson.content.mouldIndex">-{{nowLesson.content.mouldIndex}}-</span>
<img :src="imgUrl.backBtn" class="btn back" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.next" class="btn next" @click="goNext(nowLesson.content.nextIndex,true)"/>
</div>
</div>
</div>
</template>
<script>
import {play1} from "../../util/imgUrl";
export default {
name: "video1",
props:[
'nowLesson'
],
data(){
return{
imgUrl:play1,
playVideoType:true,
}
},
methods:{
goNext(i,next){
this.$emit('goNext',{i:i,next:!!next})
},
// 播放视频
playVideo(){
this.playVideoType = false;
this.$refs.video.play()
},
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.play1{
display: none;
}
div{
margin: auto;
}
.video-block {
margin: 0;
background: black;
border-radius: 8 * @toVw;
height: 175 * @toVw;
width: 313 * @toVw;
z-index: 2;
top: 97 * @toVw;
left: 31 * @toVw;
position: absolute;
.icon-class {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
}
img {
position: absolute;
top: 50%;
z-index: 2;
left: 50%;
width: 58 * @toVw;
margin-top: -58/ 2 * @toVw;
margin-left: -58/ 2 * @toVw;
}
video {
width: 100%;
}
}
.play-l{
height: 100%;
background-size: 100% 100%;
text-align: center;
.content{
width: 345 * @toVw;
height: 540 * @toVw;
background-size: 100% 100%;
position: relative;
top: 10 * @toVw;
.b-img{
width: 61 * @toVw;
position: absolute;
left: -10 * @toVw;
top: 30 * @toVw;
}
.audio{
width: 42 * @toVw;
position: absolute;
right: 16 * @toVw;
bottom: 18 * @toVw;
}
.tips-block{
position: absolute;
width: 100%;
text-align: left;
left: 0;
bottom: 126 * @toVw;
span{
display: block;
padding: 0 20 * @toVw;
font-size: 14 * @toVw;
color:#333333;
}
}
.title{
width: 273 * @toVw;
}
}
.btn-block{
margin-top: 20 * @toVw;
position: relative;
z-index: 4;
img{
width: 127 * @toVw;
&:first-child{
margin-right: 20 * @toVw;
}
}
}
}
@media screen and (orientation: landscape) {
.play-l{display: none}
.play1 {
display: block;
height: 100%;
background-size: 100% 100%;
padding: 5 * @toVw;
.bg-block {
margin-top: 5 * @toVw;
background: white;
text-align: left;
border-radius: 4 * @toVw;
width: 245 * @toVw;
height: 120 * @toVw;
transform: rotate(0deg);
padding: 10* @toVw;
.radio-img {
position: absolute;
right: 5 * @toVw;
top: 5 * @toVw;
width: 20 * @toVw;
}
.btn {
position: absolute;
width: 20 * @toVw;
right: 5 * @toVw;
bottom: 5 * @toVw;
&.back {
bottom: 30 * @toVw
}
}
}
}
.video-block {
margin: 0;
background: black;
border-radius: 8/ 2 * @toVw;
height: 123 * @toVw;
width: 220 * @toVw;
z-index: 2;
top: 18 * @toVw;
left: 63 * @toVw;
position: absolute;
.icon-class {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
}
img {
position: absolute;
top: 50%;
z-index: 2;
left: 50%;
width: 30 * @toVw;
margin-top: -30/ 2 * @toVw;
margin-left: -30/ 2 * @toVw;
}
video {
width: 100%;
}
}
}
</style>
src/components/resources/editorDialog.vue
View file @ 061ab7f9
...@@ -7,280 +7,181 @@ ...@@ -7,280 +7,181 @@
:modal="false" :modal="false"
:center="true" :center="true"
:fullscreen="true"> :fullscreen="true">
<el-container> <el-tabs v-model="activeName2" type="card" >
<el-aside class="left-block" width="180px"> <el-tab-pane label="基本信息" name="base">
<div class="list-title"> <base-block :formData="formData"/>
模板列表 </el-tab-pane>
</div> <el-tab-pane label="课程内容" name="content">
<div class="page-list"> <lesson-content :formData="formData"/>
<div v-for="data in mouldList" @click="addMould(data)" :key="data.key"> </el-tab-pane>
<el-card shadow="hover" class="box" :body-style="{ padding: '0px' }"> <el-tab-pane label="爸妈看一看" name="look">
<img :src="data.imgUrl" class="image"> <look-block :formData="formData.content"/>
<div style="padding: 14px;"> </el-tab-pane>
<span>{{data.title}}</span> <el-tab-pane label="宝贝玩一玩" name="play">
<div class="bottom clearfix"> <play-block :formData="formData.content"/>
</div> </el-tab-pane>
</div> <el-tab-pane label="磨磨小耳朵" name="fun">
</el-card> <fun-block :formData="formData.content"/>
</div> </el-tab-pane>
</div> </el-tabs>
</el-aside> <span slot="footer" class="dialog-footer">
<el-main class="main-block"> <el-button @click="editorObj.show= false">取 消</el-button>
<div class="main-btns"> <el-button type="primary" @click="onSave">保 存</el-button>
<el-button type="primary" @click="showDialog = true"> </span>
课程基本信息编辑
</el-button>
<el-button style="float: right;" type="success" @click="onSave()">
保存
</el-button>
</div>
<div class="editor-block">
<editor :selectedMould="selectedMould" :editorObj="editorObj"/>
</div>
</el-main>
</el-container>
<el-dialog
title="信息编辑"
:modal="false"
:visible.sync="showDialog">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="标题">
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="单词量">
<el-input-number v-model="form.words_num"></el-input-number>
</el-form-item>
<el-form-item label="分龄分级">
<el-select v-model="age" placeholder="请选择">
<el-option
label="全部"
:value="2">
</el-option>
<el-option
label="0-3岁"
:value="0">
</el-option>
<el-option
label="4-6岁"
:value="1">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="封面">
<el-upload
class="upload-demo"
action="/api/public/upload"
list-type="picture-card"
:http-request="uploadCover"
multiple
:limit="1"
:disabled="(fileUid && progress < 99)"
:file-list="imgList">
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="success" @click="showDialog = false">确 定</el-button>
</div>
</el-dialog>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import addUrl from '../../assets/editor/Group 7.png' import {getElemenetDetailApi,editElementApi,addElementApi} from "../../service/api";
import {MOULDLIST} from "../../util/resourceMould"; import baseBlock from '../mould/baseBlock'
import editor from './editor' import lookBlock from '../mould/lookBlock'
import {addElementApi,editElementApi,getElemenetDetailApi,uploadFileApi} from "../../service/api"; import playBlock from '../mould/playBlock'
import funBlock from '../mould/funBlock'
import lessonContent from '../mould/lessonContent'
export default { export default {
props:[ props:[
'editorObj' 'editorObj'
], ],
components:{ components:{
editor lessonContent,
baseBlock,
lookBlock,
playBlock,
funBlock
}, },
data(){ data() {
return{ return {
selectedMould:[], activeName2:'base',
addUrl:addUrl, formData:{
showDialog:false,
imgList:[],
mouldList:MOULDLIST,
age:0,
fileUid:null,
form:{
category_id:this.editorObj.category_id,
title:'', title:'',
content:'',
min_age:0,
max_age:3,
cover:'', cover:'',
content:{
base:{},
tips:{
content:'',
title1:'',
title1_content:'',
title2:'',
title2_content:''
},
look:{
content:'',
},
play:{
type:false,
audio:[],
audio2:[],
video:[],
video2:[],
change:false,
change2:false,
age:false
},
fun:{
type:false,
audio:[],
audio2:[],
video:[],
video2:[],
change:false,
change2:false,
age:false
}
},
type:0
} }
} }
}, },
computed:{
progress(){
return this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num <100 ? this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num : 100
}
},
methods:{ methods:{
addMould(data){
this.selectedMould.push(JSON.parse(JSON.stringify(data)))
},
uploadCover(a){
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.form.cover = process.env.IMAGE_URL_HEAD + res.url;
this.imgList.push({name:res.url,url:process.env.IMAGE_URL_HEAD + res.url})
})
},
onSave(){ onSave(){
if (!this.form.title) { if(this.editorObj.type===1){
this.$message({ let json = {
type: 'error', category_id:this.editorObj.category_id,
message: '请完成基本信息编辑!' title:this.formData.title,
}); content:JSON.stringify(this.formData.content),
return cover:this.formData.cover
} };
if(this.age === 0 ){ editElementApi(json,this.editorObj.id).then(res=>{
this.form.min_age = 0; this.$message({
this.form.max_age = 3 type: 'success',
}else if(this.age === 1){ message: '保存成功!'
this.form.min_age = 4;
this.form.max_age = 6
}else{
this.form.min_age = 0;
this.form.max_age = 100
}
this.form.content = JSON.stringify(this.selectedMould);
this.category_id = this.editorObj.category_id;
switch (this.editorObj.type) {
case 0:
addElementApi(this.form , '0').then(res=>{
this.$message({
type: 'success',
message: '添加成功!'
});
this.editorObj.show = false;
this.$emit('reflash')
}); });
break; this.$emit('reflash')
case 1: })
editElementApi(this.form , this.editorObj.id).then(res=>{ }else if(this.editorObj.type===0){
this.$message({ let json = {
type: 'success', category_id:this.editorObj.category_id,
message: '修改成功!' title:this.formData.title,
}); content:JSON.stringify(this.formData.content),
this.editorObj.show = false; cover:this.formData.cover
this.$emit('reflash') };
addElementApi(json,0).then(res=>{
this.$message({
type: 'success',
message: '保存成功!'
}); });
} this.$emit('reflash')
}, })
initPage(){
switch (this.editorObj.type) {
case 0:
this.selectedMould=[];
this.form = {
category_id:this.editorObj.category_id,
title:'',
content:'',
cover:'',
words_num: 0
};
break;
case 1:
getElemenetDetailApi(this.editorObj.id).then(res=>{
if(res.max_age=== 3 ){
this.age = 0
}else if(res.max_age === 6){
this.age = 1
}else{
this.age = ''
}
this.form = {
category_id:res.category_id,
content:res.content,
cover:res.cover,
title:res.title,
words_num: res.words_num
};
this.selectedMould = JSON.parse(res.content)
})
} }
} }
}, },
watch:{ watch:{
'editorObj'(){ 'editorObj.show'(t){
this.initPage() if(t){
let value = this.editorObj.id
if(value){
getElemenetDetailApi(value).then(res=>{
res.content = JSON.parse(res.content);
this.formData = res
})
}else{
this.formData={
title:'',
cover:'',
content:{
base:{},
tips:{
content:'',
title1:'',
title1_content:'',
title2:'',
title2_content:''
},
look:{
content:'',
},
play:{
type:false,
audio:[],
audio2:[],
video:[],
video2:[],
change:false,
change2:false,
age:false
},
fun:{
type:false,
audio:[],
audio2:[],
video:[],
video2:[],
change:false,
change2:false,
age:false
}
},
type:0
}
}
}
} }
}, }
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.el-container{
height: 900px;
overflow: auto;
.el-main{
padding: 10px;
background: #f5f8ff;
}
.main-block{
position: relative;
.main-btns {
margin-top: 68px;
margin-bottom: 10px;
}
.editor-block{
position: absolute;
top: 118px;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
}
}
.left-block{
font-size: 14px;
border: 1px solid #f0f0f0;
color: #333333;
text-align: center;
.list-title{
padding: 5px;
}
.page-list{
padding: 10px 0;
background: #e8e8e8;
.box{
margin: 15px 5px;
cursor: pointer;
&:hover{
box-shadow: 0 0 20px #ff9a22;
}
img{
width: 100%;
}
}
.title{
font-size: 12px;
text-align: center;
}
&-add{
cursor: pointer;
padding: 10px 0;
font-size: 12px;
color: #CCCCCC;
}
}
}
}
</style>
<style>
.el-upload--picture-card,.el-upload-list--picture-card .el-upload-list__item{
width: 50px;
height: 50px;
line-height: 58px;
}
</style> </style>
src/components/textarea/index.vue
View file @ 061ab7f9
<template> <template>
<div class='tinymce'> <div class='tinymce'>
<div class="left"> <editor id='tinymce' v-model='lookData.content' :init='init'></editor>
<editor v-if="show" id='tinymce' v-model='tinymceHtml' :init='init'></editor> <div>
</div> <div class="imgInter" @click="showDialog()">插入图片</div>
<div class="right"> <div class="MP3Inter" @click="showDialogMP3()">插入音频</div>
<div class="phone">
<div class="content" v-html='tinymceHtml'></div>
</div>
</div> </div>
<el-dialog
title="插入图片"
:visible.sync="dialogVisible"
:modal-append-to-body="false"
:close-on-click-modal="false"
center
:append-to-body="true"
width="550px">
<el-form label-width="80px">
<el-form-item label="图片">
<el-upload
action="/api/public/upload"
:http-request="uploadFile"
:on-remove="removeFile"
drag
:on-exceed="handleExceed"
multiple
:limit="1"
:file-list="form.imgList">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传png文件，且不超过100kb</div>
</el-upload>
</el-form-item>
<el-form-item label="铺满">
<el-switch
v-model="form.big">
</el-switch>
</el-form-item>
<el-form-item label="居中">
<el-switch
v-model="form.center">
</el-switch>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="imgInter">确 定</el-button>
</span>
</el-dialog>
<el-dialog
title="插入音频"
:visible.sync="dialogVisibleMp3"
:modal-append-to-body="false"
:close-on-click-modal="false"
center
:append-to-body="true"
width="550px">
<el-form label-width="80px">
<el-form-item label="音频">
<el-upload
action="/api/public/upload"
:http-request="uploadFileMp3"
:on-remove="removeFileMp3"
drag
:on-exceed="handleExceed"
multiple
:limit="1"
:file-list="radio">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传MP3文件，且不超过5MB</div>
</el-upload>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisibleMp3 = false">取 消</el-button>
<el-button type="primary" @click="audioInter">确 定</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
...@@ -25,20 +92,31 @@ ...@@ -25,20 +92,31 @@
import 'tinymce/plugins/colorpicker' import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/preview' import 'tinymce/plugins/preview'
import 'tinymce/plugins/media' import 'tinymce/plugins/media'
import {uploadFileApi} from "../../service/api";
export default { export default {
name: 'tinymce', name: 'tinymce',
props:[
'lookData'
],
data () { data () {
return { return {
tinymceHtml: '请输入内容', dialogVisibleMp3:false,
radio:[],
form:{
imgList:[],
big:false,
weight:'',
center:true
},
show:'', show:'',
dialogVisible:false,
init: { init: {
language_url: '/static/tinymce/zh_CN.js', language_url: '/static/tinymce/zh_CN.js',
language: 'zh_CN', language: 'zh_CN',
skin_url: '/static/tinymce/skins/lightgray', skin_url: '/static/tinymce/skins/lightgray',
height: 500, height: 500,
plugins: 'preview media link lists image code table colorpicker textcolor wordcount contextmenu', plugins: 'preview lists code colorpicker textcolor wordcount contextmenu media',
// toolbar:
// 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
branding: false branding: false
} }
} }
...@@ -47,10 +125,119 @@ ...@@ -47,10 +125,119 @@
this.show = true this.show = true
}, },
deactivated(){ deactivated(){
this.show = false
}, },
mounted () { mounted () {
},
methods:{
imgInter(){
if(this.form.imgList.length < 1){
this.$message({
type: 'error',
message: '请选择图片'
});
return false
}
let ImageStyle = '';
if(this.form.big){
ImageStyle += 'width:100%;'
}else{
ImageStyle += 'width:70%'
}
if(this.form.center){
ImageStyle = 'display:block;margin:auto'
}
let str= `<img src="${this.form.imgList[0].url}" style="${ImageStyle}"/>`;
this.insertContent(str)
this.dialogVisible = false
},
audioInter(){
if(this.radio.length < 1){
this.$message({
type: 'error',
message: '请选择音频'
});
return false
}
let str = `<p style="text-align: center"><img class="mce-object mce-object-video" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="280" height="55" data-mce-p-controls="controls" data-mce-html="%0A%3Csource%20src%3D%22https%3A//cdn.singsingenglish.com/${this.radio[0].url}%22%20type%3D%22audio/mpeg%22%20/%3E" data-mce-object="video"></p>`;
console.log(str);
this.insertContent(str);
console.log(this.lookData.content);
this.dialogVisible = false
},
uploadFile(a){
if(a.file.size < 100*1024 && a.file.type === 'image/png'){
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.$message({
type: 'success',
message: '上传成功!'
});
this.form.imgList = [{name:res.name,url:process.env.IMAGE_URL_HEAD + res.url}];
})
}else {
this.$message({
type: 'error',
message: '上传失败，图片格式或大小不正确!'
});
this.form.imgList = [];
}
},
uploadFileMp3(a){
console.log(a);
if(a.file.size < 1024*1024*5 && a.file.type === 'audio/mp3'){
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.$message({
type: 'success',
message: '上传成功!'
});
this.radio = [{name:res.name,url:res.url}];
})
}else {
this.$message({
type: 'error',
message: '上传失败，音频格式或大小不正确!'
});
this.form.imgList = [];
}
},
showDialogMP3(){
this.dialogVisibleMp3 = true
},
showDialog(){
this.dialogVisible = true
},
insertContent(content) {
if (!content) {//如果插入的内容为空则返回
return;
}
let sel = null;
if (document.selection) {//IE9以下
sel = document.selection;
sel.createRange().pasteHTML(content);
} else {
sel = document.getElementById('tinymce_ifr').contentWindow.getSelection();
if (sel.rangeCount > 0) {
let range = sel.getRangeAt(0); //获取选择范围
range.deleteContents(); //删除选中的内容
let el = document.createElement("div"); //创建一个空的div外壳
el.innerHTML = content; //设置div内容为我们想要插入的内容。
let frag = document.createDocumentFragment();//创建一个空白的文档片段，便于之后插入dom树
let node = el.firstChild;
let lastNode = frag.appendChild(node);
range.insertNode(frag); //设置选择范围的内容为插入的内容
let contentRange = range.cloneRange(); //克隆选区
contentRange.setStartAfter(lastNode); //设置光标位置为插入内容的末尾
contentRange.collapse(true); //移动光标位置到末尾
sel.removeAllRanges(); //移出所有选区
sel.addRange(contentRange); //添加修改后的选区
}
}
},
removeFile(){},
removeFileMp3(){},
handleExceed(){}
}, },
created:function(){ created:function(){
tinymce.init({}) tinymce.init({})
...@@ -61,27 +248,36 @@ ...@@ -61,27 +248,36 @@
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.tinymce{ .tinymce{
height: 100%; position: relative;
overflow: auto;
.clear-both; .clear-both;
&>div{ .MP3Inter{
float: left; position: absolute;
width: 50%; display: inline-block;
position: relative; text-shadow: 0 1px 1px rgba(255,255,255,0.75);
.phone{ top: 3px;
background:url("../../assets/phone.png") no-repeat; left: 400px;
background-size: 100% 100%; box-shadow: none;
width: 600px; filter: none;
height: 800px; padding: 4px 6px;
position: relative; border: 1px solid transparent;
.content{ &:hover{
position: absolute; border-color: #e2e4e7;
top: 120px; cursor: pointer;
left: 135px; }
right: 160px; }
bottom: 135px; .imgInter{
overflow: auto; position: absolute;
} display: inline-block;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
top: 3px;
left: 330px;
box-shadow: none;
filter: none;
padding: 4px 6px;
border: 1px solid transparent;
&:hover{
border-color: #e2e4e7;
cursor: pointer;
} }
} }
} }
......
src/components/textarea/videoUpload.vue 0 → 100644
View file @ 061ab7f9
<template>
<el-form ref="form" label-width="120px" style="max-width:600px">
<el-form-item label="">
<el-switch
v-model="formData.type"
active-text="纯音频模块"
inactive-text="视频模块">
</el-switch>
</el-form-item>
<div v-if="!formData.type">
<el-form-item label="视频">
<el-upload
class="upload-demo"
drag
:http-request="uploadFileVideo"
:file-list="formData.video"
:on-exceed="handleExceed"
:on-remove="removeFileVideo"
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或<em>点击上传</em>
<br>
<span style="color: #888888;font-size: 12px">只能上传MP4或AVI文件</span>
</div>
<div class="el-upload__tip" slot="tip"></div>
</el-upload>
</el-form-item>
<el-form-item label="是否切换">
<el-switch
v-model="formData.change"
active-text="开"
inactive-text="关">
</el-switch>
</el-form-item>
<el-form-item label="切换音频" v-if="formData.change">
<el-upload
class="upload-demo"
:http-request="uploadFileAudio"
:file-list="formData.audio"
:on-exceed="handleExceed"
:on-remove="removeFileAudio"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或<em>点击上传</em>
<br>
<span style="color: #888888;font-size: 12px">只能上传MP3文件</span>
</div>
</el-upload>
</el-form-item>
<div v-if="formData.change" v-for="(data,index) in formData.audio" class="mp3-block">
<h3>
{{data.name}}
</h3>
<el-form-item :label="`音频${index + 1}图片`">
<el-upload
class="avatar-uploader"
:http-request="uploadFileImage"
:data="data"
action="https://jsonplaceholder.typicode.com/posts/"
:on-success="uploadImgSuccess"
:show-file-list="false">
<img v-if="data.image" :src="data.image" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item :label="`音频${index + 1}标题`">
<el-input v-model="data.title"></el-input>
</el-form-item>
<el-form-item :label="`音频${index + 1}说明`">
<el-input v-model="data.tips"></el-input>
</el-form-item>
</div>
<el-form-item label="是否分龄">
<el-switch
v-model="formData.age"
active-text="是"
inactive-text="否">
</el-switch>
</el-form-item>
<!--分龄-->
<el-form-item label="视频" v-if="formData.age">
<el-upload
class="upload-demo"
drag
:http-request="uploadFileVideo2"
:file-list="formData.video2"
:on-exceed="handleExceed"
:on-remove="removeFileVideo2"
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或<em>点击上传</em>
<br>
<span style="color: #888888;font-size: 12px">只能上传MP4或AVI文件</span>
</div>
<div class="el-upload__tip" slot="tip"></div>
</el-upload>
</el-form-item>
<el-form-item label="是否切换" v-if="formData.age">
<el-switch
v-model="formData.change2"
active-text="开"
inactive-text="关">
</el-switch>
</el-form-item>
<el-form-item label="切换音频" v-if="formData.age && formData.change2">
<el-upload
class="upload-demo"
:http-request="uploadFileAudio2"
:file-list="formData.audio2"
:on-exceed="handleExceed"
:on-remove="removeFileAudio2"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或<em>点击上传</em>
<br>
<span style="color: #888888;font-size: 12px">只能上传MP3文件</span>
</div>
</el-upload>
</el-form-item>
<div v-if="formData.change2 && formData.age" v-for="(data,index) in formData.audio2" class="mp3-block">
<h3>
{{data.name}}
</h3>
<el-form-item :label="`音频${index + 1}图片`">
<el-upload
class="avatar-uploader"
:http-request="uploadFileImage"
:data="data"
action="https://jsonplaceholder.typicode.com/posts/"
:on-success="uploadImgSuccess"
:show-file-list="false">
<img v-if="data.image" :src="data.image" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item :label="`音频${index + 1}标题`">
<el-input v-model="data.title"></el-input>
</el-form-item>
<el-form-item :label="`音频${index + 1}说明`">
<el-input v-model="data.tips"></el-input>
</el-form-item>
</div>
</div>
<div v-if="formData.type">
<el-form-item label="切换音频">
<el-upload
class="upload-demo"
:http-request="uploadFileAudio"
:file-list="formData.audio"
:on-exceed="handleExceed"
:on-remove="removeFileAudio"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或<em>点击上传</em>
<br>
<span style="color: #888888;font-size: 12px">只能上传MP3文件</span>
</div>
</el-upload>
</el-form-item>
<div v-for="(data,index) in formData.audio" class="mp3-block">
<h3>
{{data.name}}
</h3>
<el-form-item :label="`音频${index + 1}图片`">
<el-upload
class="avatar-uploader"
:http-request="uploadFileImage"
:data="data"
action="https://jsonplaceholder.typicode.com/posts/"
:on-success="uploadImgSuccess"
:show-file-list="false">
<img v-if="data.image" :src="data.image" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item :label="`音频${index + 1}标题`">
<el-input v-model="data.title"></el-input>
</el-form-item>
<el-form-item :label="`音频${index + 1}说明`">
<el-input v-model="data.tips"></el-input>
</el-form-item>
</div>
</div>
</el-form>
</template>
<script>
import {uploadFileApi} from "../../service/api";
export default {
props:[
'formData'
],
name: "videoUpload",
data(){
return {}
},
methods:{
uploadFileVideo(a){
if( a.file.type === 'video/mp4'){
uploadFileApi({file:a.file,type:'local',obj:a}).then(res=>{
this.$message({
type: 'success',
message: '上传成功!'
});
this.formData.video.push({name:res.name,url:process.env.IMAGE_URL_HEAD + res.url});
})
}else {
this.$message({
type: 'error',
message: '上传失败，图片格式或大小不正确!'
});
}
},
uploadFileVideo2(a){
if( a.file.type === 'video/mp4'){
uploadFileApi({file:a.file,type:'local',obj:a}).then(res=>{
this.$message({
type: 'success',
message: '上传成功!'
});
this.formData.video2.push({name:res.name,url:process.env.IMAGE_URL_HEAD + res.url});
})
}else {
this.$message({
type: 'error',
message: '上传失败，图片格式或大小不正确!'
});
}
},
uploadFileAudio(a){
if( a.file.type === 'audio/mp3'){
uploadFileApi({file:a.file,type:'local',obj:a}).then(res=>{
this.$message({
type: 'success',
message: '上传成功!'
});
a.onSuccess('上传成功')
this.formData.audio.push({name:res.name,url:process.env.IMAGE_URL_HEAD + res.url,title:'',tips:'',image:''});
})
}else {
this.$message({
type: 'error',
message: '上传失败，图片格式或大小不正确!'
});
}
},
uploadFileAudio2(a){
if( a.file.type === 'audio/mp3'){
uploadFileApi({file:a.file,type:'local',obj:a}).then(res=>{
this.$message({
type: 'success',
message: '上传成功!'
});
a.onSuccess('上传成功');
this.formData.audio2.push({name:res.name,url:process.env.IMAGE_URL_HEAD + res.url,title:'',tips:'',image:''});
})
}else {
this.$message({
type: 'error',
message: '上传失败，图片格式或大小不正确!'
});
this.form.imgList = [];
}
},
removeFileVideo(file,fileList){
this.formData.video = fileList
},
removeFileVideo2(file,fileList){
this.formData.video2 = fileList
},
removeFileAudio(file,fileList){
this.formData.audio = fileList
},
removeFileAudio2(file,fileList){
this.formData.audio2 = fileList
},
handleExceed(){
},
uploadFileImage(a){
if( a.file.size < 200 * 1024) {
uploadFileApi({file:a.file,type:'local',obj:a}).then(res=>{
a.data.image = process.env.IMAGE_URL_HEAD + res.url;
this.$message({
type: 'success',
message: '上传成功!'
});
a.onSuccess('上传成功')
});
}else{
this.$message({
type: 'error',
message: '文件过大'
});
}
},
uploadImgSuccess(a,b,c){
}
}
}
</script>
<style scoped lang="less">
.mp3-block{
border: 1px solid #ddd;
border-radius: 4px;
padding: 0 20px;
margin: 10px;
h3{
text-align: center;
}
}
</style>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
src/router/index.js
View file @ 061ab7f9
...@@ -33,13 +33,6 @@ const router =new Router({ ...@@ -33,13 +33,6 @@ const router =new Router({
skip_auth:true, skip_auth:true,
} }
}, },
{
path:'/preview/:id',
name:'preview',
component: e=>require(['@/components/preview'],e),
meta:{
}
},
{ {
path:'/upload', path:'/upload',
name:'upload', name:'upload',
......
src/service/index.js
View file @ 061ab7f9
...@@ -115,8 +115,12 @@ export function upload(url,json) { ...@@ -115,8 +115,12 @@ export function upload(url,json) {
let observable = qiniu.upload(json.file,res.data.data.new_name,res.data.data.token,putExtra,congif); let observable = qiniu.upload(json.file,res.data.data.new_name,res.data.data.token,putExtra,congif);
let observer = { let observer = {
next(res){ next(res){
let progress = Number(res.total.percent.toFixed(0));
if(json.obj){
json.obj.file.percent = progress;
json.obj.onProgress(json.obj.file);
}
if(store.state.progressList.find(i=>{return i.id === json.file.uid})){ if(store.state.progressList.find(i=>{return i.id === json.file.uid})){
let progress = Number(res.total.percent.toFixed(0));
store.dispatch('setProgress',{type: 'change',id: json.file.uid ,num: progress}); store.dispatch('setProgress',{type: 'change',id: json.file.uid ,num: progress});
} }
}, },
......
src/util/menuList.js
View file @ 061ab7f9
...@@ -299,7 +299,6 @@ export default [ ...@@ -299,7 +299,6 @@ export default [
component: e=>require(['@/components/weChatStatistics'],e), component: e=>require(['@/components/weChatStatistics'],e),
} }
}, },
] ]
},{ },{
name: '', name: '',
......
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