Commit cdc080ac authored by zhengke's avatar zhengke

修改

parent eed41121
......@@ -614,6 +614,58 @@ export function GetContributePlatfrom(data) {
})
}
/**
* 新增修改素材
*/
export function SetContributeMediumInfo(data) {
return request({
url: '/QYContribute/SetContributeMediumInfo',
method: 'post',
data
})
}
/**
* 素材分组转移
*/
export function SetContributeMediumMoveGroup(data) {
return request({
url: '/QYContribute/SetContributeMediumMoveGroup',
method: 'post',
data
})
}
/**
* 获取素材分组下拉列表
*/
export function GetContributeMediumGroupList(data) {
return request({
url: '/QYContribute/GetContributeMediumGroupList',
method: 'post',
data
})
}
/**
* 批量删除素材
*/
export function DelContributeMediumBatch(data) {
return request({
url: '/QYContribute/DelContributeMediumBatch',
method: 'post',
data
})
}
......
<template>
<div class="allAddSC" style="padding: 0;margin: 0;">
<!-- 图片新增修改 -->
<div v-if="type==2">
<div v-if="type==1">
<q-dialog v-model="Isadd" persistent>
<q-card style="width: 520px; max-width: 80vw;">
<q-card-section>
......@@ -20,12 +20,25 @@
<div style="margin-top: 15px;">
<div style="width:70px">上传图片:</div>
<div style="margin-top: 15px;">
<el-upload class="avatar-uploader materialupload" action="" :before-upload="uploadFile"
<el-upload
class="avatar-uploader materialupload"
ref="upload"
:action="importFileUrl2"
:multiple="false"
:on-success="successUpload"
:show-file-list="false"
accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp">
<i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;" v-if="imgPath==''"></i>
<q-img v-else :src="imgPath" style="width: 110px;height: 110px;border-radius: 6px;display: flex;">
</q-img>
</el-upload>
{{imgPath}}
<!-- <el-upload class="avatar-uploader materialupload" action="" :before-upload="uploadFile"
accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp" :show-file-list="false">
<i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;" v-if="addMsg.Path==''"></i>
<q-img v-else :src="addMsg.Path" style="width: 110px;height: 110px;border-radius: 6px;display: flex;">
</q-img>
</el-upload>
</el-upload> -->
<div style="margin-top: 20px;">
(图片大小不超过2M,图片名不能重复,支持JPG,JPEG及PNG格式)
</div>
......@@ -42,7 +55,7 @@
</q-dialog>
</div>
<!-- //音频 -->
<div v-if="type==4">
<div v-if="type==2">
<q-dialog v-model="Isadd" persistent>
<q-card style="width: 520px; max-width: 80vw;">
<q-card-section>
......@@ -53,20 +66,19 @@
<q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId"
@input="$forceUpdate()" ref="Id" :options="allclassifyList" label="分组" :dense="false" emit-value
map-options />
<q-select filled stack-label option-value="Id" option-label="Name" class="q-mt-lg" v-model="addMsg.PlatformType"
@input="$forceUpdate()" ref="Id" :options="platTypeList" label="平台类型" :dense="false" emit-value
map-options />
<q-input clearable filled v-model="addMsg.MediaName" placeholder="请输入音频名称" class="q-mt-lg" maxlength="20" />
<div style="margin-top: 15px;">
<div style="width:70px">上传音频:</div>
<!-- <audio controls="controls" style="margin-top: 10px;">
<source :src="addMsg.AudioModel.AudioPath" > -->
<!-- </audio> -->
<q-circular-progress v-if='addMsg.AudioModel.AudioPath' show-value class="text-red q-ma-md"
<q-circular-progress v-if='addMsg.Path' show-value class="text-red q-ma-md"
:max='duration' :value="timevalue" size="70px" :thickness="0.2" color="light-blue" track-color="grey-3"
@click.stop="playVoice(addMsg.AudioModel.AudioPath)">
@click.stop="playVoice(addMsg.Path)">
<q-icon name="volume_up" class="q-mr-xs" />
<span style="font-size: 11px;">
{{timevalue?timevalue.toFixed(1):0}}
</span>
</q-circular-progress>
<div style="margin-top: 15px;">
<el-upload class="avatar-uploader " action="" :before-upload="uploadFile" :show-file-list="false">
......@@ -77,10 +89,8 @@
<div style="margin-top: 20px;">
(音频上传大小不超过2MB,播放长度不超过60s,支持AMR格式。)
</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
......@@ -91,7 +101,7 @@
</q-dialog>
</div>
<!-- 视频 -->
<div v-if="type==5">
<div v-if="type==3">
<q-dialog v-model="Isadd" persistent>
<q-card style="width: 520px; max-width: 80vw;">
<q-card-section>
......@@ -137,10 +147,10 @@
import {
wechatUploadSelfFile,
UploadFileToSystem
UploadSelfFile
} from "../../../api/common/common"; //上传图片
import {
setWeChatMediumInfo, //新增修改素材
SetContributeMediumInfo, //新增修改素材
GetContributePlatfrom
} from '../../../api/system/wechat';
export default {
......@@ -178,15 +188,14 @@
platTypeList: [], //平台类型
duration: 0, //音频中时长
timevalue: 0, //音频播放到时间点
playRec: null
playRec: null,
imgPath:'',
importFileUrl2: this.domainManager().UploadFileUrl2,
}
},
created() {
if (this.editobj != null) {
this.addMsg = this.editobj
this.addMsg.Is_Sync = 1
} else {
this.gettype()
}
},
mounted(){
......@@ -202,30 +211,8 @@
}
})
},
gettype() {
this.addMsg.Id = 0;
this.addMsg.Type = this.type
this.addMsg.Is_Sync = 1;
this.addMsg.MediaGroupId = '';
if (this.type == 2) { //图片
this.addMsg.ImageModel = {
ImageName: '',
ImagePath: ''
};
} else if (this.type == 4) { //音频
this.addMsg.AudioModel = {
AudioName: '',
AudioPath: '',
};
} else if (this.type == 5) { //视频
this.addMsg.VideoModel = {
VideoName: '',
VideoPath: '',
};
}
},
setWeChat() {
setWeChatMediumInfo(this.addMsg).then(res => {
SetContributeMediumInfo(this.addMsg).then(res => {
this.$q.notify({
icon: 'iconfont icon-chenggong',
color: 'accent',
......@@ -268,10 +255,13 @@
this.setWeChat()
},
successUpload(file){
if(file.Code==1){
this.imgPath = this.domainManager().DomainUrl+file.Data.HttpPath;
this.addMsg.Path = file.Data.Path;
}
},
uploadFile(files) { //图片上传
console.log('进入');
console.log(files,'files');
console.log(this.type,'typeee');
if (this.type == 1) { //图文和图片、小程序的时候处理
let types = ['image/jpeg', 'image/jpg', 'image/png'];
const isImage = types.includes(files.type);
......@@ -291,30 +281,29 @@
position: 'top'
})
} else {
UploadSelfFile('wechatcatalogue', files, 1 , res => {
console.log(res,'数据');
if (res.Code == 1) {
}
})
// UploadSelfFile('wechatcatalogue', files, res => {
//           console.log(res, '数据');
//           if (res.Code == 1) {
// this.addMsg.Path = res.FileUrl;
//           }
//         })
}
}
if (this.type == 4) { //音频上传
if (this.type == 2) { //音频上传
// 文件类型进行判断
const isAudio = files.type === "audio/amr";
let types = ['mp3', 'wma', 'wav','amr'];
const isAudio = types.includes(files.type);
const isLt2M = files.size / 1024 / 1024 < 2;
let Times = this.getTimes(files)
const isTime60S = Times >= 60 ? true : false;
// 获取时长
;
if (!isAudio) {
this.$q.notify({
type: 'negative',
message: `上传文件只能是AMR格式!`,
position: 'top'
})
} else {
// if (!isAudio) {
// this.$q.notify({
// type: 'negative',
// message: `上传文件只能是mp3、wma、wav、amr格式!`,
// position: 'top'
// })
// } else {
if (!isLt2M) {
this.$q.notify({
type: 'negative',
......@@ -329,8 +318,7 @@
position: 'top'
})
} else {
wechatUploadSelfFile('wechatcatalogue', files, res => {
UploadSelfFile('wechatcatalogue', files, res => {
if (res.Code == 1) {
let amr = new BenzAMRRecorder()
let that = this
......@@ -343,18 +331,17 @@
position: 'top'
})
} else {
that.addMsg.AudioModel.AudioName = res.FileName;
that.addMsg.AudioModel.AudioPath = res.FileUrl;
that.$forceUpdate();
that.addMsg.Path = res.FileUrl;
that.addMsg.Minutes = that.duration;
}
}).catch((e) => {
})
}
})
}
}
// }
}
}
if (this.type == 5) { //视频上传
......@@ -391,10 +378,12 @@
let audioDuration = 0
//获取录音时长
var url = URL.createObjectURL(content);
console.log(url,'进入url');
//经测试,发现audio也可获取视频的时长
var audioElement = new Audio(url);
audioElement.addEventListener("loadedmetadata", (_event) => {
audioElement.addEventListener("loadedmetadata", function (_event) {
audioDuration = parseInt(audioElement.duration);
console.log(audioDuration,'audioDuration');
});
return audioDuration
},
......@@ -417,7 +406,6 @@
return
}
this.setWeChat()
},
saveaudio() { //音频
if (this.addMsg.MediaGroupId == '') {
......@@ -428,7 +416,7 @@
})
return
}
if (this.addMsg.AudioModel.AudioPath == '') {
if (this.addMsg.Path == '') {
this.$q.notify({
type: 'negative',
message: `请上传音频`,
......
<template>
<div class="audiomaterial" style="padding: 0;margin: 0;">
<div class="page-content">
<div>
<q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="cloud_upload" label="上传音频"
@click="goadd()"></q-btn>
<q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="delete" label="批量删除"
@click="pldelete()"></q-btn>
<q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="edit" label="修改分组"
@click="plmove()"></q-btn>
</div>
<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();">
<q-card-section>
<div
style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
<span>{{x.UpdateTime}}</span>
<q-icon
v-if="x.Media_Id && x.Media_Id!=''"
size="20px" name="iconfont icon-yiqueren" color="green" >
<q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
已更新
</q-tooltip>
</q-icon>
<q-icon
v-if="x.Media_Id==''"
size="20px" name="iconfont icon-weiwancheng" color="red" >
<q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
未更新
</q-tooltip>
</q-icon>
</div>
<q-circular-progress
show-value
class="text-red q-ma-md"
:max='x.duration'
:value="x.timevalue"
size="70px"
:thickness="0.2"
color="light-blue"
track-color="grey-3"
@click.stop="playVoice(x.AudioModel.AudioPath,y)"
>
<q-icon name="volume_up" class="q-mr-xs" />
<span style="font-size: 11px;">
{{x.timevalue?x.timevalue.toFixed(1):0}}
</span>
</q-circular-progress>
<div class="onetext" style="margin-top: 5px;">
{{x.AudioModel&&x.AudioModel.AudioName?x.AudioModel.AudioName:''}}</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 style="width: 100%;height: 50px;line-height: 50px;text-align: center;" v-if="dataList.length==0">暂无数据
</div>
</div>
<div v-if="Isadd==true">
<alladdsc :allclassifyList="allclassifyList" type='2' @editsuccess="getchildren" :editobj='editobj'
@getcancel='Isadd=false'></alladdsc>
</div>
</div>
</template>
<script>
import BenzAMRRecorder from 'benz-amr-recorder'
import alladdsc from '../components/alladdsc'
export default {
name: "audiomaterial",
components: {
alladdsc,
},
props: {
dataList: {
type: Array,
default: [],
},
allclassifyList: {
type: Array,
default: [],
}
},
data() {
return {
loading: false,
Isadd: false,
editobj: null,
playRec: null, //播放对象
voiceActive: null,
}
},
created() {
},
destroyed(){//页面销毁时候清楚音频的播放
if(this.playRec){
if (this.playRec.isPlaying()) {
this.playRec.stop()
}
}
},
methods: {
goadd() {
this.Isadd = true;
this.editobj = null
},
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
},
pldelete() {
this.$emit('getdelete')
},
plmove() {
this.$emit('getmove')
},
playVoice(_url, index) {
// TODO 这里暂时没处理 音频播放中暂停
let vm = this
if(vm.voiceActive && (vm.voiceActive !=index)){//如果再放一个点击另一个上一个清0
vm.dataList[vm.voiceActive].timevalue = 0
}
if (vm.playRec !== null) {
vm.stopPlayVoice(index)
}
vm.playRec = new BenzAMRRecorder()
//⚠️注意跨域问题
vm.playRec.initWithUrl(_url).then(function () {
vm.voiceActive = index
vm.playRec.play()
let timer = setInterval(() => {
vm.dataList[index].timevalue +=0.1
vm.$forceUpdate();
}, 100);
vm.playRec.onEnded(function () {
vm.voiceActive = null;
vm.dataList[index].timevalue = 0
clearInterval(timer);//停止
setTimeout(() => {
vm.$forceUpdate();
}, 1000);
})
}).catch((e) => {
vm.$message.error('播放录音失败')
})
},
//停止播放
stopPlayVoice() {
if(this.playRec){
if (this.playRec.isPlaying()) {
this.playRec.stop()
}
}
},
}
}
</script>
<style>
.audiomaterial .Sysuser_Date .el-input--prefix .el-input__inner {
background-color: red;
border: 0;
}
.audiomaterial .state-item {
padding: 2px 5px;
border-radius: 3px;
text-align: center;
font-size: 10px;
}
.audiomaterial .frIdlist {
padding: 3px 10px;
border-radius: 3px;
background: #EEEEEF;
align-items: center;
justify-content: center;
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer;
}
.class-popover .q-pr-lg {
padding-right: 0;
margin-top: 20px;
}
.audiomaterial .el-date-editor.el-input {
width: 100%;
}
.audiomaterial .el-date-editor.el-input input {
background-color: transparent !important;
}
.audiomaterial .el-range-editor .el-range-input {
background: none;
}
.Sysuser_Date .el-input__inner {
background: transparent !important;
border: 0 !important;
}
.audiomaterial .el-drawer.rtl {
overflow: inherit;
}
.audiomaterial .imgcard {
width: 300px;
margin: 0 15px 15px 0
}
.audiomaterial .imgstyle {
width: 100%;
height: 45px;
border-radius: 0;
}
.audiomaterial .onetext {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 260px;
}
</style>
\ No newline at end of file
......@@ -20,7 +20,7 @@
<div style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
<span>{{x.UpdateTime}}</span>
</div>
<q-img :src="x.Path" class="imgstyle">
<q-img :src="x.ImageUrl" class="imgstyle">
<div class="absolute-bottom text-subtitle1 text-center onetext"
style="padding: 0;padding: 0 5px;font-size: 12px;">
</div>
......@@ -39,7 +39,7 @@
</q-icon>
</q-img>
<div class="onetext" style="margin-top: 5px;">上传者:{{x.UpdateBy}}</div>
<div class="onetext" style="margin-top: 5px;">分组:{{x.MediaName}}</div>
<div class="onetext" style="margin-top: 5px;">分组:{{x.MediaGroupName}}</div>
</q-card-section>
</q-card>
......@@ -49,7 +49,7 @@
</div>
<div v-if="Isadd==true">
<alladdsc :allclassifyList="allclassifyList" type='2' @editsuccess="getchildren" :editobj='editobj'
<alladdsc :allclassifyList="allclassifyList" type='1' @editsuccess="getchildren" :editobj='editobj'
@getcancel='Isadd=false'></alladdsc>
</div>
......
......@@ -3,13 +3,12 @@
<div class="page-search row items-center">
<div class="col row wrap q-mr-lg q-col-gutter-md">
<div class="col-3">
<q-select filled @input="resetSearch" option-value="Id" option-label="Name"
v-model="msg.MediaGroupId" ref="Id" :options="classifyList" label="分组" :dense="false" emit-value
map-options />
<q-select filled @input="resetSearch" option-value="Id" option-label="Name" v-model="msg.MediaGroupId"
ref="Id" :options="classifyList" label="分组" :dense="false" emit-value map-options />
</div>
<div class="col-3">
<q-input @keyup.enter.native="resetSearch" @clear="resetSearch()" clearable filled
v-model="msg.MediaName" label="输入搜索内容" maxlength="20" />
<q-input @keyup.enter.native="resetSearch" @clear="resetSearch()" clearable filled v-model="msg.MediaName"
label="输入搜索内容" maxlength="20" />
</div>
</div>
</div>
......@@ -18,11 +17,33 @@
<q-tab :ripple="false" :name="x.Id" :label="x.Name" v-for="(x,y) in MediumList" :key="y"
@click="msg.Type = x.Id,resetSearch()" />
</q-tabs>
<div v-if="tabCheck=='1'" >
 <imgmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren" @getdelete="getdelete" @getmove="getmove"></imgmaterial>
</div>
<div v-if="tabCheck=='1'">
 <imgmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"
@getdelete="getdelete" @getmove="getmove"></imgmaterial>
</div>
<div v-if="tabCheck=='2'">
<audiomaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren" @getdelete="getdelete" @getmove="getmove" ref="allm"></audiomaterial>
</div>
</div>
<q-dialog v-model="Ismove" persistent>
<q-card style="width: 520px; max-width: 80vw;" class="addscfile">
<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="moveMsg.MediumGroupId"
@input="$forceUpdate()" ref="Id" :options="allclassifyList" label="分组" :dense="false" emit-value
map-options />
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="Ismove=false" />
<q-btn color="accent" class="q-mr-md" label="确定" @click="savemove()" />
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
......@@ -30,16 +51,21 @@
import {
GetContributeMediumType,
getWeChatMediumGroupList,
GetContributeMediumPage
GetContributeMediumPage,
GetContributeMediumGroupList,
SetContributeMediumMoveGroup,
DelContributeMediumBatch
} from '../../../api/system/wechat';
import imgmaterial from '../components/imgmaterial'
import audiomaterial from '../components/audiomaterial'
import BenzAMRRecorder from 'benz-amr-recorder'
export default {
components: {
imgmaterial
imgmaterial,
audiomaterial
},
meta: {
title: "素材库"
......@@ -73,7 +99,7 @@
mounted() {
this.getMediumTypeList() //素材类型枚举
this.getWeChatMediumGroupList() //素材分组
this.getList()//获取列表数据
this.getList() //获取列表数据
},
methods: {
getMediumTypeList() {
......@@ -82,7 +108,7 @@
})
},
getWeChatMediumGroupList() {
getWeChatMediumGroupList({}).then(res => {
GetContributeMediumGroupList({}).then(res => {
this.classifyList = res.Data
this.allclassifyList = JSON.parse(JSON.stringify(res.Data))
let obj = {
......@@ -94,13 +120,10 @@
},
getList() {
this.loading = true
console.log('111111111');
if (this.tabCheck == 0 || this.tabCheck == 1) {
if (this.tabCheck == 1) {
this.msg.pageSize = 15
} else if (this.tabCheck == 2 || this.tabCheck == 3 || this.tabCheck == 6) {
} else if (this.tabCheck == 2 || this.tabCheck == 3) {
this.msg.pageSize = 12
} else if (this.tabCheck == 4 || this.tabCheck == 5 || this.tabCheck == 7) {
this.msg.pageSize = 10
}
GetContributeMediumPage(this.msg).then(res => {
this.loading = false
......@@ -108,17 +131,16 @@
this.PageCount = res.Data.Count
this.dataList.forEach(x => {
x.check = false;
let amr = new BenzAMRRecorder()
if (x.Type == 4 && x.AudioModel != null) {
x.timevalue = 0;
amr.initWithUrl(x.AudioModel.AudioPath).then(function () {
x.duration = amr.getDuration()
}).catch((e) => {
// let amr = new BenzAMRRecorder()
// if (x.Type == 4 && x.AudioModel != null) {
// x.timevalue = 0;
// amr.initWithUrl(x.AudioModel.AudioPath).then(function () {
// x.duration = amr.getDuration()
// }).catch((e) => {
})
}
// })
// }
})
console.log(this.dataList,'主页');
})
.catch(err => {
this.loading = false
......@@ -162,7 +184,7 @@
ok: "确定",
cancel: "取消",
}).onOk(() => {
delWecharMediumInfo({
DelContributeMediumBatch({
MediumIds: msg
}).then(res => {
this.$q.notify({
......@@ -206,7 +228,7 @@
})
return
}
setWecharMediumMore(this.moveMsg).then(res => {
SetContributeMediumMoveGroup(this.moveMsg).then(res => {
this.$q.notify({
icon: 'iconfont icon-chenggong',
color: 'accent',
......
......@@ -81,7 +81,7 @@ export default {
//域名管理对象
Vue.prototype.domainManager = function () {
// let domainUrl = 'http://192.168.20.24';
let domainUrl = 'http://192.168.20.6:8083';
let domainUrl = 'http://192.168.20.8:8085';
let viewFileUrl = 'http://192.168.20.214:8120';
let mallUrl = "http://192.168.20.6:8088";
// let vtUploadUrl = "http://192.168.20.214:8120";
......@@ -116,7 +116,9 @@ export default {
ViewFileUrl: viewFileUrl,
mallUrl: mallUrl,
VTUploadUrl: vtUploadUrl,
vtViewUrl: vtViewUrl
vtViewUrl: vtViewUrl,
UploadFileUrl2: domainUrl + '/api/upload/UploadTemporaryFile',
};
return obj;
},
......
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