universal-wechat-uniapp-241007/components/list/dynamic/daynamicInfo.vue

<template>
	<view>
		<view class="dynamics" v-html="$utils.stringFormatHtml(item.title)">
		</view>

		<view class="Artworkimages" :class="layoutClass">
			<view class="wrokimg" @click.stop="previewMedia(media, i)" :key="i" v-for="(media, i) in mediaList">
				<image v-if="media.type === 'image'" :src="media.url" mode="aspectFill"></image>
				<video v-else-if="media.type === 'video'" :src="media.url" 
					   controls 
					   :poster="media.poster || ''"
					   :style="videoStyle"></video>
				<!-- <view v-if="media.type === 'video'" class="video-overlay">
					<uv-icon name="play-circle-fill" size="60rpx" color="#fff"></uv-icon>
				</view> -->
			</view>
		</view>
		
		<addressSpot 
		:address="item.address"
		:latitude="item.latitude"
		:longitude="item.longitude"
		/>
		
	</view>
</template>

<script>
	export default {
		props: {
			item: {},
		},
		computed : {
			images(){
				if(!this.item.image){
					return []
				}
				
				let arr = this.item.image.split(',')
				
				if(this.item.wxImage){
					arr.unshift(this.item.wxImage)
				}
				
				return arr
			},
			mediaList(){
				let mediaArray = []
				
				// 添加微信二维码图片
				if(this.item.wxImage){
					mediaArray.push({
						url: this.item.wxImage,
						type: 'image'
					})
				}
				
				// 从 image 字段解析所有文件（图片和视频）
				if(this.item.image){
					this.item.image.split(',').forEach(url => {
						if(url.trim()){
							// 根据文件扩展名判断类型
							const isVideo = this.isVideoFile(url.trim())
							mediaArray.push({
								url: url.trim(),
								type: isVideo ? 'video' : 'image'
							})
						}
					})
				}
				
				return mediaArray
			},
			// 根据媒体数量决定布局类型
			layoutClass(){
				const count = this.mediaList.length
				if(count === 1){
					return 'single-layout'
				} else if(count === 2 || count === 4){
					return 'grid-layout-2x2'
				} else {
					return 'grid-layout-3x3'
				}
			},
			// 动态视频样式
			videoStyle(){
				const count = this.mediaList.length
				let style = 'border-radius: 20rpx;'
				
				if(count === 1){
					// 单个视频占满宽度
					style += 'width: 100%; height: 400rpx;'
				} else if(count === 2 || count === 4){
					// 4宫格布局
					style += 'width: calc(50% - 10rpx); height: 200rpx;'
				} else {
					// 9宫格布局
					style += 'width: calc(33.33% - 10rpx); height: 150rpx;'
				}
				
				return style
			}
		},
		data() {
			return {

			}
		},
		methods: {
			previewMedia(media, index){
				if(media.type === 'image'){
					// 只预览图片
					const imageUrls = this.mediaList.filter(item => item.type === 'image').map(item => item.url)
					const imageIndex = this.mediaList.slice(0, index).filter(item => item.type === 'image').length
					uni.previewImage({
						urls: imageUrls,
						current: imageIndex
					})
				} else if(media.type === 'video'){
					// 视频点击播放（已经有controls属性，无需额外处理）
					console.log('播放视频:', media.url)
				}
			},
			isVideoFile(url) {
				const videoExtensions = ['.mp4', '.avi', '.mov', '.wmv', '.flv', '.webm', '.m4v']
				const lowerUrl = url.toLowerCase()
				return videoExtensions.some(ext => lowerUrl.includes(ext))
			}
		}
	}
</script>

<style scoped lang="scss">

	.dynamics {
		margin-top: 20rpx;
		font-size: 28rpx;
		letter-spacing: 3rpx;
	}

	.Artworkimages {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;

		// 单图布局 - 占满宽度
		&.single-layout {
			.wrokimg {
				width: 100%;
				margin: 0;
				
				image {
					width: 100%;
					height: 400rpx;
					border-radius: 20rpx;
				}
			}
		}

		// 4宫格布局 - 2x2
		&.grid-layout-2x2 {
			.wrokimg {
				width: calc(50% - 10rpx);
				margin: 5rpx;
				
				image {
					width: 100%;
					height: 200rpx;
					border-radius: 20rpx;
				}
			}
		}

		// 9宫格布局 - 3x3
		&.grid-layout-3x3 {
			.wrokimg {
				width: calc(33.33% - 10rpx);
				margin: 5rpx;
				
				image {
					width: 100%;
					height: 150rpx;
					border-radius: 20rpx;
				}
			}
		}

		.wrokimg {
			position: relative;
			
			video {
				border-radius: 20rpx;
			}
			
			.video-overlay {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				pointer-events: none;
				z-index: 1;
			}
		}
	}
</style>