|
|
@@ -60,13 +60,13 @@
|
|
|
</div>
|
|
|
<div style="margin: 0 10px; width: 500px;">
|
|
|
<div style="color: #000; margin: 0 0 10px 0; text-align: center; ">详情图：</div>
|
|
|
- <el-carousel :interval="3000" height="180px" width="500px" style="border-radius: 5px;">
|
|
|
- <el-carousel-item v-for="item in approved_reject_Data.fileInfoList" :key="item.id">
|
|
|
- <viewer :images="fileInfoListImages">
|
|
|
- <img :src="item.url" width="500" style="border-radius: 5px; cursor: pointer;">
|
|
|
- </viewer>
|
|
|
- </el-carousel-item>
|
|
|
- </el-carousel>
|
|
|
+ <viewer :images="fileInfoListImages">
|
|
|
+ <el-carousel :interval="3000" height="180px" width="500px" style="border-radius: 5px;">
|
|
|
+ <el-carousel-item v-for="item in approved_reject_Data.fileInfoList" :key="item.id">
|
|
|
+ <img :src="item" style="border-radius: 5px; cursor: pointer; width: 500px; height: 180px;">
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </viewer>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="display: flex; margin-top: 20px;">
|
|
|
@@ -93,7 +93,7 @@
|
|
|
<viewer :images="fileInfoListImages">
|
|
|
<div style="display: flex; justify-content: center; align-items: center;">
|
|
|
<img style="width: 110px; height: 110px; margin: 0 2px; border-radius: 5px; max-width: 110px; max-height: 110px; cursor: pointer;"
|
|
|
- v-for="src in approved_reject_Data.fileInfoList" :src="src.url" :key="src.id">
|
|
|
+ v-for="src in approved_reject_Data.fileInfoList" :src="src" :key="src.id">
|
|
|
</div>
|
|
|
</viewer>
|
|
|
</div>
|
|
|
@@ -106,32 +106,41 @@
|
|
|
<!-- 推文 -->
|
|
|
<el-dialog title="推文/主办" custom-class="class-article" :visible.sync="dialogArticleVisible" :close-on-click-modal="false" :close-on-press-escape="false"
|
|
|
@close="dialogArticleVisible = false">
|
|
|
- <div style="display: flex; margin-bottom: 20px;">
|
|
|
- <div style="text-align: right; font-weight: bold; width: 100px; ">标题：</div>
|
|
|
- <div style="width: calc(100% - 100px); ">{{ approved_reject_Data.title }}</div>
|
|
|
- </div>
|
|
|
- <div style="display: flex; margin-bottom: 20px;">
|
|
|
- <div style="text-align: right; font-weight: bold; width: 100px; height: 80px;">描述：</div>
|
|
|
- <div style="width: calc(100% - 100px); height: 80px;">{{ approved_reject_Data.remark }}</div>
|
|
|
- </div>
|
|
|
- <div style="display: flex;">
|
|
|
- <div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">视频/图片：</div>
|
|
|
- <div v-if="approved_reject_Data.fileInfoList.length > 0 || approved_reject_Data.videoList.length > 0">
|
|
|
- <viewer :images="fileInfoListImages">
|
|
|
- <div style="height: 120px; display: flex; justify-content: center; align-items: center;">
|
|
|
- <img style="width: 110px; height: 110px; margin: 0 2px; border-radius: 5px; max-width: 110px; max-height: 110px; cursor: pointer;"
|
|
|
- v-for="src in approved_reject_Data.fileInfoList" :src="src.url" :key="src.id">
|
|
|
- <video width="180" height="" v-for="vd in approved_reject_Data.videoList" controls>
|
|
|
- <source :src="vd" type="video/mp4"></source>
|
|
|
- </video>
|
|
|
+ <div style="display: flex; flex-direction: column; max-height: 650px; overflow-y: auto;">
|
|
|
+ <div style="display: flex; margin-bottom: 20px;">
|
|
|
+ <div style="text-align: right; font-weight: bold; width: 100px; ">标题：</div>
|
|
|
+ <div style="width: calc(100% - 100px); ">{{ approved_reject_Data.title }}</div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; margin-bottom: 20px;">
|
|
|
+ <div style="text-align: right; font-weight: bold; width: 100px; height: 80px;">描述：</div>
|
|
|
+ <div style="width: calc(100% - 100px); height: 80px;">{{ approved_reject_Data.remark }}</div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; height: 130px;">
|
|
|
+ <div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">图片：</div>
|
|
|
+ <div v-if="approved_reject_Data.fileInfoList.length > 0">
|
|
|
+ <viewer :images="fileInfoListImages">
|
|
|
+ <div style="height: 120px; display: flex; justify-content: center; align-items: center;">
|
|
|
+ <img style="width: 110px; height: 110px; margin: 0 2px; border-radius: 5px; max-width: 110px; max-height: 110px; cursor: pointer;"
|
|
|
+ v-for="src in approved_reject_Data.fileInfoList" :src="src" :key="src.id">
|
|
|
+ </div>
|
|
|
+ </viewer>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 750px; height: 450px; display: flex;">
|
|
|
+ <div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">视频：</div>
|
|
|
+ <div v-if="approved_reject_Data.videoList.length > 0">
|
|
|
+ <div v-for="(video, index) in approved_reject_Data.videoList" :key="index"
|
|
|
+ style="width: 650px; height: 340px; display: flex; justify-content: center; align-items: center;">
|
|
|
+ <video-player class="video-player vjs-custom-skin" :ref="'videoPlayer' + index" @play="onPlayerPlay($event)" :playsinline="true"
|
|
|
+ :options="video.playerOptions"></video-player>
|
|
|
</div>
|
|
|
- </viewer>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <p style="display: flex; justify-content: center;">
|
|
|
+ <div style="display: flex; justify-content: center; margin-top: 20px;">
|
|
|
<el-button type="danger" @click="handlerReject">驳 回</el-button>
|
|
|
<el-button type="primary" class="confirm-btn" @click="handlerPass">通 过</el-button>
|
|
|
- </p>
|
|
|
+ </div>
|
|
|
</el-dialog>
|
|
|
<!-- 审核通过确认对话框 -->
|
|
|
<el-dialog title="提示" :center="true" :visible.sync="showPassDialog" width="280px" :show-close="false" :close-on-click-modal="false"
|
|
|
@@ -235,8 +244,49 @@
|
|
|
},
|
|
|
mounted() {
|
|
|
document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
|
|
|
+
|
|
|
+ document.addEventListener('fullscreenchange', this.handleFullScreenChange);
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ document.removeEventListener('fullscreenchange', this.handleFullScreenChange);
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleFullScreenChange() {
|
|
|
+ if (!document.fullscreenElement) {
|
|
|
+ // 退出全屏逻辑
|
|
|
+ this.playering.pause()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 定义点击播放按钮，自动全屏化的方法
|
|
|
+ full(e) {
|
|
|
+ // 做兼容处理
|
|
|
+ if (e.requestFullscreen) {
|
|
|
+ e.requestFullscreen()
|
|
|
+ } else if (e.mozRequestFullScreen) {
|
|
|
+ e.mozRequestFullScreen()
|
|
|
+ } else if (e.msRequestFullscreen) {
|
|
|
+ e.msRequestFullscreen()
|
|
|
+ } else if (e.oRequestFullscreen) {
|
|
|
+ e.oRequestFullscreen()
|
|
|
+ } else if (e.webkitRequestFullscreen) {
|
|
|
+ e.webkitRequestFullScreen()
|
|
|
+ } else {
|
|
|
+ // var docHtml = document.documentElement;
|
|
|
+ // var docBody = document.body;
|
|
|
+ var videobox = document.getElementsByClassName('video-player')
|
|
|
+ var cssText = 'width:100%;height:100%;overflow:hidden;'
|
|
|
+ // docHtml.style.cssText = cssText;
|
|
|
+ // docBody.style.cssText = cssText;
|
|
|
+ videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;'
|
|
|
+ document.IsFullScreen = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 定义点击播放按钮，调用全屏化的方法
|
|
|
+ onPlayerPlay(player) {
|
|
|
+ // console.log('player play===>>>', player)
|
|
|
+ this.playering = player
|
|
|
+ this.full(player)
|
|
|
+ },
|
|
|
// 审核通过盖章动画效果
|
|
|
handlerCloseApprove() {
|
|
|
this.isLoaded_approve = false
|
|
|
@@ -330,21 +380,56 @@
|
|
|
this.$set(this.approved_reject_Data, 'coverImg', row.coverImg)
|
|
|
this.fileInofImage.push(row.coverImg)
|
|
|
this.$set(this.approved_reject_Data, 'workflowRemark', row.workflowRemark)
|
|
|
+ this.approved_reject_Data.videoList = []
|
|
|
if (row.fileInfoList.length > 0) {
|
|
|
var tmpImgList = []
|
|
|
- var tmpVideoList = []
|
|
|
for (var i = 0; i < row.fileInfoList.length; i++) {
|
|
|
if (row.fileInfoList[i].url.toLowerCase().endsWith('.mp4')) {
|
|
|
- tmpVideoList.push(row.fileInfoList[i].url)
|
|
|
+ this.approved_reject_Data.videoList.push({
|
|
|
+ playerOptions: {
|
|
|
+ playbackRates: [0.5, 0.8, 1.0, 1.25, 1.5, 1.75, 2.0], //播放速度
|
|
|
+ autoplay: false, // 如果true,浏览器准备好时开始回放。
|
|
|
+ muted: false, // 默认情况下将会消除任何音频。
|
|
|
+ loop: false, // 导致视频一结束就重新开始。
|
|
|
+ preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
|
|
+ language: "zh-CN",
|
|
|
+ aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
|
|
+ fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
|
|
|
+ sources: [{
|
|
|
+ withCredentials: false,
|
|
|
+ type: "video/mp4", // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
|
|
|
+ src: row.fileInfoList[i].url,
|
|
|
+ }],
|
|
|
+ controls: true,
|
|
|
+ hls: true,
|
|
|
+ poster: "", // 你的封面地址
|
|
|
+ notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
|
|
+ controlBar: {
|
|
|
+ progressControl: true,
|
|
|
+ currentTimeDisplay: true,
|
|
|
+ timeDivider: true,
|
|
|
+ durationDisplay: true,
|
|
|
+ remainingTimeDisplay: false,
|
|
|
+ fullscreenToggle: true, // 全屏按钮
|
|
|
+ },
|
|
|
+ flash: {
|
|
|
+ hls: {
|
|
|
+ withCredentials: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ html5: {
|
|
|
+ hls: {
|
|
|
+ withCredentials: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
} else if (!isEmpty(row.fileInfoList[i].url)) {
|
|
|
tmpImgList.push(row.fileInfoList[i].url)
|
|
|
}
|
|
|
- this.fileInfoListImages = tmpImgList
|
|
|
}
|
|
|
+ this.fileInfoListImages = tmpImgList
|
|
|
this.$set(this.approved_reject_Data, 'fileInfoList', tmpImgList)
|
|
|
- this.$set(this.approved_reject_Data, 'videoList', tmpVideoList)
|
|
|
- console.log(tmpImgList);
|
|
|
- console.log(tmpVideoList);
|
|
|
} else {
|
|
|
this.$set(this.approved_reject_Data, 'fileInfoList', [])
|
|
|
}
|
|
|
@@ -682,6 +767,12 @@
|
|
|
z-index: -1;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .video-player {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
</style>
|
|
|
|
|
|
<style>
|
|
|
@@ -696,7 +787,7 @@
|
|
|
}
|
|
|
|
|
|
.class-article {
|
|
|
- height: 430px !important;
|
|
|
+ height: 830px !important;
|
|
|
width: 880px !important;
|
|
|
}
|
|
|
|
soft5566