@tplc/wot 0.1.82 → 0.1.83

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.83](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.4.75...v0.1.83) (2025-04-25)
+
 ### [0.1.82](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.4.69...v0.1.82) (2025-04-15)
 
 

package/components/wd-img/wd-img.vue

@@ -7,7 +7,6 @@
       :mode="mode"
       :lazy-load="lazyLoad"
     />
-
     <image
       :class="`wd-img__image coverImg ${customImage}`"
       :src="wrapPhoto({ photo: src, width, type: 1 })"
@@ -35,7 +34,7 @@ export default {
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
-import { addUnit, isDef, objToStyle } from '../common/util'
+import { addUnit, isDef, isVideoUrl, objToStyle } from '../common/util'
 import { imgProps } from './types'
 
 const props = defineProps(imgProps)
@@ -101,6 +100,14 @@ function wrapPhoto({ photo, width = 100, type = 1 }: any) {
 
   const isctyun = photo?.indexOf('.ctyun') >= 0
   const sym = photo?.indexOf('?') > 0 ? '&' : '?'
+  if (isVideoUrl(photo)) {
+    const suffix = isctyun
+      ? `${sym}x-amz-process=video/snapshot,t_2000,w_${finalWidth},m_lfit`
+      : `${sym}x-oss-process=video/snapshot,t_2000,w_${finalWidth}&imageView2/2/w/${finalWidth}`
+    const url = `${photo}${suffix}`
+    console.log(url, 'url')
+    return url
+  }
   const suffix = isctyun
     ? `${sym}x-amz-process=image/resize,w_${finalWidth},m_lfit`
     : `${sym}x-oss-process=image/resize,m_mfit,w_${finalWidth}&imageView2/2/w/${finalWidth}`

package/components/wd-swiper/wd-swiper.vue

@@ -18,40 +18,39 @@
       @animationfinish="handleAnimationfinish"
     >
       <swiper-item
-        v-for="(item, index) in list"
+        v-for="(item, index) in innerList"
         :key="index"
         class="wd-swiper__item"
         :style="{ paddingRight: itemPadding, paddingLeft: itemPadding }"
         @click="handleClick(index, item)"
       >
         <view
-          :class="`wd-swiper__image overflow-hidden ${customImageClass} ${getCustomImageClass(navCurrent, index, list)}`"
+          :class="`wd-swiper__image relative overflow-hidden ${customImageClass} ${getCustomImageClass(navCurrent, index, list)}`"
           :style="{
             borderRadius: imageRadius,
             height: getCustomImageHeight(navCurrent, index, list),
-
             width: imgWidth ? addUnit(imgWidth) : undefined,
           }"
         >
-          <lcb-action-view
-            v-if="action && typeof item === 'object'"
-            v-bind="item.link"
-            customClass="w-full h-full"
-          >
-            <wd-img
-              :src="isObj(item) ? item[valueKey] : item"
-              height="100%"
-              width="100%"
-              :mode="imageMode"
-            />
-          </lcb-action-view>
-          <wd-img
-            v-else
-            :src="isObj(item) ? item[valueKey] : item"
-            height="100%"
-            width="100%"
-            :mode="imageMode"
-          />
+          <template v-if="item.videoUrl">
+            <wd-img :src="item.url" height="100%" width="100%" :mode="imageMode" />
+            <view
+              class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-black/50"
+              @click.stop="handlePreviewVieo(item.videoUrl)"
+            >
+              <wd-icon name="play-circle-filled" size="90rpx" color="#fff"></wd-icon>
+            </view>
+          </template>
+          <template v-else>
+            <lcb-action-view
+              v-if="action && typeof item === 'object'"
+              v-bind="item.link"
+              customClass="w-full h-full"
+            >
+              <wd-img :src="item.url" height="100%" width="100%" :mode="imageMode" />
+            </lcb-action-view>
+            <wd-img v-else :src="item.url" height="100%" width="100%" :mode="imageMode" />
+          </template>
         </view>
       </swiper-item>
     </swiper>
@@ -72,20 +71,21 @@
         :customStyle="indicatorCustomStyle"
       />
     </template>
+    <wd-video-preview ref="videoPreview"></wd-video-preview>
   </view>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, ref, useSlots } from 'vue'
-import { addUnit, isObj } from '../common/util'
+import { computed, watch, ref } from 'vue'
+import { addUnit, isObj, isVideoUrl } from '../common/util'
 import { swiperProps, type SwiperList } from './types'
 import type { SwiperNavProps } from '../wd-swiper-nav/types'
+import { VideoPreviewInstance } from '../wd-video-preview/types'
 
 const props = defineProps(swiperProps)
 const emit = defineEmits(['click', 'change', 'animationfinish', 'update:current'])
 const navCurrent = ref<number>(0) // 当前滑块
-const slots = useSlots()
-
+const videoPreview = ref<VideoPreviewInstance>()
 watch(
   () => props.current,
   (val) => {
@@ -117,6 +117,43 @@ const swiperIndicator = computed(() => {
   return swiperIndicator
 })
 
+const innerList = computed(() => {
+  return props.list.map((item) => {
+    const url = isObj(item) ? item[props.valueKey] : item
+    return {
+      url,
+      videoUrl: isVideoUrl(url) ? url : '',
+      ...(isObj(item) ? item : {}),
+    }
+  }) as SwiperList[]
+})
+
+/**
+ * 预览视频
+ * @param index
+ * @param lists
+ */
+function handlePreviewVieo(url: string) {
+  // #ifdef MP-WEIXIN
+  uni.previewMedia({
+    sources: [
+      {
+        url,
+        type: 'video',
+        poster: '',
+      },
+    ],
+  })
+  // #endif
+
+  // #ifndef MP-WEIXIN
+  videoPreview.value?.open({
+    url,
+    poster: '',
+  })
+  // #endif
+}
+
 function go(index: number) {
   navCurrent.value = index
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "id": "@tplc/wot",
   "name": "@tplc/wot",
-  "version": "0.1.82",
+  "version": "0.1.83",
   "keywords": [
     "wot-design-uni",
     "国际化",