From 43cf01b22df46db9a944fe613be5cde8dd28622b Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期四, 12 六月 2025 19:58:14 +0800
Subject: [PATCH] 刷视频支持图片

---
 uni_modules/uni-swiper-dot/changelog.md                                 |   12 +
 uni_modules/uni-swiper-dot/package.json                                 |   87 ++++++++++
 uni_modules/uni-swiper-dot/readme.md                                    |   11 +
 uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue |  218 +++++++++++++++++++++++++++
 pages/tabbar/index/home.vue                                             |  125 ++++++++++-----
 5 files changed, 411 insertions(+), 42 deletions(-)

diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index 56e7996..8444073 100644
--- a/pages/tabbar/index/home.vue
+++ b/pages/tabbar/index/home.vue
@@ -9,52 +9,77 @@
       @change="onSwiperChange"
     >
       <swiper-item v-for="(item, index) in videoList" :key="item.id">
-		<!-- 鎾斁鎸夐挳锛堜粎褰撹棰戞殏鍋滄椂鏄剧ず锛� -->
-		<view 
-		  class="play-icon" 
-		  @click="togglePlay(index)"
-		  v-if="!currentVideoIsPlaying"
-		>
-		  <image src="/static/video/play.png" style="width: 45px;height: 45px" mode="aspectFit"></image>
-		</view>
-        <video 
-          :id="'video'+index"
-		  :ref="'video'+index"
-          :src="item.videoUrl"
-          :autoplay="currentIndex === index"
-          :controls="false"
-          :loop="true"
-		  :object-fit="item.objectFit"
-		  :enable-progress-gesture="false"
-          class="video-item"
-          @play="onPlay(item.id, index)"
-          @pause="onPause(index)"
-          @ended="onEnded(index)"
-		  @click="togglePlay(index)"
-		  @timeupdate="onTimeUpdate($event)"
-		  @loadedmetadata="onLoadedMetadata($event)"
-		  
-        ></video>
-		<!-- 鑷畾涔夋帶鍒舵潯 -->
-		<view 
-			@touchstart="handleTouchStart"
-			@touchmove="handleTouchMove"
-			@touchend="handleTouchEnd"
-			class="container">
-		  <!-- 杩涘害鏉� - 鏁翠釜鍖哄煙鍙嫋鍔� -->
-		  <view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }">
-			  <!-- 鏄剧ず褰撳墠杩涘害 -->
-			  <view class="progress-text">{{ hasPlayTime }}/{{formartDuration}}</view>
+		<view style="width: 100%;height: 100%;" v-if="item.videoContentType === 'video'">
+			  <!-- 鎾斁鎸夐挳锛堜粎褰撹棰戞殏鍋滄椂鏄剧ず锛� -->
 			  <view 
-			    class="progress-bar" 
-			    id="progressBar"
+				class="play-icon" 
+				@click="togglePlay(index)"
+				v-if="!currentVideoIsPlaying"
 			  >
-			  			  
-			    <!-- 宸插~鍏呴儴鍒� -->
-			    <view class="progress-fill" :style="{ width: progress + '%' }"></view>
+				<image src="/static/video/play.png" style="width: 45px;height: 45px" mode="aspectFit"></image>
 			  </view>
