From 00ae6e7c8ccb3e8abad027104529f18f68142a48 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 31 十二月 2025 10:41:56 +0800
Subject: [PATCH] 陕西昭德型煤： 1.现场巡检上传附件查看附件修改联调
---
src/components/imageUpload/viewQrCodeFiles.vue | 168 ++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 122 insertions(+), 46 deletions(-)
diff --git a/src/components/imageUpload/viewQrCodeFiles.vue b/src/components/imageUpload/viewQrCodeFiles.vue
index 32f5684..0c7aed2 100644
--- a/src/components/imageUpload/viewQrCodeFiles.vue
+++ b/src/components/imageUpload/viewQrCodeFiles.vue
@@ -2,22 +2,20 @@
<view>
<!-- 寮圭獥 -->
<u-popup
- v-model="dialogVisitable"
+ :show="dialogVisitable"
mode="center"
- width="90%"
- height="80%"
border-radius="20"
@close="cancel"
+ :closeable="true"
+ :customStyle="{
+ width: '92vw',
+ maxWidth: '720rpx',
+ height: '82vh'
+ }"
>
<view class="popup-content">
<view class="popup-header">
<text class="popup-title">鏌ョ湅闄勪欢</text>
- <u-icon
- name="close"
- size="24"
- color="#999"
- @click="cancel"
- ></u-icon>
</view>
<view class="upload-container">
@@ -51,15 +49,48 @@
v-for="(videoUrl, index) in beforeProductionVideos"
:key="index"
class="video-item"
- @click="previewVideo(videoUrl)"
+ @click="playVideo(videoUrl, index)"
>
- <view class="video-preview">
+ <video
+ :src="videoUrl"
+ class="video-thumbnail"
+ :poster="videoUrl"
+ :controls="false"
+ :show-center-play-btn="true"
+ @play="onVideoPlay"
+ ></video>
+ <view class="video-overlay">
<u-icon name="play-circle-fill" size="40" color="#fff"></u-icon>
</view>
- <view class="video-tip">鐐瑰嚮鎾斁</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">
@@ -85,6 +116,9 @@
const beforeProductionImgs = ref([])
// 瑙嗛鏁扮粍
const beforeProductionVideos = ref([])
+// 瑙嗛鎾斁鍣�
+const showVideoPlayer = ref(false)
+const currentVideoUrl = ref('')
// 鎵撳紑寮圭獥骞跺姞杞芥暟鎹�
const openDialog = async (row) => {
@@ -113,20 +147,30 @@
})
}
-// 棰勮瑙嗛
-const previewVideo = (url) => {
- uni.previewVideo({
- sources: [{
- src: url
- }],
- fail: (err) => {
- console.error('瑙嗛棰勮澶辫触:', err)
- uni.showToast({
- title: '瑙嗛棰勮澶辫触',
- icon: 'error'
- })
- }
- })
+// 鎾斁瑙嗛
+const playVideo = (url, index) => {
+ currentVideoUrl.value = url
+ showVideoPlayer.value = true
+}
+
+// 鍏抽棴瑙嗛鎾斁鍣�
+const closeVideoPlayer = () => {
+ showVideoPlayer.value = false
+ currentVideoUrl.value = ''
+}
+
+// 瑙嗛鎾斁浜嬩欢
+const onVideoPlay = () => {
+ // 鍙互鍦ㄨ繖閲屽鐞嗘挱鏀句簨浠�
+}
+
+// 鍏ㄥ睆鍙樺寲浜嬩欢
+const onFullscreenChange = (e) => {
+ console.log('鍏ㄥ睆鐘舵�佸彉鍖�:', e)
+ // 濡傛灉閫�鍑哄叏灞忥紝鍙互閫夋嫨鍏抽棴寮圭獥
+ if (e.detail && e.detail.fullScreen === false) {
+ // 鍙互閫夋嫨淇濇寔寮圭獥鎵撳紑鎴栧叧闂�
+ }
}
// 琛ㄥ崟鍏抽棴鏂规硶
@@ -135,6 +179,17 @@
// 閲嶇疆鏁版嵁
beforeProductionImgs.value = []
beforeProductionVideos.value = []
+}
+
+// 澶勭悊URL锛屾坊鍔犲熀纭�鍩熷悕
+function formatUrl(url) {
+ if (!url) return ''
+ // 濡傛灉宸茬粡鏄畬鏁碪RL锛岀洿鎺ヨ繑鍥�
+ if (url.startsWith('http://') || url.startsWith('https://')) {
+ return url
+ }
+ // 鍚﹀垯娣诲姞鍩虹鍩熷悕
+ return `https://nj477vg8876.vicp.fun${url.startsWith('/') ? '' : '/'}${url}`
}
// 澶勭悊姣忎竴绫绘暟鎹細鍒嗙鍥剧墖鍜岃棰�
@@ -147,10 +202,15 @@
const videos = []
items.forEach(item => {
+ const fileUrl = item.url || item.downloadUrl || item.fileUrl
+ if (!fileUrl) return
+
+ const fullUrl = formatUrl(fileUrl)
+
if (item.contentType?.startsWith('image/')) {
- images.push(item.url)
+ images.push(fullUrl)
} else if (item.contentType?.startsWith('video/')) {
- videos.push(item.url)
+ videos.push(fullUrl)
}
})
@@ -173,6 +233,7 @@
<style scoped lang="scss">
.popup-content {
height: 100%;
+ width: 100%;
display: flex;
flex-direction: column;
}
@@ -264,28 +325,43 @@
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.video-preview {
- width: 100%;
- height: 100%;
- background-color: #333;
- display: flex;
- align-items: center;
- justify-content: center;
position: relative;
}
-.video-tip {
+.video-thumbnail {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.video-overlay {
position: absolute;
- bottom: 5px;
- left: 50%;
- transform: translateX(-50%);
- font-size: 12px;
- color: #fff;
- background-color: rgba(0, 0, 0, 0.6);
- padding: 2px 8px;
- border-radius: 4px;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.3);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ 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