|
|
- <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>
|