You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
205 lines
4.2 KiB
205 lines
4.2 KiB
<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>
|