Skip to content

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

课包编辑 编写

parent 39df0d60
Hide whitespace changes
Inline Side-by-side
Showing with 992 additions and 28 deletions
index.html
View file @ f69b9d7a
...@@ -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
View file @ f69b9d7a
...@@ -8,12 +8,13 @@ ...@@ -8,12 +8,13 @@
</el-form-item> </el-form-item>
<el-form-item label="封面"> <el-form-item label="封面">
<el-upload <el-upload
class="upload-demo" class="avatar-uploader"
drag :http-request="uploadFileImage"
action="https://jsonplaceholder.typicode.com/posts/" action="https://jsonplaceholder.typicode.com/posts/"
multiple> :on-success="uploadImgSuccess"
<i class="el-icon-upload"></i> :show-file-list="false">
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <img v-if="formData.cover" :src="formData.cover" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -23,6 +24,7 @@ ...@@ -23,6 +24,7 @@
</template> </template>
<script> <script>
import {uploadFileApi} from "../../service/api";
export default { export default {
name: "baseBlock", name: "baseBlock",
props:[ props:[
...@@ -31,6 +33,27 @@ ...@@ -31,6 +33,27 @@
data(){ data(){
return{ 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> </script>
......
src/components/mould/funBlock.vue
View file @ f69b9d7a
<template> <template>
<div> <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> </div>
</template> </template>
<script> <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 { 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> </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> </style>
src/components/mould/lookBlock.vue
View file @ f69b9d7a
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div :style="{backgroundImage:`url(${background})`}" class="view"> <div :style="{backgroundImage:`url(${background})`}" class="view">
<div v-html="formData.look.content"> <div v-html="formData.look.content" class="view-content">
</div> </div>
</div> </div>
...@@ -37,10 +37,18 @@ ...@@ -37,10 +37,18 @@
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.view{ .view{
width: 275px; width: 335px;
height: 447px; height: 469px;
background-size: 100% 100%; background-size: 100% 100%;
padding: 97px 49px 93px 51px; padding: 140px 20px 77px 20px;
margin: auto; margin: auto;
.view-content{
background: white;
padding: 10px;
width: 315px;
height: 459px;
overflow: auto;
border-radius: 8px;
}
} }
</style> </style>
src/components/mould/playBlock.vue
View file @ f69b9d7a
<template> <template>
<div> <div>
玩一玩 <el-row :gutter="40">
</div> <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> </template>
<script> <script>
export default { import luolaUrl from '../../assets/mould/playLuola.png'
name: "playBlock" 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> </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> </style>
src/components/resources/editorDialog.vue
View file @ f69b9d7a
...@@ -24,10 +24,15 @@ ...@@ -24,10 +24,15 @@
<fun-block :formData="formData.content"/> <fun-block :formData="formData.content"/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </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> </el-dialog>
</template> </template>
<script> <script>
import {getElemenetDetailApi,editElementApi,addElementApi} from "../../service/api";
import baseBlock from '../mould/baseBlock' import baseBlock from '../mould/baseBlock'
import lookBlock from '../mould/lookBlock' import lookBlock from '../mould/lookBlock'
import playBlock from '../mould/playBlock' import playBlock from '../mould/playBlock'
...@@ -62,13 +67,107 @@ ...@@ -62,13 +67,107 @@
look:{ look:{
content:'', 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 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> </script>
......
src/components/textarea/index.vue
View file @ f69b9d7a
...@@ -147,20 +147,23 @@ ...@@ -147,20 +147,23 @@
if(this.form.center){ if(this.form.center){
ImageStyle = 'display:block;margin:auto' 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.insertContent(str)
this.dialogVisible = false this.dialogVisible = false
}, },
audioInter(){ audioInter(){
if(this.radio < 1){ if(this.radio.length < 1){
this.$message({ this.$message({
type: 'error', type: 'error',
message: '请选择音频' message: '请选择音频'
}); });
return false 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); this.insertContent(str);
console.log(this.lookData.content);
this.dialogVisible = false this.dialogVisible = false
}, },
uploadFile(a){ uploadFile(a){
...@@ -170,7 +173,7 @@ ...@@ -170,7 +173,7 @@
type: 'success', type: 'success',
message: '上传成功!' 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 { }else {
this.$message({ this.$message({
...@@ -188,7 +191,7 @@ ...@@ -188,7 +191,7 @@
type: 'success', type: 'success',
message: '上传成功!' message: '上传成功!'
}); });
this.radio = [process.env.IMAGE_URL_HEAD + res.url]; this.radio = [{name:res.name,url:res.url}];
}) })
}else { }else {
this.$message({ this.$message({
......
src/components/textarea/videoUpload.vue 0 → 100644
View file @ f69b9d7a
<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/service/index.js
View file @ f69b9d7a
...@@ -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});
} }
}, },
......
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