hookehuyr

fix: 修复媒体预览和反馈页面的交互问题

- 将click事件替换为tap事件以提升移动端体验
- 修复图片预览初始化索引不正确的问题
- 优化缩略图显示和删除按钮样式
- 移除多余的thumbnail回退逻辑
......@@ -30,7 +30,7 @@ export function useMediaPreview() {
if (item.media_type === 'IMAGE') {
// 图片预览
const imageItems = mediaList.filter(media => media.media_type === 'IMAGE');
previewImages.value = imageItems.map(img => ({
previewImages.value = imageItems.map(img => ({
src: img.media_url,
id: img.id,
thumbnail: img.thumbnail,
......
......@@ -84,7 +84,7 @@
>
<!-- 关闭按钮 -->
<view
@click.stop="closeVideo"
@tap.stop="closeVideo"
class="absolute top-4 right-4 w-10 h-10 bg-black bg-opacity-50 rounded-full flex items-center justify-center"
style="z-index: 10000;"
>
......@@ -104,7 +104,7 @@
:object-fit="'contain'"
:show-fullscreen-btn="true"
style="width: 100vw; height: 50vh; position: absolute; top: 20vh; left: 0;"
@click.stop
@tap.stop
@play="handleVideoPlay"
@pause="handleVideoPause"
@error="handleVideoError"
......@@ -172,7 +172,7 @@ const fetchAlbumList = async () => {
id: item.id,
type: item.media_type === 'IMAGE' ? 'image' : 'video',
url: item.media_url,
thumbnail: item.thumbnail || item.media_url, // 使用thumbnail字段,如果没有则使用media_url
thumbnail: item.thumbnail,
is_my: item.is_my,
media_type: item.media_type,
media_url: item.media_url
......
......@@ -28,14 +28,14 @@
<image
:src="item.url"
class="w-24 h-24 rounded-lg object-cover"
mode="widthFix"
mode="aspectFill"
@tap="() => previewImage(index)"
/>
<view
@click="() => deleteImage(index)"
class="absolute -top-2 -right-2 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center"
class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center"
>
<view class="text-white text-xs">×</view>
<view class="text-white" style="font-size: 24rpx; line-height: 24rpx">×</view>
</view>
</view>
<!-- 上传按钮 -->
......@@ -100,7 +100,7 @@
<nut-image-preview
v-model:show="previewVisible"
:images="previewImages"
:init-no="0"
:init-no="currentPreviewIndex"
@close="closePreview"
/>
</view>
......@@ -119,6 +119,7 @@ const name = ref('');
const contact = ref('');
const previewVisible = ref(false);
const previewImages = ref([]);
const currentPreviewIndex = ref(0);
const maxImages = 3;
/**
......@@ -220,6 +221,7 @@ const uploadImage = (filePath) => {
*/
const previewImage = (index) => {
previewImages.value = screenshots.value.map(item => ({ src: item.url }));
currentPreviewIndex.value = index;
previewVisible.value = true;
};
......