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

<template>
	<view class="channel-video" :class="{ 'list-mode': listMode }">
		<!-- 嵌入式视频播放 -->
		<native-component v-if="canUseEmbedMode">
			// #ifdef MP-WEIXIN
			<channel-video 
				:feed-id="value.feedId" 
				:finder-user-name="value.finderUserName" 
				:feed-token="value.feedToken" 
				:style="embedVideoStyle">
			</channel-video>
			// #endif
		</native-component>
		
		<!-- 跳转式视频播放 -->
		<view v-else @tap="playVideo" class="video-container">
			<view class="video-cover-wrap">
				<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
				<view class="channel-play-btn">
					<image class="play-icon" v-if="playIcon" :src="$util.img(playIcon)" mode="aspectFill"></image>
				</view>
				<view class="video-stats-overlay" v-if="value.showViewCount">
					{{ value.viewCount }}次观看
				</view>
			</view>
			<view class="video-info">
				<view class="video-title">{{ value.videoTitle }}</view>
				<view class="video-stats" v-if="value.showViewCount && !listMode">{{ value.viewCount }}次观看</view>
			</view>
		</view>
	</view>
</template>

<script>

import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'

export default {
	name: 'diy-channel-video',
	props: {
		value: {
			type: Object,
			required: true
		},
		listMode: {
			type: Boolean,
			default: false
		},
		videoHeight: {
			type: Number,
			default: 220
		}
	},
	computed: {
		canUseEmbedMode() {
			// #ifdef MP-WEIXIN
			return this.value?.embedMode && wechatChannelUtil.isEmbedModeSupported();
			// #endif
			return false
		},
		playIcon() {
			// #ifdef MP-WEIXIN
			return wechatChannelConfig.icon.playIcon
			// #endif
			return ''
		},
		embedVideoStyle() {
			return {
				width: '100%',
				height: `${this.listMode ? 180 : 320}rpx`
			};
		}
	},
	methods: {
		async playVideo() {
			this.$emit('video-play', this.value);
		}
	}
};
</script>

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

.channel-video {
	position: relative;
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;

	&:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
	}

	&.list-mode {
		border-radius: 8rpx;
		box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.06);

		.video-info {
			padding: 12rpx;

			.video-title {
				font-size: 24rpx;
				margin-bottom: 4rpx;
			}
		}
	}
}

.video-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.video-cover-wrap {
	position: relative;
	width: 100%;
	height: 320rpx;

	.channel-video.list-mode & {
		height: 180rpx;
	}
}

.video-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12rpx 12rpx 0 0;

	.channel-video.list-mode & {
		border-radius: 8rpx 8rpx 0 0;
	}
}

.video-stats-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
	padding: 8rpx 12rpx;
	color: #fff;
	font-size: 20rpx;
	text-align: right;
}

.video-info {
	padding: 16rpx;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.video-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 8rpx;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;

	.channel-video.list-mode & {
		-webkit-line-clamp: 2;
		font-size: 24rpx;
		margin-bottom: 4rpx;
	}
}

.video-stats {
	font-size: 22rpx;
	color: #999;
	margin-top: 4rpx;
}

// 确保播放按钮在列表模式下更小
.channel-video.list-mode .channel-play-btn {
	width: 50rpx;
	height: 50rpx;

	.play-icon {
		width: 25rpx;
		height: 25rpx;
	}
}
</style>