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

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

		<view class="Artworkimages">
			<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="width: 190rpx; height: 190rpx; border-radius: 20rpx;"></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
			}
		},
		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;

		.wrokimg {
			margin: 10rpx;
			position: relative;

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