From 417bd2bfcb5a9bd3c334b812f68f696f2b904778 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=88=AA?= <icho.yang@scai-global.com>
Date: Wed, 17 Dec 2025 15:09:57 +0800
Subject: [PATCH] fix: bug

---
 .../image-preview/image-preview.vue           |  92 ++++++--
 .../image-preview/preview-detail.vue          | 211 ++++++++++--------
 src/pages/course/components/touchBtn.vue      | 107 ++++-----
 src/pages/sparring/talkVideo.nvue             |   2 +-
 4 files changed, 234 insertions(+), 178 deletions(-)

diff --git a/src/components/image-preview/image-preview.vue b/src/components/image-preview/image-preview.vue
index c8fb927c..62cc3ded 100644
--- a/src/components/image-preview/image-preview.vue
+++ b/src/components/image-preview/image-preview.vue
@@ -1,19 +1,34 @@
 <template>
 	<view style="line-height: 0;">
 		<image :src="imgUrlShow" :mode="mode" @click="showDetail" style="width: 100%; height: 100%"></image>
-		<uni-popup ref="PopupRef" class="popup" mask-background-color="rgba(0,0,0,.2)" background-color="rgba(0,0,0,.2)" @change="changeShow">
-			<view class="overlay-box" @click="closePopup"  @touchmove.stop>
-				<image class="detail-img" :src="imgUrlShow" mode="aspectFit"></image>
+		<uni-popup ref="PopupRef" class="popup" mask-background-color="rgba(0,0,0,.2)" background-color="rgba(0,0,0,.2)"
+			@change="changeShow">
+			<view class="overlay-box" @click="closePopup">
+				<movable-area scale-area class="detail-movable">
+					<movable-view class="detail-movable-view" direction="all" @scale="onScale" :scale="true" scale-min="1"
+						scale-max="4" :scale-value="scale">
+						<image class="detail-img" :src="imgUrlShow" mode="aspectFit"></image>
+					</movable-view>
+				</movable-area>
 			</view>
 		</uni-popup>
 	</view>
 </template>
 
 <script>
-	import { previewFile, previewCacheThumbImage } from '@/api/common.js';
-	import { get_base_url } from '@/api/request.js';
-	import { useStorageStore } from '@/store/storage.js';
-	import { getToken } from '@/common/common.js'
+	import {
+		previewFile,
+		previewCacheThumbImage
+	} from '@/api/common.js';
+	import {
+		get_base_url
+	} from '@/api/request.js';
+	import {
+		useStorageStore
+	} from '@/store/storage.js';
+	import {
+		getToken
+	} from '@/common/common.js'
 
 	// const storageStore = useStorageStore()
 	export default {
@@ -55,7 +70,8 @@
 				watching: false,
 				base_url: get_base_url(),
 				showModel: false,
-				token: getToken()
+				token: getToken(),
+				scale: 1
 			};
 		},
 		computed: {
@@ -91,20 +107,23 @@
 				immediate: true,
 				deep: true
 			},
