From ae91c2877d2389a4ee5f87fd0c942d9be9d91b49 Mon Sep 17 00:00:00 2001
From: xuqingkai <xuqingkai@hd123.com>
Date: Tue, 16 Jul 2024 13:18:17 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20=20=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84VideoPreview=E8=A7=86=E9=A2=91=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/abstracts/variable.scss |  7 +++-
 .../components/wd-config-provider/types.ts    |  9 ++++-
 .../components/wd-video-preview/index.scss    | 18 ++++++----
 .../wd-video-preview/wd-video-preview.vue     | 34 +++++++++++--------
 4 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
index b7eb4c2f..9b970103 100644
--- a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
+++ b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
@@ -885,4 +885,9 @@ $-text-info-color: var(--wot-text-info-color, $-color-info) !default;
 $-text-primary-color: var(--wot-text-primary-color, $-color-theme) !default;
 $-text-error-color: var(--wot-text-error-color, $-color-danger) !default;
 $-text-warning-color: var(--wot-text-warning-color, $-color-warning) !default;
-$-text-success-color: var(--wot-text-success-color, $-color-success) !default;
\ No newline at end of file
+$-text-success-color: var(--wot-text-success-color, $-color-success) !default;
+
+/* video-preview */
+$-video-preview-bg: var(--wot-video-preview-bg, rgba(0, 0, 0, 0.8)) !default; // 背景色
+$-video-preview-close-color: var(--wot-video-preview-close-color, #fff) !default; // 图标颜色
+$-video-preview-close-font-size: var(--wot-video-preview-close-font-size, 20px) !default; // 图标大小
diff --git a/src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts b/src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts
index 386a7ea9..244702f4 100644
--- a/src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts
@@ -929,6 +929,12 @@ export type textThemeVars = {
   textSuccessColor?: string
 }
 
+export type videoPreviewThemeVars = {
+  videoPreviewBg?: string
+  videoPreviewCloseColor?: string
+  videoPreviewCloseFontSize?: string
+}
+
 export type ConfigProviderThemeVars = baseThemeVars &
   actionSheetThemeVars &
   badgeThemeVars &
@@ -987,4 +993,5 @@ export type ConfigProviderThemeVars = baseThemeVars &
   formItemThemeVars &
   backtopThemeVars &
   indexBarThemeVars &
-  textThemeVars
+  textThemeVars &
+  videoPreviewThemeVars
diff --git a/src/uni_modules/wot-design-uni/components/wd-video-preview/index.scss b/src/uni_modules/wot-design-uni/components/wd-video-preview/index.scss
index 779107ae..1e3a2dc3 100644
--- a/src/uni_modules/wot-design-uni/components/wd-video-preview/index.scss
+++ b/src/uni_modules/wot-design-uni/components/wd-video-preview/index.scss
@@ -5,14 +5,14 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 101;
+  z-index: 999;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background: #000;
+  background: $-video-preview-bg;
 
   @include e(video) {
     width: 100%;
@@ -20,9 +20,15 @@
     transition: all 0.3s ease;
   }
 
-  @include edeep(close){
-    margin-top: 64px;
-    padding: 6px;
-    color: $-curtain-content-close-color;
+  @include edeep(close) {
+    position: absolute;
+    box-sizing: border-box;
+    top: 0px;
+    right: 0px;
+    padding: 12px;
+    text-align: center;
+    cursor: pointer;
+    font-size: $-video-preview-close-font-size;
+    color: $-video-preview-close-color;
   }
 }
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-video-preview/wd-video-preview.vue b/src/uni_modules/wot-design-uni/components/wd-video-preview/wd-video-preview.vue
index b3a8248a..930c0e32 100644
--- a/src/uni_modules/wot-design-uni/components/wd-video-preview/wd-video-preview.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-video-preview/wd-video-preview.vue
@@ -1,18 +1,19 @@
 <template>
-  <view :class="`wd-video-preview ${customClass}`" :style="customStyle" v-if="showPopup">
-    <video
-      class="wd-video-preview__video"
-      v-if="previdewVideo.url"
-      :controls="true"
-      :poster="previdewVideo.poster"
-      :title="previdewVideo.title"
-      play-btn-position="center"
-      :enableNative="true"
-      :src="previdewVideo.url"
-      :enable-progress-gesture="false"
-    ></video>
-
-    <wd-icon name="close-circle" size="48px" :custom-class="`wd-video-preview__close`" @click="close" />
+  <view :class="`wd-video-preview ${customClass}`" :style="customStyle" v-if="showPopup" @click="close">
+    <view class="wd-video-preview__video" @click.stop="">
+      <video
+        class="wd-video-preview__video"
+        v-if="previdewVideo.url"
+        :controls="true"
+        :poster="previdewVideo.poster"
+        :title="previdewVideo.title"
+        play-btn-position="center"
+        :enableNative="true"
+        :src="previdewVideo.url"
+        :enable-progress-gesture="false"
+      ></video>
+    </view>
+    <wd-icon name="close" :custom-class="`wd-video-preview__close`" @click="close" />
   </view>
 </template>
 
@@ -28,7 +29,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue'
+import { nextTick, reactive, ref } from 'vue'
 import { videoPreviewProps, type PreviewVideo, type VideoPreviewExpose } from './types'
 defineProps(videoPreviewProps)
 
@@ -44,6 +45,9 @@ function open(video: PreviewVideo) {
 
 function close() {
   showPopup.value = false
+  nextTick(() => {
+    handleClosed()
+  })
 }
 
 function handleClosed() {