fix； 文件预览调整预览位置
This commit is contained in:
杨航
@@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<uni-popup ref="PopupRef" class="popup" mask-background-color="rgba(0,0,0,.2)" @change="changeShow">
|
||||
<view class="overlay-box" @click="playEnded" v-if="fileType === 'video'">
|
||||
<video class="video-cont-center"
|
||||
:id="`video`+ fileId"
|
||||
ref="playerRef"
|
||||
v-if="showModel && fileUrlShow"
|
||||
:src="fileUrlShow"
|
||||
:controls="true"
|
||||
@error="playError"
|
||||
@ended="playEnded"
|
||||
object-fit="contain"></video>
|
||||
</view>
|
||||
<view class="overlay-box" @click="playEnded" @touchmove.stop v-if="fileType === 'image'">
|
||||
<image class="detail-img" :src="fileUrlShow" mode="aspectFill"></image>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { downloadFile,getPreviewFileUrl } from'@/api/common.js'
|
||||
import { useStorageStore } from "@/store/storage.js"
|
||||
import { get_base_url } from '@/api/request.js'
|
||||
import imagePreviewVue from './image-preview.vue'
|
||||
export default {
|
||||
name:"video-preview",
|
||||
components:{imagePreviewVue},
|
||||
props:{
|
||||
// fileId:{
|
||||
// default:'',
|
||||
// type:String
|
||||
// },
|
||||
// src:{
|
||||
// default:'',
|
||||
// type:String
|
||||
// },
|
||||
// fileType:{
|
||||
// default:'image',
|
||||
// type:String
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showModel: false,
|
||||
fileUrlShow:'',
|
||||
watching:false,
|
||||
videoContext: null,
|
||||
base_url: get_base_url()
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
storageStore:() => useStorageStore(),
|
||||
videoObj() {
|
||||
return this.storageStore?.videoObj || {}
|
||||
},
|
||||
imageObj() {
|
||||
return this.storageStore?.imgObj || {};
|
||||
},
|
||||
showPreviewDetail() {
|
||||
return !!this.storageStore?.getShowPreviewDetail
|
||||
},
|
||||
fileType(){
|
||||
return this.storageStore?.getFileType
|
||||
},
|
||||
fileId(){
|
||||
return this.storageStore?.getFileId
|
||||
},
|
||||
src(){
|
||||
return this.storageStore?.getFileSrc
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
fileId: {
|
||||
handler(newval, oldval) {
|
||||
if(this.fileType === 'image'){
|
||||
if (newval.indexOf('/') === 0) {
|
||||
this.fileUrlShow = this.base_url + newval;
|
||||
return;
|
||||
}
|
||||
if (newval.indexOf('http') === 0) {
|
||||
this.fileUrlShow = newval;
|
||||
return;
|
||||
}
|
||||
if (newval && this.watching) {
|
||||
this.getImagePreviewUrlBlob(newval);
|
||||
}
|
||||
}
|
||||
if(this.fileType === 'video'){
|
||||
if(newval.indexOf('http') === 0){
|
||||
this.fileUrlShow = newval
|
||||
}else{
|
||||
if (newval && this.watching) {
|
||||
this.getPreviewUrlBlob(newval);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.videoContext = uni.createVideoContext(`video`+ this.fileId)
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
src: {
|
||||
handler(newval, oldval) {
|
||||
if(newval.indexOf('http') === 0){
|
||||
this.fileUrlShow = newval
|
||||
}else{
|
||||
this.fileUrlShow = this.base_url + newval
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
showPreviewDetail(val){
|
||||
if(val){
|
||||
this.showModelNow()
|
||||
} else {
|
||||
this.$refs.PopupRef.close()
|
||||
this.showModel = false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getImagePreviewUrlBlob(id) {
|
||||
if (!id) {
|
||||
this.fileUrlShow = '';
|
||||
return;
|
||||
}
|
||||
if (this.isCache) {
|
||||
let _cache = this.imageObj[`/${id}/${this.width}/${this.height}`] || '';
|
||||
if (_cache) {
|
||||
this.fileUrlShow = _cache;
|
||||
return;
|
||||
}
|
||||
previewCacheThumbImage(id, this.width, this.height).then((res) => {
|
||||
this.fileUrlShow = res;
|
||||
this.storageStore.setStorage('image', `/${id}/${this.width}/${this.height}`, res);
|
||||
});
|
||||
} else {
|
||||
let _cache = this.imageObj[`${id}`] || '';
|
||||
if (_cache) {
|
||||
this.fileUrlShow = _cache;
|
||||
return;
|
||||
}
|
||||
previewFile(id).then((result) => {
|
||||
//#ifdef APP-PLUS
|
||||
let _header = result.header['Content-Type'].split(';')[0];
|
||||
// #endif
|
||||
//#ifndef APP-PLUS
|
||||
let _header = result.header['content-type'].split(';')[0];
|
||||
// #endif
|
||||
let base64 = `data:${_header};base64,` + uni.arrayBufferToBase64(result.data);
|
||||
this.fileUrlShow = base64;
|
||||
this.storageStore.setStorage('image', id, base64);
|
||||
});
|
||||
}
|
||||
},
|
||||
changeShow(data){
|
||||
if(!data.show){
|
||||
this.storageStore.setTouchBtnZIndex(12);
|
||||
}else{
|
||||
this.storageStore.setTouchBtnZIndex(-1);
|
||||
}
|
||||
},
|
||||
showModelNow(){
|
||||
this.$refs.PopupRef.open()
|
||||
this.showModel = true
|
||||
if(this.fileType === 'image'){
|
||||
if (this.fileId) {
|
||||
if (this.fileId.indexOf('/') === 0) {
|
||||
this.fileUrlShow = this.base_url + this.fileId;
|
||||
} else if (this.fileId.indexOf('http') === 0) {
|
||||
this.fileUrlShow = this.fileId;
|
||||
} else {
|
||||
this.getPreviewUrlBlob(this.fileId);
|
||||
}
|
||||
}
|
||||
this.watching = true;
|
||||
if (this.src) {
|
||||
this.fileUrlShow = this.base_url + this.src;
|
||||
}
|
||||
}
|
||||
if(this.fileType === 'video'){
|
||||
if (this.fileId) {
|
||||
let _newDate = new Date().getTime()
|
||||
if(this.fileId.indexOf('http') === 0){
|
||||
this.fileUrlShow = this.fileId + '?t=' + _newDate
|
||||
}else{
|
||||
this.getPreviewUrlBlob(this.fileId);
|
||||
}
|
||||
this.videoContext = uni.createVideoContext(`video`+ this.fileId)
|
||||
}
|
||||
}
|
||||
},
|
||||
playError(info){
|
||||
console.log('err：',info)
|
||||
},
|
||||
playEnded(){
|
||||
this.storageStore.setShowPreviewDetail({
|
||||
status: false,
|
||||
fileType: '',
|
||||
fileId: '',
|
||||
fileSrc: ''
|
||||
})
|
||||
},
|
||||
getPreviewUrlBlob(id) {
|
||||
if (!id) {
|
||||
this.fileUrlShow = ''
|
||||
return
|
||||
}
|
||||
let _cache = this.videoObj[id] || ''
|
||||
if(_cache){
|
||||
this.fileUrlShow = _cache;
|
||||
return
|
||||
}
|
||||
let _newDate = new Date().getTime()
|
||||
this.fileUrlShow = getPreviewFileUrl(this.fileId)+'?t=' + _newDate
|
||||
// downloadFile(id).then(res=>{
|
||||
// this.fileUrlShow = res.tempFilePath
|
||||
// this.storageStore.setStorage('video', id, this.fileUrlShow)
|
||||
// })
|
||||
},
|
||||
getPreviewFileUrlNow(id){
|
||||
let _newDate = new Date().getTime()
|
||||
if(id.indexOf('http') === 0){
|
||||
this.fileUrlShow = id + '?t=' + _newDate
|
||||
return
|
||||
}
|
||||
if (id && this.watching) {
|
||||
this.getPreviewUrlBlob(id);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.watching = true
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.video-view-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fafafa !important;
|
||||
position: relative;
|
||||
}
|
||||
.img-box{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.preview-pic{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.overlay-box .video-cont-center{
|
||||
width: 100vw;
|
||||
max-height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.overlay-box{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 999;
|
||||
background-color: rgba(0, 0, 0, .65);
|
||||
}
|
||||
|
||||
.overlay-box {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 999;
|
||||
background-color: rgba(0, 0, 0, 0.65);
|
||||
.detail-img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 100vw;
|
||||
max-height: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view v-bind="$attrs" class="video-view-box" @click="showModelNow">
|
||||
<imagePreviewVue :imgId="picId" class="preview-pic" v-if="picId"/>
|
||||
<imagePreviewVue :src="picSrc" class="preview-pic" v-if="picSrc"/>
|
||||
<view v-bind="$attrs" class="video-view-box">
|
||||
<imagePreviewVue :imgId="picId" class="preview-pic" v-if="picId" @click="showModelNow"/>
|
||||
<imagePreviewVue :src="picSrc" class="preview-pic" v-if="picSrc" @click="showModelNow"/>
|
||||
<view class="img-box">
|
||||
<image
|
||||
class="icon"
|
||||
@@ -33,7 +33,7 @@
|
||||
import imagePreviewVue from './image-preview.vue'
|
||||
export default {
|
||||
name:"video-preview",
|
||||
components:{imagePreviewVue},
|
||||
components:{ imagePreviewVue },
|
||||
props:{
|
||||
fileId:{
|
||||
default:'',
|
||||
@@ -50,6 +50,10 @@
|
||||
src:{
|
||||
default:'',
|
||||
type:String
|
||||
},
|
||||
previewDetail: {
|
||||
default: false,
|
||||
type: [String, Boolean]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -102,8 +106,10 @@
|
||||
}
|
||||
},
|
||||
showModelNow(){
|
||||
this.$refs.PopupRef.open()
|
||||
this.showModel = true
|
||||
if (!!this.previewDetail) {
|
||||
this.$refs.PopupRef.open()
|
||||
this.showModel = true
|
||||
}
|
||||
},
|
||||
playError(info){
|
||||
console.log('err：',info)
|
||||
|
||||
Reference in New Issue
Block a user