-		  </view>
+			  <video
+				:id="'video'+index"
+				:ref="'video'+index"
+				:src="item.videoUrl"
+				:autoplay="currentIndex === index"
+				:controls="false"
+				:loop="true"
+				:object-fit="item.objectFit"
+				:enable-progress-gesture="false"
+				class="video-item"
+				@play="onPlay(item.id, index)"
+				@pause="onPause(index)"
+				@ended="onEnded(index)"
+				@click="togglePlay(index)"
+				@timeupdate="onTimeUpdate($event)"
+				@loadedmetadata="onLoadedMetadata($event)"
+				
+			  ></video>
+			  <!-- 鑷畾涔夋帶鍒舵潯 -->
+			  <view 
+				@touchstart="handleTouchStart"
+				@touchmove="handleTouchMove"
+				@touchend="handleTouchEnd"
+				class="container">
+				<!-- 杩涘害鏉� - 鏁翠釜鍖哄煙鍙嫋鍔� -->
+				<view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }">
+				  <!-- 鏄剧ず褰撳墠杩涘害 -->
+				  <view class="progress-text">{{ hasPlayTime }}/{{formartDuration}}</view>
+				  <view 
+					class="progress-bar" 
+					id="progressBar"
+				  >
+							  
+					<!-- 宸插~鍏呴儴鍒� -->
+					<view class="progress-fill" :style="{ width: progress + '%' }"></view>
+				  </view>
+				</view>
+			  </view>
 		</view>
+		<view style="width: 100%; height: 100%;" v-else-if="item.videoContentType === 'img'">
+		  <uni-swiper-dot 
+			:info="item.imgs" 
+			:current="currentImgIndex" 
+			mode="round" 
+			style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;"
+			:dots-styles="{width: 24, bottom: 24,selectedBackgroundColor: 'green', backgroundColor: 'gray'}"
+			>
+		    <swiper class="swiper-box" @change="imgChange" :autoplay="true" :interval="3000">
+		      <swiper-item v-for="img in item.imgs" :key="img">
+		        <view class="swiper-item">
+		          <!-- 璋冩暣 image 鏍峰紡锛屼娇鍏跺眳涓笖鎸夋瘮渚嬬缉鏀� -->
+		          <image 
+		            :src="img" 
+		            mode="aspectFit" 
+		            style="width: 100%; height: 100%; display: block; margin: 0 auto;"
+		          ></image>
+		        </view>
+		      </swiper-item>
+		    </swiper>
+		  </uni-swiper-dot>
+		</view>
+		
 		
 		<!-- 鎮寕鍟嗗搧閾炬帴灞� -->
 		<view class="goods-link-warp">
