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

使用nut-image-preview组件替换自定义图片预览模态框将click事件统一改为更适合移动端的tap事件添加播放图标资源并替换文本播放按钮优化保存后的页面跳转逻辑

feat(UploadMedia): 替换点击事件为tap并优化预览组件
使用nut-image-preview组件替换自定义图片预览模态框将click事件统一改为更适合移动端的tap事件添加播放图标资源并替换文本播放按钮优化保存后的页面跳转逻辑
hookehuyr
Commit c7a1ba94e6115a07e023d133b8f8ae6ce6d7660b c7a1ba94 1 parent 47527ad5
Showing 3 changed files with 22 additions and 77 deletions
src/assets/images/icon/play.svg
src/pages/UploadMedia/index.less
src/pages/UploadMedia/index.vue
--- a/src/assets/images/icon/play.svg 0 → 100644
View file @c7a1ba9
+++ b/src/assets/images/icon/play.svg 0 → 100644
View file @c7a1ba9
+<?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
--- a/src/pages/UploadMedia/index.less
View file @c7a1ba9
+++ b/src/pages/UploadMedia/index.less
View file @c7a1ba9
@@ -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
--- a/src/pages/UploadMedia/index.vue
View file @c7a1ba9
+++ b/src/pages/UploadMedia/index.vue
View file @c7a1ba9
@@ -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
+    <nut-image-preview
-      v-if="previewVisible"
+      v-model:show="previewVisible"
-      class="fixed inset-0 bg-black"
+      :images="previewImages"
-      style="z-index: 9999;"
+      :init-no="previewIndex"
-      @click="closePreview"
+      @close="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
     />
   </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);