linweidong
/
besure_server
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mp：素材管理，增加【语音】【视频】

Browse Source
plp
YunaiV 3 years ago
parent 5a1d02dffd
commit bf5dcdd582
2 changed files with 126 additions and 190 deletions
Show Stats Download Patch File Download Diff File

2
yudao-ui-admin/src/views/mp/components/wx-voice-play/main.vue
Unescape Escape View File

@ -12,7 +12,7 @@
<template>
<div class="wx-voice-div" @click="playVoice">
<i :class="playing !== true ? 'el-icon-video-play': 'el-icon-video-pause'">
<span class="amr-duration" v-if="duration">{{ duration }}</span>
<span class="amr-duration" v-if="duration">{{ duration }} 秒</span>
</i>
<div v-if="content">
<el-tag type="success" size="mini">语音识别</el-tag>

314
yudao-ui-admin/src/views/mp/material/index.vue
Unescape Escape View File

@ -20,6 +20,10 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
芋道源码：
① 清理冗余 css 内容，清理冗余 data 变量
② 美化样式，支持播放，提升使用体验
③ 优化代码，特别是方法名和变量，提升可读性
-->
<template>
<div class="app-container">
@ -63,152 +67,102 @@ SOFTWARE.
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
@pagination="getList"/>
</el-tab-pane>
<!-- tab 2：语音 -->
<el-tab-pane name="voice">
<span slot="label"><i class="el-icon-microphone"></i> 语音</span>
<div class="add_but">
<el-upload
:action="actionUrl"
:headers="headers"
multiple
:limit="1"
:on-success="handleUploadSuccess"
:file-list="fileList"
:before-upload="beforeVoiceUpload"
:data="uploadData">
<div class="add_but" v-hasPermi="['mp:material:upload-permanent']">
<el-upload :action="actionUrl" :headers="headers" multiple :limit="1" :file-list="fileList" :data="uploadData"
:on-success="handleUploadSuccess" :before-upload="beforeVoiceUpload">
<el-button size="mini" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
格式支持mp3/wma/wav/amr，文件大小不超过2M，播放长度不超过60s
</div>
<span slot="tip" class="el-upload__tip" style="margin-left: 5px">格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s</span>
</el-upload>
</div>
<el-table
:data="list"
stripe
border
v-loading="loading">
<el-table-column
prop="mediaId"
label="media_id">
</el-table-column>
<el-table-column
prop="name"
label="名称">
<el-table :data="list" stripe border v-loading="loading" style="margin-top: 10px;">
<el-table-column label="编号" align="center" prop="mediaId" />
<el-table-column label="文件名" align="center" prop="name" />
<el-table-column label="语音" align="center">
<template v-slot="scope">
<wx-voice-player :url="scope.row.url" />
</template>
</el-table-column>
<el-table-column
prop="updateTime"
label="更新时间">
<el-table-column label="上传时间" align="center" prop="createTime" width="180">
<template v-slot="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作">
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button type="text"
icon="el-icon-download"
size="small"
plain
@click="handleDown(scope.row)">下载</el-button>
<el-button type="text"
icon="el-icon-delete"
size="small"
plain
@click="handleDelete(scope.row)">删除</el-button>
<el-button type="text" icon="el-icon-download" size="small" plain @click="handleDownload(scope.row)">下载</el-button>
<el-button type="text" icon="el-icon-delete" size="small" plain @click="handleDelete(scope.row)"
v-hasPermi="['mp:material:delete']">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChange"
@current-change="currentChange"
:current-page.sync="queryParams.currentPage"
:page-sizes="[10, 20]"
:page-size="queryParams.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="queryParams.total"
class="pagination"
>
</el-pagination>
<!-- 分页组件 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
@pagination="getList"/>
</el-tab-pane>
<!-- tab 3：视频 -->
<el-tab-pane name="video">
<span slot="label"><i class="el-icon-video-play"></i> 视频</span>
<div class="add_but">
<el-button size="mini" type="primary" @click="handleAddVideo">新建</el-button>
<div class="add_but" v-hasPermi="['mp:material:upload-permanent']">
<el-button size="mini" type="primary" @click="handleAddVideo">新建视频</el-button>
</div>
<el-dialog title="新建视频" :visible.sync="dialogVideoVisible" v-loading="addMaterialLoading">
<el-upload
ref="uploadVideo"
:action="actionUrl"
:headers="headers"
multiple
:limit="1"
:on-success="handleUploadSuccess"
:file-list="fileList"
:before-upload="beforeVideoUpload"
:auto-upload="false"
:data="uploadData">
<!-- 新建视频的弹窗 -->
<el-dialog title="新建视频" :visible.sync="dialogVideoVisible" append-to-body width="600px"
v-loading="addMaterialLoading">
<el-upload :action="actionUrl" :headers="headers" multiple :limit="1" :file-list="fileList" :data="uploadData"
:before-upload="beforeVideoUpload" :on-success="handleUploadSuccess"
ref="uploadVideo" :auto-upload="false">
<el-button slot="trigger" size="mini" type="primary">选择视频</el-button>
<div class="el-upload__tip">
格式支持MP4，文件大小不超过10MB
</div>
<span class="el-upload__tip" style="margin-left: 10px;">格式支持 MP4，文件大小不超过 10MB</span>
</el-upload>
<el-form :model="uploadData"
:rules="uploadRules"
ref="uploadForm">
<el-form-item label="标题" prop="title">
<el-input v-model="uploadData.title" placeholder="标题将展示在相关播放页面，建议填写清晰、准确、生动的标题"></el-input>
</el-form-item>
<el-form-item label="描述" prop="introduction">
<el-input :rows="3" type="textarea" v-model="uploadData.introduction" placeholder="介绍语将展示在相关播放页面，建议填写简洁明确、有信息量的内容"></el-input>
</el-form-item>
<el-form :model="uploadData" :rules="uploadRules" ref="uploadForm" label-width="80px">
<el-row>
<el-form-item label="标题" prop="title">
<el-input v-model="uploadData.title" placeholder="标题将展示在相关播放页面，建议填写清晰、准确、生动的标题" />
</el-form-item>
</el-row>
<el-row>
<el-form-item label="描述" prop="introduction">
<el-input :rows="3" type="textarea" v-model="uploadData.introduction"
placeholder="介绍语将展示在相关播放页面，建议填写简洁明确、有信息量的内容" />
</el-form-item>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVideoVisible = false">取 消</el-button>
<el-button type="primary" @click="subVideo">提 交</el-button>
<el-button @click="cancelVideo">取 消</el-button>
<el-button type="primary" @click="submitVideo">提 交</el-button>
</div>
</el-dialog>
<el-table
:data="list"
stripe
border
v-loading="loading">
<el-table-column
prop="mediaId"
label="media_id">
</el-table-column>
<el-table-column
prop="name"
label="名称">
<el-table :data="list" stripe border v-loading="loading" style="margin-top: 10px;">
<el-table-column label="编号" align="center" prop="mediaId" />
<el-table-column label="文件名" align="center" prop="name" />
<el-table-column label="标题" align="center" prop="title" />
<el-table-column label="介绍" align="center" prop="introduction" />
<el-table-column label="视频" align="center">
<template v-slot="scope">
<wx-video-player :url="scope.row.url" />
</template>
</el-table-column>
<el-table-column
prop="updateTime"
label="更新时间">
<el-table-column label="上传时间" align="center" prop="createTime" width="180">
<template v-slot="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作">
<template slot-scope="scope">
<el-button type="text"
icon="el-icon-view"
size="small"
plain
@click="handleInfo(scope.row)">查看</el-button>
<el-button type="text"
icon="el-icon-delete"
size="small"
plain
@click="handleDelete(scope.row)">删除</el-button>
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
<template v-slot="scope">
<el-button type="text" icon="el-icon-download" size="small" plain @click="handleDownload(scope.row)">下载</el-button>
<el-button type="text" icon="el-icon-delete" size="small" plain @click="handleDelete(scope.row)"
v-hasPermi="['mp:material:delete']">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChange"
@current-change="currentChange"
:current-page.sync="queryParams.currentPage"
:page-sizes="[10, 20]"
:page-size="queryParams.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="queryParams.total"
class="pagination"
>
</el-pagination>
<!-- 分页组件 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
@pagination="getList"/>
</el-tab-pane>
</el-tabs>
</div>
@ -243,26 +197,23 @@ export default {
pageNo: 1,
pageSize: 10,
accountId: undefined,
permanent: true,
},
actionUrl: process.env.VUE_APP_BASE_API + '/admin-api/mp/material/upload-permanent',
headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
fileList:[],
dialogVideoVisible:false,
dialogNewsVisible:false,
addMaterialLoading:false,
uploadData: {
"type": 'image',
"title":'',
"introduction":''
},
uploadRules:{
title: [
{ required: true, message: '请输入标题', trigger: 'blur' }
],
introduction: [
{ required: true, message: '请输入描述', trigger: 'blur' }
],
// === 视频上传，独有变量 ===
dialogVideoVisible: false,
addMaterialLoading: false,
uploadRules: { // 视频上传的校验规则
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
introduction: [{ required: true, message: '请输入描述', trigger: 'blur' }],
},
// 公众号账号列表
@ -284,7 +235,6 @@ export default {
// ======================== 列表查询 ========================
/** 设置账号编号 */
setAccountId(accountId) {
console.log('奥特曼！')
this.queryParams.accountId = accountId;
this.uploadData.accountId = accountId;
},
@ -333,53 +283,6 @@ export default {
},
// ======================== 文件上传 ========================
handleInfo(row){
this.loading = true
getMaterialVideo({
mediaId:row.mediaId
}).then((response) => {
this.loading = false
if(response.code == 200){
let downUrl = response.data.downUrl
window.open(downUrl, '_blank');
}else{
this.$message.error('获取微信视频素材出错：' + response.data.msg)
}
}).catch(() => {
this.loading = false
})
},
handleDown(row){
this.loading = true
getMaterialOther({
mediaId:row.mediaId,
fileName:row.name
}).then(response => {
this.loading = false
let url = window.URL.createObjectURL(new Blob([response.data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', row.name)
document.body.appendChild(link)
link.click()
}).catch(() => {
this.loading = false
})
},
subVideo(){
this.$refs['uploadForm'].validate((valid) => {
if (valid) {
this.$refs.uploadVideo.submit()
} else {
return false
}
})
},
handleAddVideo(){
this.dialogVideoVisible = true
},
beforeImageUpload(file) {
const isType = file.type === 'image/jpeg'
|| file.type === 'image/png'
@ -388,42 +291,46 @@ export default {
|| file.type === 'image/jpg';
if (!isType) {
this.$message.error('上传图片格式不对!')
this.loading = false
return false;
}
const isLt = file.size / 1024 / 1024 < 2
if (!isLt) {
this.$message.error('上传图片大小不能超过 2M!')
this.loading = false
return false;
}
this.loading = true
return true;
},
beforeVoiceUpload(file){
const isType = file.type === 'audio/mp3' || file.type === 'audio/wma' || file.type === 'audio/wav' || file.type === 'audio/amr';
const isType = file.type === 'audio/mp3'
|| file.type === 'audio/wma'
|| file.type === 'audio/wav'
|| file.type === 'audio/amr';
const isLt = file.size / 1024 / 1024 < 2
if (!isType) {
this.$message.error('上传语音格式不对!')
return false;
}
if (!isLt) {
this.$message.error('上传语音大小不能超过2M!')
this.$message.error('上传语音大小不能超过 2M!')
return false;
}
this.loading = false
return isType && isLt;
this.loading = true
return true;
},
beforeVideoUpload(file){
this.addMaterialLoading = true
const isType = file.type === 'video/mp4'
const isLt = file.size / 1024 / 1024 < 10
if (!isType) {
this.$message.error('上传视频格式不对!')
return false;
}
const isLt = file.size / 1024 / 1024 < 10
if (!isLt) {
this.$message.error('上传视频大小不能超过10M!')
this.$message.error('上传视频大小不能超过 10M!')
return false
}
this.addMaterialLoading = false
return isType && isLt;
this.addMaterialLoading = true
return true
},
handleUploadSuccess(response, file, fileList) {
this.loading = false
@ -442,6 +349,35 @@ export default {
// 加载数据
this.getList()
},
// 下载文件
handleDownload(row) {
window.open(row.url,'_blank')
},
// 提交 video 新建的表单
submitVideo() {
this.$refs['uploadForm'].validate((valid) => {
if (!valid) {
return false;
}
this.$refs.uploadVideo.submit()
})
},
handleAddVideo() {
this.resetVideo();
this.dialogVideoVisible = true
},
/** 取消按钮 */
cancelVideo() {
this.dialogVideoVisible = false;
this.resetVideo();
},
/** 表单重置 */
resetVideo() {
this.fileList = []
this.uploadData.title = ''
this.uploadData.introduction = ''
this.resetForm("uploadForm");
},
// ======================== 其它操作 ========================
handleDelete(item) {

Write Preview
Loading…
Cancel
Save