tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix； 文件预览调整预览位置

Browse Source
This commit is contained in:
杨航
2025-09-25 14:19:50 +08:00
parent a3499de6b2
commit 89d6be7703
6 changed files with 355 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.development
+1
View File
@@ -23,6 +23,7 @@ VITE_APP_BASE_H5_API_Url = 'http://25.18.122.65:7001'
# VITE_APP_BASE_H5_API_Url = 'http://25.18.122.91:9786'
# VITE_APP_BASE_H5_API_Url = 'http://25.18.122.78:9786'
VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://25.64.16.130:9601'
VITE_APP_BASE_H5_API_Url_TRASTUDY = 'http://25.64.16.130:9602'
# VITE_APP_BASE_H5_API_Url_TRAASK = 'http://25.64.16.144:9605'
src/components/image-preview/preview-detail.vue
+293
View File
@@ -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>
src/components/image-preview/video-preview.vue
+12 -6
View File
@@ -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)
src/pages/course/components/talkingItem.vue
+23 -2
View File
@@ -62,10 +62,10 @@
<!-- 段落图片视频预览 -->
<view v-if="type === 3" style="overflow: hidden">
<ImagePreview class="cont-img-box" v-if="(dataInfo.imageAddrs || []).length > 0"
:imgId="dataInfo.imageAddrs[0]" :previewDetail="true"></ImagePreview>
:imgId="dataInfo.imageAddrs[0]" :previewDetail="false" @click="previewImage(dataInfo.imageAddrs[0])"></ImagePreview>
<VideoPreview class="cont-img-box" v-if="(dataInfo.vidoAddrs || []).length > 0"
:fileId="dataInfo.vidoAddrs[0].vidAddr"
:picId="dataInfo.vidoAddrs[0].vidImgAddr">
:picId="dataInfo.vidoAddrs[0].vidImgAddr" @click="previewVideo(dataInfo.vidoAddrs[0])">
</VideoPreview>
</view>
<!-- 举例预览 -->
@@ -407,8 +407,29 @@
const changeBr = (str = '') => {
return str.replace(/\/n/g, '\n');
};
const previewVideo = (obj)=>{
console.log(obj)
storageStore.setShowPreviewDetail({
status: true,
fileType: 'video',
fileId: '',
fileSrc: obj.vidAddr
})
}
const previewImage = (obj)=>{
storageStore.setShowPreviewDetail({
status: true,
fileType: 'image',
fileId: '',
fileSrc: obj
})
}
const voiceTime = ref('');
const itemInfo = ref({});
onMounted(() => {
initVoice();
});
src/pages/course/study.vue
+2
View File
@@ -109,6 +109,7 @@
</view>
</view>
</uv-overlay>
<PreviewDetail/>
</view>
</template>
@@ -158,6 +159,7 @@
import common from '@/common/common'
import TalkingItem from '@/pages/course/components/talkingItem.vue'
import ImagePreview from '@/components/image-preview/image-preview.vue'
import PreviewDetail from '@/components/image-preview/preview-detail.vue'
import TouchBtn from '@/pages/course/components/touchBtn.vue'
import {
src/store/storage.js
+24 -2
View File
@@ -6,7 +6,11 @@ export const useStorageStore = defineStore('storageStore',{
imgObjStr: '{}',
videoObjStr: '{}',
audioObjStr: '{}',
touchBtnZIndex: 9
touchBtnZIndex: 12,
showPreviewDetail: false,
fileType: 'iamge',
fileId: '',
fileSrc: ''
}),
getters:{
imgObj(state){
@@ -20,9 +24,27 @@ export const useStorageStore = defineStore('storageStore',{
},
getTouchBtnZIndex(state){
return state.touchBtnZIndex
}
},
getShowPreviewDetail(state){
return state.showPreviewDetail
},
getFileType(state){
return state.fileType
},
getFileId(state){
return state.fileId
},
getFileSrc(state){
return state.fileSrc
},
},
actions:{
setShowPreviewDetail({ status = false, fileType = 'image', fileId = '', fileSrc = '' }){
this.showPreviewDetail = status
this.fileId = fileId
this.fileType = fileType
this.fileSrc = fileSrc
},
setTouchBtnZIndex(index = 12){
this.touchBtnZIndex = index
},