Commit f69b9d7a authored by wangwei's avatar wangwei

课包编辑 编写

parent 39df0d60
......@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<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">
<title>唱唱启蒙-后台</title>
</head>
......
......@@ -8,12 +8,13 @@
</el-form-item>
<el-form-item label="封面">
<el-upload
class="upload-demo"
drag
class="avatar-uploader"
:http-request="uploadFileImage"
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
: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>
......@@ -23,6 +24,7 @@
</template>
<script>
import {uploadFileApi} from "../../service/api";
export default {
name: "baseBlock",
props:[
......@@ -31,6 +33,27 @@
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>
......
<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"
name: "funBlock",
props:[
'formData'
],
data(){
return{
background:background,
luolaUrl:luolaUrl,
luolaComing:luolaComing,
playAudio:playAudio,
type:false,
range:0
}
},
components:{
videoUpload
}
}
</script>
<style scoped>
<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>
......@@ -6,7 +6,7 @@
</el-col>
<el-col :span="12">
<div :style="{backgroundImage:`url(${background})`}" class="view">
<div v-html="formData.look.content">
<div v-html="formData.look.content" class="view-content">
</div>
</div>
......@@ -37,10 +37,18 @@
<style scoped lang="less">
@import "../../util/public";
.view{
width: 275px;
height: 447px;
width: 335px;
height: 469px;
background-size: 100% 100%;
padding: 97px 49px 93px 51px;
padding: 140px 20px 77px 20px;
margin: auto;
.view-content{
background: white;
padding: 10px;
width: 315px;
height: 459px;
overflow: auto;
border-radius: 8px;
}
}
</style>
<template>
<div>
玩一玩
</div>
<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>
export default {
name: "playBlock"
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>
<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>
......@@ -24,10 +24,15 @@
<fun-block :formData="formData.content"/>
</el-tab-pane>
</el-tabs>
<span slot="footer" class="dialog-footer">
<el-button @click="editorObj.show= false">取 消</el-button>
<el-button type="primary" @click="onSave">保 存</el-button>
</span>
</el-dialog>
</template>
<script>
import {getElemenetDetailApi,editElementApi,addElementApi} from "../../service/api";
import baseBlock from '../mould/baseBlock'
import lookBlock from '../mould/lookBlock'
import playBlock from '../mould/playBlock'
......@@ -62,13 +67,107 @@
look:{
content:'',
},
play:{},
fun:{}
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
}
}
},
methods:{
onSave(){
if(this.editorObj.type===1){
alert(this.editorObj.category_id)
let json = {
category_id:this.editorObj.category_id,
title:this.formData.title,
content:JSON.stringify(this.formData.content),
cover:this.formData.cover
};
editElementApi(this.editorObj.id,json)
}else if(this.editorObj.type===0){
alert(this.editorObj.category_id)
let json = {
category_id:this.editorObj.category_id,
title:this.formData.title,
content:JSON.stringify(this.formData.content),
cover:this.formData.cover
};
addElementApi(json,0).then(res=>{
})
}
}
},
watch:{
'editorObj.id'(value){
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>
......
......@@ -147,20 +147,23 @@
if(this.form.center){
ImageStyle = 'display:block;margin:auto'
}
let str= `<img src="${this.form.imgList[0]}" style="${ImageStyle}"/>`;
let str= `<img src="${this.form.imgList[0].url}" style="${ImageStyle}"/>`;
this.insertContent(str)
this.dialogVisible = false
},
audioInter(){
if(this.radio < 1){
if(this.radio.length < 1){
this.$message({
type: 'error',
message: '请选择音频'
});
return false
}
let str = `<audio src='${this.radio[0]}' controls controlsList="nodownload">`
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){
......@@ -170,7 +173,7 @@
type: 'success',
message: '上传成功!'
});
this.form.imgList = [process.env.IMAGE_URL_HEAD + res.url];
this.form.imgList = [{name:res.name,url:process.env.IMAGE_URL_HEAD + res.url}];
})
}else {
this.$message({
......@@ -188,7 +191,7 @@
type: 'success',
message: '上传成功!'
});
this.radio = [process.env.IMAGE_URL_HEAD + res.url];
this.radio = [{name:res.name,url:res.url}];
})
}else {
this.$message({
......
This diff is collapsed.
......@@ -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 observer = {
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})){
let progress = Number(res.total.percent.toFixed(0));
store.dispatch('setProgress',{type: 'change',id: json.file.uid ,num: progress});
}
},
......
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