Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c7a1ba94 1 parent 47527ad5

feat(UploadMedia): 替换点击事件为tap并优化预览组件 

使用nut-image-preview组件替换自定义图片预览模态框
将click事件统一改为更适合移动端的tap事件
添加播放图标资源并替换文本播放按钮
优化保存后的页面跳转逻辑
Inline Side-by-side
Showing 3 changed files with 22 additions and 77 deletions
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1756374388710" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1502" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M852.727563 392.447107C956.997809 458.473635 956.941389 565.559517 852.727563 631.55032L281.888889 993.019655C177.618644 1059.046186 93.090909 1016.054114 93.090909 897.137364L93.090909 126.860063C93.090909 7.879206 177.675064-35.013033 281.888889 30.977769L852.727563 392.447107 852.727563 392.447107Z" fill="#FFFFFF" p-id="1503"></path></svg>
\ No newline at end of file
......@@ -136,45 +136,3 @@
left: 0;
}
}
\ No newline at end of file
.preview-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 1);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
.preview-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.preview-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.close-btn {
position: absolute;
top: 20rpx;
right: 20rpx;
width: 60rpx;
height: 60rpx;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
}
}
\ No newline at end of file
......
......@@ -7,7 +7,7 @@
<view
v-if="!uploadedFile"
class="border border-dashed border-gray-300 rounded-lg p-8 flex flex-col items-center justify-center mb-4 bg-white"
@click="chooseMedia"
@tap="chooseMedia"
>
<view class="text-gray-400 mb-4">
<Photograph size="48" />
......@@ -26,10 +26,10 @@
:src="uploadedFile.url"
class="w-full h-64 object-cover cursor-pointer"
mode="aspectFit"
@click="previewImage"
@tap="previewImage"
/>
<view
@click="removeFile"
@tap="removeFile"
class="absolute top-2 right-2 w-8 h-8 bg-black bg-opacity-50 rounded-full flex items-center justify-center"
>
<Close size="16" class="text-white" />
......@@ -40,7 +40,7 @@
<view v-if="uploadedFile.type === 'video'" class="relative rounded-lg overflow-hidden bg-white shadow-sm">
<view
class="relative w-full h-64 bg-black rounded-lg flex items-center justify-center"
@click="playVideo"
@tap="playVideo"
>
<image
v-if="uploadedFile.thumbnail"
......@@ -50,12 +50,12 @@
/>
<view class="absolute inset-0 flex items-center justify-center">
<view class="w-16 h-16 bg-black bg-opacity-60 rounded-full flex items-center justify-center">
<text class="text-white text-2xl">▶</text>
<image :src="playIcon" class="w-6 h-6" />
</view>
</view>
</view>
<view
@click="removeFile"
@tap="removeFile"
class="absolute top-2 right-2 w-8 h-8 bg-black bg-opacity-50 rounded-full flex items-center justify-center"
>
<Close size="16" class="text-white" />
......@@ -74,14 +74,14 @@
<!-- Action Buttons -->
<view class="flex gap-3">
<view
@click="chooseMedia"
@tap="chooseMedia"
class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-lg text-center"
>
{{ uploadedFile ? '重新选择' : '选择文件' }}
</view>
<view
v-if="uploadedFile"
@click="saveMedia"
@tap="saveMedia"
class="flex-1 bg-blue-500 text-white py-3 rounded-lg text-center"
>
保存
......@@ -94,11 +94,11 @@
v-if="videoVisible"
class="fixed inset-0 bg-black"
style="z-index: 9999;"
@click="closeVideo"
@tap="closeVideo"
>
<!-- Close Button -->
<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;"
>
......@@ -118,7 +118,7 @@
:object-fit="'contain'"
:show-fullscreen-btn="true"
style="width: 100vw; height: 100vh; position: absolute; top: 0; left: 0;"
@click.stop
@tap.stop
@play="handleVideoPlay"
@pause="handleVideoPause"
@error="handleVideoError"
......@@ -126,31 +126,14 @@
/>
</view>
<!-- Image Preview Modal -->
<view
v-if="previewVisible"
class="fixed inset-0 bg-black"
style="z-index: 9999;"
@click="closePreview"
>
<!-- Close Button -->
<view
@click.stop="closePreview"
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;"
>
<Close size="24" class="text-white" />
</view>
<!-- Image Preview -->
<image
:src="previewImages[previewIndex]?.src"
class="w-full h-full object-contain"
mode="aspectFit"
@click.stop
<!-- 图片预览 -->
<nut-image-preview
v-model:show="previewVisible"
:images="previewImages"
:init-no="previewIndex"
@close="closePreview"
/>
</view>
</view>
</template>
<script setup>
......@@ -158,6 +141,7 @@ import { ref, onMounted } from 'vue';
import Taro from '@tarojs/taro';
import { Left, Photograph, Close } from '@nutui/icons-vue-taro';
import BASE_URL from '@/utils/config';
import playIcon from '@/assets/images/icon/play.svg';
// 响应式数据
const uploadedFile = ref(null);
......@@ -404,7 +388,9 @@ const saveMedia = async () => {
// 延迟返回Dashboard页面
setTimeout(() => {
Taro.navigateBack();
Taro.reLaunch({
url: '/pages/Dashboard/index'
});
}, 2000);
} catch (error) {
console.error('上传失败:', error);
......