更新：登录功能

uni_modules/wot-design-uni/components/wd-video-preview/index.scss

@@ -0,0 +1,34 @@
+@import "../common/abstracts/variable.scss";
+@import "../common/abstracts/_mixin.scss";
+
+@include b(video-preview) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: $-video-preview-bg;
+
+  @include e(video) {
+    width: 100%;
+    height: 242px;
+    transition: all 0.3s ease;
+  }
+
+  @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;
+  }
+}

uni_modules/wot-design-uni/components/wd-video-preview/types.ts

@@ -0,0 +1,32 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-06-30 23:09:08
+ * @LastEditTime: 2024-07-01 21:47:34
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-video-preview/types.ts
+ * 记得注释
+ */
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps } from '../common/props'
+
+export const videoPreviewProps = {
+  ...baseProps
+}
+
+export type PreviewVideo = {
+  url: string // 视频资源地址
+  poster?: string // 视频封面
+  title?: string // 视频标题
+}
+
+export type VideoPreviewProps = ExtractPropTypes<typeof videoPreviewProps>
+
+export type VideoPreviewExpose = {
+  // 打开弹框
+  open: (video: PreviewVideo) => void
+  // 关闭弹框
+  close: () => void
+}
+
+export type VideoPreviewInstance = ComponentPublicInstance<VideoPreviewExpose, VideoPreviewProps>

uni_modules/wot-design-uni/components/wd-video-preview/wd-video-preview.vue

@@ -0,0 +1,72 @@
+<template>
+  <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>
+
+<script lang="ts">
+export default {
+  name: 'wd-video-preview',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { nextTick, reactive, ref } from 'vue'
+import { videoPreviewProps, type PreviewVideo, type VideoPreviewExpose } from './types'
+import { useLockScroll } from '../composables/useLockScroll'
+defineProps(videoPreviewProps)
+
+const showPopup = ref<boolean>(false)
+const previdewVideo = reactive<PreviewVideo>({ url: '', poster: '', title: '' })
+
+function open(video: PreviewVideo) {
+  showPopup.value = true
+  previdewVideo.url = video.url
+  previdewVideo.poster = video.poster
+  previdewVideo.title = video.title
+}
+
+function close() {
+  showPopup.value = false
+  nextTick(() => {
+    handleClosed()
+  })
+}
+
+function handleClosed() {
+  previdewVideo.url = ''
+  previdewVideo.poster = ''
+  previdewVideo.title = ''
+}
+
+// #ifdef H5
+useLockScroll(() => showPopup.value)
+// #endif
+
+defineExpose<VideoPreviewExpose>({
+  open,
+  close
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>