chore(视频号组件): 支持轮播模式

components-diy/diy-channel-list.vue

@@ -1,18 +1,18 @@
 <template>
 	<view :style="[componentStyle, { '--row-count': value.rowCount }]">
 		<!-- 轮播模式 -->
-		<swiper v-if="value.carousel && value.carousel.type != 'hide'" :indicator-dots="isIndicatorDots"
+		<swiper v-if="value.showStyle == 'carousel' && carouselConfig.type != 'hide'" :indicator-dots="isIndicatorDots"
-			:autoplay="value.carousel.autoplay || false" :interval="value.carousel.interval || 3000"
+			:autoplay="carouselConfig.autoplay || false" :interval="carouselConfig.interval || 3000"
-			:duration="value.carousel.duration || 500" :circular="value.carousel.circular || false"
+			:duration="carouselConfig.duration || 500" :circular="carouselConfig.circular || false"
 			:style="swiperHeight" class="channel-swiper">
 			<swiper-item v-for="(slide, slideIndex) in swiperSlides" :key="slideIndex">
-					<view :class="['swiper-slide-content', 'row1-of' + value.rowCount]">
+				<view :class="['swiper-slide-content', 'row1-of' + value.rowCount]">
-						<view v-for="(item, index) in slide" :key="index" :class="['channel-item', value.mode]">
+					<view v-for="(item, index) in slide" :key="index" :class="['channel-item', value.mode]">
-							<!-- 视频号视频卡片，轮播模式 -->
+						<!-- 视频号视频卡片，轮播模式 -->
-							<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true" 
+						<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
-								:title-line-clamp="value.titleLineClamp"
+							:title-line-clamp="value.titleLineClamp" :show-play-btn="value.showPlayBtn"
-								:show-play-btn="value.showPlayBtn" :cover-style="computedCoverStyle"
+							:cover-style="computedCoverStyle" :play-btn-style="value.playBtnStyle"
-								:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
+							:aspect-ratio="value.aspectRatio" />
 					</view>
 				</view>
 			</swiper-item>
@@ -22,10 +22,10 @@
 		<view v-else-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]">
 			<view v-for="(item, index) in value.list" :key="index" class="channel-item">
 				<!-- 视频号视频卡片，列表模式 -->
-				<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true" 
+				<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
-					:title-line-clamp="value.titleLineClamp"
+					:title-line-clamp="value.titleLineClamp" :show-play-btn="value.showPlayBtn"
-					:show-play-btn="value.showPlayBtn" :cover-style="computedCoverStyle"
+					:cover-style="computedCoverStyle" :play-btn-style="value.playBtnStyle"
-					:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
+					:aspect-ratio="value.aspectRatio" />
 			</view>
 		</view>
 
@@ -36,10 +36,10 @@
 			<view class="uni-scroll-view-content">
 				<view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]">
 					<!-- 视频号视频卡片，滚动模式 -->
-					<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true" 
+					<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
-						:title-line-clamp="value.titleLineClamp"
+						:title-line-clamp="value.titleLineClamp" :show-play-btn="value.showPlayBtn"
-						:show-play-btn="value.showPlayBtn" :cover-style="computedCoverStyle"
+						:cover-style="computedCoverStyle" :play-btn-style="value.playBtnStyle"
-						:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
+						:aspect-ratio="value.aspectRatio" />
 				</view>
 			</view>
 		</scroll-view>
@@ -63,7 +63,7 @@ export default {
 		 * 组件配置数据
 		 * @type {Object}
 		 * @default () => ({})
-			 * @property {string} showStyle - 显示样式，可选值：fixed, singleSlide
+			 * @property {string} showStyle - 显示样式，可选值：carousel, fixed, singleSlide
 			 * @property {number} rowCount - 每行显示的视频数量
 			 * @property {Array} list - 视频列表数据
 			 * @property {string} componentBgColor - 组件背景色
@@ -76,7 +76,7 @@ export default {
 			 * @property {boolean} showPlayBtn - 是否显示播放按钮
 			 * @property {Object} coverStyle - 视频封面图样式
 			 * @property {Object} playBtnStyle - 播放按钮样式
-			 * @property {string} mode - 显示模式
+			 * @property {string} mode - 显示模式, 可选值：video, text, image, graphic
 			 * @property {number} imageSize - 图片尺寸（仅在特定模式下使用）
 			 * @property {number} pageCount - 每页显示的视频数量
 			 * @property {Object} carousel - 轮播配置
@@ -115,6 +115,15 @@ export default {
 		}
 	},
 	computed: {
+		carouselConfig() {
+			return this.value?.carousel || {
+				type: 'default',
+				autoplay: false,
+				interval: 3000,
+				duration: 500,
+				circular: true
+			}
+		},
 		/**
 		 * 组件样式
 		 * 根据配置动态生成样式字符串，包括背景色、圆角、阴影和边框
@@ -151,15 +160,23 @@ export default {
 		swiperHeight() {
 			let height = 0;
 
+			const pageCount = this.value?.pageCount || 1;
+
 			// 根据不同模式计算高度
 			if (this.value?.mode == 'graphic') {
-				height = (49 + this.value?.imageSize) * this.value?.pageCount;
+				height = (49 + this.value?.imageSize) * pageCount;
 			} else if (this.value?.mode == 'img') {
-				height = (22 + this.value?.imageSize) * this.value?.pageCount;
+				height = (22 + this.value?.imageSize) * pageCount;
 			} else if (this.value?.mode == 'text') {
-				height = 43 * this.value?.pageCount;
+				height = 43 * pageCount;
+			} else { // 默认视频模式
+				if (this.value?.aspectRatio == '16:9') {
+					height = [250, 160, 140, 120][this.value.rowCount - 1];
+				} else {
+					height = [510, 280, 220, 180][this.value.rowCount - 1];
+				}
 			}
-
+			
 			return 'height:' + (2 * height) + 'rpx';
 		},
 
@@ -170,8 +187,8 @@ export default {
 		 */
 		isIndicatorDots() {
 			// 当轮播类型不是隐藏，且视频数量超过一页时显示指示器
-			return this.value?.carousel?.type != 'hide' &&
+			const pageCount = this.value?.pageCount || 1;
-				1 != Math.ceil(this.value?.list?.length / (this.value?.pageCount * this.value?.rowCount));
+			return this.value?.carousel?.type != 'hide' && Math.ceil(this.value?.list?.length / (pageCount * this.value?.rowCount)) > 1
 		},
 
 		/**
@@ -420,7 +437,7 @@ export default {
 			.uni-scroll-view-content {
 				gap: 12rpx;
 			}
-			
+
 			.channel-nav-item {
 				width: 240rpx;
 			}
@@ -461,5 +478,4 @@ export default {
 // 			padding-top: 56.25%; // 16:9 比例
 // 		}
 // 	}
-// }
+// }</style>
-</style>