Skip to content

C
confucius
Commit f6ef0ecc authored by Mac's avatar Mac
Browse files
Options

音频、视频、小程序页面

parent a926434a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 313 additions and 243 deletions
src/components/enterprise/material/audiomaterial.vue
View file @ f6ef0ecc
......@@ -6,10 +6,10 @@
<q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="add" label="上传音频"
@click="goadd()"></q-btn>
</div>
<div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;">
<q-card class="imgcard" v-for="(x,y) in data" :key='y'
<div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;" v-if="dataList.length>0">
<q-card class="imgcard" v-for="(x,y) in dataList" :key='y'
:style="{border:x.check==true?'2px solid #91d5ff':'2px solid #FFF'}"
@click="data[y].check = !data[y].check">
@click="dataList[y].check = !dataList[y].check,$forceUpdate();">
<q-card-section>
<div
style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
......@@ -18,123 +18,74 @@
<i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;"
@click.stop="goedit(x)"></i>
</div>
<audio controls="controls" v-if='x.Content' style="margin-top: 10px;" class="imgstyle">
<source :src="x.Content" type="audio/ogg">
<source :src="x.Content" type="audio/mpeg">
<audio controls="controls" v-if='x.AudioModel && x.AudioModel.AudioPath' style="margin-top: 10px;" class="imgstyle">
<source :src="x.AudioModel.AudioPath" type="audio/ogg">
<source :src="x.AudioModel.AudioPath" type="audio/mpeg">
</audio>
<div class="onetext" style="margin-top: 5px;">上传者:{{x.CreatorName}}</div>
<div class="onetext" style="margin-top: 5px;">来源:{{x.source}}</div>
<div class="onetext" style="margin-top: 5px;">上传者:{{x.UpdateByName}}</div>
<div class="onetext" style="margin-top: 5px;">分组:{{x.MediumGroupName}}</div>
</q-card-section>
</q-card>
</div>
</div>
<q-dialog v-model="Isadd" persistent>
<q-card style="width: 520px; max-width: 80vw;">
<q-card-section>
<div class="text-h6">新建图文</div>
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
<q-select filled stack-label option-value="ID" option-label="Name" v-model="addMsg.classifyId"
ref="ID" :options="classifyList" label="分组" :dense="false" emit-value map-options />
<div style="margin-top: 15px;">
<div style="width:70px">上传音频:</div>
<audio controls="controls" v-if='addMsg.img' style="margin-top: 10px;">
<source :src="addMsg.img" type="audio/ogg">
<source :src="addMsg.img" type="audio/mpeg">
</audio>
<div style="margin-top: 15px;">
<el-upload class="avatar-uploader " action="" :before-upload="uploadFile"
:show-file-list="false">
<q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传"></q-btn>
</el-upload>
<div style="margin-top: 20px;">
(音频上传大小不超过2MB，播放长度不超过60s,支持AMR,MP3格式。)
</div>
<div style="width: 100%;height: 50px;line-height: 50px;text-align: center;" v-if="dataList.length==0">暂无数据</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="Isadd = false" />
<q-btn color="accent" class="q-mr-md" label="添加" @click="submit()" />
</q-card-actions>
</q-card>
</q-dialog>
</div>
<div v-if="Isadd==true">
<alladdsc :allclassifyList="allclassifyList" type='4' @editsuccess="getchildren" :editobj='editobj' @getcancel='Isadd=false'></alladdsc>
</div>
</div>
</template>
<script>
import {
UploadSelfFile
} from "../../../api/common/common"; //上传图片
const addobj = { Id: 0, classifyId: '', img: '', }
import alladdsc from './allAddSC'
export default {
name: "audiomaterial",
components: {
alladdsc,
},
props: {
dataList: {
type: Array,
default: [],
},
allclassifyList:{
type: Array,
default: [],
}
},
data() {
return {
loading: false,
Isadd: false,
data: [{
Type: 1,
title: '测试文本.png',
Content: 'http://192.168.20.214:8130/EduSystem/Test/Upload/course/202108060448210170000000001.mp3',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
}, {
Type: 1,
title: '测试文本.png',
Content: 'http://192.168.20.214:8130/EduSystem/Test/Upload/course/202108060448210170000000001.mp3',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
}, {
Type: 1,
title: '测试文本.png',
Content: 'http://192.168.20.214:8130/EduSystem/Test/Upload/course/202108060448210170000000001.mp3',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
},],
pageCount: 0,
msg: {
pageIndex: 1,
pageSize: 18,
},
classifyList: [
{ Name: '活动', ID: 1, },
{ Name: '产品', ID: 2, },
{ Name: '校园', ID: 3, },
],
addMsg: Object.assign({}, addobj),
audioDuration:0,
editobj:null
}
},
created() {
console.log('进去所有页面')
},
methods: {
changePage(e) {
},
goadd() {
this.Isadd = true;
this.addMsg = Object.assign({}, addobj)
this.editobj=null
},
goedit(x) {
this.Isadd = true;
this.addMsg.img = x.Content
goedit(row){
this.editobj= {}
this.editobj.Id = row.Id;
this.editobj.MediaGroupId = row.MediaGroupId;
this.editobj.Type = row.Type;
this.editobj.AudioModel = JSON.parse(JSON.stringify(row.AudioModel)) ;
this.Isadd = true
},
getchildren(){
this.$emit('editsuccess')
this.Isadd = false
},
uploadFile(file) {//图片上传
// 文件类型进行判断
const isAudio = file.type === "audio/mp3" || file.type === "audio/mpeg";
......@@ -175,22 +126,8 @@
}
},
getTimes(file) {
var content = file;
let audioDuration= 0
//获取录音时长
var url = URL.createObjectURL(content);
//经测试，发现audio也可获取视频的时长
var audioElement = new Audio(url);
audioElement.addEventListener("loadedmetadata", (_event) => {
audioDuration = parseInt(audioElement.duration);
});
return audioDuration
},
submit() {//提交
}
}
}
......
src/components/enterprise/material/imgmaterial.vue
View file @ f6ef0ecc
......@@ -9,7 +9,7 @@
<div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;" v-if="dataList.length>0">
<q-card class="imgcard" v-for="(x,y) in dataList" :key='y'
:style="{border:x.check==true?'2px solid #91d5ff':'2px solid #FFF'}"
@click="dataList[y].check = !dataList[y].check,$forceUpdate();">
@click="dataList[y].check = !dataList[y].check,$forceUpdate()">
<q-card-section>
<div
style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
......@@ -20,7 +20,7 @@
<q-img :src="x.ImageModel && x.ImageModel.ImagePath?x.ImageModel.ImagePath:''" class="imgstyle">
<div class="absolute-bottom text-subtitle1 text-center onetext"
style="padding: 0;padding: 0 5px;font-size: 12px;" >
{{x.ImageModel.ImageName}}
{{x.ImageModel && x.ImageModel.ImageName ?x.ImageModel.ImageName:''}}
</div>
</q-img>
<div class="onetext" style="margin-top: 5px;">上传者:{{x.UpdateByName}}</div>
......@@ -32,7 +32,7 @@
<div style="width: 100%;height: 50px;line-height: 50px;text-align: center;" v-if="dataList.length==0">暂无数据</div>
</div>
<div v-if="Isadd==true">
<div v-if="Isadd==true">
<alladdsc :allclassifyList="allclassifyList" type='2' @editsuccess="getchildren" :editobj='editobj' @getcancel='Isadd=false'></alladdsc>
</div>
......@@ -74,7 +74,6 @@
this.editobj=null
},
goedit(row){
this.Isadd = true;
this.editobj= {}
this.editobj.Id = row.Id;
this.editobj.MediaGroupId = row.MediaGroupId;
......
src/components/enterprise/material/imgtextmaterial.vue
View file @ f6ef0ecc
......@@ -9,7 +9,7 @@
<div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;">
<q-card class="imgcard" v-for="(x,y) in dataList" :key='y'
:style="{border:x.check==true?'2px solid #91d5ff':'2px solid #FFF'}"
@click="dataList[y].check = !dataList[y].check">
@click="dataList[y].check = !dataList[y].check,$forceUpdate();">
<q-card-section>
<div
style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
......@@ -21,7 +21,7 @@
<q-img :src="x.ImgTextModel && x.ImgTextModel.ImgPath?x.ImgTextModel.ImgPath:''" class="imgstyle">
<div class="absolute-bottom text-subtitle1 text-center onetext"
style="padding: 0;padding: 0 5px;font-size: 12px;">
{{x.ImgTextModel.Title}}
{{x.ImgTextModel&& x.ImgTextModel.Title?x.ImgTextModel.Title:''}}
</div>
</q-img>
<div class="onetext" style="margin-top: 5px;">上传者:{{x.UpdateByName}}</div>
......
src/components/enterprise/material/videomaterial.vue
View file @ f6ef0ecc
......@@ -6,10 +6,10 @@
<q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="add" label="上传视频"
@click="goadd()"></q-btn>
</div>
<div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;">
<q-card class="imgcard" v-for="(x,y) in data" :key='y'
<div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;" v-if="dataList.length>0">
<q-card class="imgcard" v-for="(x,y) in dataList" :key='y'
:style="{border:x.check==true?'2px solid #91d5ff':'2px solid #FFF'}"
@click="data[y].check = !data[y].check">
@click="dataList[y].check = !dataList[y].check,$forceUpdate()">
<q-card-section>
<div
style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
......@@ -18,145 +18,77 @@
<i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;"
@click.stop="goedit(x)"></i>
</div>
<video width="260" height="180" controls="controls" >
<source :src="x.Content" type="video/ogg" />
<source :src="x.Content" type="video/mp4" />
<source :src="x.Content" type="video/webm" />
<video width="260" height="180" controls="controls" v-if="x.VideoModel && x.VideoModel.VideoPath">
<source :src="x.VideoModel.VideoPath" type="video/ogg" />
<source :src="x.VideoModel.VideoPath" type="video/mp4" />
<source :src="x.VideoModel.VideoPath" type="video/webm" />
</video>
<div class="onetext" style="margin-top: 5px;">上传者:{{x.CreatorName}}</div>
<div class="onetext" style="margin-top: 5px;">来源:{{x.source}}</div>
<div class="onetext" style="margin-top: 5px;">上传者:{{x.UpdateByName}}</div>
<div class="onetext" style="margin-top: 5px;">分组:{{x.MediumGroupName}}</div>
</q-card-section>
</q-card>
</div>
</div>
<q-dialog v-model="Isadd" persistent>
<q-card style="width: 520px; max-width: 80vw;">
<q-card-section>
<div class="text-h6">新增视频</div>
</q-card-section>
<q-separator />
<q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
<q-select filled stack-label option-value="ID" option-label="Name" v-model="addMsg.classifyId"
ref="ID" :options="classifyList" label="分组" :dense="false" emit-value map-options />
<div style="margin-top: 15px;">
<div style="width:70px">上传视频:</div>
<video width="320" height="240" controls="controls" v-if="addMsg.img!=''" >
<source :src="addMsg.img" type="video/ogg" />
<source :src="addMsg.img" type="video/mp4" />
<source :src="addMsg.img" type="video/webm" />
</video>
<div style="margin-top: 15px;">
<el-upload class="avatar-uploader " action="" :before-upload="uploadFile"
:show-file-list="false">
<q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传"></q-btn>
</el-upload>
<div style="margin-top: 20px;">
(视频上传大小不超过10M，支持MP4格式)
</div>
</div>
</div>
<div style="width: 100%;height: 50px;line-height: 50px;text-align: center;" v-if="dataList.length==0">暂无数据</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="Isadd = false" />
<q-btn color="accent" class="q-mr-md" label="添加" @click="submit()" />
</q-card-actions>
</q-card>
</q-dialog>
</div>
<div v-if="Isadd==true">
<alladdsc :allclassifyList="allclassifyList" type='5' @editsuccess="getchildren" :editobj='editobj' @getcancel='Isadd=false'></alladdsc>
</div>
</div>
</template>
<script>
import {
UploadSelfFile
} from "../../../api/common/common"; //上传图片
const addobj = { Id: 0, classifyId: '', img: '', }
import alladdsc from './allAddSC'
export default {
name: "videomaterial",
components: {
alladdsc,
},
props: {
dataList: {
type: Array,
default: [],
},
allclassifyList:{
type: Array,
default: [],
}
},
data() {
return {
loading: false,
Isadd: false,
data: [{
Type: 1,
title: '测试文本.png',
Content: 'http://192.168.20.214:8130/EduSystem/Test/Upload/course/202108060508405370000000004.mp4',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
}, {
Type: 1,
title: '测试文本.png',
Content: 'http://192.168.20.214:8130/EduSystem/Test/Upload/course/202108060508405370000000004.mp4',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
}, {
Type: 1,
title: '测试文本.png',
Content: 'http://192.168.20.214:8130/EduSystem/Test/Upload/course/202108060508405370000000004.mp4',
source: '本地上传',
CreatorName: '小张',
check: false,
UpdateTime: '2021-08-04 15:48'
},],
pageCount: 0,
msg: {
pageIndex: 1,
pageSize: 18,
},
classifyList: [
{ Name: '活动', ID: 1, },
{ Name: '产品', ID: 2, },
{ Name: '校园', ID: 3, },
],
addMsg: Object.assign({}, addobj),
audioDuration: 0,
editobj:null
}
},
created() {
console.log('进去所有页面')
},
methods: {
changePage(e) {
},
goadd() {
this.Isadd = true;
this.addMsg = Object.assign({}, addobj)
this.editobj=null
},
goedit(x) {
this.Isadd = true;
this.addMsg.img = x.Content
goedit(row){
this.editobj= {}
this.editobj.Id = row.Id;
this.editobj.MediaGroupId = row.MediaGroupId;
this.editobj.Type = row.Type;
this.editobj.VideoModel = JSON.parse(JSON.stringify(row.VideoModel)) ;
this.Isadd = true
},
getchildren(){
this.$emit('editsuccess')
this.Isadd = false
},
uploadFile(file) {//图片上传
// 文件类型进行判断
const isLt10M = file.size / 1024 / 1024 < 10;
if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) == -1) {
this.$q.notify({
type: 'negative',
message: `请上传正确的视频格式!`,
position: 'top'
})
return false;
}
if (!isLt10M) {
this.$q.notify({
type: 'negative',
message: `上传视频大小不能超过10MB哦!`,
position: 'top'
})
return false;
}
UploadSelfFile("course", file, res => {
if (res.Code == 1) {
this.addMsg.img = res.FileUrl;
......@@ -164,11 +96,6 @@
}
});
},
submit() {//提交
}
}
}
......
src/pages/enterprise/materialManage.vue
View file @ f6ef0ecc
......@@ -32,10 +32,13 @@
 <imgtextmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"></imgtextmaterial>
</div>
<div v-if="tabCheck=='4'">
 <audiomaterial></audiomaterial>
 <audiomaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"></audiomaterial>
</div>
<div v-if="tabCheck=='5'">
 <videomaterial></videomaterial>
 <videomaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"></videomaterial>
</div>
<div v-if="tabCheck=='6'">
 <appletmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"></appletmaterial>
</div>
<div v-if="tabCheck=='7'">
 <filematerial></filematerial>
......@@ -63,7 +66,7 @@
import imgtextmaterial from '../../components/enterprise/material/imgtextmaterial'
import audiomaterial from '../../components/enterprise/material/audiomaterial'
import videomaterial from '../../components/enterprise/material/videomaterial'
import appletmaterial from '../../components/enterprise/material/appletmaterial'
import filematerial from '../../components/enterprise/material/filematerial'
export default {
......@@ -74,6 +77,7 @@
imgtextmaterial,
audiomaterial,
videomaterial,
appletmaterial,
filematerial
},
meta: {
......@@ -128,7 +132,6 @@
this.dataList.forEach(x=>{
x.check= false
})
console.log( this.dataList)
})
},
......
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