@@ -211,6 +236,7 @@
   },
   data() {
     return {
+		currentImgIndex: 0, // 鎾斁鍒扮鍑犲紶鍥�--绱㈠紩
 		currentTime: 0,
 		formartDuration: '',
 		duration: 0,
@@ -294,6 +320,10 @@
     this.initVideoContexts();
   },
   methods: {
+	  // 杞挱鍥惧彉鍖�
+	  imgChange(e) {
+		  this.currentImgIndex = e.detail.current;
+	  },
 	  // 鑾峰彇杩涘害鏉$殑浣嶇疆鍜屽昂瀵�
 	  getBarRect() {
 	    const query = uni.createSelectorQuery().in(this);
@@ -1164,4 +1194,15 @@
 	  font-size: 14px;
 	  color: #666;
 	}
+	.swiper-box {
+	  width: 100%;
+	  height: 1400rpx;
+	}
+	.swiper-item {
+	  display: flex;
+	  justify-content: center;
+	  align-items: center;
+	  width: 100%;
+	  height: 100%;
+	}
 </style>
\ No newline at end of file
diff --git a/uni_modules/uni-swiper-dot/changelog.md b/uni_modules/uni-swiper-dot/changelog.md
new file mode 100644
index 0000000..85cf54d
--- /dev/null
+++ b/uni_modules/uni-swiper-dot/changelog.md
@@ -0,0 +1,12 @@
+## 1.2.0锛�2021-11-19锛�
+- 浼樺寲 缁勪欢UI锛屽苟鎻愪緵璁捐璧勬簮锛岃瑙�:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 鏂囨。杩佺Щ锛岃瑙�:[https://uniapp.dcloud.io/component/uniui/uni-swiper-dot](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
+## 1.1.0锛�2021-07-30锛�
+- 缁勪欢鍏煎 vue3锛屽浣曞垱寤簐ue3椤圭洰锛岃瑙� [uni-app 椤圭洰鏀寔 vue3 浠嬬粛](https://ask.dcloud.net.cn/article/37834)
+## 1.0.6锛�2021-05-12锛�
+- 鏂板 绀轰緥鍦板潃
+- 淇 绀轰緥椤圭洰缂哄皯缁勪欢鐨凚ug
+## 1.0.5锛�2021-02-05锛�
+- 璋冩暣涓簎ni_modules鐩綍瑙勮寖
+- 鏂板 clickItem 浜嬩欢锛屾敮鎸佹寚绀虹偣鎺у埗杞挱
+- 鏂板 鏀寔 pc 鍙敤
diff --git a/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue b/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
new file mode 100644
index 0000000..e66b6c7
--- /dev/null
+++ b/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
@@ -0,0 +1,218 @@
+<template>
+	<view class="uni-swiper__warp">
+		<slot />
+		<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/2 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
+			 :key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
+		</view>
+		<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item" />
+		</view>
+		<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :class="[index === current&&'uni-swiper__dots-long']" :style="{
+		    'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item " />
+		</view>
+		<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
+			<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text>
+		</view>
+		<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+	/**
+	 * SwiperDod 杞挱鍥炬寚绀虹偣
+	 * @description 鑷畾涔夎疆鎾浘鎸囩ず鐐�
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=284
+	 * @property {Number} current 褰撳墠鎸囩ず鐐圭储寮曪紝蹇呴』鏄�氳繃 `swiper` 鐨� `change` 浜嬩欢鑾峰彇鍒扮殑 `e.detail.current`
+	 * @property {String} mode = [default|round|nav|indexes] 鎸囩ず鐐圭殑绫诲瀷
+	 * 	@value defualt 榛樿鎸囩ず鐐�
+	 * 	@value round 鍦嗗舰鎸囩ず鐐�
+	 * 	@value nav 鏉″舰鎸囩ず鐐�
+	 * 	@value indexes 绱㈠紩鎸囩ず鐐�
+	 * @property {String} field mode 涓� nav 鏃讹紝鏄剧ず鐨勫唴瀹瑰瓧娈碉紙mode = nav 鏃跺繀濉級
+	 * @property {String} info 杞挱鍥剧殑鏁版嵁锛岄�氳繃鏁扮粍闀垮害鍐冲畾鎸囩ず鐐逛釜鏁�
+	 * @property {Object} dotsStyles 鎸囩ず鐐规牱寮�
+	 * @event {Function} clickItem 缁勪欢瑙﹀彂鐐瑰嚮浜嬩欢鏃惰Е鍙戯紝e={currentIndex}
+	 */
+
+	export default {
+		name: 'UniSwiperDot',
+		emits:['clickItem'],
+		props: {
+			info: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			current: {
+				type: Number,
+				default: 0
+			},
+			dotsStyles: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 绫诲瀷 锛歞efault(榛樿) indexes long nav
+			mode: {
+				type: String,
+				default: 'default'
+			},
+			// 鍙湪 nav 妯″紡涓嬬敓鏁堬紝鍙橀噺鍚嶇О
+			field: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				dots: {
+					width: 6,
+					height: 6,
+					bottom: 10,
+					color: '#fff',
+					backgroundColor: 'rgba(0, 0, 0, .3)',
+					border: '1px rgba(0, 0, 0, .3) solid',
+					selectedBackgroundColor: '#333',
+					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
+				}
+			}
+		},
+		watch: {
+			dotsStyles(newVal) {
+				this.dots = Object.assign(this.dots, this.dotsStyles)
+			},
+			mode(newVal) {
+				if (newVal === 'indexes') {
+					this.dots.width = 14
+					this.dots.height = 14
+				} else {
+					this.dots.width = 6
+					this.dots.height = 6
+				}
+			}
+
+		},
+		created() {
+			if (this.mode === 'indexes') {
+				this.dots.width = 12
+				this.dots.height = 12
+			}
+			this.dots = Object.assign(this.dots, this.dotsStyles)
+		},
+		methods: {
+			clickItem(index) {
+				this.$emit('clickItem', index)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-swiper__warp {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: column;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.uni-swiper__dots-box {
+		position: absolute;
+		bottom: 10px;
+		left: 0;
+		right: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-swiper__dots-item {
+		width: 8px;
+		border-radius: 100px;
+		margin-left: 6px;
+		background-color: rgba(0, 0, 0, 0.4);
+		/* #ifndef APP-NVUE */
+		cursor: pointer;
+		/* #endif */
+		/* #ifdef H5 */
+		// border-width: 5px 0;
+		// border-style: solid;
+		// border-color: transparent;
+		// background-clip: padding-box;
+		/* #endif */
+		// transition: width 0.2s linear;  涓嶈鍙栨秷娉ㄩ噴锛屼笉鐒朵細涓嶈兘鍙樿壊
+	}
+
+	.uni-swiper__dots-item:first-child {
+		margin: 0;
+	}
+
+	.uni-swiper__dots-default {
+		border-radius: 100px;
+	}
+
+	.uni-swiper__dots-long {
+		border-radius: 50px;
+	}
+
+	.uni-swiper__dots-bar {
+		border-radius: 50px;
+	}
+
+	.uni-swiper__dots-nav {
+		bottom: 0px;
+		// height: 26px;
+		padding: 8px 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		background-color: rgba(0, 0, 0, 0.2);
+	}
+
+	.uni-swiper__dots-nav-item {
+		/* overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; */
+		font-size: 14px;
+		color: #fff;
+		margin: 0 15px;
+	}
+
+	.uni-swiper__dots-indexes {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		// flex: 1;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-swiper__dots-indexes-text {
+		color: #fff;
+		font-size: 12px;
+		line-height: 14px;
+	}
+</style>
diff --git a/uni_modules/uni-swiper-dot/package.json b/uni_modules/uni-swiper-dot/package.json
new file mode 100644
index 0000000..f2dd8d2
--- /dev/null
+++ b/uni_modules/uni-swiper-dot/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-swiper-dot",
+  "displayName": "uni-swiper-dot 杞挱鍥炬寚绀虹偣",
+  "version": "1.2.0",
+  "description": "鑷畾涔夎疆鎾浘鎸囩ず鐐圭粍浠�",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "杞挱鍥炬寚绀虹偣",
+    "dot",
+    "swiper"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "鍓嶇缁勪欢",
+      "閫氱敤缁勪欢"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "鏃�",
+      "data": "鏃�",
+      "permissions": "鏃�"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "寰俊娴忚鍣�(Android)": "y",
+          "QQ娴忚鍣�(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "灏忕▼搴�": {
+          "寰俊": "y",
+          "闃块噷": "y",
+          "鐧惧害": "y",
+          "瀛楄妭璺冲姩": "y",
+          "QQ": "y"
+        },
+        "蹇簲鐢�": {
+          "鍗庝负": "u",
+          "鑱旂洘": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-swiper-dot/readme.md b/uni_modules/uni-swiper-dot/readme.md
new file mode 100644
index 0000000..7d397e2
--- /dev/null
+++ b/uni_modules/uni-swiper-dot/readme.md
@@ -0,0 +1,11 @@
+
+
+## SwiperDot 杞挱鍥炬寚绀虹偣
+> **缁勪欢鍚嶏細uni-swiper-dot**
+> 浠g爜鍧楋細 `uSwiperDot`
+
+
+鑷畾涔夎疆鎾浘鎸囩ず鐐�
+
+### [鏌ョ湅鏂囨。](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
+#### 濡備娇鐢ㄨ繃绋嬩腑鏈変换浣曢棶棰橈紝鎴栬�呮偍瀵箄ni-ui鏈変竴浜涘ソ鐨勫缓璁紝娆㈣繋鍔犲叆 uni-ui 浜ゆ祦缇わ細871950839 
\ No newline at end of file

--
Gitblit v1.8.0