From 1e039cb7073d57bd19f59d4ffbb95c74b5cdc42f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=A6=82=E6=91=B8=E9=B1=BC=E5=8E=BB?=
 <1780903673@qq.com>
Date: Mon, 18 Nov 2024 22:01:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20Swiper=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=8C=87=E5=AE=9A=E8=BD=AE=E6=92=AD=E9=A1=B9=E7=9A=84=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E7=B1=BB=E5=9E=8B=20(#720)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: #712
---
 docs/component/swiper.md                      |  8 +++-
 .../components/wd-swiper/types.ts             |  5 +++
 .../components/wd-swiper/wd-swiper.vue        | 40 ++++++++++++-------
 3 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/docs/component/swiper.md b/docs/component/swiper.md
index 16c963bb..45c9a749 100644
--- a/docs/component/swiper.md
+++ b/docs/component/swiper.md
@@ -346,7 +346,13 @@ const isLoop = ref(false)
 
 ### SwiperList
 
-轮播图项的列表配置，包括 图片或视频地址`value`、视频封面`poster` 等属性，支持扩展属性。
+轮播图项的列表配置，包括 图片或视频地址`value`、视频封面`poster` 、文件资源的类型`type`等属性，支持扩展属性。指定`type`后组件将不在内部判断文件类型，以`type`为准。
+| name      | 说明          | 最低版本 |
+| --------- | ------------ | -------- |
+| value | 图片或视频地址 |-   |
+| poster | 视频封面 |-   |
+| type | 用于指定文件资源的类型，可选值`image`、`video` | $LOWEST_VERSION$ |
+
 
 ### SwiperIndicatorProps
 
diff --git a/src/uni_modules/wot-design-uni/components/wd-swiper/types.ts b/src/uni_modules/wot-design-uni/components/wd-swiper/types.ts
index 26826874..408fe47f 100644
--- a/src/uni_modules/wot-design-uni/components/wd-swiper/types.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-swiper/types.ts
@@ -26,12 +26,17 @@ export type IndicatorPositionType = 'left' | 'top-left' | 'top' | 'top-right' |
  */
 export type AdjustHeightType = 'first' | 'current' | 'highest' | 'none'
 
+// 资源类型
+export type SwiperItemType = 'image' | 'video'
+
 export interface SwiperList {
   [key: string]: any
   // 图片、视频等资源地址
   value?: string
   // 视频资源的封面
   poster?: string
+  // 资源文件类型，可选值：'image' | 'video'
+  type?: SwiperItemType
 }
 
 export const swiperProps = {
diff --git a/src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue b/src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue
index f5f901e8..000e8f26 100644
--- a/src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue
@@ -21,14 +21,14 @@
     >
       <swiper-item v-for="(item, index) in list" :key="index" class="wd-swiper__item" @click="handleClick(index, item)">
         <image
-          v-if="isImageUrl(isObj(item) ? item[valueKey] : item)"
+          v-if="isImage(item)"
           :src="isObj(item) ? item[valueKey] : item"
           :class="`wd-swiper__image ${customImageClass} ${customItemClass} ${getCustomItemClass(navCurrent, index, list)}`"
           :style="{ height: addUnit(height) }"
           :mode="imageMode"
         />
         <video
-          v-else
+          v-else-if="isVideo(item)"
           :id="`video-${index}-${uid}`"
           :style="{ height: addUnit(height) }"
           :src="isObj(item) ? item[valueKey] : item"
@@ -77,7 +77,7 @@ export default {
 <script lang="ts" setup>
 import wdSwiperNav from '../wd-swiper-nav/wd-swiper-nav.vue'
 import { computed, watch, ref, getCurrentInstance } from 'vue'
-import { addUnit, isObj, isImageUrl, isVideoUrl, uuid } from '../common/util'
+import { addUnit, isObj, isImageUrl, isVideoUrl, uuid, isDef } from '../common/util'
 import { swiperProps, type SwiperList } from './types'
 import type { SwiperNavProps } from '../wd-swiper-nav/types'
 
@@ -122,6 +122,22 @@ const swiperIndicator = computed(() => {
   return swiperIndicator
 })
 
+const getMediaType = (item: string | SwiperList, type: 'video' | 'image') => {
+  if (isObj(item)) {
+    return item.type ? item.type === type : type === 'video' ? isVideoUrl(item[props.valueKey]) : isImageUrl(item[props.valueKey])
+  } else {
+    return type === 'video' ? isVideoUrl(item) : isImageUrl(item)
+  }
+}
+
+const isVideo = (item: string | SwiperList) => {
+  return getMediaType(item, 'video')
+}
+
+const isImage = (item: string | SwiperList) => {
+  return getMediaType(item, 'image')
+}
+
 function go(index: number) {
   navCurrent.value = index
 }
@@ -205,12 +221,9 @@ function handleVideoChange(previous: number, current: number) {
 function handleStartVideoPaly(index: number) {
   if (props.autoplayVideo) {
     const currentItem = props.list[index]
-    if (currentItem) {
-      const url = isObj(currentItem) ? currentItem.url : currentItem
-      if (isVideoUrl(url)) {
-        const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
-        video.play()
-      }
+    if (isDef(currentItem) && isVideo(currentItem)) {
+      const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
+      video.play()
     }
   }
 }
@@ -222,12 +235,9 @@ function handleStartVideoPaly(index: number) {
 function handleStopVideoPaly(index: number) {
   if (props.stopPreviousVideo) {
     const previousItem = props.list[index]
-    if (previousItem) {
-      const url = isObj(previousItem) ? previousItem.url : previousItem
-      if (isVideoUrl(url)) {
-        const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
-        video.pause()
-      }
+    if (isDef(previousItem) && isVideo(previousItem)) {
+      const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
+      video.pause()
     }
   } else if (props.stopAutoplayWhenVideoPlay) {
     handleVideoPause()