hookehuyr

feat(图片预览): 添加图片预览功能并优化视频播放重置逻辑

添加van-image-preview组件实现图片预览功能,包括图片列表管理和索引控制
优化视频播放器停止逻辑,增加播放进度重置到开始位置
修复长文本显示问题,添加word-break和word-wrap样式
......@@ -177,6 +177,14 @@
</div>
</div>
</van-popup>
<!-- 图片预览弹窗 -->
<van-image-preview
v-model:show="imageShow"
:images="imageList"
:start-position="imageIndex"
:show-index="true"
/>
</div>
</template>
......@@ -233,6 +241,9 @@ const videoUrl = ref('')
const videoCover = ref('')
const isVideoPlaying = ref(false)
const videoPlayerRef = ref(null)
const imageShow = ref(false)
const imageList = ref([])
const imageIndex = ref(0)
/**
* 返回上一页
......@@ -452,6 +463,10 @@ const onClickPreview = (file, detail) => {
} else if (activeType.value === 'video' || isVideoFile(fileName)) {
console.log('准备播放视频:', fileName, fileUrl)
showVideo(fileName, fileUrl)
} else if (activeType.value === 'image' || isImageFile(fileName)) {
console.log('图片预览由van-uploader组件处理,跳过文件列表点击预览')
// 图片预览由van-uploader的@click-preview事件处理,避免重复弹出
return
} else {
console.log('该文件类型不支持预览,文件名:', fileName, '打卡类型:', activeType.value)
showToast('该文件类型不支持预览')
......@@ -534,6 +549,9 @@ const previewFile = (item) => {
} else if (activeType.value === 'video' || isVideoFile(fileName)) {
console.log('准备播放视频:', fileName, fileUrl)
showVideo(fileName, fileUrl)
} else if (activeType.value === 'image' || isImageFile(fileName)) {
console.log('准备预览图片:', fileName, fileUrl)
showImage(fileUrl)
} else {
console.log('该文件类型不支持预览,文件名:', fileName, '打卡类型:', activeType.value)
showToast('该文件类型不支持预览')
......@@ -561,6 +579,16 @@ const isVideoFile = (fileName) => {
}
/**
* 判断是否为图片文件
* @param {string} fileName - 文件名
* @returns {boolean}
*/
const isImageFile = (fileName) => {
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg']
return imageExtensions.some(ext => fileName.toLowerCase().includes(ext))
}
/**
* 显示音频播放器
* @param {string} title - 音频标题
* @param {string} url - 音频URL
......@@ -586,6 +614,17 @@ const showVideo = (title, url, cover = '') => {
}
/**
* 显示图片预览
* @param {string} url - 图片URL
* @param {number} index - 图片索引(可选)
*/
const showImage = (url, index = 0) => {
imageList.value = [url]
imageIndex.value = index
imageShow.value = true
}
/**
* 开始播放视频
*/
const startVideoPlay = async () => {
......@@ -616,6 +655,11 @@ const handleVideoPause = () => {
const stopVideoPlay = () => {
if (videoPlayerRef.value && typeof videoPlayerRef.value.pause === 'function') {
videoPlayerRef.value.pause()
// 重置视频播放进度到开始位置
const player = videoPlayerRef.value.getPlayer()
if (player && typeof player.currentTime === 'function') {
player.currentTime(0)
}
}
isVideoPlaying.value = false
}
......@@ -929,6 +973,8 @@ onMounted(async () => {
color: #333;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
word-wrap: break-word;
// white-space: nowrap;
}
......