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 | 200 ++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 154 insertions(+), 46 deletions(-)
diff --git a/src/components/imageUpload/viewQrCodeFiles.vue b/src/components/imageUpload/viewQrCodeFiles.vue
index 32f5684..5fd27af 100644
--- a/src/components/imageUpload/viewQrCodeFiles.vue
+++ b/src/components/imageUpload/viewQrCodeFiles.vue
@@ -2,25 +2,28 @@
<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">
+ <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>
@@ -38,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>
@@ -51,12 +61,18 @@
v-for="(videoUrl, index) in beforeProductionVideos"
:key="index"
class="video-item"
- @click="previewVideo(videoUrl)"
+ @click="playVideo(`video_${index}`, videoUrl)"
>
- <view class="video-preview">
- <u-icon name="play-circle-fill" size="40" color="#fff"></u-icon>
- </view>
- <view class="video-tip">鐐瑰嚮鎾斁</view>
+ <image
+ :src="videoUrl"
+ mode="aspectFill"
+ class="video-thumbnail"
+ />
+ <video
+ :id="`video_${index}`"
+ :src="videoUrl"
+ class="hidden-video"
+ ></video>
</view>
</view>
</view>
@@ -70,7 +86,7 @@
></u-empty>
</view>
</view>
- </view>
+ </scroll-view>
</view>
</u-popup>
</view>
@@ -85,6 +101,8 @@
const beforeProductionImgs = ref([])
// 瑙嗛鏁扮粍
const beforeProductionVideos = ref([])
+// 鍥剧墖鍔犺浇鐘舵��
+const imageLoadingStates = ref({})
// 鎵撳紑寮圭獥骞跺姞杞芥暟鎹�
const openDialog = async (row) => {
@@ -95,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
+ }
}
// 棰勮鍥剧墖
@@ -113,20 +157,34 @@
})
}
-// 棰勮瑙嗛
-const previewVideo = (url) => {
- uni.previewVideo({
- sources: [{
- src: url
- }],
- fail: (err) => {
- console.error('瑙嗛棰勮澶辫触:', err)
+// 鎾斁瑙嗛
+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: '瑙嗛棰勮澶辫触',
+ title: '鎾斁澶辫触',
icon: 'error'
})
}
- })
+ }, 100)
+}
+
+// 瑙嗛鎾斁浜嬩欢
+const onVideoPlay = () => {
+ // 鍙互鍦ㄨ繖閲屽鐞嗘挱鏀句簨浠�
}
// 琛ㄥ崟鍏抽棴鏂规硶
@@ -135,6 +193,30 @@
// 閲嶇疆鏁版嵁
beforeProductionImgs.value = []
beforeProductionVideos.value = []
+}
+
+// 澶勭悊URL锛屾坊鍔犲熀纭�鍩熷悕
+function formatUrl(url) {
+ if (!url) return ''
+ // 濡傛灉宸茬粡鏄畬鏁碪RL锛岀洿鎺ヨ繑鍥�
+ if (url.startsWith('http://') || url.startsWith('https://')) {
+ return 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
}
// 澶勭悊姣忎竴绫绘暟鎹細鍒嗙鍥剧墖鍜岃棰�
@@ -147,10 +229,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,8 +260,10 @@
<style scoped lang="scss">
.popup-content {
height: 100%;
+ width: 100%;
display: flex;
flex-direction: column;
+ overflow: hidden;
}
.popup-header {
@@ -193,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 {
@@ -224,6 +316,10 @@
.media-section {
margin-bottom: 30px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
}
.section-title {
@@ -250,42 +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-preview {
+.video-thumbnail {
width: 100%;
height: 100%;
- background-color: #333;
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
+ display: block;
}
-.video-tip {
+.hidden-video {
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: -9999px;
+ left: -9999px;
+ width: 1px;
+ height: 1px;
+ opacity: 0;
+ pointer-events: none;
}
.empty-state {
--
Gitblit v1.9.3