@tplc/wot 0.1.82 → 0.1.84

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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.84](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.4.109...v0.1.84) (2025-05-11)
+
+
+### ✨ Features | 新功能
+
+* 新增骨架屏 ([6f837dd](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/6f837ddb1c1db52b25ec2155461a4cade58bfc09))
+
+### [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,8 +7,20 @@
       :mode="mode"
       :lazy-load="lazyLoad"
     />
-
+    <img
+      v-if="height === 'auto' && isH5"
+      :class="`wd-img__image coverImg ${customImage}`"
+      :src="wrapPhoto({ photo: src, width, type: 1 })"
+      :lazy-load="lazyLoad"
+      @load="handleLoad"
+      @error="handleError"
+      :style="{
+        display: status === 'success' ? 'block' : 'none',
+        objectFit: 'cover',
+      }"
+    />
     <image
+      v-else
       :class="`wd-img__image coverImg ${customImage}`"
       :src="wrapPhoto({ photo: src, width, type: 1 })"
       :mode="mode"
@@ -35,7 +47,7 @@ export default {
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
-import { addUnit, isDef, objToStyle } from '../common/util'
+import { addUnit, isDef, isH5, isVideoUrl, objToStyle } from '../common/util'
 import { imgProps } from './types'
 
 const props = defineProps(imgProps)
@@ -101,6 +113,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

@@ -1,5 +1,8 @@
 <template>
-  <view :class="`wd-swiper ${customClass}`" :style="customStyle">
+  <view
+    :class="`wd-swiper ${customClass}`"
+    :style="`${customStyle};--swiper-item-padding:${itemPadding}`"
+  >
     <swiper
       class="wd-swiper__track"
       :autoplay="autoplay"
@@ -18,40 +21,38 @@
       @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 +73,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 +119,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
 }
@@ -235,4 +274,8 @@ function doIndicatorBtnChange(dir: string, source: string) {
 
 <style lang="scss" scoped>
 @import './index';
+.wd-swiper__item {
+  padding-right: var(--swiper-item-padding);
+  padding-left: var(--swiper-item-padding);
+}
 </style>

package/package.json

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