From 98b00c97565276acd51a9e188f8f2bf9ed0f6ebc Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 31 十二月 2025 13:32:33 +0800
Subject: [PATCH] 陕西昭德型煤： 1.现场巡检上传附件查看附件修改联调
---
src/components/imageUpload/viewQrCodeFiles.vue | 212 ++++++++++++++++++++++++++++++----------------------
1 files changed, 122 insertions(+), 90 deletions(-)
diff --git a/src/components/imageUpload/viewQrCodeFiles.vue b/src/components/imageUpload/viewQrCodeFiles.vue
index 0c7aed2..5fd27af 100644
--- a/src/components/imageUpload/viewQrCodeFiles.vue
+++ b/src/components/imageUpload/viewQrCodeFiles.vue
@@ -18,7 +18,12 @@
<text class="popup-title">鏌ョ湅闄勪欢</text>
</view>
- <view class="upload-container">
+ <scroll-view
+ class="upload-container"
+ scroll-y="true"
+ :enable-back-to-top="true"
+ :scroll-with-animation="true"
+ >
<view class="form-container">
<view class="title">宸℃闄勪欢</view>
@@ -36,7 +41,14 @@
:src="item"
mode="aspectFill"
class="image-preview"
+ :lazy-load="true"
+ :data-index="index"
+ @error="handleImageError"
+ @load="handleImageLoad"
/>
+ <view v-if="imageLoadingStates[index]" class="image-loading">
+ <u-loading-icon mode="spinner" color="#409eff" />
+ </view>
</view>
</view>
</view>
@@ -49,48 +61,21 @@
v-for="(videoUrl, index) in beforeProductionVideos"
:key="index"
class="video-item"
- @click="playVideo(videoUrl, index)"
+ @click="playVideo(`video_${index}`, videoUrl)"
>
- <video
+ <image
:src="videoUrl"
+ mode="aspectFill"
class="video-thumbnail"
- :poster="videoUrl"
- :controls="false"
- :show-center-play-btn="true"
- @play="onVideoPlay"
+ />
+ <video
+ :id="`video_${index}`"
+ :src="videoUrl"
+ class="hidden-video"
></video>
- <view class="video-overlay">
- <u-icon name="play-circle-fill" size="40" color="#fff"></u-icon>
- </view>
</view>
</view>
</view>
-
- <!-- 瑙嗛鎾斁寮圭獥 -->
- <u-popup
- :show="showVideoPlayer"
- mode="center"
- width="100%"
- height="100%"
- :closeable="true"
- @close="closeVideoPlayer"
- :safeAreaInsetBottom="false"
- >
- <view class="video-player-container">
- <video
- v-if="currentVideoUrl"
- :src="currentVideoUrl"
- class="video-player"
- :controls="true"
- :show-center-play-btn="true"
- :enable-play-gesture="true"
- :show-fullscreen-btn="true"
- :enable-progress-gesture="true"
- :object-fit="'contain'"
- @fullscreenchange="onFullscreenChange"
- ></video>
- </view>
- </u-popup>
<!-- 绌虹姸鎬� -->
<view v-if="beforeProductionImgs.length === 0 && beforeProductionVideos.length === 0" class="empty-state">
@@ -101,7 +86,7 @@
></u-empty>
</view>
</view>
- </view>
+ </scroll-view>
</view>
</u-popup>
</view>
@@ -116,9 +101,8 @@
const beforeProductionImgs = ref([])
// 瑙嗛鏁扮粍
const beforeProductionVideos = ref([])
-// 瑙嗛鎾斁鍣�
-const showVideoPlayer = ref(false)
-const currentVideoUrl = ref('')
+// 鍥剧墖鍔犺浇鐘舵��
+const imageLoadingStates = ref({})
// 鎵撳紑寮圭獥骞跺姞杞芥暟鎹�
const openDialog = async (row) => {
@@ -129,7 +113,33 @@
beforeProductionImgs.value = beforeImgs
beforeProductionVideos.value = beforeVids
+
+ // 鍒濆鍖栧浘鐗囧姞杞界姸鎬�
+ beforeProductionImgs.value.forEach((_, index) => {
+ imageLoadingStates.value[index] = true
+ })
+
+ console.log('澶勭悊鍚庣殑鍥剧墖URLs:', beforeProductionImgs.value)
+ console.log('澶勭悊鍚庣殑瑙嗛URLs:', beforeVids)
+
dialogVisitable.value = true
+}
+
+// 鍥剧墖鍔犺浇閿欒澶勭悊
+const handleImageError = (e) => {
+ console.error('鍥剧墖鍔犺浇澶辫触:', e)
+ const index = e.target.dataset?.index
+ if (index !== undefined) {
+ imageLoadingStates.value[index] = false
+ }
+}
+
+// 鍥剧墖鍔犺浇鎴愬姛澶勭悊
+const handleImageLoad = (e) => {
+ const index = e.target.dataset?.index
+ if (index !== undefined) {
+ imageLoadingStates.value[index] = false
+ }
}
// 棰勮鍥剧墖
@@ -148,29 +158,33 @@
}
// 鎾斁瑙嗛
-const playVideo = (url, index) => {
- currentVideoUrl.value = url
- showVideoPlayer.value = true
-}
-
-// 鍏抽棴瑙嗛鎾斁鍣�
-const closeVideoPlayer = () => {
- showVideoPlayer.value = false
- currentVideoUrl.value = ''
+const playVideo = (videoId, url) => {
+ // 鍒涘缓video context骞惰繘鍏ュ叏灞�
+ setTimeout(() => {
+ try {
+ const videoContext = uni.createVideoContext(videoId)
+ console.log('瑙嗛涓婁笅鏂囧垱寤烘垚鍔�:', videoContext, 'videoId:', videoId)
+ // 鍏堟挱鏀捐棰�
+ videoContext.play()
+ // 鐒跺悗杩涘叆鍏ㄥ睆
+ setTimeout(() => {
+ videoContext.requestFullScreen({
+ direction: 90 // 妯睆鍏ㄥ睆
+ })
+ }, 100)
+ } catch (error) {
+ console.error('鍒涘缓瑙嗛涓婁笅鏂囨垨杩涘叆鍏ㄥ睆澶辫触:', error)
+ uni.showToast({
+ title: '鎾斁澶辫触',
+ icon: 'error'
+ })
+ }
+ }, 100)
}
// 瑙嗛鎾斁浜嬩欢
const onVideoPlay = () => {
// 鍙互鍦ㄨ繖閲屽鐞嗘挱鏀句簨浠�
-}
-
-// 鍏ㄥ睆鍙樺寲浜嬩欢
-const onFullscreenChange = (e) => {
- console.log('鍏ㄥ睆鐘舵�佸彉鍖�:', e)
- // 濡傛灉閫�鍑哄叏灞忥紝鍙互閫夋嫨鍏抽棴寮圭獥
- if (e.detail && e.detail.fullScreen === false) {
- // 鍙互閫夋嫨淇濇寔寮圭獥鎵撳紑鎴栧叧闂�
- }
}
// 琛ㄥ崟鍏抽棴鏂规硶
@@ -188,8 +202,21 @@
if (url.startsWith('http://') || url.startsWith('https://')) {
return url
}
- // 鍚﹀垯娣诲姞鍩虹鍩熷悕
- return `https://nj477vg8876.vicp.fun${url.startsWith('/') ? '' : '/'}${url}`
+
+ // 澶勭悊鍙嶆枩鏉犺矾寰勬牸寮忥紝濡� "\\zd\\prod\\file\\xxx.jpg"
+ let formattedUrl = url
+ // 灏嗗弽鏂滄潬杞崲涓烘鏂滄潬
+ formattedUrl = formattedUrl.replace(/\\/g, '/')
+ // 纭繚浠� / 寮�澶�
+ if (!formattedUrl.startsWith('/')) {
+ formattedUrl = '/' + formattedUrl
+ }
+
+ // 娣诲姞鍩虹鍩熷悕
+ const baseUrl = 'https://nj477vg8876.vicp.fun'
+ const fullUrl = `${baseUrl}${formattedUrl}`
+ console.log('鏍煎紡鍖朥RL:', url, '->', fullUrl)
+ return fullUrl
}
// 澶勭悊姣忎竴绫绘暟鎹細鍒嗙鍥剧墖鍜岃棰�
@@ -236,6 +263,7 @@
width: 100%;
display: flex;
flex-direction: column;
+ overflow: hidden;
}
.popup-header {
@@ -254,8 +282,11 @@
.upload-container {
flex: 1;
+ height: 0;
+ min-height: 0;
padding: 20px;
- overflow-y: auto;
+ box-sizing: border-box;
+ overflow: hidden;
}
.form-container {
@@ -285,6 +316,10 @@
.media-section {
margin-bottom: 30px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
}
.section-title {
@@ -311,57 +346,54 @@
.image-preview {
width: 100%;
height: 100%;
+ background-color: #f5f5f5;
+ display: block;
+}
+
+.image-loading {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(255, 255, 255, 0.8);
}
.video-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
+ margin-bottom: 0;
}
.video-item {
- width: 160px;
- height: 90px;
+ width: 300rpx;
+ height: 190rpx;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
+ background-color: #000;
+ flex-shrink: 0;
}
.video-thumbnail {
width: 100%;
height: 100%;
- object-fit: cover;
+ display: block;
}
-.video-overlay {
+.hidden-video {
position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.3);
- display: flex;
- align-items: center;
- justify-content: center;
+ top: -9999px;
+ left: -9999px;
+ width: 1px;
+ height: 1px;
+ opacity: 0;
pointer-events: none;
-}
-
-.video-player-container {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: #000;
- position: relative;
-}
-
-.video-player {
- width: 100%;
- height: 100%;
- max-width: 100vw;
- max-height: 100vh;
}
.empty-state {
--
Gitblit v1.9.3