lucky_shop/components-diy/diy-channel-list.vue

<template>
	<view :style="[componentStyle, { '--row-count': value.rowCount }]">
		<!-- 固定布局模式 -->
		<view v-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]"
			style="padding:20rpx;">
			<view v-for="(item, index) in value.list" :key="index" class="channel-item">
				<diy-channel-video 
					:value="item" 
					@video-play="playVideo(item)" 
					:list-mode="true"
					:video-height="value.rowCount === 3 ? 180 : 240"
				/>
			</view>
		</view>

		<!-- 其他布局模式 -->
		<scroll-view v-else :class="['channel-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
			:scroll-x="value.showStyle == 'singleSlide'">
			<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(item)"
						:list-mode="true"
						:video-height="value.rowCount === 3 ? 180 : 240"
					/>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>

import DiyMinx from './minx.js'
import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
export default {
	name: 'diy-channel-list',
	props: {
		value: {
			type: Object,
			default: () => ({})
		}
	},
	mixins: [DiyMinx],
	data() {
		return {
			pageWidth: '',
			indicatorDots: false,
			swiperCurrent: 0
		}
	},
	created() {
		// 组件创建时的逻辑
	},
	watch: {
		componentRefresh(newValue) {
			// 监听组件刷新
		}
	},
	computed: {
		componentStyle() {
			let style = '';
			if (this.value?.componentBgColor) {
				style += 'background-color:' + this.value?.componentBgColor + ';';
			}

			if (this.value?.componentAngle == 'round') {
				style += 'border-top-left-radius:' + (2 * this.value?.topAroundRadius) + 'rpx;';
				style += 'border-top-right-radius:' + (2 * this.value?.topAroundRadius) + 'rpx;';
				style += 'border-bottom-left-radius:' + (2 * this.value?.bottomAroundRadius) + 'rpx;';
				style += 'border-bottom-right-radius:' + (2 * this.value?.bottomAroundRadius) + 'rpx;';
			}

			style += 'box-shadow:' + (this.value?.ornament?.type == 'shadow' ? '0 0 10rpx ' + this.value?.ornament?.color : '') + ';';
			style += 'border:' + (this.value?.ornament?.type == 'stroke' ? '2rpx solid ' + this.value?.ornament?.color : '') + ';';

			return style;
		},

		swiperHeight() {
			let height = 0;

			if (this.value?.mode == 'graphic') {
				height = (49 + this.value?.imageSize) * this.value?.pageCount;
			} else if (this.value?.mode == 'img') {
				height = (22 + this.value?.imageSize) * this.value?.pageCount;
			} else if (this.value?.mode == 'text') {
				height = 43 * this.value?.pageCount;
			}

			return 'height:' + (2 * height) + 'rpx';
		},

		isIndicatorDots() {
			return this.value?.carousel?.type != 'hide' &&
				1 != Math.ceil(this.value?.list?.length / (this.value?.pageCount * this.value?.rowCount));
		}
	},
	methods: {
		// 播放视频
		async playVideo(item) {
			await this.__$emitEvent({
				eventName: 'video-play', data: item, promiseCallback: async (event, handler, awaitedResult) => {
					if (!awaitedResult) return;
					try {
						// #ifdef MP-WEIXIN
						await wechatChannelUtil.playVideo(item);
						// #endif
					} catch (err) {
						console.error('打开视频号失败', err);
					}
				}
			})
		},

		// 图片加载错误处理
		imgError(index) {
			// 图片加载失败的处理逻辑
			console.log('图片加载失败:', index);
			// 为失败的图片设置默认图片
			const item = this.value.list[index];
			if (item) {
				// 使用默认图片替代加载失败的图片
				// #ifdef MP-WEIXIN
				item.coverUrl = wechatChannelConfig.video.defaultCoverUrl;
				// #endif
			}
		}
	}
}
</script>

<style lang="scss" scoped>
@import './css/common-channel.scss';

// 优化列表布局样式
.channel-list {
	&.row1-of3 {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;

		.channel-item {
			flex: 0 0 calc(33.3333333% - 10rpx);
			box-sizing: border-box;
		}
	}

	&.row1-of2 {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;

		.channel-item {
			flex: 0 0 calc(50% - 8rpx);
			box-sizing: border-box;
		}
	}
}

.channel-nav {
	padding: 16rpx;
	box-sizing: border-box;

	&.fixed-layout {
		.uni-scroll-view-content {
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;
		}
	}

	&.singleSlide {
		.uni-scroll-view-content {
			display: flex;
			gap: 16rpx;
		}

		.channel-nav-item {
			flex-shrink: 0;
		}
	}

	.channel-nav-item {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: calc(100% / var(--row-count, 3) - 12rpx);
	}
}

// 响应式调整
@media (max-width: 375px) {
	.channel-list {
		&.row1-of3 {
			gap: 12rpx;

			.channel-item {
				flex: 0 0 calc(33.3333333% - 8rpx);
			}
		}

		&.row1-of2 {
			gap: 12rpx;

			.channel-item {
				flex: 0 0 calc(50% - 6rpx);
			}
		}
	}

	.channel-nav {
		padding: 12rpx;

		.channel-nav-item {
			width: calc(100% / var(--row-count, 3) - 8rpx);
		}
	}
}
</style>