assess-app/components/en-utils/en-image-video/en-image-video.vue

<template>
	<view>
		<view class="row image-box">
			<view class="image-item m-r20 m-t20" mode="aspectFill" v-for="(item,index) in imgList">
				<image class="image r-10 " :src="item.type === 1?item.url:getVideoImg(item.url)" :style="[{width},{height}]" @click="onPreviewImage(item)">
				</image>
				<image class="wh-45 video-icon" src="/static/img/task/play.png" mode="aspectFill" v-if="item.type === 2">
				</image>
			</view>
		</view>
    <uni-popup ref="videoPopup" @change="closeVideoImg">
      <view class="video-box" v-if="videoUrl">
        <video class="myVideo" :src="videoUrl" :autoplay="true"></video>
      </view>
    </uni-popup>
	</view>
</template>

<script>
	import tools from "@/service/tools";

  export default {
		props: {
			is_both: {
				type: Boolean,
				default: false
			},
			width: {
				type: String,
				default: '130rpx'
			},
			height: {
				type: String,
				default: '130rpx'
			},
      imgList: {
				default: []
			},
			previewImage: {
				default: []
			}
		},
		data() {
			return {
        videoUrl:''
      }
		},
		mounted() {},
		methods: {
      onPreviewImage(item) {
        this.$emit('onShowImg',item.url)
      },
      closeVideoImg(e) {
        if (!e.show) {
          console.log('关闭视频了')
          this.videoUrl = ''
        }
      },
      showVideoImg(url) {
        console.log(url)
        this.videoUrl = url
        this.$refs.videoPopup.open('center')
      },
      getVideoImg(url) {
        return tools.getOssVideo(url)
      },
		}
	}
</script>

<style lang="scss" scoped>
	.image-box {
		flex-wrap: wrap;
	}

	.image-item {
		position: relative;

		.image {
			display: block;
		}

		.video-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>