-			showModel(val){
-				if(!val){
+			showModel(val) {
+				if (!val) {
 					this.storageStore.setTouchBtnZIndex(12);
 				}
 			}
 		},
 		methods: {
-			changeShow(data){
-				if(!data.show){
+			changeShow(data) {
+				if (!data.show) {
 					this.storageStore.setTouchBtnZIndex(12);
-				}else{
+				} else {
 					this.storageStore.setTouchBtnZIndex(-1);
 				}
 			},
+			onScale(e) {
+				console.log(e)
+			},
 			closePopup() {
 				this.showModel = false;
 				this.$refs.PopupRef.close();
@@ -169,7 +188,6 @@
 </script>
 
 <style lang="scss" scoped>
-	
 	.overlay-box {
 		position: fixed;
 		left: 0;
@@ -178,14 +196,42 @@
 		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%);
-			
+
+		// .detail-movable{
+		// 		width: 100vw;
+		// 		height: 100vh;
+		// }
+		// .detail-movable-view{
+		// 		width: 100vw;
+		// 		height: 100vh;
+		// }
+		// 	.detail-img {
+		// 		position: absolute;
+		// 		left: 50%;
+		// 		top: 50%;
+		// 		width: 100vw;
+		// 		max-height: 100%;
+		// 		transform: translate(-50%, -50%);
+		// 		z-index: 1001;
+
+		// 	}
+		movable-view {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height: 100%;
+		}
+
+		movable-area {
+			height: 100%;
+			width: 100%;
+			position: fixed;
+			overflow: hidden;
+		}
+
+		movable-view image {
+			width: 100%;
 		}
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/image-preview/preview-detail.vue b/src/components/image-preview/preview-detail.vue
index 5b369f42..4d1d557d 100644
--- a/src/components/image-preview/preview-detail.vue
+++ b/src/components/image-preview/preview-detail.vue
@@ -1,32 +1,41 @@
 <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>
+			<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="aspectFit"></image>
+		<view class="overlay-box" @click="playEnded" @touchmove.stop v-if="fileType === 'image'">
+			<movable-area scale-area class="detail-movable">
+				<movable-view class="detail-movable-view" direction="all" @scale="onScale" :scale="true" scale-min="0.5"
+					scale-max="4" :scale-value="scale">
+					<image class="detail-img" :src="fileUrlShow" mode="aspectFit"></image>
+				</movable-view>
+			</movable-area>
 		</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 {
+		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'
-	import { getToken } from '@/common/common.js'
+	import {
+		getToken
+	} from '@/common/common.js'
 	export default {
-		name:"video-preview",
-		components:{imagePreviewVue},
-		props:{
+		name: "video-preview",
+		components: {
+			imagePreviewVue
+		},
+		props: {
 			// fileId:{
 			// 	default:'',
 			// 	type:String
@@ -43,14 +52,15 @@
 		data() {
 			return {
 				showModel: false,
-				fileUrlShow:'',
-				watching:false,
+				fileUrlShow: '',
+				watching: false,
 				videoContext: null,
-				base_url: get_base_url()
+				base_url: get_base_url(),
+				scale: 1
 			};
 		},
-		computed:{
-			storageStore:() => useStorageStore(),
+		computed: {
+			storageStore: () => useStorageStore(),
 			videoObj() {
 				return this.storageStore?.videoObj || {}
 			},
@@ -60,59 +70,59 @@
 			showPreviewDetail() {
 				return !!this.storageStore?.getShowPreviewDetail
 			},
-			fileType(){
+			fileType() {
 				return this.storageStore?.getFileType
 			},
-			fileId(){
+			fileId() {
 				return this.storageStore?.getFileId
 			},
-			src(){
+			src() {
 				return this.storageStore?.getFileSrc
 			},
 		},
 		watch: {
 			fileId: {
 				handler(newval, oldval) {
-					if(this.fileType === 'image'){
-							if (newval.indexOf('/') === 0) {
-								this.fileUrlShow = this.base_url + newval + '?tk=' + getToken();
-								return;
-							}
-							if (newval.indexOf('http') === 0) {
-								this.fileUrlShow = newval + '?tk=' + getToken();
-								return;
-							}
-							if (newval && this.watching) {
-								this.getImagePreviewUrlBlob(newval);
-							}
+					if (this.fileType === 'image') {
+						if (newval.indexOf('/') === 0) {
+							this.fileUrlShow = this.base_url + newval + '?tk=' + getToken();
+							return;
+						}
+						if (newval.indexOf('http') === 0) {
+							this.fileUrlShow = newval + '?tk=' + getToken();
+							return;
+						}
+						if (newval && this.watching) {
+							this.getImagePreviewUrlBlob(newval);
+						}
 					}
-					if(this.fileType === 'video'){
-						if(newval.indexOf('http') === 0){
+					if (this.fileType === 'video') {
+						if (newval.indexOf('http') === 0) {
 							this.fileUrlShow = newval + '?tk=' + getToken()
-						}else{
+						} else {
 							if (newval && this.watching) {
 								this.getPreviewUrlBlob(newval);
 							}
 						}
 					}
-					this.videoContext = uni.createVideoContext(`video`+ this.fileId)
+					this.videoContext = uni.createVideoContext(`video` + this.fileId)
 				},
 				immediate: true,
 				deep: true,
 			},
 			src: {
 				handler(newval, oldval) {
-					if(newval.indexOf('http') === 0){
+					if (newval.indexOf('http') === 0) {
 						this.fileUrlShow = newval + '?tk=' + getToken()
-					}else{
+					} else {
 						this.fileUrlShow = this.base_url + newval + '?tk=' + getToken()
 					}
 				},
 				immediate: true,
 				deep: true,
 			},
-			showPreviewDetail(val){
-				if(val){
+			showPreviewDetail(val) {
+				if (val) {
 					this.showModelNow()
 				} else {
 					this.$refs.PopupRef.close()
@@ -155,17 +165,17 @@
 					});
 				}
 			},
-			changeShow(data){
-				if(!data.show){
+			changeShow(data) {
+				if (!data.show) {
 					this.storageStore.setTouchBtnZIndex(12);
-				}else{
+				} else {
 					this.storageStore.setTouchBtnZIndex(-1);
 				}
 			},
-			showModelNow(){
+			showModelNow() {
 				this.$refs.PopupRef.open()
 				this.showModel = true
-				if(this.fileType === 'image'){
+				if (this.fileType === 'image') {
 					if (this.fileId) {
 						if (this.fileId.indexOf('/') === 0) {
 							this.fileUrlShow = this.base_url + this.fileId;
@@ -180,26 +190,26 @@
 						this.fileUrlShow = this.base_url + this.src;
 					}
 				}
-				if(this.fileType === 'video'){
+				if (this.fileType === 'video') {
 					if (this.fileId) {
 						let _newDate = new Date().getTime()
-						if(this.fileId.indexOf('http') === 0){
+						if (this.fileId.indexOf('http') === 0) {
 							this.fileUrlShow = this.fileId + '?tk=' + getToken() + '&t=' + _newDate
-						}else{
+						} else {
 							this.getPreviewUrlBlob(this.fileId);
 						}
-						this.videoContext = uni.createVideoContext(`video`+ this.fileId)
+						this.videoContext = uni.createVideoContext(`video` + this.fileId)
 					}
 				}
 			},
-			playError(info){
-				console.log('err：',info)
+			playError(info) {
+				console.log('err：', info)
 			},
-			playEnded(){
+			playEnded() {
 				this.storageStore.setShowPreviewDetail({
-					status: false, 
-					fileType: '', 
-					fileId: '', 
+					status: false,
+					fileType: '',
+					fileId: '',
 					fileSrc: ''
 				})
 			},
@@ -209,26 +219,29 @@
 					return
 				}
 				let _cache = this.videoObj[id] || ''
-				if(_cache){
+				if (_cache) {
 					this.fileUrlShow = _cache;
 					return
 				}
 				let _newDate = new Date().getTime()
-				this.fileUrlShow =  getPreviewFileUrl(this.fileId) + '?tk=' + getToken() + '&t=' + _newDate
+				this.fileUrlShow = getPreviewFileUrl(this.fileId) + '?tk=' + getToken() + '&t=' + _newDate
 				// downloadFile(id).then(res=>{
 				// 	this.fileUrlShow = res.tempFilePath
 				// 	this.storageStore.setStorage('video', id, this.fileUrlShow)
 				// })
 			},
-			getPreviewFileUrlNow(id){
+			getPreviewFileUrlNow(id) {
 				let _newDate = new Date().getTime()
-				if(id.indexOf('http') === 0){
+				if (id.indexOf('http') === 0) {
 					this.fileUrlShow = id + '?tk=' + getToken() + '&t=' + _newDate
 					return
 				}
 				if (id && this.watching) {
 					this.getPreviewUrlBlob(id);
 				}
+			},
+			onScale(e) {
+				console.log(e)
 			}
 		},
 		mounted() {
@@ -241,13 +254,14 @@
 </script>
 
 <style lang="scss" scoped>
-	.video-view-box{
+	.video-view-box {
 		width: 100%;
 		height: 100%;
 		background-color: #fafafa !important;
 		position: relative;
 	}
-	.img-box{
+
+	.img-box {
 		position: absolute;
 		left: 50%;
 		top: 50%;
@@ -255,11 +269,13 @@
 		height: 100rpx;
 		transform: translate(-50%, -50%);
 	}
-	.preview-pic{
+
+	.preview-pic {
 		width: 100%;
 		height: 100%;
 	}
-	.overlay-box .video-cont-center{
+
+	.overlay-box .video-cont-center {
 		width: 100vw;
 		max-height: 100%;
 		position: absolute;
@@ -267,7 +283,8 @@
 		left: 50%;
 		transform: translate(-50%, -50%);
 	}
-	.overlay-box{
+
+	.overlay-box {
 		position: fixed;
 		left: 0;
 		top: 0;
@@ -276,22 +293,42 @@
 		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: calc(100% - 40rpx);
-				height: calc(100% - 100rpx);
-				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, 0.65);
+
+		movable-view {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height: 100%;
 		}
+
+		movable-area {
+			width: 100%;
+			height: 100%;
+			position: fixed;
+			overflow: hidden;
+		}
+
+		movable-view image {
+			width: 100%;
+		}
+
+		// .detail-img {
+		// 	position: absolute;
+		// 	left: 50%;
+		// 	top: 50%;
+		// 	width: calc(100% - 40rpx);
+		// 	height: calc(100% - 100rpx);
+		// 	transform: translate(-50%, -50%);
+		// }
+	}
 </style>
\ No newline at end of file
diff --git a/src/pages/course/components/touchBtn.vue b/src/pages/course/components/touchBtn.vue
index 67859f18..2644c7ff 100644
--- a/src/pages/course/components/touchBtn.vue
+++ b/src/pages/course/components/touchBtn.vue
@@ -65,7 +65,7 @@
 		onHide,
 		onShow
 	} from '@dcloudio/uni-app';
-	
+
 
 	const storageStore = useStorageStore();
 	const proxy = getCurrentInstance();
@@ -175,7 +175,7 @@
 		recordObjCom.value = uni.getRecorderManager();
 		unref(recordObjCom)?.onStop((res, duration) => {
 			isRecording.value = false
-			if(isGettingPermission.value){
+			if (isGettingPermission.value) {
 				isGettingPermission.value = false
 				return
 			}
@@ -207,7 +207,7 @@
 			isRecording.value = true
 			recordTime.value = 0
 			setRecordTime()
-			if(isGettingPermission.value){
+			if (isGettingPermission.value) {
 				isGettingPermission.value = false
 				return
 			}
@@ -228,12 +228,12 @@
 		});
 	};
 	const setRecordTime = () => {
-		setTimeout(()=>{
-			if(isRecording.value){
+		setTimeout(() => {
+			if (isRecording.value) {
 				recordTime.value += 1
 				setRecordTime()
 			}
-		},1000)
+		}, 1000)
 	}
 	const isRecording = ref(false)
 	const recordTime = ref(0)
@@ -310,19 +310,19 @@
 			return;
 		}
 		//#ifdef APP-PLUS
-		if(!hasPermission.value){
+		if (!hasPermission.value) {
 			let _res = await getPermission()
 			if (_res) {
 				hasPermission.value = true
-				setTimeout(()=>{
-					if(!isGettingPermission.value){
+				setTimeout(() => {
+					if (!isGettingPermission.value) {
 						showOverlayTalking(obj);
-					}else{
+					} else {
 						isGettingPermission.value = false
 					}
-				},100)
+				}, 100)
 			}
-		}else{
+		} else {
 			showOverlayTalking(obj);
 		}
 		// #endif
@@ -474,14 +474,14 @@
 				icon: 'none',
 				duration: 1000
 			});
-		} 
+		}
 	};
 	const changeBtn = () => {
 		if (props.isDisabled) return;
 		keyboardIsShow.value = !keyboardIsShow.value;
 		answerValue.value = '';
 	};
-	onHide(()=>{
+	onHide(() => {
 		isGettingPermission.value = true
 	})
 </script>
@@ -496,31 +496,38 @@
 
 		.touch-btn {
 			height: 92rpx;
-			// box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.06);
+			box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.06);
 			text-align: center;
 			line-height: 92rpx;
-			background-color: #06f;
+			font-size: 28rpx;
+			color: #000;
 			font-weight: 400;
 			position: relative;
-			color: #fff;
-			font-size: 29rpx;
-			border-radius: 23rpx;
 
-			.center-text {
-				height: 35rpx;
-				line-height: 35rpx;
+			.input-box {
 				width: 100%;
-				position: absolute;
-				top: 50%;
-				transform: translateY(-50%);
-				display: flex;
-				justify-content: center;
+				height: 92rpx;
+				line-height: 92rpx;
+				text-align: left;
+				box-sizing: border-box;
+				padding: 0 40rpx 0 40rpx;
 			}
+		}
 
-			.type-icon {
-				width: 35rpx;
-				height: 35rpx;
-				margin-right: 10rpx;
+		.talk-btn-box {
+			position: absolute;
+			height: 100%;
+			width: 120rpx;
+			right: 0;
+			top: 0;
+
+			.talk-btn-icon {
+				width: 40rpx;
+				height: 40rpx;
+				position: absolute;
+				right: 60rpx;
+				top: 50%;
+				margin-top: -20rpx;
 			}
 		}
 	}
@@ -581,6 +588,7 @@
 			line-height: 116rpx;
 			pointer-events: none;
 			display: flex;
+
 			.close-btn {
 				padding-top: 40rpx;
 				line-height: 28rpx;
@@ -659,6 +667,7 @@
 			}
 		}
 	}
+
 	::v-deep .uv-input__content__field-wrapper__field {
 		padding-right: 60rpx;
 	}
@@ -671,43 +680,7 @@
 	// 	position: relative;
 	// 	z-index: v-bind(btnZindex);
 
-	// 	.touch-btn {
-	// 		height: 92rpx;
-	// 		box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.06);
-	// 		text-align: center;
-	// 		line-height: 92rpx;
-	// 		font-size: 28rpx;
-	// 		color: #000;
-	// 		font-weight: 400;
-	// 		position: relative;
 
-	// 		.input-box {
-	// 			width: 100%;
-	// 			height: 92rpx;
-	// 			line-height: 92rpx;
-	// 			text-align: left;
-	// 			box-sizing: border-box;
-	// 			padding: 0 40rpx 0 40rpx;
-	// 		}
-	// 	}
-
-	// 	.talk-btn-box {
-	// 		position: absolute;
-	// 		height: 100%;
-	// 		width: 120rpx;
-	// 		right: 0;
-	// 		top: 0;
-
-	// 		.talk-btn-icon {
-	// 			width: 40rpx;
-	// 			height: 40rpx;
-	// 			position: absolute;
-	// 			right: 60rpx;
-	// 			top: 50%;
-	// 			margin-top: -20rpx;
-	// 		}
-	// 	}
-	// }
 
 	// .overlay-box {
 	// 	display: flex;
diff --git a/src/pages/sparring/talkVideo.nvue b/src/pages/sparring/talkVideo.nvue
index 44050056..fdd08fdc 100644
--- a/src/pages/sparring/talkVideo.nvue
+++ b/src/pages/sparring/talkVideo.nvue
@@ -24,7 +24,7 @@
 <script setup>
 	import { ref, reactive, onMounted, onUnmounted, computed, getCurrentInstance, nextTick, toRaw } from 'vue';
 	import { onShow, onLoad, onUnload, onBackPress, onReady } from '@dcloudio/uni-app';
-	import imagePreviewNvue from '@/components/image-preview/image-preview-nvue.vue';
+	// import imagePreviewNvue from '@/components/image-preview/image-preview-nvue.vue';
 	import { get_base_url } from '@/api/request.js';
 	import { getToken } from '@/common/common.js';
 	import { ProtocolCodec, MessageType } from './js/ProtocolCodec';