From 89d6be7703c64d55c6e13fe7d410108f1e6f89ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=88=AA?= <icho.yang@scai-global.com>
Date: Thu, 25 Sep 2025 14:19:50 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9B=20=E6=96=87=E4=BB=B6=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E8=B0=83=E6=95=B4=E9=A2=84=E8=A7=88=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   1 +
 .../image-preview/preview-detail.vue          | 293 ++++++++++++++++++
 .../image-preview/video-preview.vue           |  18 +-
 src/pages/course/components/talkingItem.vue   |  25 +-
 src/pages/course/study.vue                    |   2 +
 src/store/storage.js                          |  26 +-
 6 files changed, 355 insertions(+), 10 deletions(-)
 create mode 100644 src/components/image-preview/preview-detail.vue

diff --git a/.env.development b/.env.development
index 44824331..4202357e 100644
--- a/.env.development
+++ b/.env.development
@@ -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'
 
diff --git a/src/components/image-preview/preview-detail.vue b/src/components/image-preview/preview-detail.vue
new file mode 100644
index 00000000..970cd9e0
--- /dev/null
+++ b/src/components/image-preview/preview-detail.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/image-preview/video-preview.vue b/src/components/image-preview/video-preview.vue
index 1ba9d5d8..bfd3d5df 100644
--- a/src/components/image-preview/video-preview.vue
+++ b/src/components/image-preview/video-preview.vue
@@ -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)
diff --git a/src/pages/course/components/talkingItem.vue b/src/pages/course/components/talkingItem.vue
index 2ff31718..4ac7555a 100644
--- a/src/pages/course/components/talkingItem.vue
+++ b/src/pages/course/components/talkingItem.vue
@@ -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();
 	});
diff --git a/src/pages/course/study.vue b/src/pages/course/study.vue
index 47b1c5f9..bae45d32 100644
--- a/src/pages/course/study.vue
+++ b/src/pages/course/study.vue
@@ -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 {
diff --git a/src/store/storage.js b/src/store/storage.js
index 22cc4f81..62ae21c7 100644
--- a/src/store/storage.js
+++ b/src/store/storage.js
@@ -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
 		},