@tplc/wot 0.0.1

package/components/wd-video-preview/index.scss

@@ -0,0 +1,34 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/_mixin';
+
+@include b(video-preview) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: $-video-preview-bg;
+
+  @include e(video) {
+    width: 100%;
+    height: 242px;
+    transition: all 0.3s ease;
+  }
+
+  @include edeep(close) {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    box-sizing: border-box;
+    padding: 12px;
+    font-size: $-video-preview-close-font-size;
+    color: $-video-preview-close-color;
+    text-align: center;
+    cursor: pointer;
+  }
+}

package/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>

package/components/wd-video-preview/wd-video-preview.vue

@@ -0,0 +1,76 @@
+<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 { 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';
+</style>

package/components/wd-watermark/index.scss

@@ -0,0 +1,18 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/_mixin';
+
+@include b(watermark) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1100;
+  pointer-events: none;
+  background-repeat: repeat;
+  opacity: 0.5;
+
+  @include when(fullscreen) {
+    position: fixed;
+  }
+}

package/components/wd-watermark/types.ts

@@ -0,0 +1,82 @@
+import type { ExtractPropTypes } from 'vue'
+import {
+  baseProps,
+  makeBooleanProp,
+  makeNumberProp,
+  makeNumericProp,
+  makeStringProp,
+} from '../common/props'
+
+export const watermarkProps = {
+  ...baseProps,
+  /**
+   * 显示内容
+   */
+  content: makeStringProp(''),
+  /**
+   * 显示图片的地址，支持网络图片和base64（钉钉小程序仅支持网络图片）
+   */
+  image: makeStringProp(''),
+  /**
+   * 图片高度
+   */
+  imageHeight: makeNumberProp(100),
+  /**
+   * 图片高度
+   */
+  imageWidth: makeNumberProp(100),
+  /**
+   * X轴间距，单位px
+   */
+  gutterX: makeNumberProp(0),
+  /**
+   * Y轴间距，单位px
+   */
+  gutterY: makeNumberProp(0),
+  /**
+   * canvas画布宽度，单位px
+   */
+  width: makeNumberProp(100),
+  /**
+   * canvas画布高度，单位px
+   */
+  height: makeNumberProp(100),
+  /**
+   * 是否为全屏水印
+   */
+  fullScreen: makeBooleanProp(true),
+  /**
+   * 水印字体颜色
+   */
+  color: makeStringProp('#8c8c8c'),
+  /**
+   * 水印字体大小，单位px
+   */
+  size: makeNumberProp(14),
+  /**
+   * 水印字体样式（仅微信和h5支持），可能的值：normal、italic、oblique
+   */
+  fontStyle: makeStringProp('normal'),
+  /**
+   * 水印字体的粗细（仅微信和h5支持）
+   */
+  fontWeight: makeNumericProp('normal'),
+  /**
+   * 水印字体系列（仅微信和h5支持）
+   */
+  fontFamily: makeStringProp('PingFang SC'),
+  /**
+   * 水印旋转角度
+   */
+  rotate: makeNumberProp(-25),
+  /**
+   * 自定义层级
+   */
+  zIndex: makeNumberProp(1100),
+  /**
+   * 自定义透明度，取值 0~1
+   */
+  opacity: makeNumberProp(0.5),
+}
+
+export type WatermarkProps = ExtractPropTypes<typeof watermarkProps>