<template> <div class="media" v-loading="loading"> <h2 class="media-title">素材管理</h2> <div> <ul class="media-navs"> <!----> <!--<li class="media-nav js_top" :class="type === 'view' ? 'media-current-nav' : ''" @click="getMediaType('view')">--> <!--<a href="javascript:void(0);">图文消息<br /></a>--> <!--</li>--> <li class="media-nav js_top" :class="type === 'image' ? 'media-current-nav' : ''" @click="getMediaType('image')"> <a href="javascript:void(0);">图片<br /></a> </li> <li class="media-nav js_top" :class="type === 'voice' ? 'media-current-nav' : ''" @click="getMediaType('voice')"> <a href="javascript:void(0);">语音<br /></a> </li> <li class="media-nav js_top" :class="type === 'video' ? 'media-current-nav' : ''" @click="getMediaType('video')"> <a href="javascript:void(0);">视频<br /></a> </li> <!----> </ul> <div class="media-panel"> <div class="media-panel-top flex-bt"> <div class="media-panel-top-left"> {{typeText[type]}}(共{{total}}条) </div> <div class="progress" v-if="showProgress"> <el-progress :percentage="progress" status="success"></el-progress> </div> <div class="media-panel-top-right"> <el-upload class="upload-demo" ref="upload" action="/api/public/upload/zone" :http-request="uploadFile" :show-file-list="false" :data="uploadParam"> <!--:on-success="handleUploadSuccess"--> <el-button style="order:2;" slot="trigger" size="small" type="primary" v-if="!$store.state.readonly">选取文件</el-button> <!--<div slot="tip" class="el-upload__tip">大小不超过5M</div>--> </el-upload> </div> </div> <div v-if="mediaList.length > 0"> <el-table :data="mediaList" style="width: 100%"> <el-table-column prop="name" label="名称"> </el-table-column> <el-table-column prop="media_id" label="mediaId"> </el-table-column> <el-table-column label="URL"> <template slot-scope="scope"> <a :href="scope.row.url" v-if="type === 'image'"> <img style="width: 60px;" :src="scope.row.url"/> </a> <video v-if="type === 'video'" width="100" height="100" controls="controls"> <source :src="scope.row.url"/> Your browser does not support the video tag. </video> <audio v-if="type === 'voice'" id="myAudio" controls> <source :src="scope.row.url"/> Your browser does not support the audio element. </audio> </template> </el-table-column> </el-table> <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange"/> </div> </div> </div> </div> </template> <script> import {getMediaListApi,uploadFileApi} from "../../service/api"; import page from '../framework/page' export default { name: "resource", data() { return { mediaList: [], nowPage: 1, total: 0, limit: 5, loading: false, type: 'image', imageList: [], uploadParam: { type: 'wechat', chunk: 0, count: 1 }, fileUid:null, showProgress: false, typeText: { 'image' : '图片', 'video' : '视频', 'voice' : '语音' } } }, components:{ page }, mounted(){ this.getMediaList(this.type) }, computed:{ progress(){ return this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num <100 ? this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num : 100 } }, methods: { getMediaType(type){ this.type = type; this.nowPage = 1; this.getMediaList(type); }, onPageChange(val){ this.nowPage = val this.getMediaList(this.type) }, getMediaList(type){ let json = { type: type, page: this.nowPage, limit: this.limit }; this.loading = true; getMediaListApi(json).then(res=>{ this.loading = false; this.type = type; this.mediaList = res.item; this.total = res.total_count; if (res.item.length === 0 ) { this.$message({ showClose: true, message: '暂无数据' }); } }).catch(() => { this.loading = false; }) }, handleUploadSuccess(res) { console.log('handleUploadSuccess', res) if (res.code === 200) { this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}] } }, uploadFile(a) { this.loading = true; this.$store.dispatch('setProgress',{type:'new',id:a.file.uid}); this.fileUid = a.file.uid; this.showProgress = true; uploadFileApi({file:a.file,type:'wechat'}).then(res=>{ this.imageList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}] this.getMediaList(this.type) this.loading = false; this.showProgress = false; this.$message({ type: 'success', message: '上传成功!' }); }).catch(()=>{ this.loading = false; this.showProgress = false; }) } } } </script> <style scoped lang="less"> .progress { width: 50%; } .flex-bt { display: flex; justify-content: space-between; align-items: flex-start; } .el-upload__tip { margin-right: 15px; font-size: 13px; color: #8d8d8d; order: 1; } .upload-demo { display: flex; .el-upload { order: 2; } } .media { margin-bottom: 40px; padding: 20px 0; &-title { font-size: 26px; font-weight: 400; line-height: 1; margin-bottom: 20px; margin-left: 20px; } &-navs { text-align: left; line-height: 1; border-bottom: 1px solid #E0E1E2; font-size: 16px; } &-nav { display: inline-block; margin-right: 24px; margin-bottom: -1px; line-height: 40px; a { display: block; text-decoration: none; color: #353535; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; max-width: 120px; } } &-current-nav { border-bottom: 2px solid #1AAD19; a { color: #44B549; } } &-panel { padding: 24px 40px; margin-bottom: 30px; background-color: #FFFFFF; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.05); .el-upload { order: 2; } } } </style>