<template>
|
<view>
|
<!-- 弹窗 -->
|
<u-popup
|
:show="dialogVisitable"
|
mode="center"
|
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>
|
</view>
|
|
<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>
|
|
<!-- 图片列表 -->
|
<view v-if="beforeProductionImgs.length > 0" class="media-section">
|
<view class="section-title">图片</view>
|
<view class="image-grid">
|
<view
|
v-for="(item, index) in beforeProductionImgs"
|
:key="index"
|
class="image-item"
|
@click="previewImage(item, index)"
|
>
|
<image
|
: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>
|
|
<!-- 视频列表 -->
|
<view v-if="beforeProductionVideos.length > 0" class="media-section">
|
<view class="section-title">视频</view>
|
<view class="video-grid">
|
<view
|
v-for="(videoUrl, index) in beforeProductionVideos"
|
:key="index"
|
class="video-item"
|
@click="playVideo(`video_${index}`, videoUrl)"
|
>
|
<image
|
:src="videoUrl"
|
mode="aspectFill"
|
class="video-thumbnail"
|
/>
|
<video
|
:id="`video_${index}`"
|
:src="videoUrl"
|
class="hidden-video"
|
></video>
|
</view>
|
</view>
|
</view>
|
|
<!-- 空状态 -->
|
<view v-if="beforeProductionImgs.length === 0 && beforeProductionVideos.length === 0" class="empty-state">
|
<u-empty
|
mode="data"
|
text="暂无附件"
|
:iconSize="60"
|
></u-empty>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onUnmounted } from 'vue'
|
|
// 控制弹窗显示
|
const dialogVisitable = ref(false)
|
// 图片数组
|
const beforeProductionImgs = ref([])
|
// 视频数组
|
const beforeProductionVideos = ref([])
|
// 图片加载状态
|
const imageLoadingStates = ref({})
|
|
// 打开弹窗并加载数据
|
const openDialog = async (row) => {
|
console.log('打开附件查看弹窗，数据:', row)
|
|
// 处理数据，分离图片和视频
|
const { images: beforeImgs, videos: beforeVids } = processItems(row.storageBlobDTO || [])
|
|
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
|
}
|
}
|
|
// 预览图片
|
const previewImage = (url, index) => {
|
uni.previewImage({
|
urls: beforeProductionImgs.value,
|
current: index,
|
fail: (err) => {
|
console.error('图片预览失败:', err)
|
uni.showToast({
|
title: '图片预览失败',
|
icon: 'error'
|
})
|
}
|
})
|
}
|
|
// 播放视频
|
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 cancel = () => {
|
dialogVisitable.value = false
|
// 重置数据
|
beforeProductionImgs.value = []
|
beforeProductionVideos.value = []
|
}
|
|
// 处理URL，添加基础域名
|
function formatUrl(url) {
|
if (!url) return ''
|
// 如果已经是完整URL，直接返回
|
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('格式化URL:', url, '->', fullUrl)
|
return fullUrl
|
}
|
|
// 处理每一类数据：分离图片和视频
|
function processItems(items) {
|
if (!items || !Array.isArray(items)) {
|
return { images: [], videos: [] }
|
}
|
|
const images = []
|
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(fullUrl)
|
} else if (item.contentType?.startsWith('video/')) {
|
videos.push(fullUrl)
|
}
|
})
|
|
return { images, videos }
|
}
|
|
// 组件销毁时的清理
|
onUnmounted(() => {
|
// 关闭弹窗
|
dialogVisitable.value = false
|
// 清理数据
|
beforeProductionImgs.value = []
|
beforeProductionVideos.value = []
|
})
|
|
// 暴露方法给父组件
|
defineExpose({ openDialog })
|
</script>
|
|
<style scoped lang="scss">
|
.popup-content {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
}
|
|
.popup-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20px;
|
border-bottom: 1px solid #f0f0f0;
|
}
|
|
.popup-title {
|
font-size: 18px;
|
font-weight: 600;
|
color: #333;
|
}
|
|
.upload-container {
|
flex: 1;
|
height: 0;
|
min-height: 0;
|
padding: 20px;
|
box-sizing: border-box;
|
overflow: hidden;
|
}
|
|
.form-container {
|
width: 100%;
|
}
|
|
.title {
|
font-size: 16px;
|
color: #1890ff;
|
line-height: 24px;
|
font-weight: 600;
|
padding-left: 12px;
|
position: relative;
|
margin: 0 0 20px 0;
|
|
&::before {
|
content: "";
|
position: absolute;
|
left: 0;
|
top: 4px;
|
width: 4px;
|
height: 16px;
|
background-color: #1890ff;
|
border-radius: 2px;
|
}
|
}
|
|
.media-section {
|
margin-bottom: 30px;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
|
.section-title {
|
font-size: 14px;
|
color: #666;
|
margin-bottom: 15px;
|
font-weight: 500;
|
}
|
|
.image-grid {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px;
|
}
|
|
.image-item {
|
width: 100px;
|
height: 100px;
|
border-radius: 8px;
|
overflow: hidden;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
}
|
|
.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: 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%;
|
display: block;
|
}
|
|
.hidden-video {
|
position: absolute;
|
top: -9999px;
|
left: -9999px;
|
width: 1px;
|
height: 1px;
|
opacity: 0;
|
pointer-events: none;
|
}
|
|
.empty-state {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 200px;
|
}
|
</style>
|
